From d7549f6c7fcd37021669efce77de753060523a3e Mon Sep 17 00:00:00 2001
From: nbillard <nathanbillard12@gmail.com>
Date: Mon, 5 Dec 2022 17:40:17 +0100
Subject: [PATCH] nav bar & start of level selection

---
 index.html                      |  4 ++++
 modules/fillLevelsSelection.mjs | 11 +++++++++++
 modules/levels.mjs              | 10 ++++++++--
 notes_implementation.md         | 20 ++++++++++++++++++++
 script.js                       |  6 ++++--
 style.css                       |  1 +
 6 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 modules/fillLevelsSelection.mjs
 create mode 100644 notes_implementation.md

diff --git a/index.html b/index.html
index 0738a3e..f5ee1bd 100644
--- a/index.html
+++ b/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">
diff --git a/modules/fillLevelsSelection.mjs b/modules/fillLevelsSelection.mjs
new file mode 100644
index 0000000..bea2119
--- /dev/null
+++ b/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
+  }
+}
diff --git a/modules/levels.mjs b/modules/levels.mjs
index f066de0..fd6d243 100644
--- a/modules/levels.mjs
+++ b/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,
+]
diff --git a/notes_implementation.md b/notes_implementation.md
new file mode 100644
index 0000000..bf1e1af
--- /dev/null
+++ b/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, ))
+    }
+};
+```
+
diff --git a/script.js b/script.js
index 732be1a..5e7d811 100644
--- a/script.js
+++ b/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) {
diff --git a/style.css b/style.css
index 9e16d4d..bf1348e 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,7 @@
 body {
     background-color: var(--main-background-color);
     display: flex;
+    color: --main-invert-color;
 }
 
 .dialog {