feat: use new db site, cache requests to avoid repeated unneeded fetch calls

app/characters/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useInventoryStore } from '@/store/useInventoryStore';
 
 import { isKiller } from '../../lib/utils';
+import { DB_BASE_URL, fetchCharacters } from '../../lib/db';
 
 import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Characters.module.css';
@@ -16,7 +17,7 @@ type Character = {
 
 const getIconUrl = (iconFilePath: string) => {
     const fileName = iconFilePath.split('/').pop()?.split('.')[0];
-    return `/icons/character-icons/${fileName}.png`;
+    return `${DB_BASE_URL}/icons/character-icons/${fileName}.png`;
 };
 
 type RoleFilter = 'all' | 'survivors' | 'killers';
@@ -29,10 +30,7 @@ export default function CharactersPage() {
     const [role, setRole] = useState<RoleFilter>('all');
 
     useEffect(() => {
-        fetch('/data/characters.json')
-            .then(r => r.json())
-            .then(setCharacters)
-            .catch(() => []);
+        fetchCharacters().then(setCharacters);
     }, []);
 
     const filtered = useMemo(() => {