PWA

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="container flex overflow-hidden relative flex-col mx-auto max-w-md h-full border border-cyan-500">
+    class="container flex overflow-hidden relative flex-col mx-auto max-w-md h-full">
     <div class="px-2 w-full h-full">
       <AppHeader class="" />
       <!-- keep relative for transition -->

src/components/PlaquettesList.vue

@@ -9,7 +9,7 @@
         @click="click(item)"
         class="h-11 border"
         :class="{
-          'text-stone-600 border-stone-600': !item.free,
+          'dark:text-stone-600 dark:border-stone-600 text-stone-500 border-stone-400': !item.free,
           'hover:border-cyan-500': item.free,
         }"
         :style="{ transitionDelay: `${initDelay * i}ms` }"

src/components/SideMenu.vue

@@ -2,14 +2,14 @@
   <Transition name="menu">
     <div
       v-if="isSideMenuVisible"
-      class="flex absolute top-[1px] right-0 z-10 flex-col w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500">
+      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 hover:text-cyan-500" />
         </button>
       </div>
-      <div class="flex-1 ">
+      <div class="flex-1">
         <div class="h-12" />
         <InputSwitch
           id="toggleNight"
@@ -17,6 +17,10 @@
           lbl-right="Night"
           v-model="darkMode" />
       </div>
+
+      <div class="text-xs text-stone-500 dark:text-stone-600">
+        Build {{ buildDate }}
+      </div>
     </div>
   </Transition>
 </template>
@@ -41,4 +45,6 @@ import { isSideMenuVisible } from '@/composables/side-menu'
 import IconClose from '~icons/ph/x'
 
 import InputSwitch from './common/InputSwitch.vue'
+
+const buildDate = import.meta.env.VITE_BUILD_DATE
 </script>

src/main.ts

@@ -1,11 +1,12 @@
 import './index.css'
 
 import messages from '@intlify/vite-plugin-vue-i18n/messages'
+import { registerSW } from 'virtual:pwa-register'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import App from './App.vue'
-import router from './router'
+import App from '@/App.vue'
+import router from '@/router'
 
 const i18n = createI18n({
   legacy: false,
@@ -14,6 +15,12 @@ const i18n = createI18n({
   messages,
 })
 
+registerSW({
+  onOfflineReady() {
+    // showToast('Ce jeu peut être installé<br>pour fonctionner hors-ligne.', 2000)
+  },
+})
+
 const app = createApp(App)
 
 app.use(router)

src/views/HomeView.vue

@@ -12,9 +12,7 @@
           class="text-2xl btn">
           {{ t('dailyGame') }}
         </RouterLink>
-        <span v-html="t('dailyDescription')">
-
-        </span>
+        <span v-html="t('dailyDescription')" />
       </div>
 
       <!-- Random -->