pokeList is now reactive

Hugues Signamarcheix · Hugues Signamarcheix · commit 7720d39c24b6 · 2019-12-11T12:53:12.000+01:00
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <body>
         <h1>Javascript workers in action</h1>
         <p>Click on the pokeball and see which Pokemon you catched !</p>
+        <p>Let's see on how many time you can catch'em all !</p>
         <div class="container">
             <ul class="poke-list"></ul>
             <div>
@@ -19,11 +20,11 @@ <h1>Javascript workers in action</h1>
                     <div>Types : <span class="types"></span></div>
                     <div>Height : <span class="height"></span> ft</div>
                     <div>Weight : <span class="weight"></span> lbs</div>
+                    <div class="loader">
+                        <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+                    </div>
                 </div>
             </div>    
-            <div class="loader">
-                <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
-            </div>
         </div>
         <script src="javascript/script.js"></script>
     </body>
diff --git a/javascript/dist/worker-bundled.js b/javascript/dist/worker-bundled.js
@@ -14,7 +14,7 @@ onmessage = (e) => {
 	         		data: response.data 
 	         	})))
 	} else if(e.data == 'init') {
-		axios.get(baseUrl + '?limit=151')
+		axios.get(baseUrl + '?limit=150')
 			 .then(response => (postMessage( 
 			 	{
 			 		todo: 'init',
diff --git a/javascript/script.js b/javascript/script.js
@@ -52,6 +52,19 @@ document.addEventListener("DOMContentLoaded",() => {
                 }
                 document.getElementsByClassName('sprite')[0].src = jsonFetched['sprites'].front_default;
                 container.classList.remove('is-loading');
+                let pokeList = [...document.getElementsByClassName("poke-badge")];
+                let find = pokeList.filter((elem) => {
+                    if(elem.dataset.name == jsonFetched['name'] && elem.classList.contains("empty")) {
+                        return true;
+                    }
+                    return false;
+                })
+                if(find.length) {
+                    find[0].style.backgroundImage = 'url(' + jsonFetched['sprites'].front_default + ')';
+                    find[0].style.backgroundColor = typesColor[jsonFetched['types'].filter(e => e.slot == 1)[0].type.name];
+                    find[0].classList.remove("empty");
+                }
+
             } else if(e.data.todo == 'init') {
                 let pokeArray = e.data.data.results;
                 let pokeList = document.getElementsByClassName("poke-list")[0];
diff --git a/javascript/worker.js b/javascript/worker.js
@@ -13,7 +13,7 @@ onmessage = (e) => {
 	         		data: response.data 
 	         	})))
 	} else if(e.data == 'init') {
-		axios.get(baseUrl + '?limit=151')
+		axios.get(baseUrl + '?limit=150')
 			 .then(response => (postMessage( 
 			 	{
 			 		todo: 'init',
diff --git a/scss/pages/index.scss b/scss/pages/index.scss
@@ -91,6 +91,8 @@ h1,p {
 			height: 55px;
 			border-radius: 50%;
 			background-color: lightgray;
+			background-position: center;
+			background-size: contain;
 			margin-bottom: 10px;
 			margin-right: 10px;
 		}
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ onmessage = (e) => {`
`14`	`14`	`data: response.data`
`15`	`15`	`})))`
`16`	`16`	`} else if(e.data == 'init') {`
`17`		`- axios.get(baseUrl + '?limit=151')`
	`17`	`+ axios.get(baseUrl + '?limit=150')`
`18`	`18`	`.then(response => (postMessage(`
`19`	`19`	`{`
`20`	`20`	`todo: 'init',`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ onmessage = (e) => {`
`13`	`13`	`data: response.data`
`14`	`14`	`})))`
`15`	`15`	`} else if(e.data == 'init') {`
`16`		`- axios.get(baseUrl + '?limit=151')`
	`16`	`+ axios.get(baseUrl + '?limit=150')`
`17`	`17`	`.then(response => (postMessage(`
`18`	`18`	`{`
`19`	`19`	`todo: 'init',`
Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,8 @@ h1,p {`
`91`	`91`	`height: 55px;`
`92`	`92`	`border-radius: 50%;`
`93`	`93`	`background-color: lightgray;`
	`94`	`+ background-position: center;`
	`95`	`+ background-size: contain;`
`94`	`96`	`margin-bottom: 10px;`
`95`	`97`	`margin-right: 10px;`
`96`	`98`	`}`