Dialogs and function for new terrain.

js/module.js

@@ -136,7 +136,7 @@ const FRAME_DURATION = 1000 / FPS;
 const GAME_SPEED = 1;
 const GRAVITY = 2;
 
-let levelJson = new FileLoader('levels/test_depth.json');
+let levelJson = new FileLoader('levels/level01.json');
 
 const LEVEL = JSON.parse(levelJson.getContent());
 

js/retro/RetroArchitecture.js

@@ -21,7 +21,13 @@ export default class RetroArchitecture
     init()
     {
         for (let y = 0; y < this.rows; y++) {
-            this.matrix.push(Array(this.columns).fill(null));
+            let row = [];
+
+            for (let x = 0; x < this.columns; x++) {
+                row.push(null);
+            }
+            console.log(row);
+            this.matrix.push(row);
         }
     }
 
@@ -151,7 +157,7 @@ export default class RetroArchitecture
             for (let x = viewX; x < viewWidth; x++) {
                 let field = this.matrix[y][x];
 
-                if (field !== null) {
+                if (field !== null && field !== undefined) {
                     context.drawImage(
                         this.tileset.canvas,
                         field.tile * this.tileWidth,

tilorswift/js/dialog/DialogNewTerrain.js

@@ -0,0 +1,27 @@
+import Dialog from "./Dialog.js";
+import TilorswiftNewTerrainEvent from "../events/TilorswiftNewTerrainEvent.js";
+
+export default class DialogNewTerrain extends Dialog
+{
+    constructor() {
+        super();
+        this.setMessage('Neues Terrain erstellen');
+        this.inputRows = this.createInputNumber('Zeilen');
+        this.inputColumns = this.createInputNumber('Spalten');
+        this.buttonCancel = this.createButton('Abbrechen');
+        this.buttonCreate = this.createButton('Erstellen');
+
+        this.buttonCreate.addEventListener(
+            'click',
+            () => {
+                window.dispatchEvent(
+                    new TilorswiftNewTerrainEvent(
+                        '/mr-crocs-adventures/graphics/tileset-landscape01.jpg', /* TODO */
+                        this.inputColumns.value,
+                        this.inputRows.value
+                    )
+                )
+            }
+        );
+    }
+}

tilorswift/js/events/TilorswiftEvent.js

@@ -11,6 +11,8 @@ const TilorswiftEvent = {
     ADD_ROWS_CLICKED: 'addRowsClicked',
     ADD_COLUMNS: 'addColumns',
     ADD_COLUMNS_CLICKED: 'addColumnsClicked',
+    NEW_TERRAIN: 'newTerrain',
+    NEW_TERRAIN_CLICKED: 'newTerrainClicked',
 };
 
 export default TilorswiftEvent;

tilorswift/js/events/TilorswiftMenuNewTerrainClickedEvent.js

@@ -0,0 +1,8 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftMenuNewTerrainClickedEvent extends Event
+{
+    constructor() {
+        super(TilorswiftEvent.NEW_TERRAIN_CLICKED);
+    }
+}

tilorswift/js/events/TilorswiftNewTerrainEvent.js

@@ -0,0 +1,13 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftNewTerrainEvent extends Event
+{
+    constructor(tileset, tilesX, tilesY)
+    {
+        super(TilorswiftEvent.NEW_TERRAIN);
+        this.tileset = tileset;
+        this.tilesX = tilesX;
+        this.tilesY = tilesY;
+        this.backgroundColor = '#6096ff';
+    }
+}

tilorswift/js/module.js

@@ -18,6 +18,8 @@ import DialogAddRows from "./dialog/DialogAddRows.js";
 import DialogAddColumns from "./dialog/DialogAddColumns.js";
 import TilorswiftAddRowsClickedEvent from "./events/TilorswiftAddRowsClickedEvent.js";
 import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClickedEvent.js";
+import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
+import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
 
 let loader = new FileLoader('../levels/level.json');
 let terrainData = JSON.parse(loader.getContent());
@@ -45,10 +47,8 @@ image.onload = function () {
     let mainbar = new MainMenu('mainbar');
 
     let menuFile = new MenuGroup('Datei');
-    menuFile.addMenuEntry(
-        new MainMenuEntry('Speichern', TilorswiftMenuSaveClickedEvent)
-    );
-
+    menuFile.addMenuEntry(new MainMenuEntry('Neu...', TilorswiftMenuNewTerrainClickedEvent));
+    menuFile.addMenuEntry(new MainMenuEntry('Speichern...', TilorswiftMenuSaveClickedEvent));
     mainbar.addMenuGroup(menuFile);
 
     let menuEdit = new MenuGroup('Bearbeiten');
@@ -99,6 +99,13 @@ image.onload = function () {
         }
     );
 
+    window.addEventListener(
+        TilorswiftEvent.NEW_TERRAIN_CLICKED,
+        () => {
+            new DialogNewTerrain();
+        }
+    );
+
     window.addEventListener(
         TilorswiftEvent.ADD_ROWS_CLICKED,
         () => {
@@ -127,6 +134,15 @@ image.onload = function () {
         }
     );
 
+    window.addEventListener(
+        TilorswiftEvent.NEW_TERRAIN,
+        (event) => {
+            terrain = new Terrain(tileset, event.tilesX, event.tilesY, event.backgroundColor);
+            map.innerHTML = '';
+            map.appendChild(terrain.getElement());
+        }
+    );
+
     /* Prevents Firefox's annoying default drag and drop behavior for images */
     document.addEventListener(
         'dragstart',