Add Cries for better notifications (#2029)

* Intitial cries * Moar Crying * map.js changes * fix * add wrapper * map.js changes * oops fix * sidebar fix * Changed duration speed * Final Tears * All Cried out * One last tear for old times sake
RocketMap · May 16, 2017 · 3a9ef78 · 3a9ef78
1 parent 77ddfff
commit 3a9ef78
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/static/js/map.common.js b/static/js/map.common.js
@@ -922,6 +922,10 @@ var StoreOptions = {
         default: false,
         type: StoreTypes.Boolean
     },
+    'playCries': {
+        default: false,
+        type: StoreTypes.Boolean
+    },
     'geoLocate': {
         default: false,
         type: StoreTypes.Boolean

diff --git a/static/js/map.js b/static/js/map.js
@@ -363,6 +363,8 @@ function initSidebar() {
     $('#spawnpoints-switch').prop('checked', Store.get('showSpawnpoints'))
     $('#ranges-switch').prop('checked', Store.get('showRanges'))
     $('#sound-switch').prop('checked', Store.get('playSound'))
+    $('#pokemoncries').toggle(Store.get('playSound'))
+    $('#cries-switch').prop('checked', Store.get('playCries'))
     var searchBox = new google.maps.places.Autocomplete(document.getElementById('next-location'))
     $('#next-location').css('background-color', $('#geoloc-switch').prop('checked') ? '#e0e0e0' : '#ffffff')
 
@@ -768,7 +770,25 @@ function getNotifyText(item) {
     }
 }
 
+function playPokemonSound(pokemonID) {
+    if (!Store.get('playSound')) {
+        return
+    }
+    if (!Store.get('playCries')) {
+        audio.play()
+    } else {
+        var audioCry = new Audio('static/sounds/cries/' + pokemonID + '.wav')
+        audioCry.play().catch(function (err) {
+            if (err) {
+                console.log('Sound for Pokémon ' + pokemonID + ' is missing, using generic sound instead.')
+                audio.play()
+            }
+        })
+    }
+}
+
 function customizePokemonMarker(marker, item, skipNotification) {
+    var notifyText = getNotifyText(item)
     marker.addListener('click', function () {
         this.setAnimation(null)
         this.animationDisabled = true
@@ -785,10 +805,8 @@ function customizePokemonMarker(marker, item, skipNotification) {
 
     if (notifiedPokemon.indexOf(item['pokemon_id']) > -1 || notifiedRarity.indexOf(item['pokemon_rarity']) > -1) {
         if (!skipNotification) {
-            if (Store.get('playSound')) {
-                audio.play()
-            }
-            sendNotification(getNotifyText(item).fav_title, getNotifyText(item).fav_text, 'static/icons/' + item['pokemon_id'] + '.png', item['latitude'], item['longitude'])
+            playPokemonSound(item['pokemon_id'])
+            sendNotification(notifyText.fav_title, notifyText.fav_text, 'static/icons/' + item['pokemon_id'] + '.png', item['latitude'], item['longitude'])
         }
         if (marker.animationDisabled !== true) {
             marker.setAnimation(google.maps.Animation.BOUNCE)
@@ -799,10 +817,8 @@ function customizePokemonMarker(marker, item, skipNotification) {
         var perfection = getIv(item['individual_attack'], item['individual_defense'], item['individual_stamina'])
         if (notifiedMinPerfection > 0 && perfection >= notifiedMinPerfection) {
             if (!skipNotification) {
-                if (Store.get('playSound')) {
-                    audio.play()
-                }
-                sendNotification(getNotifyText(item).fav_title, getNotifyText(item).fav_text, 'static/icons/' + item['pokemon_id'] + '.png', item['latitude'], item['longitude'])
+                playPokemonSound(item['pokemon_id'])
+                sendNotification(notifyText.fav_title, notifyText.fav_text, 'static/icons/' + item['pokemon_id'] + '.png', item['latitude'], item['longitude'])
             }
             if (marker.animationDisabled !== true) {
                 marker.setAnimation(google.maps.Animation.BOUNCE)
@@ -2378,6 +2394,19 @@ $(function () {
 
     $('#sound-switch').change(function () {
         Store.set('playSound', this.checked)
+        var options = {
+            'duration': 500
+        }
+        var criesWrapper = $('#pokemoncries')
+        if (this.checked) {
+            criesWrapper.show(options)
+        } else {
+            criesWrapper.hide(options)
+        }
+    })
+
+    $('#cries-switch').change(function () {
+        Store.set('playCries', this.checked)
     })
 
     $('#geoloc-switch').change(function () {

diff --git a/templates/map.html b/templates/map.html
@@ -320,11 +320,21 @@ <h3>Notify with sound</h3>
               <div class="onoffswitch">
                 <input id="sound-switch" type="checkbox" name="sound-switch" class="onoffswitch-checkbox" checked>
                 <label class="onoffswitch-label" for="sound-switch">
-                <span class="switch-label" data-on="On" data-off="Off"></span>
-                <span class="switch-handle"></span>
+                  <span class="switch-label" data-on="On" data-off="Off"></span>
+                  <span class="switch-handle"></span>
                 </label>
+              </div><br><br>
+              <div id="pokemoncries" style="display:none">
+              <h3>Use Pokémon cries</h3>
+                <div class="onoffswitch">
+                <input id="cries-switch" type="checkbox" name="cries-switch" class="onoffswitch-checkbox" checked>
+                  <label class="onoffswitch-label" for="cries-switch">
+                    <span class="switch-label" data-on="On" data-off="Off"></span>
+                    <span class="switch-handle"></span>
+                  </label>
+                </div>
               </div>
-            </div>
+             </div>
           </div>
             {% endif %}
           <h3>Style Settings</h3>