Add win overlay

2026-03-31 12:07:37 +02:00
parent 43100e65e9
commit 49045e4d76
3 changed files with 53 additions and 1 deletions
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -127,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 {
@@ -329,3 +335,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
@@ -547,7 +547,8 @@ function traceLaser() {

 function finish() {
    setTimeout(() => {
-        alert("Reussi !");
+        const winOverlay = document.querySelector(".win-overlay");
+        winOverlay.style.visibility = "visible";
    }, 100);
 }

--- 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',