Add overworld sprites to Safari pages

pokeclicker · Dec 4, 2023 · cfedb58 · cfedb58
1 parent 100c805
commit cfedb58
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/pages/Towns/main.html b/pages/Towns/main.html
@@ -191,6 +191,7 @@ <h2>Safari Encounters</h2>
             <thead>
                 <tr>
                     <th class="text-center">Pokémon</th>
+                    <th class="text-center">Sprite</th>
                     <th class="text-center">Weight</th>
                     <th class="text-center">Environment</th>
                 </tr>
@@ -201,6 +202,14 @@ <h2>Safari Encounters</h2>
                         <img width="48px" class="me-1" data-bind="attr: {src: './pokeclicker/docs/assets/images/pokemon/' + pokemonMap[$data.name].id + '.png'}"/>
                         <a href="#!" class="text-decoration-none" data-bind="text: $data.name, attr: {href: `#!Pokemon/${$data.name}` }"></a>
                     </td>
+                    <td class="align-middle" style="display: flex; justify-content: space-around;">
+                        <div data-bind="style: {
+                            backgroundImage: `url(./pokeclicker/docs/assets/images/dynamic-background/pokemon/${Math.floor(pokemonList.find(p => p.name == $data.name).id).toString().padStart(3, '0')}.png)`,
+                            backgroundSize: '192px',
+                            height: '48px',
+                            width: '48px',
+                        }"></div>
+                    </td>
                     <td class="align-middle" data-bind="text: $data.weight">
                     </td>
                     <td class="align-middle">
@@ -216,6 +225,7 @@ <h2 class="mt-3">Pool of Daily Encounters</h2>
                 <thead>
                     <tr>
                         <th class="text-center">Pokémon</th>
+                        <th class="text-center">Sprite</th>
                         <th class="text-center">Weight</th>
                         <th class="text-center">Environment</th>
                         <th class="text-center">Requirement</th>
@@ -227,6 +237,14 @@ <h2 class="mt-3">Pool of Daily Encounters</h2>
                             <img width="48px" class="me-1" data-bind="attr: {src: './pokeclicker/docs/assets/images/pokemon/' + pokemonMap[$data.name].id + '.png'}"/>
                             <a href="#!" class="text-decoration-none" data-bind="text: $data.name, attr: {href: `#!Pokemon/${$data.name}` }"></a>
                         </td>
+                        <td class="align-middle" style="display: flex; justify-content: space-around;">
+                            <div data-bind="style: {
+                                backgroundImage: `url(./pokeclicker/docs/assets/images/dynamic-background/pokemon/${Math.floor(pokemonList.find(p => p.name == $data.name).id).toString().padStart(3, '0')}.png)`,
+                                backgroundSize: '192px',
+                                height: '48px',
+                                width: '48px',
+                            }"></div>
+                        </td>
                         <td class="align-middle">
                             10
                         </td>