create the level selection

README.md

@@ -1,14 +1,14 @@
 # Sokoban
 
-projet Web 3Mic 
+Projet Web 3Mic 
 
-pour ouvrir le projet, tapez la commande suivante dans un terminal:
+Pour ouvrir le projet, tapez la commande suivante dans un terminal:
 
 ``` sh
 npx serve
 ```
 
-si cela ne marche pas, essayez
+Si cela ne marche pas, essayez la commande suivante
 
 ``` sh
 python3 -m http.server

index.html

@@ -7,7 +7,7 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="icon" href="./res/mario.png"/>
+        <link rel="icon" href="./res/player.png"/>
         <!-- Place favicon.ico in the root directory -->
         <link rel="stylesheet" href="./style.css"/>
 
@@ -21,10 +21,16 @@
             your experience.
             </p>
         <![endif]-->
+<<<<<<< HEAD
         <nav>
             <ol id="level-lists">
             </ol>
         </nav>
+=======
+        <div id="timer">Time</div>
+        <button id="Pause" onclick="Pause()">Pause</button>
+        <canvas id="canvas" width="800" height="400"></canvas>
+>>>>>>> 380cebd36dc4e3a1f3af185d1a7e3f0adb3e04d1
         <div class="to-center">
             <canvas id="canvas" width="800" height="400"></canvas>
             <div class="text-bubble">

modules/levels.mjs

@@ -5,8 +5,14 @@ import { Square } from '/modules/enums.mjs';
 const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
                                 [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
                                 [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
+<<<<<<< HEAD
 
 const level2Blueprint = [
+=======
+                              
+// Blueprint for the second level
+export const level2Blueprint = [
+>>>>>>> 380cebd36dc4e3a1f3af185d1a7e3f0adb3e04d1
     [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor ],
     [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall],
     [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Wall],

script.js

@@ -7,7 +7,11 @@ fillLevelSelection();
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 window.ctx = ctx
+<<<<<<< HEAD
 let playground = generatePlayground(levelsBlueprint[0], canvas.width, canvas.height);
+=======
+let playground = generatePlayground(level2Blueprint, canvas.width, canvas.height);
+>>>>>>> 380cebd36dc4e3a1f3af185d1a7e3f0adb3e04d1
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented) {
     switch (event.key) {
@@ -46,11 +50,39 @@ const sleep = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+//function qui met à jour le temps
+
+let time = 10;
+
+function timer(){
+  let txt = document.getElementById('timer');
+  let level = 0;
+  let afficher = "Time : " + time;
+  txt.innerHTML= afficher;
+  
+  time = time <= 0 ? 0 : time -1;
+  if (time == )
+  {
+  clearInterval(maVar);
+  }
+
+}
+ 
+let maVar = setInterval(timer, 1000);
+if (time == 0){
+  alert('Terminé YAsmine')
+}
+// while (document.readyState != "complete") {
+/*function set_time(){
+  minutes=Math.floor
+}*/
+
+function Pause(){
+  time = time -10;
+}
+
 // while (document.readyState != "complete") {
 setTimeout(1000);
-  // (new Promise((resolve) => {
-  //   setTimeout(resolve, 100)
-  // })).then(()=>{;})
-// }
+ 
 
 playground.draw(ctx);

style.css

@@ -26,9 +26,9 @@ body {
     border-left: 1rem solid transparent;
     border-right: 1rem solid transparent;
     border-top: 5rem solid var(--main-invert-color);
-    position: relative;
-    top: 45%;
-    left: -10%;
+    position: absolute;
+    margin-top: 30%;
+    margin-left: -10%;
     transform: rotate(60deg) ;
     z-index: -1;
 }
@@ -36,8 +36,9 @@ body {
 .text-bubble {
     /* transform: rotate(90deg); */
     position: relative;
-    left: 658px;
-    top: -385px;
+    margin: auto;
+    margin-left: 658px;
+    margin-top: -385px;
     z-index: 2;
 }