From 7f2cbf1da7a85426934fbfefffe4524ab401c19c Mon Sep 17 00:00:00 2001 From: Xin Feng <126309503+danielxfeng@users.noreply.github.com> Date: Thu, 4 Sep 2025 23:33:13 +0300 Subject: [PATCH 1/3] Main App is implemented --- src/App.tsx | 39 +++++++++++++++++++++++++++++++-- src/components/Footer.tsx | 2 +- src/components/Introduction.tsx | 18 +++++++++++++++ src/locale.ts | 27 +++++++++++++++++++++-- 4 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 src/components/Introduction.tsx diff --git a/src/App.tsx b/src/App.tsx index ced806e..64893b6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,42 @@ +import useLang from "@/lib/hooks/useLang"; +import { translations } from "@/locale"; +import Introduction from "@/components/Introduction"; +import { Button } from "@/components/ui/button"; + function App() { + const { currLang } = useLang(); return ( -
-

Title

+
+

+ {translations[currLang].title} +

+

{translations[currLang].subtitle}

+ +
+ + + + + + +
); } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 05e64f4..3e1af42 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,5 +1,5 @@ import useLang from "@/lib/hooks/useLang"; -import translations from "@/locale"; +import { translations } from "@/locale"; import { SiDiscord, SiTelegram } from "react-icons/si"; // TODO: plz update the links diff --git a/src/components/Introduction.tsx b/src/components/Introduction.tsx new file mode 100644 index 0000000..c8b684c --- /dev/null +++ b/src/components/Introduction.tsx @@ -0,0 +1,18 @@ +import useLang from "@/lib/hooks/useLang"; +import { transIntro, translations } from "@/locale"; + +const Introduction = () => { + const { currLang } = useLang(); + return ( +
+

{translations[currLang].features}:

+ +
+ ); +}; + +export default Introduction; diff --git a/src/locale.ts b/src/locale.ts index 41a58f1..73919bd 100644 --- a/src/locale.ts +++ b/src/locale.ts @@ -1,13 +1,36 @@ import type { Lang } from "@/lib/stores/langStore"; -type TranslationKey = "developedBy" | "title"; +type TranslationKey = + | "developedBy" + | "title" + | "subtitle" + | "webDemo" + | "download" + | "features"; const translations: Record> = { en: { developedBy: "Developed with ❤️ by", title: "Fallout 2 Community Edition", + subtitle: "A fully working re-implementation of Fallout 2", + webDemo: "Try in browser", + download: "Download", + features: "Features", }, }; -export default translations; +const transIntro: Record = { + en: [ + "High resolution support", + "Increased pathfinding nodes 5x for more accurate pathfinding", + "Ctrl-click to quickly move items when bartering, looting, or stealing", + "Press 'a' to select all when choosing item quantity", + "Press 'a' to Take All when looting", + "When bartering, caps default to the right amount to balance the trade (if possible)", + "Music continues playing between maps (requires config)", + "Auto open doors (requires config)", + ], +}; + +export { transIntro, translations }; export type { TranslationKey }; From d4ab14b1ac38bff5126c7aa6d527cc9c73c0926b Mon Sep 17 00:00:00 2001 From: Xin Feng <126309503+danielxfeng@users.noreply.github.com> Date: Fri, 5 Sep 2025 19:19:06 +0300 Subject: [PATCH 2/3] fix: correct language identifier from "sys" to "System" in langStore and useLang hooks --- src/lib/hooks/useLang.ts | 4 ++-- src/lib/stores/langStore.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/hooks/useLang.ts b/src/lib/hooks/useLang.ts index b823200..2d36e1b 100644 --- a/src/lib/hooks/useLang.ts +++ b/src/lib/hooks/useLang.ts @@ -8,12 +8,12 @@ import { useEffect, useMemo } from "react"; const getLangFromSys = (): Lang => { const navLang = navigator.language; - const langs = SupportedLangs.filter((l) => l != "sys"); + const langs = SupportedLangs.filter((l) => l != "System"); return langs.find((l) => navLang.startsWith(l)) || "en"; }; const resolveLang = (lang: LangWithSys): Lang => { - return lang === "sys" ? getLangFromSys() : lang; + return lang === "System" ? getLangFromSys() : lang; }; const useLang = () => { diff --git a/src/lib/stores/langStore.ts b/src/lib/stores/langStore.ts index f6babc7..c103a04 100644 --- a/src/lib/stores/langStore.ts +++ b/src/lib/stores/langStore.ts @@ -1,10 +1,10 @@ import { atomWithStorage } from "jotai/utils"; -const SupportedLangs = ["sys", "en"] as const; +const SupportedLangs = ["System", "en"] as const; type LangWithSys = (typeof SupportedLangs)[number]; -type Lang = Exclude; +type Lang = Exclude; -const langAtom = atomWithStorage("lang", "sys"); +const langAtom = atomWithStorage("lang", "System"); export default langAtom; From 0c13c41dfbdb4e9167bca6eb6ebf035083a90be8 Mon Sep 17 00:00:00 2001 From: Xin Feng <126309503+danielxfeng@users.noreply.github.com> Date: Fri, 5 Sep 2025 20:26:24 +0300 Subject: [PATCH 3/3] feat: add ScrollArea component and integrate new fonts in index.html --- index.html | 6 ++++ package.json | 1 + pnpm-lock.yaml | 38 +++++++++++++++++++++ src/App.tsx | 14 ++++---- src/components/Footer.tsx | 2 +- src/components/Header.tsx | 2 +- src/components/Introduction.tsx | 19 +++++++---- src/components/LangToggle.tsx | 2 +- src/components/ui/scroll-area.tsx | 56 +++++++++++++++++++++++++++++++ src/index.css | 21 ++++++++---- src/locale.ts | 2 +- 11 files changed, 141 insertions(+), 22 deletions(-) create mode 100644 src/components/ui/scroll-area.tsx diff --git a/index.html b/index.html index d0acdcb..ae9f968 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,12 @@ Fallout 2 Community Edition + + +
diff --git a/package.json b/package.json index 3b0977a..243cfb6 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slot": "^1.2.3", "@tailwindcss/vite": "^4.1.12", "class-variance-authority": "^0.7.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ead9f0f..b6ca4b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@radix-ui/react-dropdown-menu': specifier: ^2.1.16 version: 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-scroll-area': + specifier: ^1.2.10 + version: 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) '@radix-ui/react-slot': specifier: ^1.2.3 version: 1.2.3(@types/react@19.1.12)(react@19.1.1) @@ -434,6 +437,9 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@radix-ui/number@1.1.1': + resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==} + '@radix-ui/primitive@1.1.3': resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==} @@ -625,6 +631,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-scroll-area@1.2.10': + resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.2.3': resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==} peerDependencies: @@ -2070,6 +2089,8 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.19.1 + '@radix-ui/number@1.1.1': {} + '@radix-ui/primitive@1.1.3': {} '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': @@ -2253,6 +2274,23 @@ snapshots: '@types/react': 19.1.12 '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + dependencies: + '@radix-ui/number': 1.1.1 + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + react-dom: 19.1.1(react@19.1.1) + optionalDependencies: + '@types/react': 19.1.12 + '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) diff --git a/src/App.tsx b/src/App.tsx index 64893b6..22f351b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,27 +7,29 @@ function App() { const { currLang } = useLang(); return (
-

+

{translations[currLang].title}

-

{translations[currLang].subtitle}

+

+ {translations[currLang].subtitle} +

-
+
{ const { currLang } = useLang(); return (