From 9a8a7ac5f449a72e8330d140a05b4ff142d65c52 Mon Sep 17 00:00:00 2001 From: Garrett Vorbeck Date: Sat, 13 Jan 2024 19:48:07 -0500 Subject: [PATCH] Fix for image paths on production --- src/assets/images/classes/imageAssets.tsx | 31 ++++++++ src/assets/images/races/imageAssets.tsx | 33 ++++++++ src/assets/images/spells/imageAssets.tsx | 77 +++++++++++++++++++ .../PageNewCharacter/StepRace/StepRace.tsx | 23 +++--- src/hooks/useImages.ts | 23 +++--- src/support/characterSupport.ts | 1 + src/support/stringSupport.ts | 14 ++++ 7 files changed, 179 insertions(+), 23 deletions(-) create mode 100755 src/assets/images/classes/imageAssets.tsx create mode 100755 src/assets/images/races/imageAssets.tsx create mode 100755 src/assets/images/spells/imageAssets.tsx diff --git a/src/assets/images/classes/imageAssets.tsx b/src/assets/images/classes/imageAssets.tsx new file mode 100755 index 00000000..455a4853 --- /dev/null +++ b/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 }; diff --git a/src/assets/images/races/imageAssets.tsx b/src/assets/images/races/imageAssets.tsx new file mode 100755 index 00000000..88a51221 --- /dev/null +++ b/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 }; diff --git a/src/assets/images/spells/imageAssets.tsx b/src/assets/images/spells/imageAssets.tsx new file mode 100755 index 00000000..b994ca37 --- /dev/null +++ b/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 }; diff --git a/src/components/PageNewCharacter/StepRace/StepRace.tsx b/src/components/PageNewCharacter/StepRace/StepRace.tsx index 71d42157..01630b04 100644 --- a/src/components/PageNewCharacter/StepRace/StepRace.tsx +++ b/src/components/PageNewCharacter/StepRace/StepRace.tsx @@ -65,6 +65,13 @@ const StepRace: React.FC< [character], ); + console.log( + "raceSelector", + raceSelector, + !!raceSelector, + getClassType([raceSelector]), + ); + return ( - {!!raceSelector && - getClassType(character.class) !== "custom" && - getClassType(character.class) !== "none" && ( - - )} + {!!raceSelector && ( + + )} ); }; diff --git a/src/hooks/useImages.ts b/src/hooks/useImages.ts index a0bf22af..e358f0c9 100644 --- a/src/hooks/useImages.ts +++ b/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 }; }; diff --git a/src/support/characterSupport.ts b/src/support/characterSupport.ts index d92148af..cadf888d 100644 --- a/src/support/characterSupport.ts +++ b/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 === "")) diff --git a/src/support/stringSupport.ts b/src/support/stringSupport.ts index 94b5e2a7..f6e84aee 100644 --- a/src/support/stringSupport.ts +++ b/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)";