Browse Source

nav bar & start of level selection

nbillard 1 year ago
parent
commit
d7549f6c7f
6 changed files with 48 additions and 4 deletions
  1. 4
    0
      index.html
  2. 11
    0
      modules/fillLevelsSelection.mjs
  3. 8
    2
      modules/levels.mjs
  4. 20
    0
      notes_implementation.md
  5. 4
    2
      script.js
  6. 1
    0
      style.css

+ 4
- 0
index.html View File

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

+ 11
- 0
modules/fillLevelsSelection.mjs View File

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

+ 8
- 2
modules/levels.mjs View File

@@ -1,11 +1,12 @@
1 1
 import { Square } from '/modules/enums.mjs';
2 2
 
3 3
 // Blueprint for the first level
4
-export const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
4
+//
5
+const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
5 6
                                 [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
6 7
                                 [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
7 8
 
8
-export const level2Blueprint = [
9
+const level2Blueprint = [
9 10
     [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 ],
10 11
     [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],
11 12
     [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 = [
17 18
     [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 ],
18 19
     [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 ],
19 20
   ];
21
+
22
+export const levelsBlueprint = [
23
+  level1Blueprint,
24
+  level2Blueprint,
25
+]

+ 20
- 0
notes_implementation.md View File

@@ -0,0 +1,20 @@
1
+# Implementation
2
+
3
+```js
4
+
5
+enum BackgroundTile {Wall, Floor, Destination};
6
+enum ForegroundTile {Player, Box, Empty};
7
+
8
+let playground = {
9
+    background<Layer, BackgroundTile>: {
10
+        tiles<BackgroundTile>: [[]]
11
+    },
12
+    foreground<Layer, ForegroundTile>: {
13
+        tiles<ForegroundTile>: [[]]
14
+    },
15
+    move(sourcePos, destPos) {
16
+        if (this.move(destPos, ))
17
+    }
18
+};
19
+```
20
+

+ 4
- 2
script.js View File

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

+ 1
- 0
style.css View File

@@ -7,6 +7,7 @@
7 7
 body {
8 8
     background-color: var(--main-background-color);
9 9
     display: flex;
10
+    color: --main-invert-color;
10 11
 }
11 12
 
12 13
 .dialog {

Loading…
Cancel
Save