Level 2

Add win overlay
2026-03-31 12:16:45 +02:00 · 2026-03-31 12:11:39 +02:00 · 2026-03-31 12:07:37 +02:00 · 2026-03-31 12:00:03 +02:00 · 2026-03-31 11:55:20 +02:00
3 changed files with 101 additions and 11 deletions
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -12,7 +12,7 @@ body {
 }
 body {
-    background: #f7f7f7;
+    background: #FFF6E5;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -26,14 +26,22 @@ main {
    align-items: center;
    justify-content: center;
    padding: 20px;
-    border-radius: 10px;
+    border-radius: 150px;
    min-width: fit-content;
    flex-shrink: 0;
    gap: 16px;
 }
 .game-layout {
-    width: min(95vw, 1000px);
+    width: min(96vw, 1200px);
 }
 .game-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #223;
    letter-spacing: 0.04em;
    text-align: center;
 }
 .toolbox {
@@ -66,7 +74,7 @@ main {
    flex-direction: column;
    padding: 10px;
    background: #dadeef;
-    border-radius: 5px;
+    border-radius: 15px;
 }
 .lign {
@@ -74,8 +82,8 @@ main {
 }
 .cell {
-    width: clamp(28px, 5.5vmin, 60px);
+    width: clamp(28px, 6.2vmin, 72px);
-    height: clamp(28px, 5.5vmin, 60px);
+    height: clamp(28px, 6.2vmin, 72px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
@@ -119,6 +127,12 @@ main {
    background-color: #DADEEF;
    position: relative;
    overflow: hidden;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
 }
 .wall {
@@ -129,6 +143,24 @@ main {
    background-position: center;
 }
 .captor {
    background-color: #DADEEF;
    background-image: url("../img/tiles/Capteur-1.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
 }
 .cable {
    background-color: #DADEEF;
    background-image: url("../img/tiles/CableV.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg);
 }
 .door {
    background-color: #DADEEF;
    background-image: url("../img/tiles/WoodenDoor.svg");
@@ -321,3 +353,42 @@ main {
        padding: 8px;
    }
 }
 .win-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    gap: 20px;
    backdrop-filter: blur(6px);
 }
 .win-overlay h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
 }
 .win-overlay p {
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
 }
 .win-overlay button {
    font-size: 1.5rem;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    border: none;
    cursor: pointer;
 }
--- a/web/assets/js/game.js
+++ b/web/assets/js/game.js
@@ -584,10 +584,9 @@ function traceLaser() {
 function finish() {
    setTimeout(() => {
-        alert("Reussi !");
+        const winOverlay = document.querySelector(".win-overlay");
        winOverlay.style.visibility = "visible";
    }, 100);
    nextLevel();
 }
 function nextLevel() {
@@ -607,6 +606,9 @@ function nextLevel () {
    activatedButtons = {};
    openedDoors = {};
    traceLaser();
    const winOverlay = document.querySelector(".win-overlay");
    winOverlay.style.visibility = "hidden";
 }
 createPalette();
--- a/web/templates/view/game.html
+++ b/web/templates/view/game.html
@@ -9,6 +9,12 @@
    <script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
 </head>
 <body>
    <div class="win-overlay">
      <h1>You win!</h1>
      <p>You have completed the level.</p>
      <button class="win-button" onclick="nextLevel()">Next Level</button>
    </div>
    <script>
        atOptions = {
          'key' : '72b6ba1a1c26b9671167b66063c7e699',
@@ -21,6 +27,7 @@
      <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
    <main class="game-layout">
        <h1 class="game-title">Mirror Game</h1>
        <div id="map" class="map"></div>
        <section class="toolbox">
@@ -28,6 +35,16 @@
            <div id="glass-palette" class="glass-palette"></div>
        </section>
    </main>
    <script>
        atOptions = {
          'key' : '72b6ba1a1c26b9671167b66063c7e699',
          'format' : 'iframe',
          'height' : 600,
          'width' : 160,
          'params' : {}
        };
      </script>
      <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
    <script src="../../assets/js/game.js" defer></script>
 </body>
Author	SHA1	Message	Date
Pierre	57b37d0139	Level 2	2026-03-31 12:16:45 +02:00
Pierre	4939b74fad	Level 2	2026-03-31 12:11:39 +02:00
Sysy's	49045e4d76	Add win overlay	2026-03-31 12:07:37 +02:00
Sysy's	43100e65e9	Add game title and update layout styles Adjust UI visuals: change page background to #FFF6E5, increase main container border-radius from 10px to 150px, and soften toolbox corners (5px → 15px). Add a new .game-title CSS rule (responsive font-size, weight, color, letter-spacing, centered) and insert an <h1 class="game-title">Mirror Game</h1> into the game template. These are visual polish changes only; no gameplay logic was modified.	2026-03-31 12:00:03 +02:00
Sysy's	94ddc4a00f	Make size bigger + add ads	2026-03-31 11:55:20 +02:00