Add Prestige

.travis.yml

@@ -1,16 +1,10 @@
 language: node_js
 node_js:
-- 'node'
+  - "10"
 cache:
   directories:
     - node_modules
-before_install:
-- chmod a+x ./install.sh
-- chmod a+x ./testDebug.sh
 install:
-- ./install.sh
-before_script:
-  - npm install -g gulp-cli
+- npm install
 script:
-- gulp build
-- ./testDebug.sh
+- npm test

README.md

@@ -1,4 +1,5 @@
-[![Build Status](https://travis-ci.org/Ishadijcks/pokeclicker.svg?branch=develop)](https://travis-ci.org/Ishadijcks/pokeclicker)
+[![Build Status](https://img.shields.io/travis/pokeclicker/pokeclicker?logo=travis)](https://travis-ci.org/pokeclicker/pokeclicker)
+
 # PokéClicker
 A game about catching Pokémon, defeating gym leaders, and watching numbers get bigger.
 
@@ -20,17 +21,30 @@ All file and class names should be [upper CamelCase](https://en.wikipedia.org/wi
 First make sure you have git and npm available as command-line utilities (so you should install Git and NodeJS if you don't have them already).
 
 Open a command line interface in the directory that contains this README file, and use the following command to install PokéClicker's other dependencies locally:
-- npm install
+```cmd
+npm install
+```
 
 Then finally, run the following command in the command line interface to start a browser running PokéClicker.
-- npm start
+```cmd
+npm start
+```
 
 Changes to the sourcecode will automatically cause the browser to refresh.
 This means you don't need to compile TypeScript yourself. Gulp will do this for you :thumbsup:
 
 
+## Use Google cloud shell _(alternative)_
+[![Google Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.png)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/pokeclicker-dev/pokeclicker&git_branch=develop&page=editor&open_in_editor=README.md)
+```cmd
+npm install
+npm start
+```
+
 ## Deploying a new version to Github Pages
 Before deploying, check that the game compiles and starts up without errors. Then run:
-- npm run website
+```cmd
+npm run website
+```
 
 After this command completes, push the changed files in the 'docs' directory to Github.

src/components/KantoSVG.html

@@ -507,5 +507,5 @@
           fill="url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)"
           height="12.6" stroke="#6c8ebf" width="12.6" x="325" y="240"
           data-bind="click:function(){MapHelper.openShipModal()},
-          css:{ unlockedTown: player.highestRegion >= 1}"></rect>
+          css:{ unlockedTown: player.highestRegion() >= 1}"></rect>
 </g>

src/components/battleItemContainer.html

@@ -0,0 +1,40 @@
+<div id="BattleItemContainer" class="card border-secondary mb-3">
+    <div class="card-header p-0" data-toggle="collapse" href="#BattleItemContainerBody">
+      <span>Battle Items</span>
+    </div>
+    <div id="BattleItemContainerBody" class="card-body p-0 show">
+      <table class="table table-bordered m-0">
+        <tbody>
+          <tr data-bind="foreach: Object.keys(ItemList).filter(i=>ItemList[i].constructor.name == 'BattleItem')">
+            <td class="amount p-0" data-bind="text: GameHelper.formatAmount(player.itemList[$data]())"></td>
+          </tr>
+          <tr data-bind="foreach: Object.keys(ItemList).filter(i=>ItemList[i].constructor.name == 'BattleItem')">
+            <td class="p-0" data-bind="attr: {
+                                disabled: !player.itemList[$data]()
+                            },
+                            css: {
+                                'bg-primary': EffectEngineRunner.getEffect($data) > 5,
+                                'bg-warning': EffectEngineRunner.getEffect($data) <= 5 && EffectEngineRunner.getEffect($data) > 0,
+                                'bg-secondary': !EffectEngineRunner.isActive($data)()
+                            },
+                            event: {
+                                click: function(){ItemHandler.useItem($data)}
+                            },
+                            tooltip: {
+                              title: $data.replace('_', ' ') + '<br/>' + ItemList[$data].description,
+                              trigger: 'hover',
+                              placement:'bottom',
+                              html: true
+                            }">
+                <img src="" class="clickable" data-bind="attr: { src: 'assets/images/items/' + $data + '.png' }">
+
+            </td>
+          </tr>
+          <tr data-bind="foreach: Object.keys(ItemList).filter(i=>ItemList[i].constructor.name == 'BattleItem')">
+            <td class="text-light p-0"><code data-bind="text: EffectEngineRunner.formattedTimeLeft($data)()"></code></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+</div>

src/components/breeding.html

@@ -10,11 +10,11 @@ <h5 class="modal-title" id="breedingModalLabel">Day Care Old Man</h5>
        </div>
        <div class="modal-body">
            <p>
-               This is the Pokémon Day Care Center. You can trade your <br>
-               level 100 pokémon for an egg of the same pokémon.<br>
-               Hatched pokémon have a higher chance of becoming shiny!
+               This is the Pokémon Day Care Center.<br/>
+               You can trade your level 100 pokémon for an egg of the same pokémon.<br/>
+               Hatched pokémon will increase their attack and have a higher chance of becoming shiny!
            </p>
-           <div data-bind="if: player.canBreedPokemon()">
+           <div data-bind="if: player.hasFreeEggSlot()">
                <!-- ko if: Object.keys(GameConstants.EggItemType).filter(e=>isNaN(e)).map(x=>player._itemList[x]()).reduce((x,y)=>x+y) -->
                <p>
                    Pick an egg below to breed:
@@ -33,34 +33,32 @@ <h5 class="modal-title" id="breedingModalLabel">Day Care Old Man</h5>
                    </div>
                </div>
                <!-- /ko -->
-               <p>
-                   Pick a pokémon below to breed them:
-               </p>
-               <div class="row col-lg-10 col-md-12 offset-lg-1 offset-md-0 col-sm-12 offset-sm-0"
-                    style="padding-right: 0"
-                    data-bind="foreach: player.maxLevelPokemonList()">
-                   <div class="col-md-6 col-sm-10 col-lg-4 offset-sm-1 offset-md-0 offset-md-0 breedingListItem text-nowrap">
-                       <button class="btn btn-secondary smallButton list-group-item-action"
-                               data-bind="click: function() { BreedingHelper.gainPokemonEgg($data);if (!player.hasFreeEggSlot()) {$('#breedingModal').modal('hide');}}">
-                           <img class="smallImage"
-                                data-bind="attr:{ src: 'assets/images/' + (player.caughtShinyList().includes(name) ? 'shiny' : '') + 'pokemon/' + id +'.png' }"
-                                src=""/>
-                           <span data-bind="text: name" style="margin-left: 20px">Name</span>
-                           <span class="sparkle" data-bind="if: player.caughtShinyList().includes(name)">&nbsp;✨</span>
-                       </button>
-                   </div>
-               </div>
-           </div>
-           <div data-bind="ifnot: player.hasMaxLevelPokemon() && Object.keys(GameConstants.EggItemType).filter(e=>isNaN(e)).map(x=>player._itemList[x]()).reduce((x,y)=>x+y)">
-               <p>
+               <!-- Check if the player has any level 100 Pokemon or if they have any eggs -->
+               <p class="text-danger" data-bind="visible: !player.hasMaxLevelPokemon()">
                    Unfortunately, you don't have any pokémon of level 100
                </p>
+               <!-- ko if: player.hasMaxLevelPokemon() -->
+                 <p>
+                     Pick a pokémon below to breed them:
+                 </p>
+                 <div class="row" data-bind="foreach: player.maxLevelPokemonList()">
+                    <button class="col-sm-4 col-md-3 col-lg-2 pokedexEntry text-nowrap btn"
+                    data-bind="style:{background: PokedexHelper.getBackgroundColors($data.name)},
+                      click: function() { BreedingHelper.gainPokemonEgg($data);if (!player.hasFreeEggSlot()) {$('#breedingModal').modal('hide');}}">
+                        <span style="top: 0; border-top-left-radius: 6px; border-top-right-radius: 6px;" data-bind="text: $data.name">name</span>
+                        <div data-bind="if: PokedexHelper.pokemonSeen($data.id)">
+                            <div data-bind="visible: player.alreadyCaughtPokemonShiny(name)" style="position: absolute;right: 20px;top: 20px;">✨</div>
+                            <img src="" width="80px" data-bind="attr:{ src: PokedexHelper.getImage($data.id, $data.name)}">
+                            <span class="attack" style="bottom: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px"
+                              data-bind="text: $data.attack()">attack</span>
+                        </div>
+                    </button>
+                 </div>
+               <!-- /ko -->
            </div>
-           <div data-bind="ifnot: player.hasFreeEggSlot()">
-               <p>
-                   Unfortunately, you don't have any free eggslots
-               </p>
-           </div>
+           <p class="text-danger" data-bind="visible: !player.hasFreeEggSlot()">
+               Unfortunately, you don't have any free eggslots
+           </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

src/components/breedingDisplay.html

@@ -1,15 +1,15 @@
 <!-- ko if: KeyItemHandler.getKeyItemObservableByName('Mystery egg')().isUnlocked() -->
 <div class="card border-secondary mb-3">
-    <div class="card-header p-0">
+    <div class="card-header p-0" data-toggle="collapse" href="#eggList">
         <span>Hatchery</span>
-        <button class='btn btn-sm btn-primary' style="position: absolute; right: -1px; top: -1px; width: auto; height: 42px;"
-                data-bind='visible: player.highestRegion >= 1,
-                    click: function(){ BreedingHelper.openBreedingModal() },
-                    attr: { disabled: !player.hasFreeEggSlot() }'>
-            List
-        </button>
     </div>
-    <div id='eggList' class="card-body p-0">
+    <button class='btn btn-sm btn-primary' style="position: absolute; right: 0px; top: 0px; width: auto; height: 41px;"
+            data-bind='visible: player.highestRegion() >= 1,
+                click: function(){ BreedingHelper.openBreedingModal() },
+                attr: { disabled: !player.hasFreeEggSlot() }'>
+        List
+    </button>
+    <div id='eggList' class="card-body p-0 show">
       <div class="row m-0" data-bind="foreach: player.eggList">
         <div class="col-md-6 eggSlot">
             <div data-bind="if: $index() === player.eggSlots()">

src/components/changelog.html

@@ -1,23 +1,17 @@
-<div class="modal fade noselect" id="changelogModal" tabindex="-1" role="dialog"
-aria-labelledby="changelogModal">
-<div class="modal-dialog modal-lg" role="document">
-   <div class="modal-content">
-       <div class="modal-header">
-           <h4>Changelog</h4>
-       </div>
-       <div class="modal-body" style="text-align: left;">
-        <!-- inject:head:html -->
-
-        <!-- endinject -->
-       </div>
+<div class="modal fade noselect" id="changelogModal" tabindex="-1" role="dialog" aria-badgeledby="changelogModal">
+    <div class="modal-dialog modal-lg" role="document">
+       <div class="modal-content">
+           <div class="modal-header">
+               <h4>Changelog</h4>
+           </div>
 
-       <p>
-           <a target="_blank" href="./changelog.html">Click here for a full changelog.</a>
-       </p>
+           <div class="modal-body" style="text-align: left;" data-bind="foreach: changelogItems">
+             <span data-bind="html: type + ' ' + description"></span><br/>
+           </div>
 
-       <div class="modal-footer" style="border-top:0">
-           <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+           <div class="modal-footer">
+               <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+           </div>
        </div>
-   </div>
+    </div>
 </div>
-</div>

src/components/gameMenu.html

@@ -22,6 +22,9 @@
         <li>
             <a class="dropdown-item" href="#showItemsModal" data-toggle="modal">Items</a>
         </li>
+        <li>
+            <a class="dropdown-item" href="#PrestigeModal" data-toggle="modal">Prestige</a>
+        </li>
         <li>
             <a class="dropdown-item" href="#settingsModal" data-toggle="modal">Settings</a>
         </li>

src/components/hallOfFame.html

@@ -12,12 +12,13 @@ <h5 class="modal-title" id="hallOfFameModalLabel">Professor Oak</h5>
        </div>
        <div class="modal-body">
            <p>
-               So, you won! Congratulations! You're the new Pokémon League champion! You've grown
-               up so
-               much since you first left with <span
-                   data-bind="text: GameConstants.Starter[player.starter]">starter</span>! You have
-               worked
-               hard to become the new League Champion!
+               So, you won! Congratulations!<br/>
+               You're the new Pokémon League champion!
+               You've grown up so much since you first left with <span data-bind="text: GameConstants.Starter[player.starter]">starter</span>!
+               You have worked hard to become the new League Champion!
+               <br/><br/>
+               You can now <a href='#PrestigeModal' data-toggle='modal'>Prestige</a> if so you wish..
+               <br/>(also available from the start menu)
            </p>
 
        </div>
@@ -26,4 +27,4 @@ <h5 class="modal-title" id="hallOfFameModalLabel">Professor Oak</h5>
        </div>
    </div>
 </div>
-</div>
+</div>

src/components/itemModal.html

@@ -3,7 +3,6 @@
      aria-labelledby="showItemModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content" style="text-align: center">
-
             <ul style="width:100%" class="nav nav-tabs nav-fill">
                 <li class="nav-item"><a data-toggle='tab' class='nav-link' href="#items">Evolution stones</a>
                 </li>

src/components/oakItems.html

@@ -0,0 +1,89 @@
+<div class="card border-secondary mb-3" id="oakItemsContainer"
+data-bind="visible: player.starter != GameConstants.Starter.None">
+    <div class="card-header p-0" data-toggle="collapse" href="#oakItemsBody">
+        <div>
+            <span style="text-align:center" data-bind="text: 'Oak Items equiped: ' + OakItemRunner.getTotalActiveOakItems() + '/' + player.calculateOakItemSlots()()"></span>
+        </div>
+        <button type="button" class="btn btn-info" style="position: absolute; right: 0px; top: 0px; width: auto; height: 41px; padding: 4px;"
+            data-bind="tooltip: { title: 'Activate Oak items to gain unique bonuses. When an Oak item has gained enough experience you can level it up with money to boost its effect.', trigger: 'hover', placement:'left' }">?</button>
+    </div>
+    <div id="oakItemsBody" class="card-body show">
+        <div class="row" data-bind="foreach: OakItemRunner.oakItemList">
+            <div class="col-xs-4 col-sm-4 col-md-3 p-2">
+                <button class="p-0 btn"
+                    data-bind="css: {
+                       'btn-primary': OakItemRunner.isActive(id),
+                       'btn-outline-secondary': !OakItemRunner.isActive(id)
+                     }">
+                    <img class="clickable" src=""
+                         data-bind="attr:{ src: 'assets/images/oakitems/' + GameConstants.humanifyString(GameConstants.OakItem[$data.id]) + '.png'},
+                          css: {
+                            'oak-item-locked': !OakItemRunner.isUnlocked($data.id),
+                            'flash': OakItemRunner.canUpgradeExp($data.id)
+                          },
+                          event: {
+                            mouseover: function(){OakItemRunner.hover($data.id)},
+                            click: function(){OakItemRunner.click($data.id)},
+                            mouseout : function(){OakItemRunner.hoverRelease()}
+                          }">
+                  </button>
+            </div>
+        </div>
+        <hr/>
+        <div class="oak-item-info">
+            <div class="text-center">
+                <strong><h5 data-bind="text: GameConstants.humanifyString(GameConstants.OakItem[OakItemRunner.inspectedItem().id])"></h5></strong>
+            </div>
+
+            <!-- ko if: OakItemRunner.inspectedItem().isUnlocked() -->
+            <div class="text-center">
+                <p data-bind="text: OakItemRunner.inspectedItem().description"></p>
+            </div>
+            <div class="row justify-content-sm-center">
+                <div class="col-sm-11 col-md-8">
+                    <div class="progress" style="margin-top: 12px"
+                         data-bind="value: 'exp'">
+                        <div class="progress-bar bg-success" role="progressbar"
+                             data-bind="
+                               attr:{
+                                 style: 'width:' + (OakItemRunner.inspectedItem().isMaxLevel() ? 100 : OakItemRunner.inspectedItem().expPercentage()) + '%'
+                               },
+                               css: {
+                                 'bg-success': !OakItemRunner.inspectedItem().isMaxLevel(),
+                                 'bg-primary': OakItemRunner.inspectedItem().isMaxLevel(),
+                               }"
+                             aria-valuemin="0" aria-valuemax="100">
+                            <span data-bind="hidden: OakItemRunner.inspectedItem().canUpgradeExp() || OakItemRunner.inspectedItem().isMaxLevel(), html: OakItemRunner.inspectedItem().expProgress()"></span>
+                            <div data-bind="if:OakItemRunner.inspectedItem().canUpgradeExp() || OakItemRunner.inspectedItem().isMaxLevel(),
+                                        disable: !OakItemRunner.inspectedItem().canUpgrade()">
+                                <div class="btn-default"
+                                     data-bind="
+                                      click: function(){
+                                        OakItemRunner.inspectedItem().upgrade();
+                                      },
+                                      text: OakItemRunner.inspectedItem().isMaxLevel() ? 'Max Level!' : 'Upgrade'">
+                                    Upgrade!
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="col-6">
+                    Lvl. <span data-bind="text: OakItemRunner.inspectedItem().level()"></span>
+                </div>
+                <div class="col-6">
+                    Bonus: <span data-bind="text: OakItemRunner.inspectedItem().calculateBonus()"></span>%
+                </div>
+            </div>
+            <!-- /ko -->
+            <!-- ko ifnot: OakItemRunner.inspectedItem().isUnlocked() -->
+            <div style="min-height:80px; vertical-align: center">
+                Capture <span data-bind="text: OakItemRunner.inspectedItem().unlockReq - player.caughtPokemonList.length"></span> more unique Pokémon to
+                unlock!
+            </div>
+            <!-- /ko -->
+        </div>
+    </div>
+
+</div>