From 8f09b01851df47c043aada06443bc9ce75dd4bc3 Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Sun, 8 Oct 2023 02:01:20 -0400 Subject: [PATCH] feat(directory): added ability to show if any new operator is available --- directory/src/i18n.json | 4 ++++ directory/src/routes/Root.jsx | 6 +++++ directory/src/routes/path/Home.jsx | 27 ++++++++++++++++++++++- directory/src/scss/_page_base.scss | 28 +++++++++++++----------- directory/src/scss/home/Home.module.scss | 27 ++++++++++++++++++++++- directory/src/state/config.js | 18 ++++++++++++++- 6 files changed, 94 insertions(+), 16 deletions(-) diff --git a/directory/src/i18n.json b/directory/src/i18n.json index 7e99087..759e463 100644 --- a/directory/src/i18n.json +++ b/directory/src/i18n.json @@ -154,6 +154,10 @@ "search_by_name": { "zh-CN": "名字搜索", "en-US": "Search by Name" + }, + "new_op_wait_to_update": { + "zh-CN": "个新干员等待更新", + "en-US": "New Operator(s) Wait to Update" } } } \ No newline at end of file diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx index 6fd5871..e5ac65f 100644 --- a/directory/src/routes/Root.jsx +++ b/directory/src/routes/Root.jsx @@ -17,6 +17,7 @@ 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 { @@ -43,6 +44,7 @@ export default function Root() { const { extraArea, } = useAppbar() + const { fetchOfficalUpdate } = useConfig() const headerTabs = useMemo(() => { return ( @@ -69,6 +71,10 @@ export default function Root() { } }, [setCurrentTab, tabs]) + useEffect(() => { + fetchOfficalUpdate() + }, [fetchOfficalUpdate]) + return ( <>
diff --git a/directory/src/routes/path/Home.jsx b/directory/src/routes/path/Home.jsx index 76b8264..062b1d0 100644 --- a/directory/src/routes/path/Home.jsx +++ b/directory/src/routes/path/Home.jsx @@ -10,6 +10,7 @@ import { } from "react-router-dom"; import classes from '@/scss/home/Home.module.scss' import { useConfig } from '@/state/config'; +import { useI18n } from '@/state/language'; import { useLanguage } from '@/state/language' @@ -37,7 +38,8 @@ export default function Home() { setHeaderIcon, setFastNavigation } = useHeader() - const { config, operators } = useConfig() + const { config, operators, officalUpdate } = useConfig() + const { i18n } = useI18n() const [content, setContent] = useState([]) const [voiceOn] = useAtom(voiceOnAtom) const [voiceSrc, setVoiceSrc] = useState(null) @@ -163,6 +165,29 @@ export default function Home() { return (
+ { + officalUpdate.length > operators.length && ( +
+
+
+
+
{officalUpdate.length - operators.length} {i18n("new_op_wait_to_update")}
+ {officalUpdate[officalUpdate.latest].map((entry, index) => { + return ( +
+ {`${i18n(entry.type)}: ${entry.codename[language]}`} +
+ ) + })} +
+ +
+
{officalUpdate.latest}
+
+ +
+ ) + } { content.map((v) => { const length = v.filter((v) => isShown(v.type)).length diff --git a/directory/src/scss/_page_base.scss b/directory/src/scss/_page_base.scss index f6b8a58..95f64db 100644 --- a/directory/src/scss/_page_base.scss +++ b/directory/src/scss/_page_base.scss @@ -1,3 +1,16 @@ +.date { + margin: 1.5rem; + font-family: "Bender", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", + "Noto Sans", sans-serif; + font-weight: bold; + text-align: right; + color: var(--date-color); + font-size: 1.5rem; + letter-spacing: 0.1rem; + flex: auto; + user-select: none; +} + .group { padding: 1rem; display: flex; @@ -5,18 +18,6 @@ flex-wrap: wrap; user-select: none; - .date { - margin: 1.5rem; - font-family: "Bender", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif; - font-weight: bold; - text-align: right; - color: var(--date-color); - font-size: 1.5rem; - letter-spacing: 0.1rem; - flex: auto; - user-select: none; - } - .item { position: relative; cursor: pointer; @@ -117,7 +118,8 @@ color: var(--secondary-text-color); .text { font-size: 0.75rem; - font-family: "Geometos", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif; + font-family: "Geometos", "Noto Sans SC", "Noto Sans JP", + "Noto Sans KR", "Noto Sans", sans-serif; margin-top: 1rem; } } diff --git a/directory/src/scss/home/Home.module.scss b/directory/src/scss/home/Home.module.scss index ab3ad40..5bafdc7 100644 --- a/directory/src/scss/home/Home.module.scss +++ b/directory/src/scss/home/Home.module.scss @@ -1 +1,26 @@ -@use '@/scss/_page_base.scss'; \ No newline at end of file +@use '@/scss/_page_base.scss'; + +.offical-update { + flex-direction: column; + align-items: stretch; + padding: 1rem; + + .info { + display: flex; + flex-direction: column; + align-items: flex-start; + padding-left: 1rem; + word-break: break-word; + margin-top: 1.25rem; + .content { + font-size: 1.5rem; + .text { + padding-bottom: 1rem; + } + } + .list { + display: list-item; + margin-left: 2.5rem; + } + } +} \ No newline at end of file diff --git a/directory/src/state/config.js b/directory/src/state/config.js index c87c001..b048643 100644 --- a/directory/src/state/config.js +++ b/directory/src/state/config.js @@ -1,4 +1,8 @@ import CONFIG from '@/_directory.json'; +import { useCallback } from 'react'; +import { atom, useAtom } from 'jotai'; + +const officalUpdateAtom = atom({}); let operators = [] CONFIG.operators.forEach((item) => { @@ -9,6 +13,18 @@ const OPERATORS = operators; export function useConfig() { const config = CONFIG; const operators = OPERATORS; + const [officalUpdate, setOfficalUpdate] = useAtom(officalUpdateAtom); - return { config, operators }; + const fetchOfficalUpdate = useCallback(async () => { + const res = await fetch('https://raw.githubusercontent.com/Halyul/aklive2d/main/offical_update.json') + const data = await res.json().catch((e) => { + console.error(e) + return { + length: 0 + } + }) + setOfficalUpdate(data); + }, [setOfficalUpdate]) + + return { config, operators, officalUpdate, fetchOfficalUpdate }; }