general files

README.md

@@ -0,0 +1,10 @@
+## Colosseum
+A Pokémon-search progressive app :zap:.  It even works offline :crescent_moon:. 
+
+Built upon
+* Angular :globe_with_meridians:
+* Webpack :electric_plug:
+* Pokeapi :horse_racing:
+* ES6 :high_heel:
+* Service Workers :battery:
+* CSS3 :fireworks:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colosseum",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Displays Pokemons in a pretty way",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,8 @@
   },
   "keywords": [
     "pokemon",
-    "pretty"
+    "pretty",
+    "search"
   ],
   "author": "Naramsim",
   "license": "MPL-2.0",

src/data/quotes.json

@@ -25,5 +25,20 @@
     ["Barry","We need Poké balls! P-O-K-E balls!"],
     ["Youngster Kevin","These are not shorts! These are half-pants!"],
     ["Prof. Oak","There's a time and place for everything, but not now."],
-    ["Skyla","Heads up! Make sure you are ready for it!"]
+    ["Skyla","Heads up! Make sure you are ready for it!"],
+    ["Nebulablue","Hell no, I can't be seen with that ****."],
+    ["Route 23 lass","It seems it ran away crying"],
+    ["Harley","Gotta go powder my nose!"],
+    ["A girl","Oh yes, im a girl"],
+    ["Old man","You remind me of my lost love. Yes, spitting image"],
+    ["Swimmer","You have to come from SOMEWHERE, right?"],
+    ["Young couple","Our love didnt work?"],
+    ["Old Route 111 lady","There's no need to be shy about it"],
+    ["Seven island guy","Do the Chansey Dance!"],
+    ["Six island girl","Hera, hera, HERACROSS!"],
+    ["Route 11 gamer","Fwahaha! I've never lost!"],
+    ["Rock Tunnel hiker","Hit me with your best shot!"],
+    ["Youngster Regis","Youngster? How rude! Call me Shorts Boy!"],
+    ["Battle Frontier woman","Here it is a sweet kiss from my Jynx"],
+    ["Mt. Chimney hiker","There are many hot trainers for company!"]
 ]

src/include/index.html

@@ -50,7 +50,7 @@
                         <div class="author inline">@{{ ::quoteAuthor }}</div>
                     </i>
                 </div>
-                <div class="status">{{status}}</div>
+                <div class="status">{{ status }}</div>
             </div>
         </div>
         <div class="mainContainer container" ng-class="{ animation : loaded && !animationsEnded, animationEnded : animationsEnded }" ng-controller="MainPokemon">

src/scripts/angular/controllers/PokemonSearch.js

@@ -4,24 +4,22 @@ import { recentPokemons } from '../../getters/recentPokemons.js'
 
 export default class pokemonSearch {
     constructor($scope) { 'ngInject';
-        $scope.$on('init', function(){
-            $scope.pokemons = pokemons;
-            $scope.recents = recentPokemons;
-            $scope.getImageUrl = function(id) {
-                return `images/pokemons/${pokemons.indexOf(id) + 1}.svg`;
+        $scope.pokemons = pokemons;
+        $scope.recents = recentPokemons;
+        $scope.getImageUrl = function(id) {
+            return `images/pokemons/${pokemons.indexOf(id) + 1}.svg`;
+        }
+        $scope.saveAndReload = function(pokemon) {
+            var recents = localStorage.getItem('recents');
+            if (recents) {
+                recents = JSON.parse(recents);
+                recents.unshift(pokemon);
+                localStorage.setItem('recents', JSON.stringify(recents.slice(0, 6)))
+            } else {
+                localStorage.setItem('recents', JSON.stringify([pokemon]));
             }
-            $scope.saveAndReload = function(pokemon) {
-                var recents = localStorage.getItem('recents');
-                if (recents) {
-                    recents = JSON.parse(recents);
-                    recents.unshift(pokemon);
-                    localStorage.setItem('recents', JSON.stringify(recents.slice(0, 6)))
-                } else {
-                    localStorage.setItem('recents', JSON.stringify([pokemon]));
-                }
-                window.location.hash = `#${pokemon}`;
-                window.location.reload(true);
-            }
-        });
+            window.location.hash = `#${pokemon}`;
+            window.location.reload(true);
+        }
     }
 }

src/scripts/angular/run.js

@@ -7,6 +7,8 @@ import getHappiness from '../helpers/getHappiness.js'
 import { recentPokemons } from '../getters/recentPokemons.js'
 import { currentPokemon } from '../getters/currentPokemon.js'
 
+let isOffline = false;
+
 function hasCompleted(completed, $rootScope) {
     if(completed = 2){
         setTimeout(() => {$rootScope.status = 'READY'},300);
@@ -15,16 +17,22 @@ function hasCompleted(completed, $rootScope) {
 }
 
 function handleErrors($rootScope) {
-    $rootScope.status = 'SOMETHING BROKE :(';
-    setTimeout(() => {$rootScope.status = 'RELODING'},300);
-    setTimeout(() => {location.reload(1)},600);
+    if (!isOffline) {
+        $rootScope.status = 'SOMETHING BROKE :(';
+        setTimeout(() => {$rootScope.status = 'RELODING'},300);
+        setTimeout(() => {location.reload(1)},600);
+    }
 }
 
 export default function run($http, $rootScope, getInfoFactory) {
     var quoteId = quotes[Math.floor(Math.random()*quotes.length)];
     $rootScope.quote = quoteId[1];
     $rootScope.quoteAuthor = quoteId[0];
-    $rootScope.status = 'FETCHING';
+    if (isOffline) {
+        $rootScope.status = 'You are OFFLINE\nNo problem, you can safely search for Pokémons you already searched';
+    } else {
+        $rootScope.status = 'FETCHING';
+    }
     $rootScope.reloadHome = function(id) {
             window.location.hash = '';
             window.location.reload(true);
@@ -86,4 +94,23 @@ export default function run($http, $rootScope, getInfoFactory) {
     }).catch(function(err) {
         handleErrors($rootScope);
     });
+
+
+    if('serviceWorker' in navigator){
+        // Handler for messages coming from the service worker
+        navigator.serviceWorker.addEventListener('message', function(event){
+            var offlineInterval = null;
+            if (event.data === 'OFFLINE') {
+                isOffline = true;
+                offlineInterval = setInterval(() => {
+                    $rootScope.$apply(() => {
+                        $rootScope.status = 'You are OFFLINE\nNo problem, you can safely search for Pokémons you already searched';
+                    });
+                },1000);
+            }
+            if (event.data === 'ONLINE') {
+                isOffline = false;
+            }
+        });
+    }
 }

src/scripts/getters/currentPokemon.js

@@ -15,7 +15,7 @@ if (!currentPokemon) {
 console.log(currentPokemon)
 
 function generateRandPokemon() {
-    return pokemons[Math.floor(0 + Math.random() * 750)];
+    return pokemons[Math.floor(0 + Math.random() * 648)];
 }
 
 export { currentPokemon }

src/scripts/sw/swApiCalls.js

@@ -1,6 +1,7 @@
 const apiRe = /https:\/\/cdn\.rawgit\.com\/Naramsim\/ninjask\/master\/data\/api\/v2\/.+\/\d+\/index\.json/;
 const imgRe = /images\/\w+\/[\d\w]+\.svg/
 const fonttRe = /fonts/
+const version = 1
 
 self.addEventListener('fetch', function(event) {
     if (event.request.url.match(apiRe) || event.request.url.match(imgRe) || event.request.url.match(fonttRe)) { // HACK: font caching hack: offline-plugin does not allow caching res with '?' in
@@ -12,25 +13,51 @@ self.addEventListener('fetch', function(event) {
 
                 return fetch(event.request).then(function(response) {
                     if (event.request.url.match(apiRe)) {
-                        caches.open('api').then(function(cache) {
+                        caches.open(`api-${version}`).then(function(cache) {
                             cache.add(event.request.url);
                         })
                     }
                     if (event.request.url.match(imgRe)) {
-                        caches.open('images').then(function(cache) {
+                        caches.open(`images-${version}`).then(function(cache) {
                             cache.add(event.request.url);
                         })
                     }
                     if (event.request.url.match(fonttRe)) {
-                        caches.open('font').then(function(cache) {
+                        caches.open(`font-${version}`).then(function(cache) {
                             cache.add(event.request.url);
                         })
                     }
+                    send_message_to_all_clients("ONLINE")
                     return response;
                 }).catch(function(error) {
-                    throw error;
+                    console.log("npe")
+                    send_message_to_all_clients("OFFLINE")
                 });
             })  
         );  
     }
-});
+});
+
+function send_message_to_client(client, msg){
+    return new Promise(function(resolve, reject){
+        var msg_chan = new MessageChannel();
+
+        msg_chan.port1.onmessage = function(event){
+            if(event.data.error){
+                reject(event.data.error);
+            }else{
+                resolve(event.data);
+            }
+        };
+
+        client.postMessage(msg, [msg_chan.port2]);
+    });
+}
+
+function send_message_to_all_clients(msg){
+    clients.matchAll().then(clients => {
+        clients.forEach(client => {
+            send_message_to_client(client, msg);
+        })
+    })
+}

src/styles/main.css

@@ -57,6 +57,8 @@ a:hover, a:active {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-around;
+	position: relative;
+	z-index: 1;
 }
 
 .innerContainer {
@@ -70,6 +72,7 @@ a:hover, a:active {
 
 .pokemonImage {
 	position: relative;
+	z-index: 1;
 }
 
 .pokemonImage>img {
@@ -267,6 +270,9 @@ a:hover, a:active {
 	text-align: center;
     margin-top: 20px;
     color: #5a5a5a;
+    max-width: 40%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .centerHorizontally {

src/styles/mobile.css

@@ -33,7 +33,11 @@
 		margin: 0 auto;
 	}
 
-	.pokemonStats, .pokemonDescription, .pokemonFamily {
+	.pokemonStats, .pokemonFamily {
+		max-width: 90%;
+	}
+
+	.pokemonDescription {
 		max-width: 80%;
 	}
 
@@ -92,4 +96,9 @@
 	}
 }
 
+@media screen and (max-width: 350px) {
+	.liStat {
+		font-size: 72%;
+	}
+}
 

webpack.config.js

@@ -33,7 +33,6 @@ const offlinePluginOptions = {
     version: '[hash]',
     safeToUseOptionalCaches: true,
     ServiceWorker: {
-       // Entry in your project, will be included into SW file
         entry: './src/scripts/sw/swApiCalls.js'
     } 
 }