From bb781f590ce656221c2c6547844c357cae562e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zachary=20Gu=C3=A9not?= <zachary@zac.ovh>
Date: Thu, 24 Oct 2024 19:03:44 +0200
Subject: [PATCH] Renommage assets > /public + Refonte logique et interface de
 jeu

---
 src/assets/square_1.png => public/s1.png      | Bin
 src/assets/square_2.png => public/s2.png      | Bin
 src/assets/square_3.png => public/s3.png      | Bin
 src/assets/square_4.png => public/s4.png      | Bin
 src/assets/square_5.png => public/s5.png      | Bin
 src/assets/square_6.png => public/s6.png      | Bin
 src/assets/square_7.png => public/s7.png      | Bin
 src/assets/square_8.png => public/s8.png      | Bin
 .../square_Empty.png => public/sClick.png     | Bin
 public/sEmpty.png                             | Bin 0 -> 117 bytes
 .../sExploded.png                             | Bin
 .../square_Flag.png => public/sFlag.png       | Bin
 .../sFlagWrong.png                            | Bin
 .../square_Mine.png => public/sMine.png       | Bin
 .../sQuestion.png                             | Bin
 .../square_Smiley.png => public/sSmiley.png   | Bin
 .../square_Unknown.png => public/sUnknown.png | Bin
 src/router/index.ts                           |  10 +-
 src/utils/game.ts                             |  60 ++++++++---
 src/views/Game/SoloView.vue                   |  98 +++++++++++++++++-
 src/views/HomeView.vue                        |   2 +-
 21 files changed, 149 insertions(+), 21 deletions(-)
 rename src/assets/square_1.png => public/s1.png (100%)
 rename src/assets/square_2.png => public/s2.png (100%)
 rename src/assets/square_3.png => public/s3.png (100%)
 rename src/assets/square_4.png => public/s4.png (100%)
 rename src/assets/square_5.png => public/s5.png (100%)
 rename src/assets/square_6.png => public/s6.png (100%)
 rename src/assets/square_7.png => public/s7.png (100%)
 rename src/assets/square_8.png => public/s8.png (100%)
 rename src/assets/square_Empty.png => public/sClick.png (100%)
 create mode 100644 public/sEmpty.png
 rename src/assets/square_Exploded.png => public/sExploded.png (100%)
 rename src/assets/square_Flag.png => public/sFlag.png (100%)
 rename src/assets/square_FlagWrong.png => public/sFlagWrong.png (100%)
 rename src/assets/square_Mine.png => public/sMine.png (100%)
 rename src/assets/square_Question.png => public/sQuestion.png (100%)
 rename src/assets/square_Smiley.png => public/sSmiley.png (100%)
 rename src/assets/square_Unknown.png => public/sUnknown.png (100%)

diff --git a/src/assets/square_1.png b/public/s1.png
similarity index 100%
rename from src/assets/square_1.png
rename to public/s1.png
diff --git a/src/assets/square_2.png b/public/s2.png
similarity index 100%
rename from src/assets/square_2.png
rename to public/s2.png
diff --git a/src/assets/square_3.png b/public/s3.png
similarity index 100%
rename from src/assets/square_3.png
rename to public/s3.png
diff --git a/src/assets/square_4.png b/public/s4.png
similarity index 100%
rename from src/assets/square_4.png
rename to public/s4.png
diff --git a/src/assets/square_5.png b/public/s5.png
similarity index 100%
rename from src/assets/square_5.png
rename to public/s5.png
diff --git a/src/assets/square_6.png b/public/s6.png
similarity index 100%
rename from src/assets/square_6.png
rename to public/s6.png
diff --git a/src/assets/square_7.png b/public/s7.png
similarity index 100%
rename from src/assets/square_7.png
rename to public/s7.png
diff --git a/src/assets/square_8.png b/public/s8.png
similarity index 100%
rename from src/assets/square_8.png
rename to public/s8.png
diff --git a/src/assets/square_Empty.png b/public/sClick.png
similarity index 100%
rename from src/assets/square_Empty.png
rename to public/sClick.png
diff --git a/public/sEmpty.png b/public/sEmpty.png
new file mode 100644
index 0000000000000000000000000000000000000000..096b07c953bc4e740e6ffd34848c8455de26a997
GIT binary patch
literal 117
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP*B~|
z#WBR9H#sLG<Hvai#)QO#goJ{E0)^WQYF;_=rU_RX0-0B2Ffcf(GABA7nRWoEg~8L+
K&t;ucLK6UmDIC@S

literal 0
HcmV?d00001

diff --git a/src/assets/square_Exploded.png b/public/sExploded.png
similarity index 100%
rename from src/assets/square_Exploded.png
rename to public/sExploded.png
diff --git a/src/assets/square_Flag.png b/public/sFlag.png
similarity index 100%
rename from src/assets/square_Flag.png
rename to public/sFlag.png
diff --git a/src/assets/square_FlagWrong.png b/public/sFlagWrong.png
similarity index 100%
rename from src/assets/square_FlagWrong.png
rename to public/sFlagWrong.png
diff --git a/src/assets/square_Mine.png b/public/sMine.png
similarity index 100%
rename from src/assets/square_Mine.png
rename to public/sMine.png
diff --git a/src/assets/square_Question.png b/public/sQuestion.png
similarity index 100%
rename from src/assets/square_Question.png
rename to public/sQuestion.png
diff --git a/src/assets/square_Smiley.png b/public/sSmiley.png
similarity index 100%
rename from src/assets/square_Smiley.png
rename to public/sSmiley.png
diff --git a/src/assets/square_Unknown.png b/public/sUnknown.png
similarity index 100%
rename from src/assets/square_Unknown.png
rename to public/sUnknown.png
diff --git a/src/router/index.ts b/src/router/index.ts
index a45868d..8054d89 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,27 +6,27 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('../views/HomeView.vue')
+      component: () => import('@/views/HomeView.vue')
     },
     {
       path: '/about',
       name: 'about',
-      component: () => import('../views/AboutView.vue')
+      component: () => import('@/views/AboutView.vue')
     },
     {
       path: '/game',
       name: 'game',
-      component: () => import('../views/GameView.vue'),
+      component: () => import('@/views/GameView.vue'),
       children: [
         {
           path: 'solo',
           name: 'solo',
-          component: () => import('../views/Game/SoloView.vue')
+          component: () => import('@/views/Game/SoloView.vue')
         },
         {
           path: 'party',
           name: 'party',
-          component: () => import('../views/Game/PartyView.vue')
+          component: () => import('@/views/Game/PartyView.vue')
         }
       ]
     }
diff --git a/src/utils/game.ts b/src/utils/game.ts
index 3b33145..5874151 100644
--- a/src/utils/game.ts
+++ b/src/utils/game.ts
@@ -1,3 +1,46 @@
+type CellGrid = string[][]                                                                                      // type CellGrid (grille de jeu)
+type MineGrid = number[][]                                                                                      // type MineGrid (grille de bombes)
+
+function genCellGrid(width: number, length: number): CellGrid {                                                 // fonction genCellGrid (génération de la grille de jeu)
+    return Array.from({ length: width }, () => Array.from({ length: length }, () => "/sUnknown.png"))
+}
+
+function genMineGrid(width: number, length: number, nbMines: number): MineGrid {                                // fonction genMineGrid (génération des bombes)
+    const mineGrid: MineGrid = []                                                                               // initialisation de la grille de bombes
+    while (mineGrid.length < nbMines) {                                                                         // boucle pour placer les bombes
+        const x = Math.floor(Math.random() * length)                                                            // position x de la bombe
+        const y = Math.floor(Math.random() * width)                                                             // position y de la bombe
+        const indice = [y, x]                                                                                   // id de la bombe
+        if (!mineGrid.includes(indice)) mineGrid.push(indice)                                                   // si la bombe n'est pas déjà placée, on la place
+    }
+    return mineGrid;                                                                                            // retour de la grille de bombes
+}
+
+function cliqueGauche(cellGrid: CellGrid, mineGrid: MineGrid, x: number, y: number) {                           // fonction main (début du jeu)
+    //const indice = [y, x]                                                                                     // id de la case cliquée
+    //if (mineGrid.includes(indice)) bombe()                                                                    // si la case cliquée est une bombe, on va dans la fonction bombe   
+    //else if (champDeMines[indice] === 0) {caseVide(indice);}                                                  // si la case cliquée est vide, on va dans la fonction caseVide
+    //else if (champDeMines[indice] !== 0) {decouvreCase(indice);}                                              // si la case cliquée est un numéro, on va dans la fonction decouvreCase
+    //decouvreCase(indice);
+    if (cellGrid[y][x] === '/sClick.png') return cellGrid[y][x] = '/sEmpty.png'                                 // modification de l'image de la case
+}
+
+function cliqueDroit(cellGrid: string[][], x: number, y: number): void {                                        // fonction cliqueDroit (flag d'une case)                                                                                       // modification de l'image de la case
+    switch (cellGrid[y][x]) {
+        case '/sUnknown.png':
+            cellGrid[y][x] = "/sFlag.png"
+            break
+        case '/sFlag.png':
+            cellGrid[y][x] = "/sQuestion.png"
+            break
+        case '/sQuestion.png':
+            cellGrid[y][x] = "/sUnknown.png"
+            break
+    }
+}         
+
+
+/*
 const directions: number[] = [-11, -10, -9, -1, 1, 9, 10, 11];                                                                  // directions possibles pour découvrir les cases
 const champDeMines: number[] = [];                                                                                              // champ de mines (0 = case vide, 10 = bombe, 1 à 8 = nombre de bombes adjacentes)
 for (let i = 0; i < 100; i++) {champDeMines.push(0);}                                                                           // initialisation des cases à 0
@@ -19,18 +62,7 @@ function caseVide(indice: number): void {
 function decouvreCase(indice: number): void {                                                                                   // fonction decouvreCase (découverte d'une case)
     casesDecouvertes[indice] = 1;                                                                                               // modification dans le tableau des cases découvertes 
 }
+*/                                                                         
 
-function flagCase(indice: number): void {                                                                                       // fonction flagCase (flag d'une case)
-    casesDecouvertes[indice] = 2;                                                                                               // modification dans le tableau des cases découvertes
-}
-
-function cliqueGauche(indice: number): void {                                                                                   // fonction main (début du jeu)
-    if (champDeMines[indice] === 10) {bombe();}                                                                                 // si la case cliquée est une bombe, on va dans la fonction bombe   
-    else if (champDeMines[indice] === 0) {caseVide(indice);}                                                                    // si la case cliquée est vide, on va dans la fonction caseVide
-    else if (champDeMines[indice] !== 0) {decouvreCase(indice);}                                                                // si la case cliquée est un numéro, on va dans la fonction decouvreCase
-    decouvreCase(indice);                                                                          
-}
-
-function cliqueDroite(indice: number): void {                                                                                    // fonction cliqueDroite (flag d'une case)
-    flagCase(indice);
-}                                                                                       
+export { genCellGrid, genMineGrid, cliqueGauche, cliqueDroit }                                                                  // export des variables et fonctions
+export type { CellGrid, MineGrid }                                                                                              // export des types
\ No newline at end of file
diff --git a/src/views/Game/SoloView.vue b/src/views/Game/SoloView.vue
index 28bf95e..99235a9 100644
--- a/src/views/Game/SoloView.vue
+++ b/src/views/Game/SoloView.vue
@@ -1,5 +1,101 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { genCellGrid, genMineGrid, cliqueGauche, cliqueDroit } from '@/utils/game'
+import type { CellGrid, MineGrid } from '@/utils/game'
+
+const width = 10
+const length = 15
+const nbMines = 25
+
+// Création grille des cases
+const cellGrid = ref<CellGrid>([])
+cellGrid.value = genCellGrid(width, length)
+
+// Création grille des mines
+let mineGrid: MineGrid = []
+mineGrid = genMineGrid(width, length, nbMines)
+
+// État pour gérer le clic et la position de la cellule
+const isMouseDown = ref(false)
+const currentCell = ref<{ rowIndex: number, cellIndex: number } | null>(null)
+
+const handleMouseDown = (rowIndex: number, cellIndex: number) => {
+  isMouseDown.value = true
+  currentCell.value = { rowIndex, cellIndex }
+  if (cellGrid.value[rowIndex][cellIndex] === '/sUnknown.png') cellGrid.value[rowIndex][cellIndex] = '/sClick.png'
+}
+
+const handleMouseUp = (rowIndex: number, cellIndex: number) => {
+  isMouseDown.value = false
+  cliqueGauche(cellGrid.value, mineGrid, cellIndex, rowIndex)
+  currentCell.value = null
+}
+
+const handleMouseMove = (rowIndex: number, cellIndex: number) => {
+  if (isMouseDown.value && currentCell.value) {
+    const { rowIndex: prevRowIndex, cellIndex: prevCellIndex } = currentCell.value
+    if (prevRowIndex !== rowIndex || prevCellIndex !== cellIndex) {
+      if (cellGrid.value[prevRowIndex][prevCellIndex] === '/sClick.png') cellGrid.value[prevRowIndex][prevCellIndex] = '/sUnknown.png' // Réinitialiser l'image précédente
+      if (cellGrid.value[rowIndex][cellIndex] === '/sUnknown.png') cellGrid.value[rowIndex][cellIndex] = '/sClick.png' // Changer l'image actuelle
+      currentCell.value = { rowIndex, cellIndex }
+    }
+  }
+}
+
+const handleGlobalMouseMove = (event: MouseEvent) => {
+  if (isMouseDown.value && currentCell.value) {
+    const target = event.target as HTMLElement
+    if (!target.classList.contains('cell')) {
+      const { rowIndex, cellIndex } = currentCell.value
+      if (cellGrid.value[rowIndex][cellIndex] === '/sClick.png') {
+        cellGrid.value[rowIndex][cellIndex] = '/sUnknown.png'
+      }
+      currentCell.value = null
+    }
+  }
+}
+
+onMounted(() => document.addEventListener('mousemove', handleGlobalMouseMove))
+onUnmounted(() => document.removeEventListener('mousemove', handleGlobalMouseMove))
+</script>
+
 <template>
   <div class="main">
     <h1>Solo</h1>
+    <div class="grid">
+      <div v-for="(row, rowIndex) in cellGrid" :key="rowIndex" class="row">
+        <div v-for="(cell, cellIndex) in row" :key="cellIndex">
+          <img class="cell" :src="cell"
+            @mousedown.right="cliqueDroit(cellGrid, cellIndex, rowIndex)"
+            @mousedown.left="handleMouseDown(rowIndex, cellIndex)"
+            @mouseup.left="handleMouseUp(rowIndex, cellIndex)"
+            @mousemove="handleMouseMove(rowIndex, cellIndex)"
+            @contextmenu.prevent
+            @select.prevent
+            draggable="false"
+          />
+        </div>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  border: 10px solid black;
+}
+.row {
+  display: flex;
+  height: 32px;
+}
+.cell {
+  flex: 1;
+  background-color: #f1f1f1;
+  text-align: center;
+  color: black;
+  width: 32px;
+  height: 32px;
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6ea2341..06c8ba3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,7 +2,7 @@
   <div class="main">
     <h1>MultiMinesweeper</h1>
     <p>
-      Bienvenue sur notre jeu !
+      Bienvenue sur notre jeu de démineur en ligne !
       <br>
       Pour jouer, il vous suffit de sélectionner le mode de jeu que vous souhaitez dans le menu ci-dessous.
     </p>