Toggle locale

src/components/SideMenu.vue

@@ -5,17 +5,23 @@
       class="flex absolute top-[1px] right-0 z-10 flex-col p-2 w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500">
       <div class="h-12">
         <button @click="isSideMenuVisible = false">
-          <IconClose
-            class="absolute top-0 right-1 h-12 text-xl btn" />
+          <IconClose class="absolute top-0 right-1 h-12 text-xl btn" />
         </button>
       </div>
-      <div class="flex-1">
+      <div class="flex flex-col flex-1 content-center items-center">
         <div class="h-12" />
         <InputSwitch
+          class="mb-4 "
           id="toggleNight"
           lbl-left="Day"
           lbl-right="Night"
           v-model="darkMode" />
+        <InputSwitch
+          class=""
+          id="toggleLocale"
+          lbl-left="English"
+          lbl-right="Français"
+          v-model="isLocaleFrench" />
       </div>
 
       <div class="text-xs text-stone-500 dark:text-stone-600">
@@ -40,7 +46,7 @@
 </style>
 
 <script setup lang="ts">
-import { darkMode } from '@/composables/settings'
+import { darkMode, isLocaleFrench } from '@/composables/settings'
 import { isSideMenuVisible } from '@/composables/side-menu'
 import IconClose from '~icons/ph/x'
 

src/components/common/InputSwitch.vue

@@ -1,19 +1,19 @@
 <template>
   <!-- Toggle A -->
-  <div class="flex justify-center items-center mb-12 w-full">
+  <div class="flex justify-center items-center w-full">
     <label
       :for="id"
-      class="flex items-center cursor-pointer">
-      <div>{{ lblLeft }}</div>
+      class="flex justify-between items-center cursor-pointer">
+      <div class="">{{ lblLeft }}</div>
       <!-- toggle -->
       <div class="relative mx-2 ml-3">
         <!-- input -->
         <input
+          class="sr-only"
           :checked="modelValue"
           @change="e => emit('update:modelValue', (e?.target as any)?.checked)"
           :id="id"
-          type="checkbox"
-          class="sr-only">
+          type="checkbox">
         <!-- line -->
         <div class="w-10 h-4 bg-cyan-500 rounded-full shadow-inner" />
         <!-- dot -->
@@ -21,7 +21,7 @@
           class="absolute -top-1 -left-1 w-6 h-6 bg-stone-400 rounded-full shadow transition dot" />
       </div>
       <!-- label -->
-      <div>{{ lblRight }}</div>
+      <div class="">{{ lblRight }}</div>
     </label>
   </div>
 </template>

src/composables/settings.ts

@@ -1,10 +1,11 @@
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import { LSK_DARKMODE } from '@/globals'
+import { LSK_DARKMODE, LSK_LOCALE } from '@/globals'
 import { setItem } from '@/storage'
 
-export const darkMode = ref(true)
+// #region Dark Mode
 
+export const darkMode = ref(true)
 watch(darkMode, val => {
   if (val) {
     document.documentElement.classList.add('dark')
@@ -21,3 +22,15 @@ export function isDarkModeDefault(): boolean {
     window.matchMedia('(prefers-color-scheme: dark)').matches
   )
 }
+
+// #endregion Dark mode
+
+// #region Locale
+
+export const isLocaleFrench = ref(true)
+
+watch(isLocaleFrench, v => {
+  setItem(LSK_LOCALE, v ? 'fr' : 'en')
+})
+
+// #endregion Locale

src/globals.ts

@@ -2,6 +2,7 @@ export const GAME_STARTING_DATE = '2022-02-18'
 export const BXL_TZ = 'Europe/Brussels'
 
 export const LSK_DARKMODE = 'n0_dark'
+export const LSK_LOCALE = 'n0_locale'
 export const LSK_STATS = 'n0_stats'
 
 export const operators = ['+', '-', '*', '/'] as const

src/main.ts

@@ -2,12 +2,16 @@ import './index.css'
 
 import messages from '@intlify/vite-plugin-vue-i18n/messages'
 import { registerSW } from 'virtual:pwa-register'
-import { createApp } from 'vue'
+import { createApp, watch } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import App from '@/App.vue'
 import router from '@/router'
 
+import { isLocaleFrench } from './composables/settings'
+import { LSK_LOCALE } from './globals'
+import { getItem } from './storage'
+
 const i18n = createI18n({
   legacy: false,
   locale: 'fr',
@@ -15,6 +19,12 @@ const i18n = createI18n({
   messages,
 })
 
+// Set locale
+watch(isLocaleFrench, v => {
+  i18n.global.locale.value = v ? 'fr' : 'en'
+})
+isLocaleFrench.value = getItem(LSK_LOCALE, 'en') === 'fr'
+
 registerSW({
   onOfflineReady() {
     // showToast('Ce jeu peut être installé<br>pour fonctionner hors-ligne.', 2000)