diff --git a/directory/src/routes/Error.jsx b/directory/src/routes/Error.jsx index 0e5a9e5..7577447 100644 --- a/directory/src/routes/Error.jsx +++ b/directory/src/routes/Error.jsx @@ -75,7 +75,7 @@ export default function Error() { spinePlayer.animationState.addAnimation(0, "Relax", true, 0); } } - }, [voiceOn]) + }, [spinePlayer, voiceOn]) useEffect(() => { voiceOnRef.current = voiceOn diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx index 94219e2..2522e39 100644 --- a/directory/src/routes/Root.jsx +++ b/directory/src/routes/Root.jsx @@ -11,27 +11,25 @@ import { NavLink, useNavigate, ScrollRestoration, - useLocation, } from "react-router-dom"; import classes from '@/scss/root/Root.module.scss' import header from '@/scss/root/header.module.scss' import footer from '@/scss/root/footer.module.scss' import drawer from '@/scss/root/drawer.module.scss' import routes from '@/routes' -import { useConfig } from '@/state/config'; import { useHeader } from '@/state/header'; import { useAppbar } from '@/state/appbar'; import { useI18n, useLanguage, } from '@/state/language' -import { useBackgrounds } from '@/state/background'; import Dropdown from '@/component/dropdown'; import Popup from '@/component/popup'; import ReturnButton from '@/component/return_button'; import Border from '@/component/border'; import CharIcon from '@/component/char_icon'; import ToTopButton from '@/component/totop_button'; +import VERSION from '#/version.json' const currentYear = new Date().getFullYear() @@ -46,8 +44,6 @@ export default function Root() { const { extraArea, } = useAppbar() - const { fetchConfig, fetchVersion } = useConfig() - const { fetchBackgrounds } = useBackgrounds() const headerTabs = useMemo(() => { return ( @@ -74,12 +70,6 @@ export default function Root() { } }, [setCurrentTab, tabs]) - useEffect(() => { - fetchConfig() - fetchVersion() - fetchBackgrounds() - }, [fetchBackgrounds, fetchConfig, fetchVersion]) - return ( <>
@@ -141,7 +131,6 @@ export default function Root() { function FooterElement() { const { i18n } = useI18n() - const { version } = useConfig() const navigate = useNavigate() return useMemo(() => { @@ -177,12 +166,12 @@ function FooterElement() { Spine Runtimes © 2013 - 2019 Esoteric Software LLC Assets © 2017 - {currentYear} Arknights/Hypergryph Co., Ltd Source Code © 2021 - {currentYear} Halyul - Directory @ {version.directory} - Showcase @ {version.showcase} + Directory @ {VERSION.directory} + Showcase @ {VERSION.showcase} ) - }, [i18n, navigate, version.directory, version.showcase]) + }, [i18n, navigate]) } function DrawerDestinations({ toggleDrawer }) { diff --git a/directory/src/routes/path/Changelogs.jsx b/directory/src/routes/path/Changelogs.jsx index 9d06476..47d93b6 100644 --- a/directory/src/routes/path/Changelogs.jsx +++ b/directory/src/routes/path/Changelogs.jsx @@ -1,5 +1,4 @@ import React, { - useState, useEffect, useMemo } from 'react' @@ -8,6 +7,7 @@ import { useHeader } from '@/state/header'; import { useAppbar } from '@/state/appbar'; import useUmami from '@/state/insights' import Border from '@/component/border'; +import CHANGELOGS from '#/changelogs.json' export default function Changelogs() { // eslint-disable-next-line no-unused-vars @@ -22,29 +22,25 @@ export default function Changelogs() { const { setExtraArea, } = useAppbar() - const [changelogs, setChangelogs] = useState([]) useEffect(() => { setTitle('changelogs') setExtraArea([]) setFastNavigation([]) setHeaderIcon(null) - fetch('/_assets/changelogs.json').then(res => res.json()).then(data => { - setChangelogs(data) - }) }, [setExtraArea, setFastNavigation, setHeaderIcon, setTitle]) useEffect(() => { - setTabs(changelogs.map((item) => { + setTabs(CHANGELOGS.map((item) => { return { key: item[0].key } })) - }, [changelogs, setTabs]) + }, [setTabs]) const content = useMemo(() => { return ( - changelogs.map((v) => { + CHANGELOGS.map((v) => { return ( v.map((item) => { return ( @@ -68,7 +64,7 @@ export default function Changelogs() { ) }) ) - }, [changelogs, currentTab]) + }, [currentTab]) return (
diff --git a/directory/src/routes/path/Operator.jsx b/directory/src/routes/path/Operator.jsx index 335e0f3..56c445b 100644 --- a/directory/src/routes/path/Operator.jsx +++ b/directory/src/routes/path/Operator.jsx @@ -17,7 +17,6 @@ import { } from '@/state/language' import { useHeader } from '@/state/header'; import { useAppbar } from '@/state/appbar'; -import { useBackgrounds } from '@/state/background'; import VoiceElement from '@/component/voice'; import useUmami from '@/state/insights' import spine from '!/libs/spine-player' @@ -26,6 +25,7 @@ import Border from '@/component/border'; import { useI18n } from '@/state/language'; import Switch from '@/component/switch'; import { atom, useAtom } from 'jotai' +import BACKGROUNDS from '#/backgrounds.json'; const musicMapping = JSON.parse(import.meta.env.VITE_MUSIC_MAPPING) const getVoiceFoler = (lang) => { @@ -34,7 +34,7 @@ const getVoiceFoler = (lang) => { return `${folderObject.main}/${voiceFolder.name}` } const defaultSpineAnimation = 'Idle' -const backgroundAtom = atom(null) +const backgroundAtom = atom(BACKGROUNDS[0]) const getPartialName = (type, input) => { let part; @@ -80,7 +80,6 @@ export default function Operator() { const { i18n } = useI18n() const [spinePlayer, setSpinePlayer] = useState(null) const [voiceLang, _setVoiceLang] = useState(null) - const { backgrounds } = useBackgrounds() const [currentBackground, setCurrentBackground] = useAtom(backgroundAtom) const [voiceConfig, setVoiceConfig] = useState(null) const [subtitleLang, setSubtitleLang] = useState(null) @@ -114,10 +113,6 @@ export default function Operator() { setFastNavigation([]) }, [setExtraArea, setFastNavigation]) - useEffect(() => { - if (backgrounds.length > 0) setCurrentBackground(backgrounds[0]) - }, [backgrounds, setCurrentBackground]) - useEffect(() => { setSpineData(null) const config = operators.find((item) => item.link === key) @@ -374,7 +369,7 @@ export default function Operator() { el: }, { name: 'backgrounds', - options: backgrounds.map((item) => { + options: BACKGROUNDS.map((item) => { return { name: item, onClick: () => { diff --git a/directory/src/state/background.js b/directory/src/state/background.js deleted file mode 100644 index 653983a..0000000 --- a/directory/src/state/background.js +++ /dev/null @@ -1,19 +0,0 @@ -import { useCallback } from 'react'; -import { atom, useAtom } from 'jotai'; - -const backgroundsAtom = atom([]); - -export function useBackgrounds() { - const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom); - - const fetchBackgrounds = useCallback(async () => { - const res = await fetch('/_assets/backgrounds.json') - const data = await res.json() - setBackgrounds(data) - }, [setBackgrounds]) - - return { - backgrounds, - fetchBackgrounds - }; -} \ No newline at end of file diff --git a/directory/src/state/config.js b/directory/src/state/config.js index 47a6e11..d3c2d79 100644 --- a/directory/src/state/config.js +++ b/directory/src/state/config.js @@ -1,31 +1,14 @@ -import { useCallback } from 'react'; -import { atom, useAtom } from 'jotai'; +import CONFIG from '#/directory.json'; -const configAtom = atom([]); -const operatorsAtom = atom([]); -const versionAtom = atom({}); +let operators = [] +CONFIG.operators.forEach((item) => { + operators = [...operators, ...item] +}); +const OPERATORS = operators; export function useConfig() { - const [config, setConfig] = useAtom(configAtom); - const [version, setVersion] = useAtom(versionAtom); - const [operators, setOperators] = useAtom(operatorsAtom); - - const fetchConfig = useCallback(async () => { - const res = await fetch('/_assets/directory.json') - const data = await res.json() - setConfig(data); - let operatorsList = [] - data.operators.forEach((item) => { - operatorsList = [...operatorsList, ...item] - }) - setOperators(operatorsList) - }, [setConfig, setOperators]) - - const fetchVersion = useCallback(async () => { - const res = await fetch('/_assets/version.json') - const data = await res.json() - setVersion(data); - }, [setVersion]) - - return { config, version, operators, fetchConfig, fetchVersion }; + const config = CONFIG; + const operators = OPERATORS; + + return { config, operators }; }