From 5f49a961abddcf71691791861292beb86a6be00d Mon Sep 17 00:00:00 2001 From: Alexis LUCAS Date: Wed, 5 Feb 2025 12:01:30 +0100 Subject: [PATCH 1/4] KB-17: Avoid flashes on dark mode - Added theme.js and theme.css to style body properly - Added files to each html file - Disabled ESLint for .js files --- .eslintrc.yml | 5 ++- apps/front/en/index.html | 84 +++++++++++++++++++++++------------- apps/front/fr/index.html | 84 +++++++++++++++++++++++------------- apps/front/index.html | 78 +++++++++++++++++++++------------ apps/front/theme.css | 11 +++++ apps/front/theme.js | 12 ++++++ apps/front/zh-tw/index.html | 86 ++++++++++++++++++++++++------------- 7 files changed, 243 insertions(+), 117 deletions(-) create mode 100644 apps/front/theme.css create mode 100644 apps/front/theme.js diff --git a/.eslintrc.yml b/.eslintrc.yml index 1906383..61604a2 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -13,7 +13,10 @@ plugins: - react - react-hooks - import -overrides: [] +overrides: + - + # quick and dirty way to disable typescript eslint on .js file + files: *.js parserOptions: ecmaVersion: latest sourceType: module diff --git a/apps/front/en/index.html b/apps/front/en/index.html index 93fdc0a..985c9c5 100644 --- a/apps/front/en/index.html +++ b/apps/front/en/index.html @@ -1,32 +1,58 @@ - + + + + + + + + + + + + + Knucklebones | From Cult of the Lamb + + + + + + + + + + + - - - - - - - - - - - - Knucklebones | From Cult of the Lamb - - - - - - - - - - - - -
- - - + + +
+ + diff --git a/apps/front/fr/index.html b/apps/front/fr/index.html index 6a802dd..d275b52 100644 --- a/apps/front/fr/index.html +++ b/apps/front/fr/index.html @@ -1,32 +1,58 @@ - + + + + + + + + + + + + + Knucklebones | De Cult of the Lamb + + + + + + + + + + + - - - - - - - - - - - - Knucklebones | De Cult of the Lamb - - - - - - - - - - - - -
- - - + + +
+ + diff --git a/apps/front/index.html b/apps/front/index.html index dc3debb..2124bcb 100644 --- a/apps/front/index.html +++ b/apps/front/index.html @@ -1,31 +1,53 @@ - + + + + + + + + + + + + Knucklebones | From Cult of the Lamb + + + + + + + + + + + - - - - - - - - - - - Knucklebones | From Cult of the Lamb - - - - - - - - - - - - -
- - - + + +
+ + diff --git a/apps/front/theme.css b/apps/front/theme.css new file mode 100644 index 0000000..7f29cc1 --- /dev/null +++ b/apps/front/theme.css @@ -0,0 +1,11 @@ +/* + allow to quickly style the index.html before the full app loads, and avoid + flashes during refreshes +*/ +body.dark { + /* bg-slate-900 */ + background-color: #020617; + min-height: 100vh; + margin: 0; + padding: 0; +} diff --git a/apps/front/theme.js b/apps/front/theme.js new file mode 100644 index 0000000..17a15d9 --- /dev/null +++ b/apps/front/theme.js @@ -0,0 +1,12 @@ +/* + allow to quickly style the index.html before the full app loads, and avoid + flashes during refreshes. This file should be imported right after `body`. +*/ +const shouldUseDarkTheme = + localStorage.theme === 'dark' || + (localStorage.theme === 'default' && + window.matchMedia('(prefers-color-scheme: dark)').matches) + +if (shouldUseDarkTheme) { + document.body.classList.add('dark') +} diff --git a/apps/front/zh-tw/index.html b/apps/front/zh-tw/index.html index f0b4153..93c2f38 100644 --- a/apps/front/zh-tw/index.html +++ b/apps/front/zh-tw/index.html @@ -1,32 +1,58 @@ - - - - - - - - - - - - - - - Knucklebones | 來自《進擊羔羊傳說》 - - - - - - - - - - - - -
- - + + + + + + + + + + + + + + Knucklebones | 來自《進擊羔羊傳說》 + + + + + + + + + + + + + +
+ + From bd6fc9521fe8091cc3e4a133e370ee859f4d44b9 Mon Sep 17 00:00:00 2001 From: Alexis LUCAS Date: Wed, 5 Feb 2025 23:13:37 +0100 Subject: [PATCH 2/4] fixed lint --- .eslintrc.yml | 9 +-------- apps/front/tsconfig.json | 7 ++----- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/.eslintrc.yml b/.eslintrc.yml index 61604a2..a5b809e 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -13,17 +13,10 @@ plugins: - react - react-hooks - import -overrides: - - - # quick and dirty way to disable typescript eslint on .js file - files: *.js parserOptions: ecmaVersion: latest sourceType: module - project: - - apps/front/tsconfig.json - - apps/worker/tsconfig.json - - packages/common/tsconfig.json + project: true settings: import/resolver: typescript: true diff --git a/apps/front/tsconfig.json b/apps/front/tsconfig.json index 2941460..25f407c 100644 --- a/apps/front/tsconfig.json +++ b/apps/front/tsconfig.json @@ -2,12 +2,9 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "jsx": "react-jsx", - "moduleResolution": "Bundler", + "moduleResolution": "Bundler" }, - "include": [ - "src", - "@types" - ], + "include": ["src", "@types", "./theme.js"], "references": [ { "path": "./tsconfig.node.json" From 75e4812b633a1f03f5f7c5267c0b8bf082079f49 Mon Sep 17 00:00:00 2001 From: Alexis LUCAS Date: Fri, 7 Feb 2025 23:07:38 +0100 Subject: [PATCH 3/4] used public folder for not bundled files --- apps/front/en/index.html | 4 ++-- apps/front/fr/index.html | 4 ++-- apps/front/index.html | 4 ++-- apps/front/{ => public}/theme.css | 0 apps/front/{ => public}/theme.js | 0 apps/front/tsconfig.json | 2 +- apps/front/zh-tw/index.html | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) rename apps/front/{ => public}/theme.css (100%) rename apps/front/{ => public}/theme.js (100%) diff --git a/apps/front/en/index.html b/apps/front/en/index.html index 985c9c5..72a57ac 100644 --- a/apps/front/en/index.html +++ b/apps/front/en/index.html @@ -33,7 +33,7 @@ content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!" /> - + - +
diff --git a/apps/front/fr/index.html b/apps/front/fr/index.html index d275b52..cc4dfeb 100644 --- a/apps/front/fr/index.html +++ b/apps/front/fr/index.html @@ -33,7 +33,7 @@ content="Découvrez Knucklebones (Osselets), de Cult of the Lamb, un jeu de dés en ligne créé par des fans. Jouez contre une IA ou vos amis gratuitement. Non officiel mais addictif, amusez-vous ou soyez compétitif !" /> - + - +
diff --git a/apps/front/index.html b/apps/front/index.html index 2124bcb..4f13f9a 100644 --- a/apps/front/index.html +++ b/apps/front/index.html @@ -28,7 +28,7 @@ content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!" /> - + - +
diff --git a/apps/front/theme.css b/apps/front/public/theme.css similarity index 100% rename from apps/front/theme.css rename to apps/front/public/theme.css diff --git a/apps/front/theme.js b/apps/front/public/theme.js similarity index 100% rename from apps/front/theme.js rename to apps/front/public/theme.js diff --git a/apps/front/tsconfig.json b/apps/front/tsconfig.json index 25f407c..777c99a 100644 --- a/apps/front/tsconfig.json +++ b/apps/front/tsconfig.json @@ -4,7 +4,7 @@ "jsx": "react-jsx", "moduleResolution": "Bundler" }, - "include": ["src", "@types", "./theme.js"], + "include": ["src", "@types", "public/theme.js"], "references": [ { "path": "./tsconfig.node.json" diff --git a/apps/front/zh-tw/index.html b/apps/front/zh-tw/index.html index 93c2f38..059d9e6 100644 --- a/apps/front/zh-tw/index.html +++ b/apps/front/zh-tw/index.html @@ -33,7 +33,7 @@ content="探索 Knucklebones，一款來自《進擊羔羊傳說》的粉絲製作的線上骰子遊戲。免費與 AI 或朋友對戰。非官方但令人興奮且上癮的多人遊戲樂趣等著你！" /> - + - +
From de303c4a4a69f3ce1915855516ac7d093351288c Mon Sep 17 00:00:00 2001 From: Alexis LUCAS Date: Fri, 7 Feb 2025 23:19:34 +0100 Subject: [PATCH 4/4] oops --- apps/front/public/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/front/public/theme.css b/apps/front/public/theme.css index 7f29cc1..c01e2ee 100644 --- a/apps/front/public/theme.css +++ b/apps/front/public/theme.css @@ -4,7 +4,7 @@ */ body.dark { /* bg-slate-900 */ - background-color: #020617; + background-color: #0f172a; min-height: 100vh; margin: 0; padding: 0;