fix splash screen

apps/frontend/src/index.ts

@@ -2,4 +2,8 @@ import { splashScreen } from './splash-screen'
 import '@/styles/splash-screen.scss'
 
 splashScreen.init()
-splashScreen.onInit(() => import('./main'))
+splashScreen.onInit(() => {
+  const app = document.querySelector<HTMLElement>('#app')
+  if (app) app.style.display = 'block'
+  import('./main')
+})

apps/frontend/src/splash-screen.ts

@@ -34,13 +34,13 @@ class SplashScreen {
 
   onInit(callback: () => void) {
     this.#callback = callback
-    // if (import.meta.env.DEV) {
-    //   this.#callback()
-    // }
+    if (import.meta.env.DEV) {
+      this.#callback()
+    }
   }
 
   init() {
-    // if (import.meta.env.DEV) return
+    if (import.meta.env.DEV) return
     if (this.#el) return
 
     this.#playAudio()

apps/frontend/src/stores/use-game.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useBoard } from './use-board.js'
 import { useOpenedElements } from './use-opened-elements.js'
@@ -29,19 +29,17 @@ export const useGame = defineStore('game', () => {
     openedElements.$reset()
   }
 
-  onMounted(() => {
-    document.addEventListener('DOMContentLoaded', () => {
-      basicElements.value = recipes.slice(0, 4).map((element) => {
-        return {
-          uuid: crypto.randomUUID(),
-          id: element.id,
-          name: element.name,
-          ended: element.ended ?? false,
-          position: getRandomPosition()
-        }
-      })
+  watch(board.boardSize, () => {
+    basicElements.value = recipes.slice(0, 4).map((element) => {
+      return {
+        uuid: crypto.randomUUID(),
+        id: element.id,
+        name: element.name,
+        ended: element.ended ?? false,
+        position: getRandomPosition()
+      }
     })
-  })
+  }, { deep: true, once: true })
 
   return {
     availableRecipes,

apps/frontend/src/styles/main.scss

@@ -59,6 +59,7 @@ body, html {
 
 #app {
   height: inherit;
+  display: none;
 }
 
 ::-webkit-scrollbar {