diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..e3f0861 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue index c4884a4..a9d340b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,42 +24,3 @@ - - diff --git a/src/assets/main.css b/src/assets/main.css index 7c62f56..cec489f 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -45,24 +45,64 @@ a, } } +/* APP HEADER */ +header { + position: fixed; + z-index: 2; + height: 40px; + width: 100%; + padding: 10px; + background-color: #333; + color: #fff; + + * { + display: inline-block; + vertical-align: middle; + } + + h1 { + text-align: center; + left: 0; + width: 200px; + font-size: 22px; + } + + h2 { + text-align: left; + left: 220px; + font-size: medium; + } + + nav { + right: 100px; + font-size: 20px; + } + + nav * { + margin-left: 20px; + } +} + + /* SIDEBAR NAVIGATION */ .sidenav { - position: fixed; + position: absolute; z-index: 1; width: 203px; /* 200px is the width of the header vl position + half the bar */ background-color: #111; -} -.sidenav a { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 25px; - color: #818181; - display: block; -} + a { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + + } -.sidenav a:hover { - color: #f1f1f1; + a:hover { + color: #f1f1f1; + } } /* PAGE CONTENT */ @@ -85,11 +125,11 @@ a, justify-content: end; /* Centre les deux éléments horizontalement */ width: 100%; gap: 20px; /* Ajoute un espacement entre le h1 et le timer */ -} -.space h1 { - font-weight: bold; - font-size: 20px; + h1 { + font-weight: bold; + font-size: 20px; + } } .timer { @@ -109,14 +149,14 @@ a, width: 100%; /* Prend toute la largeur disponible */ margin-top: -5px; margin-bottom: 10px; -} -.menu button { - cursor: pointer; - height: 36px; - color: white; - border-radius: 10px; - font-size: 16px; + button { + cursor: pointer; + height: 36px; + color: white; + border-radius: 10px; + font-size: 16px; + } } .presets { @@ -124,17 +164,17 @@ a, display: flex; align-items: center; gap: 10px; /* Ajoute un espacement entre les boutons */ -} -.presets button { - width: 75px; - height: 50px; - background-color: #3f77ff; - border: 2px solid #7aa0ff; -} + button { + width: 75px; + height: 50px; + background-color: #3f77ff; + border: 2px solid #7aa0ff; -.presets button:hover { - background-color: #1c5dff; + } + button:hover { + background-color: #1c5dff; + } } .inputs { @@ -142,25 +182,25 @@ a, align-items: center; gap: 10px; /* Ajoute un espacement entre les inputs */ margin-right: 20px; -} -.inputs div { - display: flex; - flex-direction: column; - align-items: center; -} + div { + display: flex; + flex-direction: column; + align-items: center; + } -.inputs label { - font-weight: bold; - font-size: 14px; -} + label { + font-weight: bold; + font-size: 14px; + } -.inputs input { - text-align: center; - width: 80px; - padding: 5px; - border: 1px solid #ccc; - border-radius: 5px; + input { + text-align: center; + width: 80px; + padding: 5px; + border: 1px solid #ccc; + border-radius: 5px; + } } .newgame { @@ -177,6 +217,9 @@ a, .grid { display: grid; border: 4px solid rgb(65, 65, 65); + margin: 0 auto; /* Centre la grille horizontalement */ + overflow-x: auto; /* Active le défilement horizontal si nécessaire */ + max-width: 100%; /* Empêche la grille de déborder trop */ } .row { @@ -215,6 +258,20 @@ a, border-left: 6px solid rgb(0, 255, 140); } +.message { + position: absolute; + z-index: 1000; + color: white; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 8px; + padding: 10px; + transform: translate(-50%, 50%); + pointer-events: none; + white-space: nowrap; + font-weight: bold; + font-size: 18px; +} + /* ROUTE HIGHLIGHT */ .router-link-exact-active { border-left: 5px solid rgb(0, 255, 140); diff --git a/src/views/Game/PartyView.vue b/src/views/Game/PartyView.vue index e0d25f3..e766b76 100644 --- a/src/views/Game/PartyView.vue +++ b/src/views/Game/PartyView.vue @@ -1,5 +1,13 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/Game/SoloView.vue b/src/views/Game/SoloView.vue index 0001b3c..e1d8d6e 100644 --- a/src/views/Game/SoloView.vue +++ b/src/views/Game/SoloView.vue @@ -35,8 +35,8 @@ const formatTime = (seconds: number) => { // Si les heures sont 0, ne pas les afficher const hoursDisplay = hours > 0 ? `${hours}:` : '' - // Afficher les minutes sans padding de 0 - const minutesDisplay = `${minutes}:` + // Afficher les minutes avec un padding de 0 si elles sont inférieures à 10 + const minutesDisplay = `${hours > 0 ? String(minutes).padStart(2, '0') : minutes}:` // Toujours afficher les secondes avec un padding de 0 const secondsDisplay = String(secs).padStart(2, '0') @@ -53,6 +53,10 @@ watch(gameStatus, async (status) => { else if (timerInterval) clearInterval(timerInterval) }) +// Variables pour stocker la position du curseur +const mouseX = ref(0) +const mouseY = ref(0) + // É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) @@ -114,6 +118,9 @@ const handleMouseMove = (rowIndex: number, cellIndex: number) => { // Gestion des événements de déplacement de la souris et de la position de la cellule const handleGlobalMouseMove = (event: MouseEvent) => { + mouseX.value = event.clientX + mouseY.value = event.clientY + if (isMouseDown.value && currentCell.value) { const target = event.target as HTMLElement @@ -153,6 +160,12 @@ onUnmounted(() => document.removeEventListener('mousemove', handleGlobalMouseMov
{{ formatTime(timer) }}
+ +
+ {{ gameStatus === 2 ? 'Vous avez gagné !' : 'Vous avez perdu !' }} +
+
+ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 06c8ba3..50df5ee 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,11 +1,18 @@