Update type icons to match Pokerogue sprites

content.js

@@ -146,7 +146,7 @@ function createTypeEffectivenessWrapper(effectiveness, types) {
 			typeEffectivenessWrapper.appendChild(block)
 		}
     const typeIcon = document.createElement('div');
-    typeIcon.style.backgroundImage = `url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/sword-shield/${Types[type]}.png')`;
+    typeIcon.style.backgroundImage = `url('${chrome.runtime.getURL(`/type-icons/type-icon${Types[type]}.png`)}')`;
     typeIcon.className = 'type-icon';
     block.appendChild(typeIcon)
     counter += 1;
@@ -222,7 +222,7 @@ function changePage(click) {
 			} else {
 				currentAllyPage = alliesPokemon.length - 1
 			}
-		}		
+		}
 	} else if (direction === 'down') {
 		if (divId === 'enemies') {
 			if ((currentEnemyPage + 1) < enemiesPokemon.length) {
@@ -273,11 +273,11 @@ function createPokemonCardDiv(divId, pokemon) {
 	const extraInfoRow = document.createElement('div');
 	extraInfoRow.classList.add('text-base')
 	extraInfoRow.textContent = `Ability: ${pokemon.ability} - Nature: ${pokemon.nature}`;
-	
+
 	const ivsRow = document.createElement('div');
 	ivsRow.classList.add('text-base');
 	ivsRow.textContent = `HP: ${pokemon.ivs[Stat["HP"]]}, ATK: ${pokemon.ivs[Stat["ATK"]]}, DEF: ${pokemon.ivs[Stat["DEF"]]}, SPE: ${pokemon.ivs[Stat["SPD"]]}, SPD: ${pokemon.ivs[Stat["SPDEF"]]}, SPA: ${pokemon.ivs[Stat["SPATK"]]}`;
-	
+
 	let weatherRow = undefined
 	if (weather.type && weather.turnsLeft) {
 		weatherRow = document.createElement('div');
@@ -351,4 +351,4 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 		createCardsDiv(divId)
     sendResponse({ success: true });
 	}
-});
+});

manifest_chrome.json

@@ -27,5 +27,5 @@
       "css": ["styles.css"]
     }
   ],
-  "web_accessible_resources": ["inject.js", "injected.js"]
-}
+  "web_accessible_resources": ["inject.js", "injected.js", "type-icons/*.png"]
+}

manifest_firefox.json

@@ -32,5 +32,5 @@
       "css": ["styles.css"]
     }
   ],
-  "web_accessible_resources": ["inject.js", "injected.js"]
-}
+  "web_accessible_resources": ["inject.js", "injected.js", "type-icons/*.png"]
+}

styles.css

@@ -51,11 +51,11 @@
 .type-icon {
   width: 30px;
   height: 30px;
-  background-size: cover;
+  background-size: 130% 130%;
   background-repeat: no-repeat;
-  background-position: left;
-  background-position-x: -1.15px;
+  background-position: center;
   border-radius: 50%;
+  image-rendering: pixelated;
   margin: 0 5px;
 }
 
@@ -130,14 +130,14 @@
       width: 80px;
       -webkit-appearance: none;
     }
-    
+
     input[type='range']::-webkit-slider-runnable-track {
       height: 10px;
       -webkit-appearance: none;
       color: #13bba4;
       margin-top: -1px;
     }
-    
+
     input[type='range']::-webkit-slider-thumb {
       width: 10px;
       -webkit-appearance: none;
@@ -151,7 +151,7 @@
 input[type="range"]::-moz-range-progress {
   background-color: #b3462c;
 }
-input[type="range"]::-moz-range-track {  
+input[type="range"]::-moz-range-track {
   background-color: #fff;
 }
 input[type="range"] {
@@ -160,4 +160,5 @@ input[type="range"] {
 
 .slider-wrapper {
   display: flex;
-}
+}
+