Assemblage du menu du jeu et découverte cases améliorée

src/views/Game/SoloView.vue

@@ -6,7 +6,7 @@ import type { CellGrid, MineGrid } from '@/utils/game'
 // Variables du jeu
 const width = ref(10)
 const length = ref(15)
-const nbMines = ref(25)
+const nbMines = ref(20)
 
 // Création grille des cases
 const cellGrid = ref<CellGrid>([])
@@ -18,11 +18,39 @@ let mineGrid: MineGrid = []
 // État du jeu
 const gameStatus = ref(0) // 0: vide, 1: en cours, 2: gagné, 3: perdu
 const timer = ref(0)
-let timerInterval: number | undefined = undefined
+let timerInterval: number | null = null
 
+// Fonction pour démarrer une nouvelle partie
+const startNewGame = () => {
+  gameStatus.value = 0
+  timer.value = 0
+  cellGrid.value = genCellGrid(width.value, length.value)
+}
+
+// Formater le timer en heure:minute:seconde
+const formatTime = (seconds: number) => {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+
+  // Si les heures sont 0, ne pas les afficher
+  const hoursDisplay = hours > 0 ? `${hours}:` : ''
+  // Afficher les minutes sans padding de 0
+  const minutesDisplay = `${minutes}:`
+  // Toujours afficher les secondes avec un padding de 0
+  const secondsDisplay = String(secs).padStart(2, '0')
+
+  return `${hoursDisplay}${minutesDisplay}${secondsDisplay}`
+}
+
+// Watch pour démarrer ou arrêter le timer selon l'état du jeu
 watch(gameStatus, async (status) => {
+  if (status === 0) {
+    timer.value = 0
+    cellGrid.value = genCellGrid(width.value, length.value)
+  }
   if (status === 1) timerInterval = setInterval(() => timer.value++, 1000)
-  else clearInterval(timerInterval)
+  else if (timerInterval) clearInterval(timerInterval)
 })
 
 // État pour gérer le clic et la position de la cellule
@@ -46,7 +74,7 @@ const handleMouseDown = (rowIndex: number, cellIndex: number) => {
 // Gestion des événements de relâchement de clic et de la position de la cellule
 const handleMouseUp = async (rowIndex: number, cellIndex: number) => {
   isMouseDown.value = false
-  if (!mineGrid.length) {
+  if (!gameStatus.value) {
     mineGrid = genMineGrid(width.value, length.value, nbMines.value, cellIndex, rowIndex)
     gameStatus.value = 1
   }
@@ -122,14 +150,33 @@ onUnmounted(() => document.removeEventListener('mousemove', handleGlobalMouseMov
   <div class="main">
     <div class="space">
       <h1>Solo</h1>
-      <div class="timer" :gameStatus>Timer : {{ timer }}</div>
+      <div class="timer" :gameStatus>{{ formatTime(timer) }}</div>
+    </div>
 
-      <div class="menu">
-        <input type="number" v-model="width" min="10" max="50" />Lignes (10-50)
-        <input type="number" v-model="length" min="10" max="50" />Colonnes (10-50)
-        <input type="number" v-model="nbMines" min="10" max="250" />Mines (10-250)
-        <button @click="gameStatus = 0">Nouvelle partie</button>
+    <div class="menu">
+      <div class="presets">
+        <button class="rounded" @click="width = 10; length = 15; nbMines = 20">Facile</button>
+        <button class="rounded" @click="width = 20; length = 50; nbMines = 180">Moyen</button>
+        <button class="rounded" @click="width = 50; length = 80; nbMines = 800">Difficile</button>
+        <button class="rounded" @click="width = 100; length = 100; nbMines = 2000">Extrême</button>
       </div>
+
+      <div class="inputs">
+        <div>
+          <label for="length">Colonnes</label>
+          <input type="number" v-model="length" min="10" max="50" id="length" />
+        </div>
+        <div>
+          <label for="width">Lignes</label>
+          <input type="number" v-model="width" min="10" max="50" id="width" />
+        </div>
+        <div>
+          <label for="nbMines">Mines</label>
+          <input type="number" v-model="nbMines" min="10" max="250" id="nbMines" />
+        </div>
+      </div>
+
+      <button class="rounded newgame" @click="startNewGame">Nouvelle partie</button>
     </div>
 
     <div class="grid">
@@ -145,6 +192,7 @@ onUnmounted(() => document.removeEventListener('mousemove', handleGlobalMouseMov
         />
       </div>
     </div>
+    
     <transition name="fade">
       <div v-if="gameStatus === 2" class="message">Vous avez gagné !</div>
       <div v-else-if="gameStatus === 3" class="message">Vous avez perdu !</div>
@@ -153,38 +201,7 @@ onUnmounted(() => document.removeEventListener('mousemove', handleGlobalMouseMov
 </template>
 
 <style scoped>
-.space {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 30px 60px;
-  h1 {
-    flex: 2;
-  }
-}
-.menu {
-  flex: 2;
-  display: flex;
-  input {
-    margin-left: 20px;
-  }
-}
-.grid {
-  display: grid;
-  border: 4px solid rgb(65, 65, 65);
-}
-.row {
-  display: flex;
-  height: 32px;
-}
-.cell {
-  flex: 1;
-  background-color: #f1f1f1;
-  text-align: center;
-  color: black;
-  width: 32px;
-  height: 32px;
-  user-select: none;
+.main {
+  gap: 0
 }
 </style>