nav bar & start of level selection

index.html

@@ -21,6 +21,10 @@
             your experience.
             </p>
         <![endif]-->
+        <nav>
+            <ol id="level-lists">
+            </ol>
+        </nav>
         <div class="to-center">
             <canvas id="canvas" width="800" height="400"></canvas>
             <div class="text-bubble">

modules/fillLevelsSelection.mjs

@@ -0,0 +1,11 @@
+import { levelsBlueprint } from '/modules/levels.mjs'
+
+export const fillLevelSelection = () => {
+  let levelList = document.getElementById('level-list');
+  for (let i = 0; i < levelsBlueprint.size; ++i) {
+    let listElement = document.createElement("li");
+    let selectionButton = document.createElement("button");
+    selectionButton.setAttribute("array-index", index);
+    // selectionButton.addEventListener
+  }
+}

modules/levels.mjs

@@ -1,11 +1,12 @@
 import { Square } from '/modules/enums.mjs';
 
 // Blueprint for the first level
-export const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
+//
+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 ]];
 
-export const level2Blueprint = [
+const level2Blueprint = [
     [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],
@@ -17,3 +18,8 @@ export const level2Blueprint = [
     [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall ],
     [Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
   ];
+
+export const levelsBlueprint = [
+  level1Blueprint,
+  level2Blueprint,
+]

notes_implementation.md

@@ -0,0 +1,20 @@
+# Implementation
+
+```js
+
+enum BackgroundTile {Wall, Floor, Destination};
+enum ForegroundTile {Player, Box, Empty};
+
+let playground = {
+    background<Layer, BackgroundTile>: {
+        tiles<BackgroundTile>: [[]]
+    },
+    foreground<Layer, ForegroundTile>: {
+        tiles<ForegroundTile>: [[]]
+    },
+    move(sourcePos, destPos) {
+        if (this.move(destPos, ))
+    }
+};
+```
+

script.js

@@ -1,11 +1,13 @@
 import { generatePlayground } from '/modules/playground.mjs'
-import { level1Blueprint, level2Blueprint } from '/modules/levels.mjs'
+import {levelsBlueprint } from '/modules/levels.mjs'
 import { MoveDirection } from '/modules/enums.mjs'
+import { fillLevelsSelection } from '/modules/fillLevelsSelection.mjs'
 
+fillLevelSelection();
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 window.ctx = ctx
-let playground = generatePlayground(level1Blueprint, canvas.width, canvas.height);
+let playground = generatePlayground(levelsBlueprint[0], canvas.width, canvas.height);
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented) {
     switch (event.key) {

style.css

@@ -7,6 +7,7 @@
 body {
     background-color: var(--main-background-color);
     display: flex;
+    color: --main-invert-color;
 }
 
 .dialog {