🔖 0.0.12

AssistantApps · Jan 9, 2024 · f99eecf · f99eecf
1 parent 4fa96c5
commit f99eecf
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 dist
 public/assets/json/tempGameDetails.json
 public/assets/json/tempAllPokemon.json
+/public/assets/img/pokemon
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "assistantapps-pokemon-living-dex",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "",
   "scripts": {
     "start": "vite",

diff --git a/public/assets/img/pokemon/0000.png b/public/assets/img/pokemon/0000.png
diff --git a/public/assets/json/pokedexByGame.json b/public/assets/json/pokedexByGame.json
@@ -3640,6 +3640,8 @@
             "0798",
             "0799",
             "0800",
+            "0803",
+            "0804",
             "0805",
             "0806"
         ]
@@ -4720,6 +4722,7 @@
             "0628",
             "0629",
             "0630",
+            "0648",
             "0650",
             "0651",
             "0652",

diff --git a/public/assets/json/pokemonByGame.json b/public/assets/json/pokemonByGame.json
@@ -9207,7 +9207,7 @@
       {
         "id": "1018",
         "name": "Archaludon",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1018.png",
         "row": 30,
         "col": 28,
         "boxCol": 5,
@@ -9216,7 +9216,7 @@
       {
         "id": "1019",
         "name": "Hydrapple",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1019.png",
         "row": 30,
         "col": 29,
         "boxCol": 6,
@@ -9225,7 +9225,7 @@
       {
         "id": "1020",
         "name": "Gouging-Fire",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1020.png",
         "row": 30,
         "col": 30,
         "boxCol": 1,
@@ -9234,7 +9234,7 @@
       {
         "id": "1021",
         "name": "Raging-Bolt",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1021.png",
         "row": 30,
         "col": 31,
         "boxCol": 2,
@@ -9243,7 +9243,7 @@
       {
         "id": "1022",
         "name": "Iron-Boulder",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1022.png",
         "row": 30,
         "col": 32,
         "boxCol": 3,
@@ -9252,7 +9252,7 @@
       {
         "id": "1023",
         "name": "Iron-Crown",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1023.png",
         "row": 31,
         "col": 0,
         "boxCol": 4,
@@ -9261,7 +9261,7 @@
       {
         "id": "1024",
         "name": "Terapagos",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1024.png",
         "row": 31,
         "col": 1,
         "boxCol": 5,
@@ -9270,7 +9270,7 @@
       {
         "id": "1025",
         "name": "Pecharunt",
-        "image": "/assets/img/pokeball-loader.png",
+        "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1025.png",
         "row": 31,
         "col": 2,
         "boxCol": 6,

diff --git a/scripts/compileJson.js b/scripts/compileJson.js
@@ -4,6 +4,12 @@ const { createCanvas, loadImage } = require('canvas');
 
 const pokemonSpriteSize = 50;
 const pokeApiUrl = 'https://pokeapi.co/api/v2';
+const pokeImgPath = '../public/assets/img/pokemon';
+const imageSource = {
+    disk: '_',
+    api: '+',
+};
+const logErrMsg = false;
 
 const capitalizeFirstLetter = (orig) => {
     if (orig.length == 0) return orig;
@@ -175,11 +181,14 @@ const orderPokemon = (pokemonLookup, ids) => {
 }
 
 const combinePokemonImagesIntoSingleSprite = async (combined, numCol) => {
-    const pokemonImgPath = path.join(__dirname, '../public/assets/img/pokemon');
+    const pokemonImgPath = path.join(__dirname, pokeImgPath);
     const outputImg = path.join(pokemonImgPath, '0000.png');
 
-    console.log('skipping the generation of a new single sprite');
-    return;
+    console.log('Sprites sources');
+    console.log(`\tDisk: ${imageSource.disk}`);
+    console.log(`\tAPI : ${imageSource.api}`);
+    // console.log('skipping the generation of a new single sprite');
+    // return;
 
     if (fs.existsSync(outputImg)) {
         fs.unlinkSync(outputImg)
@@ -203,8 +212,9 @@ const combinePokemonImagesIntoSingleSprite = async (combined, numCol) => {
                 pokemonDetail.image = path.join(__dirname, '../public/assets/img/pokeball-loader.png');
             }
             // await fs.writeFileSync(tempImg.replace('temp', pokemonDetail.id), buffer);
+
             try {
-                const image = await loadImage(pokemonDetail.image);
+                const image = await retry(3, (_) => fetchPokemonImage(pokemonDetail));
                 ctx.drawImage(
                     image,
                     pokemonDetail.col * pokemonSpriteSize,
@@ -214,17 +224,73 @@ const combinePokemonImagesIntoSingleSprite = async (combined, numCol) => {
                 );
             }
             catch (e) {
-                console.error(`Unable to fetch sprite for ${pokemonDetail.image}`, e);
+                console.error(`Unable to fetch sprite for ${pokemonDetail.image}`, logErrMsg ? e : null);
             }
         }
+        console.log('');
+        console.log('');
     }
 
     try {
-        const buffer = canvas.toBuffer('image/png');
-        fs.writeFileSync(outputImg, buffer);
+        writeImgToDisk(outputImg, canvas);
         console.log('spritemap created');
     } catch (e) {
-        console.error('Unable to write single aprite', e);
+        console.error('Unable to write complete sprite', e);
+    }
+}
+
+const fetchPokemonImage = async (pokemonDetail) => {
+    const pokemonImgPath = path.join(__dirname, pokeImgPath);
+    const outputImg = path.join(pokemonImgPath, `${pokemonDetail.id}.png`);
+
+    if (fs.existsSync(outputImg)) {
+        const localImage = await loadImage(outputImg);
+        process.stdout.write(imageSource.disk);
+        return localImage;
+    }
+
+    const canvas = createCanvas(pokemonSpriteSize, pokemonSpriteSize);
+    const ctx = canvas.getContext('2d');
+    const imgFromApi = await loadImage(pokemonDetail.image);
+    ctx.drawImage(
+        imgFromApi,
+        0,
+        0,
+        pokemonSpriteSize,
+        pokemonSpriteSize
+    );
+    process.stdout.write(imageSource.api);
+
+    try {
+        writeImgToDisk(outputImg, canvas);
+    } catch (e) {
+        console.error('Unable to write single sprite', e);
+    }
+
+    return imgFromApi;
+}
+
+const writeImgToDisk = async (outputImg, canvas) => {
+    if (fs.existsSync(outputImg)) fs.unlinkSync(outputImg);
+    const buffer = canvas.toBuffer('image/png');
+    fs.writeFileSync(outputImg, buffer);
+}
+
+const delay = (t, val) => new Promise(resolve => setTimeout(resolve, t, val));
+
+const retry = async (maxRetries, asyncFn) => {
+    try {
+        const result = await asyncFn(maxRetries);
+        return result;
+    }
+    catch (err) {
+        await delay(1000);
+        console.error(`retry func failed, count: ${maxRetries}`, logErrMsg ? err : null);
+
+        if (maxRetries <= 0) {
+            throw err;
+        }
+        await retry(maxRetries - 1, asyncFn);
     }
 }
 

diff --git a/src/components/livingDexLookup.tsx b/src/components/livingDexLookup.tsx
@@ -11,7 +11,7 @@ import { IPokemon } from '../contracts/pokemonByGame';
 import { IPokemonInBox } from '../contracts/pokemonInBox';
 import { timeout } from '../helper/asyncHelper';
 import { initSticky, scrollIdIntoView } from '../helper/documentHelper';
-import { capitalizeFirstLetter } from '../helper/stringHelper';
+import { capitalizeFirstLetter, getBulbaUrl } from '../helper/stringHelper';
 import { anyObject } from '../helper/typescriptHacks';
 import { getGames, getOwned, getShiny } from '../services/store/sections/pokedexState';
 import { getStateService } from '../services/store/stateService';
@@ -150,10 +150,8 @@ export const LivingDexLookup: Component = () => {
 
         if (pokeDetails == null) return;
 
-        if (mode() != LivingDexMode.tracking) {
-            setSelectedPokemon(pokeDetails.value);
-            setSelectedPokemonName(pokeDetails.title);
-        }
+        setSelectedPokemon(pokeDetails.value);
+        setSelectedPokemonName(pokeDetails.title);
 
         setInfoBoxSelectedPokedexs(pokeDexi);
         onOpen();
@@ -337,7 +335,7 @@ export const LivingDexLookup: Component = () => {
                                     <Show when={infoBoxPokedexs().length == 0}>
                                         <Text>This might be an event only pokemon 🤷‍♂️</Text>
                                     </Show>
-                                    <Button as={Link} href={`https://bulbapedia.bulbagarden.net/wiki/${selectedPokemonName()}`} title="View on Bulbapedia" target="_blank" rel="noopener noreferrer">
+                                    <Button as={Link} href={getBulbaUrl(selectedPokemonName())} title="View on Bulbapedia" target="_blank" rel="noopener noreferrer">
                                         View on Bulbapedia
                                     </Button>
                                 </VStack>

diff --git a/src/components/pokemonBoxItem.tsx b/src/components/pokemonBoxItem.tsx
@@ -8,6 +8,7 @@ import { IPokeDexByRegion } from "../contracts/pokedexByRegion";
 import { IPokemon } from "../contracts/pokemonByGame";
 import { preventDefault } from "../helper/documentHelper";
 import { PokemonSpriteImage } from "./pokemonSpriteImage";
+import { getBulbaUrl } from "../helper/stringHelper";
 
 interface IProps extends IPokemon {
     meta: IMeta;
@@ -78,11 +79,6 @@ export const PokemonBoxItem: Component<IProps> = (props: IProps) => {
         }
     });
 
-    const getBulbaUrl = (name: string) => {
-        const localName = name.replaceAll('-', '_');
-        return `https://bulbapedia.bulbagarden.net/wiki/${localName}`;
-    }
-
     const onClick = (id: string) => (e: any) => {
         preventDefault(e);
         if (props.mode == LivingDexMode.finding) {
@@ -91,7 +87,8 @@ export const PokemonBoxItem: Component<IProps> = (props: IProps) => {
         if (props.mode == LivingDexMode.tracking) {
             props.addOrRemoveFromOwned([id]);
         }
-        if (props.mode == LivingDexMode.latestGame) {
+        if (props.mode == LivingDexMode.latestGame ||
+            props.mode == LivingDexMode.firstGame) {
             props.showInfoBox(id);
         }
     }
@@ -104,13 +101,15 @@ export const PokemonBoxItem: Component<IProps> = (props: IProps) => {
         // if (props.mode == LivingDexMode.tracking) {
         //     props.addOrRemoveFromShiny([id]);
         // }
-        if (props.mode == LivingDexMode.latestGame) {
+        if (props.mode == LivingDexMode.latestGame ||
+            props.mode == LivingDexMode.firstGame) {
             window.open(getBulbaUrl(props.name), "_blank");
         }
     }
 
     return (
         <a
+            id={`pokemon-${props.id}`}
             href={getBulbaUrl(props.name)}
             onClick={onClick(props.id)}
             onContextMenu={onContextMenu(props.id)}

diff --git a/src/helper/stringHelper.ts b/src/helper/stringHelper.ts
@@ -21,4 +21,11 @@ export const addSpacesForEnum = (orig: string) => {
         result += char;
     }
     return result;
+}
+
+export const getBulbaUrl = (name?: string) => {
+    if (name == null) return 'https://bulbapedia.bulbagarden.net';
+
+    const localName = name.replaceAll('-', '_');
+    return `https://bulbapedia.bulbagarden.net/wiki/${localName}`;
 }
diff --git a/src/scss/_pkmBox.scss b/src/scss/_pkmBox.scss
@@ -16,6 +16,10 @@
 .pkm-box {
     min-height: 350px;
 
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
     .header {
         position: relative;
 
@@ -73,6 +77,7 @@
 }
 
 @keyframes finding-pulse-anim {
+
     0%,
     100% {
         transform: scale(1);
@@ -81,4 +86,4 @@
     50% {
         transform: scale(1.2);
     }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3640,6 +3640,8 @@ @@
                 "0798",
                 "0799",
                 "0800",
+                "0803",
+                "0804",
                 "0805",
                 "0806"
             ]
@@ Expand Down Expand Up / @@ -4720,6 +4722,7 @@ @@
                 "0628",
                 "0629",
                 "0630",
+                "0648",
                 "0650",
                 "0651",
                 "0652",
@@ Expand Down @@