Refactor data loading logic: replace dynamic imports with fetch, update skills type, and integrate vite-plugin-static-copy for JSON assets.

package-lock.json

@@ -26,7 +26,8 @@
         "globals": "^16.2.0",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.34.1",
-        "vite": "^7.0.0"
+        "vite": "^7.0.0",
+        "vite-plugin-static-copy": "^3.1.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2003,6 +2004,20 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2016,6 +2031,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2121,6 +2149,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/chownr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -2606,6 +2672,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fs-extra": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+      "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2716,6 +2797,19 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2831,6 +2925,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3237,6 +3344,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3287,6 +3404,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.3.tgz",
+      "integrity": "sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3439,6 +3569,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3756,6 +3899,16 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -3871,6 +4024,26 @@
         }
       }
     },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.1.0.tgz",
+      "integrity": "sha512-ONFBaYoN1qIiCxMCfeHI96lqLza7ujx/QClIXp4kEULUbyH2qLgYoaL8JHhk3FWjSB4TpzoaN3iMCyCFldyXzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "fs-extra": "^11.3.0",
+        "p-map": "^7.0.3",
+        "picocolors": "^1.1.1",
+        "tinyglobby": "^0.2.14"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",

package.json

@@ -28,6 +28,7 @@
     "globals": "^16.2.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.34.1",
-    "vite": "^7.0.0"
+    "vite": "^7.0.0",
+    "vite-plugin-static-copy": "^3.1.0"
   }
 }

src/App.tsx

@@ -1,39 +1,39 @@
 import './App.css'
 import Main from "./modules/main/components/Main.tsx";
 import Footer from "./modules/footer/components/Footer.tsx";
-import {useEffect, useState} from "react";
+import {useState} from "react";
 import type {CharacterData} from "./types/CharacterJson.ts";
 import Header from "./modules/header/components/Header.tsx";
 
 function App() {
   const [jsonData, setJsonData] = useState<CharacterData | null>(null);
-  const [loading, setLoading] = useState(true);
+  // const [loading, setLoading] = useState(true);
   
-  useEffect(() => {
+  // useEffect(() => {
-    const loadData = async () => {
+  //   const loadData = async () => {
-      try {
+  //     try {
-        const response = await fetch('/data/Faelyn Eichenahauch.json');
+  //       const response = await fetch('/data/Faelyn Eichenahauch.json');
-        if (!response.ok) {
+  //       if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
+  //         throw new Error(`HTTP error! status: ${response.status}`);
-        }
+  //       }
-        const data = await response.json();
+  //       const data = await response.json();
-        setJsonData(data);
+  //       setJsonData(data);
-      } catch (error) {
+  //     } catch (error) {
-        console.error('Error loading JSON file:', error);
+  //       console.error('Error loading JSON file:', error);
-      } finally {
+  //     } finally {
-        setLoading(false);
+  //       setLoading(false);
-      }
+  //     }
-    };
+  //   };
-    
+  //
-    loadData();
+  //   loadData();
-  }, []);
+  // }, []);
   
   const handleFileLoad = (data: CharacterData) => {
     setJsonData(data);
-    setLoading(false);
+    // setLoading(false);
   };
   
-  if (loading) return <div>Loading...</div>;
+  // if (loading) return <div>Loading...</div>;
   
   if (!jsonData) return (
     <>

src/types/CharacterJson.ts

@@ -1,5 +1,3 @@
-import type {Skills} from "./Skill.ts";
-
 export interface AttributeValue {
   id: string;
   value: number;
@@ -95,7 +93,7 @@ export interface CharacterData {
   pers: PersonalDetails;
   attr: Attributes;
   activatable: Activatables;
-  talents: Skills;
+  talents: Record<string, number>;
   ct: CombatTechniques;
   spells: Spells;
   cantrips: string[];

src/utils/loaders.ts

@@ -48,7 +48,7 @@ import type {AnimistForce} from '../types/AnimistForce';
 // import type { Reache } from '../types/Reache';
 // import type { RogueSpell } from '../types/RogueSpell';
 // import type { SkillGroup } from '../types/SkillGroup';
-import type {Skill, Skills} from '../types/Skill';
+import type {Skill} from '../types/Skill';
 // import type { SocialStatuse } from '../types/SocialStatuse';
 // import type { SpecialAbilitie } from '../types/SpecialAbilitie';
 // import type { SpecialAbilityGroup } from '../types/SpecialAbilityGroup';
@@ -67,12 +67,11 @@ import type {Skill, Skills} from '../types/Skill';
  */
 async function loadData<T>(fileName: string): Promise<T[]> {
   try {
-    // Ensure proper file extension
+    const response = await fetch(`./database/${fileName}`);
-    const fileNameWithExt = fileName.endsWith('.json') ? fileName : `${fileName}.json`;
+    if (!response.ok) {
-    const module = await import(`../assets/database/${fileNameWithExt}`);
+      throw new Error(`Failed to load ${fileName}: ${response.statusText}`);
-    
+    }
-    // Access the default export or named export
+    const data = await response.json();
-    const data = module.default || module;
     
     // Validate it's an array
     if (!Array.isArray(data)) {
@@ -432,9 +431,8 @@ export async function loadSkillWithValue(id: string, value: number): Promise<Ski
 }
 
 // Load multiple skills with values
-export async function loadSkillsWithValues(talents: Skills): Promise<SkillWithValue[]> {
+export async function loadSkillsWithValues(talents: Record<string, number>): Promise<SkillWithValue[]> {
   const skillIds = Object.keys(talents);
-  // @ts-ignore
   const promises = skillIds.map((id) => loadSkillWithValue(id, talents[id]));
   const skills = await Promise.all(promises);
   

vite.config.ts

@@ -1,12 +1,18 @@
 import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from "@tailwindcss/vite";
+import {viteStaticCopy} from "vite-plugin-static-copy";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
+    viteStaticCopy({
+      targets: [
+        {src: 'src/assets/database/*.json', dest: 'database'},
+      ],
+    })
   ],
   base: './',
   build: {