Fix for image paths on production

src/assets/images/classes/imageAssets.tsx

@@ -0,0 +1,31 @@
+import fighter from "./fighter.jpg";
+import paladin from "./paladin.jpg";
+import ranger from "./ranger.jpg";
+import thief from "./thief.jpg";
+import assassin from "./assassin.jpg";
+import barbarian from "./barbarian.jpg";
+import cleric from "./cleric.jpg";
+import druid from "./druid.jpg";
+import illusionist from "./illusionist.jpg";
+import magic_user from "./magic-user.jpg";
+import necromancer from "./necromancer.jpg";
+import scout from "./scout.jpg";
+import spellcrafter from "./spellcrafter.jpg";
+
+const images = {
+  assassin,
+  barbarian,
+  cleric,
+  druid,
+  fighter,
+  illusionist,
+  magic_user,
+  necromancer,
+  paladin,
+  ranger,
+  scout,
+  spellcrafter,
+  thief,
+};
+
+export { images };

src/assets/images/races/imageAssets.tsx

@@ -0,0 +1,33 @@
+import bisren from "./bisren.jpg";
+import canein from "./canein.jpg";
+import chelonian from "./chelonian.jpg";
+import dwarf from "./dwarf.jpg";
+import default_img from "./default.jpg";
+import elf from "./elf.jpg";
+import faun from "./faun.jpg";
+import gnome from "./gnome.jpg";
+import half_elf from "./half-elf.jpg";
+import half_ogre from "./half-ogre.jpg";
+import half_orc from "./half-orc.jpg";
+import halfling from "./halfling.jpg";
+import human from "./human.jpg";
+import phaerim from "./phaerim.jpg";
+
+const images = {
+  bisren,
+  canein,
+  chelonian,
+  dwarf,
+  default_img,
+  elf,
+  faun,
+  gnome,
+  half_elf,
+  half_ogre,
+  half_orc,
+  halfling,
+  human,
+  phaerim,
+};
+
+export { images };

src/assets/images/spells/imageAssets.tsx

@@ -0,0 +1,77 @@
+import alarm from "./alarm.jpg";
+import audible_glamer from "./audible-glamer.jpg";
+import break_restrictions from "./break-restrictions.jpg";
+import call_poltergeist from "./call-poltergeist.jpg";
+import change_self from "./change-self.jpg";
+import charm_person from "./charm-person.jpg";
+import chill from "./chill.jpg";
+import color_spray from "./color-spray.jpg";
+import corpse_servant from "./corpse-servant.jpg";
+import dancing_lights from "./dancing-lights.jpg";
+import decay_flesh from "./decay-flesh.jpg";
+import detect_illusion from "./detect-illusion.jpg";
+import detect_invisible from "./detect-invisible.jpg";
+import detect_magic from "./detect-magic.jpg";
+import enhance_armor from "./enhance-armor.jpg";
+import enhance_weapon from "./enhance-weapon.jpg";
+import floating_disc from "./floating-disc.jpg";
+import gaze_reflection from "./gaze-reflection.jpg";
+import hold_portal from "./hold-portal.jpg";
+import light from "./light.jpg";
+import locate_corpse from "./locate-corpse.jpg";
+import magic_missile from "./magic-missile.jpg";
+import magic_mouth from "./magic-mouth.jpg";
+import mirror_image from "./mirror-image.jpg";
+import phantasmal_image from "./phantasmal-image.jpg";
+import protection_from_evil from "./protection-from-evil.jpg";
+import protection_from_undead from "./protection-from-undead.jpg";
+import read_languages from "./read-languages.jpg";
+// import read_magic from './read-magic.jpg';
+import remove_fear from "./remove-fear.jpg";
+import repair from "./repair.jpg";
+import resist_cold from "./resist-cold.jpg";
+import shield from "./shield.jpg";
+import sleep from "./sleep.jpg";
+import stench from "./stench.jpg";
+import ventriloquism from "./ventriloquism.jpg";
+
+const images = {
+  alarm,
+  audible_glamer,
+  break_restrictions,
+  call_poltergeist,
+  change_self,
+  charm_person,
+  chill,
+  color_spray,
+  corpse_servant,
+  dancing_lights,
+  decay_flesh,
+  detect_illusion,
+  detect_invisible,
+  detect_magic,
+  enhance_armor,
+  enhance_weapon,
+  floating_disc,
+  gaze_reflection,
+  hold_portal,
+  light,
+  locate_corpse,
+  magic_missile,
+  magic_mouth,
+  mirror_image,
+  phantasmal_image,
+  protection_from_evil,
+  protection_from_undead,
+  read_languages,
+  // read_magic,
+  remove_fear,
+  repair,
+  resist_cold,
+  shield,
+  sleep,
+  stench,
+  ventriloquism,
+};
+
+export { images };

src/components/PageNewCharacter/StepRace/StepRace.tsx

@@ -65,6 +65,13 @@ const StepRace: React.FC<
     [character],
   );
 
+  console.log(
+    "raceSelector",
+    raceSelector,
+    !!raceSelector,
+    getClassType([raceSelector]),
+  );
+
   return (
     <Flex vertical className={className} gap={16}>
       <Options
@@ -80,15 +87,13 @@ const StepRace: React.FC<
         selector={raceSelector}
         type="race"
       />
-      {!!raceSelector &&
-        getClassType(character.class) !== "custom" &&
-        getClassType(character.class) !== "none" && (
-          <RaceClassDescription
-            name={raceSelector}
-            description={`${races[raceSelector as RaceNames]?.details
-              ?.description}`}
-          />
-        )}
+      {!!raceSelector && (
+        <RaceClassDescription
+          name={raceSelector}
+          description={`${races[raceSelector as RaceNames]?.details
+            ?.description}`}
+        />
+      )}
     </Flex>
   );
 };

src/hooks/useImages.ts

@@ -1,20 +1,15 @@
-import { toSlugCase } from "@/support/stringSupport";
+import { toSnakeCase } from "@/support/stringSupport";
+import { images as classImages } from "@/assets/images/classes/imageAssets";
+import { images as raceImages } from "@/assets/images/races/imageAssets";
+import { images as spellImages } from "@/assets/images/spells/imageAssets";
 
 export const useImages = () => {
-  const getRaceClassImage = (name: string) => {
-    const classImages = import.meta.glob("@/assets/images/classes/*.jpg");
-    const raceImages = import.meta.glob("@/assets/images/races/*.jpg");
+  const getRaceClassImage = (name: string) =>
+    classImages[toSnakeCase(name) as keyof typeof classImages] ??
+    raceImages[toSnakeCase(name) as keyof typeof raceImages];
 
-    return (
-      classImages[`/src/assets/images/classes/${toSlugCase(name)}.jpg`]?.name ??
-      raceImages[`/src/assets/images/races/${toSlugCase(name)}.jpg`]?.name
-    );
-  };
+  const getSpellImage = (name: string) =>
+    spellImages[toSnakeCase(name) as keyof typeof spellImages];
 
-  const getSpellImage = (name: string) => {
-    const spellImages = import.meta.glob("@/assets/images/spells/*.jpg");
-    return spellImages[`/src/assets/images/spells/${toSlugCase(name)}.jpg`]
-      ?.name;
-  };
   return { getRaceClassImage, getSpellImage };
 };

src/support/characterSupport.ts

@@ -49,6 +49,7 @@ export const classSplit = (characterClass: string | string[]) => {
 
 export const getClassType = (characterClass: string[]) => {
   const classArr = classSplit(characterClass);
+  console.log(classArr);
 
   // NONE
   if (classArr.length === 0 || classArr.every((className) => className === ""))

src/support/stringSupport.ts

@@ -82,6 +82,20 @@ export function toSlugCase(input: string): string {
     .replace(/^-+|-+$/g, "");
 }
 
+export function toSnakeCase(str: string): string {
+  return (
+    str
+      // First, replace camelCase with snake_case
+      .replace(/([A-Z])/g, (letter, index) =>
+        index > 0 ? `_${letter}` : letter,
+      )
+      // Replace spaces and hyphens with underscores
+      .replace(/[\s-]+/g, "_")
+      // Convert to lowercase
+      .toLowerCase()
+  );
+}
+
 export const mobileBreakpoint = "(max-width: 639px)";
 export const tabletBreakpoint = "(min-width: 768px) and (max-width: 1023px)";
 export const desktopBreakpoint = "(min-width: 1024px)";