Added Image Component.

Azenris · Nov 5, 2023 · 79873fc · 79873fc
1 parent 7fdbaab
commit 79873fc
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 25 deletions.
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -0,0 +1,29 @@
+
+export type ImageProps = {
+  key?: string;
+  className?: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  loading?: 'eager' | 'lazy' | undefined;
+  title?: string;
+};
+
+export function Image({ key, className, src, alt, width, height, loading, title }: ImageProps) {
+
+  const fullSource : string = `${import.meta.env.BASE_URL}${src}`;
+
+  return (
+    <img
+      key={key}
+      className={className}
+      src={fullSource}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      title={title}
+    />
+  );
+}
diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
@@ -1,6 +1,7 @@
 import { ElementNames } from "../data/elements";
 import { get_item } from "../data/items";
 import { get_move } from "../data/moves";
+import { Image } from "./Image";
 
 export type ItemCardProps = {
   itemID: number;
@@ -32,7 +33,7 @@ export function ItemCard({ itemID, clicked }: ItemCardProps) {
         )}
       </div>
       <div className="item-card-image-block">
-        <img
+        <Image
           className="item-card-image"
           src={item.img}
           alt={item.name}

diff --git a/src/components/MoveCard.tsx b/src/components/MoveCard.tsx
@@ -1,5 +1,6 @@
 import { itemDB } from "../data/items";
 import { get_move } from "../data/moves";
+import { Image } from "./Image";
 
 export type MoveCardProps = {
   moveID: number;
@@ -30,7 +31,7 @@ export function MoveCard({ moveID, clicked }: MoveCardProps) {
         )}
       </div>
       <div className="move-card-image-block">
-        <img
+        <Image
           className="move-card-image"
           src={move.img}
           alt={move.name}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,5 @@
 import { NavLink, useLocation } from "react-router-dom";
+import { Image } from "./Image";
 
 type MenuItem = {
   path: string;
@@ -10,37 +11,37 @@ const menuItems: MenuItem[] = [
   {
     path: "/",
     name: "Home",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/pokemon",
     name: "POKéMON",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/collection",
     name: "Collection",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/item",
     name: "Items",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/tm",
     name: "HMs / TMs",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/move",
     name: "Moves",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   },
   {
     path: "/about",
     name: "About",
-    icon: `${import.meta.env.BASE_URL}/imgs/pokeball-0.png`
+    icon: "/imgs/pokeball-0.png"
   }
 ];
 
@@ -54,7 +55,7 @@ export function Navbar() {
           return (
             <li key={menu.path} className={location == menu.path ? "active" : ""}>
               <NavLink to={menu.path}>
-                <img src={menu.icon} alt={menu.name}></img>
+                <Image src={menu.icon} alt={menu.name} width={12} height={12} />
                 {' '}
                 {menu.name}
               </NavLink>

diff --git a/src/components/PokemonCard.tsx b/src/components/PokemonCard.tsx
@@ -1,5 +1,6 @@
 import { PokemonElements } from "./PokemonElement";
 import { PokemonGameVersionNames, PokemonAvailableGameVersionNames, get_pokemon } from "../data/pokemon";
+import { Image } from "./Image";
 
 export type PokemonSelectionProps = {
   pokemonID: number;
@@ -26,22 +27,22 @@ export function PokemonCard({ pokemonID, active, forceInPokeball, clicked }: Pok
       <div>
         {pokemon.available.map((game) => {
           return (
-            <img
+            <Image
               key={game}
               className="poke-card-ball"
               src={`/imgs/pokeball-${game}.png`}
               alt={PokemonGameVersionNames[game]}
               title={PokemonAvailableGameVersionNames[game]}
-              width="24"
-              height="24"
+              width={24}
+              height={24}
               loading="lazy"
             />
           );
         })}
       </div>
       <div className={`poke-card-name ${activeClass}`}>{pokemon.name}</div>
       <div className={`poke-card-image-block ${activeClass} ${forceInPokeball ? "pokeball" : ""}`}>
-        <img className={`poke-card-image ${activeClass}`} src={pokemon.imgGBC} alt={pokemon.name} width={pokemon.imgW} height={pokemon.imgH} />
+        <Image className={`poke-card-image ${activeClass}`} src={pokemon.imgGBC} alt={pokemon.name} width={pokemon.imgW} height={pokemon.imgH} />
       </div>
       <PokemonElements types={pokemon.types} />
       <div className={`poke-card-id ${activeClass}`}>#{pokemon.id}</div>

diff --git a/src/components/itemdex/ItemdexPicture.tsx b/src/components/itemdex/ItemdexPicture.tsx
@@ -1,4 +1,5 @@
 import { Item } from "../../data/items";
+import { Image } from "../Image";
 
 export type ItemdexPictureProps = {
   item: Item;
@@ -15,7 +16,7 @@ export function ItemdexPicture({ item }: ItemdexPictureProps) {
       <td>
         <div className="item-image-header">
           <div className="item-image-block-big">
-              <img className="item-image-big" src={item.img} alt={item.name} width={item.imgW * 3} height={item.imgH * 3} />
+              <Image className="item-image-big" src={item.img} alt={item.name} width={item.imgW * 3} height={item.imgH * 3} />
           </div>
         </div>
       </td>

diff --git a/src/components/movedex/movedexPicture.tsx b/src/components/movedex/movedexPicture.tsx
@@ -1,4 +1,5 @@
 import { Move } from "../../data/moves";
+import { Image } from "../Image";
 
 export type MovedexPictureProps = {
   move: Move;
@@ -15,7 +16,7 @@ export function MovedexPicture({ move }: MovedexPictureProps) {
       <td>
         <div className="move-image-header">
           <div className="move-image-block-big">
-              <img className="move-image-big" src={move.img} alt={move.name} width={move.imgW * 3} height={move.imgH * 3} />
+              <Image className="move-image-big" src={move.img} alt={move.name} width={move.imgW * 3} height={move.imgH * 3} />
           </div>
         </div>
       </td>

diff --git a/src/components/pokedex/PokedexEvolutions.tsx b/src/components/pokedex/PokedexEvolutions.tsx
@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import { EvolveTo, Pokemon, PokemonEvolutionType, get_pokemon, get_pokemon_base, get_pokemon_evolution_index, get_pokemon_name_span } from "../..//data/pokemon";
 import { get_item, get_item_id_name_span, get_item_name_span } from "../../data/items";
+import { Image } from "../Image";
 
 type PokedexEvolutionPokemonProps = {
   pokemon: Pokemon;
@@ -13,7 +14,7 @@ function PokedexEvolutionPokemon({ pokemon }: PokedexEvolutionPokemonProps) {
         <tr>
           <td>
             <Link to={`/pokemon/${pokemon.id}`} className="pokedex-evolution-image">
-              <img
+              <Image
                 className="pokemon-image"
                 src={pokemon.imgGBC}
                 alt={pokemon.name}
@@ -35,7 +36,7 @@ function PokedexEvolutionPokemon({ pokemon }: PokedexEvolutionPokemonProps) {
 
 function PokedexEvolutionArrow() {
   return (
-    <img
+    <Image
       className="pokedex-evolution-requirement-arrow"
       src="/imgs/evolution_arrow.png"
       alt="→"
@@ -66,7 +67,7 @@ function PokedexEvolutionRequirement({ pokemon, requirement }: PokedexEvolutionR
             <tbody>
               <tr>
                 <td>
-                  <img
+                  <Image
                     src="/imgs/evolution_trade.png"
                     alt="Trade"
                     width={26}
@@ -88,7 +89,7 @@ function PokedexEvolutionRequirement({ pokemon, requirement }: PokedexEvolutionR
             <tbody>
               <tr>
                 <td>
-                  <img
+                  <Image
                     src="/imgs/evolution_levelup.png"
                     alt="LevelUp"
                     width={26}
@@ -111,7 +112,7 @@ function PokedexEvolutionRequirement({ pokemon, requirement }: PokedexEvolutionR
             <tr>
               <td>
                 <Link to={`/item/${item.id}`}>
-                  <img
+                  <Image
                     src={item.img}
                     alt={item.name}
                     width={item.imgW}

diff --git a/src/components/pokedex/PokedexGameAvailability.tsx b/src/components/pokedex/PokedexGameAvailability.tsx
@@ -1,4 +1,5 @@
 import { Pokemon, PokemonAvailableGameVersionNames, PokemonGameVersionNames } from "../../data/pokemon";
+import { Image } from "../Image";
 
 export type PokedexGameAvailabilityProps = {
   pokemon: Pokemon;
@@ -25,13 +26,13 @@ export function PokedexGameAvailability({ pokemon }: PokedexGameAvailabilityProp
                 <tr key={game}>
                   <td>
                     <div className="pokedex-game-availability">
-                      <img
+                      <Image
                         className="poke-card-ball"
                         src={`/imgs/pokeball-${game}.png`}
                         alt={PokemonGameVersionNames[game]}
                         title={PokemonAvailableGameVersionNames[game]}
-                        width="24"
-                        height="24"
+                        width={24}
+                        height={24}
                       />
                       {PokemonGameVersionNames[game]}
                     </div>

diff --git a/src/components/pokedex/PokedexPicture.tsx b/src/components/pokedex/PokedexPicture.tsx
@@ -1,4 +1,5 @@
 import { Pokemon } from "../../data/pokemon";
+import { Image } from "../Image";
 
 export type PokedexPictureProps = {
   pokemon: Pokemon;
@@ -15,7 +16,7 @@ export function PokedexPicture({ pokemon }: PokedexPictureProps) {
       <td>
         <div className="pokemon-image-header">
           <div className="pokemon-image-block-big">
-              <img
+              <Image
                 className="pokemon-image-big"
                 src={pokemon.imgGBC}
                 alt={pokemon.name}