diff --git a/js/module.js b/js/module.js index 6cbc85e..81a416a 100644 --- a/js/module.js +++ b/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()); diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js index e50e929..9842c0d 100644 --- a/js/retro/RetroArchitecture.js +++ b/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, diff --git a/tilorswift/js/dialog/DialogNewTerrain.js b/tilorswift/js/dialog/DialogNewTerrain.js new file mode 100644 index 0000000..b057d9a --- /dev/null +++ b/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 + ) + ) + } + ); + } +} \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftEvent.js b/tilorswift/js/events/TilorswiftEvent.js index aaec7e0..210eb2b 100644 --- a/tilorswift/js/events/TilorswiftEvent.js +++ b/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; \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftMenuNewTerrainClickedEvent.js b/tilorswift/js/events/TilorswiftMenuNewTerrainClickedEvent.js new file mode 100644 index 0000000..7f08fb4 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftNewTerrainEvent.js b/tilorswift/js/events/TilorswiftNewTerrainEvent.js new file mode 100644 index 0000000..a7d88ca --- /dev/null +++ b/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'; + } +} \ No newline at end of file diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index 9bd3c30..9bc4cf4 100644 --- a/tilorswift/js/module.js +++ b/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',