From 0cd8eaf580699281a8a413126c08e47ea1281567 Mon Sep 17 00:00:00 2001 From: Simon Cambier Date: Mon, 21 Feb 2022 22:52:29 +0100 Subject: [PATCH] Dark mode --- index.html | 4 +-- src/App.vue | 45 +++++++++++++++++--------- src/components/AppHeader.vue | 12 ++++--- src/components/SideMenu.vue | 44 +++++++++++++++++++++++++ src/components/common/InputSwitch.vue | 46 +++++++++++++++++++++++++++ src/composables/settings.ts | 20 ++++++++++++ src/composables/side-menu.ts | 3 ++ src/index.css | 4 ++- src/locales/en.json | 12 ++++++- src/locales/fr.json | 7 ++-- src/router/index.ts | 4 +-- src/views/GameView.vue | 3 +- src/views/HomeView.vue | 10 +++--- 13 files changed, 179 insertions(+), 35 deletions(-) create mode 100644 src/components/SideMenu.vue create mode 100644 src/components/common/InputSwitch.vue create mode 100644 src/composables/settings.ts create mode 100644 src/composables/side-menu.ts diff --git a/index.html b/index.html index a4f6bc8..4c1ee13 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@ N0mbers - +
diff --git a/src/App.vue b/src/App.vue index 0131a54..8de8735 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,34 @@ - - + + diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 26e8a11..5760d28 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -3,14 +3,17 @@ + class="text-xl hover:text-cyan-500 dark:text-stone-400 transition-opacity duration-200"> -

+

N0mbers

- + @@ -18,6 +21,7 @@ import { computed } from 'vue' import { useRoute } from 'vue-router' +import { isSideMenuVisible } from '@/composables/side-menu' import IconHouse from '~icons/ph/house' import IconMenu from '~icons/ph/list' diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue new file mode 100644 index 0000000..d9c2fb3 --- /dev/null +++ b/src/components/SideMenu.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/components/common/InputSwitch.vue b/src/components/common/InputSwitch.vue new file mode 100644 index 0000000..d5b9c88 --- /dev/null +++ b/src/components/common/InputSwitch.vue @@ -0,0 +1,46 @@ + + + + diff --git a/src/composables/settings.ts b/src/composables/settings.ts new file mode 100644 index 0000000..8bc30f7 --- /dev/null +++ b/src/composables/settings.ts @@ -0,0 +1,20 @@ +import { ref, watch } from 'vue' + +export const darkMode = ref(true) + +watch(darkMode, val => { + if (val) { + document.documentElement.classList.add('dark') + } + else { + document.documentElement.classList.remove('dark') + } + localStorage.setItem('n0_dark', val ? 'true' : 'false') +}) + +export function isDarkModeDefault(): boolean { + return ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) +} diff --git a/src/composables/side-menu.ts b/src/composables/side-menu.ts new file mode 100644 index 0000000..2fec081 --- /dev/null +++ b/src/composables/side-menu.ts @@ -0,0 +1,3 @@ +import { ref } from 'vue' + +export const isSideMenuVisible = ref(false) diff --git a/src/index.css b/src/index.css index 6856310..a02e228 100644 --- a/src/index.css +++ b/src/index.css @@ -142,10 +142,12 @@ opacity: 0; } +@layer utils { +} @layer components { .btn { @apply w-fit p-2; @apply rounded border border-stone-600 transition-opacity; @apply hover:border-cyan-500 hover:text-cyan-500; } -} +} \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json index 0db3279..8cb8d2e 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,3 +1,13 @@ { - + "playAgain": "New number", + "easy": "easy", + "dailyGame": "Daily challenge\n", + "endGame.failureLabel": "Too bad...
Another game?", + "endGame.victoryLabel": "Well done!", + "hard": "hard", + "impossible": "☠", + "medium": "medium", + "randomGame": "Random number", + "startGame": "Start", + "dailyDescription": "The daily challenge changes every day at midnight, and is common to all players." } diff --git a/src/locales/fr.json b/src/locales/fr.json index 5341180..78fa7cd 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -1,6 +1,6 @@ { "playAgain": "Nouveau nombre", - "endGame.victoryLabel": "Le compte est bon !", + "endGame.victoryLabel": "Bien joué !", "endGame.failureLabel": "Dommage...
Une autre partie ?", "startGame": "Démarrer", "easy": "facile", @@ -8,5 +8,8 @@ "hard": "difficile", "impossible": "☠", "dailyGame": "Défi quotidien", - "randomGame": "Nombre au hasard" + "randomGame": "Nombre au hasard", + "gameDescription": "Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en approcher le plus possible.", + "dailyDescription": "Le défi quotidien change chaque jour à minuit, et est commun à tous les joueurs.", + "randomDescription": "Une partie au hasard, pour le plaisir." } diff --git a/src/router/index.ts b/src/router/index.ts index 520cfd2..1b084b6 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,9 +1,9 @@ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), + history: createWebHashHistory(import.meta.env.BASE_URL), routes: [ { path: '/', diff --git a/src/views/GameView.vue b/src/views/GameView.vue index 3cd9d13..1d5c954 100644 --- a/src/views/GameView.vue +++ b/src/views/GameView.vue @@ -12,8 +12,7 @@ class="text-center" v-if="gameState <= GameState.Waiting">
- Le défi quotidien vous propose un résultat différent chaque jour, - commun à tous les joueurs.
+ {{ t('dailyDescription') }}