diff --git a/web/assets/css/game.css b/web/assets/css/game.css index be4d2d7..b7e5362 100644 --- 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; +} diff --git a/web/assets/js/game.js b/web/assets/js/game.js index c98b140..36d57a7 100644 --- 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); } diff --git a/web/templates/view/game.html b/web/templates/view/game.html index acecbdd..8ee4b57 100644 --- a/web/templates/view/game.html +++ b/web/templates/view/game.html @@ -9,6 +9,12 @@ +
+

You win!

+

You have completed the level.

+ +
+