Add toggle to show/hide Pokémon stats. (#2454)

Add toggle to show/hide Pokémon stats.
RocketMap · Jan 22, 2018 · b0937fb · b0937fb
1 parent 6d879af
commit b0937fb
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 11 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -59,6 +59,10 @@
     "countMarkers": true,
     "skel": true,
     "setupPokemonMarker": true,
-    "updatePokemonMarker": true
+    "updatePokemonMarker": true,
+
+    "pokemonLabel": true,
+    "updatePokemonLabel": true,
+    "updatePokemonLabels": true
   }
 }
diff --git a/static/js/map.common.js b/static/js/map.common.js
@@ -918,6 +918,10 @@ var StoreOptions = {
         default: true,
         type: StoreTypes.Boolean
     },
+    'showPokemonStats': {
+        default: true,
+        type: StoreTypes.Boolean
+    },
     'showPokestops': {
         default: true,
         type: StoreTypes.Boolean
@@ -1176,6 +1180,21 @@ function updatePokemonMarker(item, map, scaleByRarity = true, isNotifyPkmn = fal
     marker.setIcon(icon)
 }
 
+function updatePokemonLabel(item) {
+    // Only update label when Pokémon has been encountered.
+    if (item['cp'] !== null && item['cpMultiplier'] !== null) {
+        item.marker.infoWindow.setContent(pokemonLabel(item))
+    }
+}
+
+function updatePokemonLabels(pokemonList) {
+    $.each(pokemonList, function (key, value) {
+        var item = pokemonList[key]
+
+        updatePokemonLabel(item)
+    })
+}
+
 function isTouchDevice() {
     // Should cover most browsers
     return 'ontouchstart' in window || navigator.maxTouchPoints

diff --git a/static/js/map.js b/static/js/map.js
@@ -458,6 +458,7 @@ function initSidebar() {
     $('#max-level-gyms-filter-switch').val(Store.get('maxGymLevel'))
     $('#last-update-gyms-switch').val(Store.get('showLastUpdatedGymsOnly'))
     $('#pokemon-switch').prop('checked', Store.get('showPokemon'))
+    $('#pokemon-stats-switch').prop('checked', Store.get('showPokemonStats'))
     $('#pokestops-switch').prop('checked', Store.get('showPokestops'))
     $('#lured-pokestops-only-switch').val(Store.get('showLuredPokestopsOnly'))
     $('#lured-pokestops-only-wrapper').toggle(Store.get('showPokestops'))
@@ -470,6 +471,7 @@ function initSidebar() {
     $('#scanned-switch').prop('checked', Store.get('showScanned'))
     $('#spawnpoints-switch').prop('checked', Store.get('showSpawnpoints'))
     $('#ranges-switch').prop('checked', Store.get('showRanges'))
+    $('#notify-perfection-wrapper').toggle(Store.get('showPokemonStats'))
     $('#sound-switch').prop('checked', Store.get('playSound'))
     $('#pokemoncries').toggle(Store.get('playSound'))
     $('#cries-switch').prop('checked', Store.get('playCries'))
@@ -545,6 +547,7 @@ function pokemonLabel(item) {
     var form = item['form']
     var cp = item['cp']
     var cpMultiplier = item['cp_multiplier']
+    const showStats = Store.get('showPokemonStats')
 
     $.each(types, function (index, type) {
         typesDisplay += getTypeSpan(type)
@@ -564,7 +567,7 @@ function pokemonLabel(item) {
       ${name} <span class='pokemon name pokedex'><a href='http://pokemon.gameinfo.io/en/pokemon/${id}' target='_blank' title='View in Pokédex'>#${id}</a></span> ${formString} <span class='pokemon gender rarity'>${genderType[gender - 1]} ${rarityDisplay}</span> ${typesDisplay}
     </div>`
 
-    if (cp !== null && cpMultiplier !== null) {
+    if (showStats && cp !== null && cpMultiplier !== null) {
         var pokemonLevel = getPokemonLevel(cpMultiplier)
 
         if (atk !== null && def !== null && sta !== null) {
@@ -996,7 +999,8 @@ function getNotifyText(item) {
     var find = ['<prc>', '<pkm>', '<atk>', '<def>', '<sta>']
     var replace = [((iv) ? iv.toFixed(1) : ''), item['pokemon_name'], item['individual_attack'],
         item['individual_defense'], item['individual_stamina']]
-    var ntitle = repArray(((iv) ? notifyIvTitle : notifyNoIvTitle), find, replace)
+    const showStats = Store.get('showPokemonStats')
+    var ntitle = repArray(((showStats && iv) ? notifyIvTitle : notifyNoIvTitle), find, replace)
     var dist = moment(item['disappear_time']).format('HH:mm:ss')
     var until = getTimeUntil(item['disappear_time'])
     var udist = (until.hour > 0) ? until.hour + ':' : ''
@@ -1040,16 +1044,36 @@ function playPokemonSound(pokemonID, cryFileTypes) {
     }
 }
 
-function isNotifyPoke(poke) {
-    const isOnNotifyList = notifiedPokemon.indexOf(poke['pokemon_id']) > -1 || notifiedRarity.indexOf(poke['pokemon_rarity']) > -1
+function isNotifyPerfectionPoke(poke) {
     var hasHighIV = false
 
     if (poke['individual_attack'] != null) {
         const perfection = getIv(poke['individual_attack'], poke['individual_defense'], poke['individual_stamina'])
         hasHighIV = notifiedMinPerfection > 0 && perfection >= notifiedMinPerfection
     }
 
-    return isOnNotifyList || hasHighIV
+    return hasHighIV
+}
+
+function isNotifyPoke(poke) {
+    const isOnNotifyList = notifiedPokemon.indexOf(poke['pokemon_id']) > -1 || notifiedRarity.indexOf(poke['pokemon_rarity']) > -1
+    const isNotifyPerfectionPkmn = isNotifyPerfectionPoke(poke)
+    const showStats = Store.get('showPokemonStats')
+
+    return isOnNotifyList || (showStats && isNotifyPerfectionPkmn)
+}
+
+function getNotifyPerfectionPokemons(pokemonList) {
+    var notifyPerfectionPkmn = []
+    $.each(pokemonList, function (key, value) {
+        var item = pokemonList[key]
+
+        if (isNotifyPerfectionPoke(item)) {
+            notifyPerfectionPkmn.push(item)
+        }
+    })
+
+    return notifyPerfectionPkmn
 }
 
 function customizePokemonMarker(marker, item, skipNotification) {
@@ -2891,6 +2915,24 @@ $(function () {
         buildSwitchChangeListener(mapData, ['pokemons'], 'showPokemon').bind(this)()
         markerCluster.repaint()
     })
+    $('#pokemon-stats-switch').change(function () {
+        Store.set('showPokemonStats', this.checked)
+        var options = {
+            'duration': 500
+        }
+        const $wrapper = $('#notify-perfection-wrapper')
+        if (this.checked) {
+            $wrapper.show(options)
+        } else {
+            $wrapper.hide(options)
+        }
+        updatePokemonLabels(mapData.pokemons)
+        // Only redraw Pokémon which are notified of perfection.
+        var notifyPerfectionPkmn = getNotifyPerfectionPokemons(mapData.pokemons)
+        redrawPokemon(notifyPerfectionPkmn)
+
+        markerCluster.redraw()
+    })
     $('#scanned-switch').change(function () {
         buildSwitchChangeListener(mapData, ['scanned'], 'showScanned').bind(this)()
     })

diff --git a/templates/map.html b/templates/map.html
@@ -257,6 +257,18 @@ <h3>Exclude Rarity</h3>
                 <option value="5">Ultra Rare and below</option>
               </select>
             </div>
+                  {% if show.encounter %}
+            <div class="form-control switch-container">
+              <h3>Pokémon Stats</h3>
+              <div class="onoffswitch">
+                <input id="pokemon-stats-switch" type="checkbox" name="pokemon-stats-switch" class="onoffswitch-checkbox" checked>
+                <label class="onoffswitch-label" for="pokemon-stats-switch">
+                <span class="switch-label" data-on="On" data-off="Off"></span>
+                <span class="switch-handle"></span>
+                </label>
+              </div>
+            </div>
+                  {% endif %}
               {% endif %}
           </div>
 
@@ -358,11 +370,13 @@ <h3>Notify of Rarity</h3>
             </div>
 
               {% if show.encounter %}
-            <div class="form-control">
-              <label for="notify-perfection">
-                <h3>Notify of Perfection</h3>
-                <input id="notify-perfection" type="text" name="notify-perfection" placeholder="Minimum perfection %"/>
-              </label>
+            <div id="notify-perfection-wrapper" style="display:none">
+              <div class="form-control">
+                <label for="notify-perfection">
+                  <h3>Notify of Perfection</h3>
+                  <input id="notify-perfection" type="text" name="notify-perfection" placeholder="Minimum perfection %"/>
+                </label>
+              </div>
             </div>
               {% endif %}
             <div class="form-control switch-container">