playground selection

index.html

@@ -22,7 +22,7 @@
             </p>
         <![endif]-->
         <nav>
-            <ol id="level-lists">
+            <ol id="level-list">
             </ol>
         </nav>
         <div id="timer">Time</div>

modules/fillLevelsSelection.mjs

@@ -1,11 +1,20 @@
 import { levelsBlueprint } from '/modules/levels.mjs'
+import { generatePlayground } from '/modules/playground.mjs'
 
-export const fillLevelsSelection = () => {
+export const fillLevelsSelection = (gameState, ctx) => {
   let levelList = document.getElementById('level-list');
-  for (let i = 0; i < levelsBlueprint.size; ++i) {
+  for (let i = 0; i < levelsBlueprint.length; ++i) {
     let listElement = document.createElement("li");
     let selectionButton = document.createElement("button");
-    selectionButton.setAttribute("array-index", index);
-    // selectionButton.addEventListener
+    selectionButton.setAttribute("array-index", i);
+    selectionButton.addEventListener("click", (click) => {
+      gameState.playground = generatePlayground(levelsBlueprint[
+        click.srcElement.getAttribute("array-index")
+      ], canvas.width, canvas.height);
+      gameState.playground.draw(ctx, gameState.width, gameState.height);
+    });
+    selectionButton.innerText = "Level" + i;
+    listElement.appendChild(selectionButton);
+    levelList.appendChild(listElement);
   }
 }

script.js

@@ -3,38 +3,44 @@ import { levelsBlueprint } from '/modules/levels.mjs'
 import { MoveDirection } from '/modules/enums.mjs'
 import { fillLevelsSelection } from '/modules/fillLevelsSelection.mjs'
 
-fillLevelsSelection();
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
+let gameState = {
+  playground: generatePlayground(levelsBlueprint[0], canvas.width, canvas.height),
+  width: canvas.width,
+  height: canvas.height,
+};
+
+fillLevelsSelection(gameState, ctx);
 window.ctx = ctx
 let playground = generatePlayground(levelsBlueprint[0], canvas.width, canvas.height);
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented) {
     switch (event.key) {
       case "ArrowDown":
-        playground.move(MoveDirection.Down);
+        gameState.playground.move(MoveDirection.Down);
         break;
       case "ArrowUp":
-        playground.move(MoveDirection.Up);
+        gameState.playground.move(MoveDirection.Up);
         break;
       case "ArrowRight":
-        playground.move(MoveDirection.Right);
+        gameState.playground.move(MoveDirection.Right);
         break;
       case "ArrowLeft":
-        playground.move(MoveDirection.Left);
+        gameState.playground.move(MoveDirection.Left);
         break;
       default:
         return;
         break;
     }
-    playground.draw(ctx, canvas.width, canvas.height);
-    if (playground.isSolved()) {
+    gameState.playground.draw(ctx, canvas.width, canvas.height);
+    if (gameState.playground.isSolved()) {
       alert("bravo");
     }
   }
 });
 
-window.playground = playground;
+window.playground = gameState.playground;
 window.up = MoveDirection.Up;
 window.down = MoveDirection.Down;
 window.left = MoveDirection.Left;