Level class created and gravity editable.

This commit is contained in:
Mal
2020-02-16 00:53:03 +01:00
parent cec3cc726f
commit a7ecbf9d2e
20 changed files with 277 additions and 133 deletions

View File

@@ -85,18 +85,14 @@ export default class Terrain
tr.appendChild(td);
}
console.log(index);
if (index === undefined || index >= this.tilesY - 1) {
this.fields.push(row);
this.htmlElement.appendChild(tr);
} else if (index === 0) {
this.fields = [row].concat(this.fields);
console.log(this.fields[0]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
} else {
this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index));
console.log(this.fields[1]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
}
}
@@ -185,20 +181,20 @@ export default class Terrain
return this.targetTileX !== undefined && this.targetTileY !== undefined;
}
static createFromJson(terrainData)
static createFromJson(levelData)
{
let graphicSet = GraphicSet[terrainData.tileset];
let graphicSet = GraphicSet[levelData.tileset];
let tileset = new Tileset(terrainData.tileset);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
let tileset = new Tileset(levelData.tileset);
let terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
for (let y = 0; y < terrainData.rows; y++) {
for (let x = 0; x < terrainData.columns; x++) {
terrain.setFieldIndex(x, y, terrainData.matrix[y][x]);
for (let y = 0; y < levelData.rows; y++) {
for (let x = 0; x < levelData.columns; x++) {
terrain.setFieldIndex(x, y, levelData.matrix[y][x]);
if (x === terrainData.startX && y === terrainData.startY) {
if (x === levelData.startX && y === levelData.startY) {
terrain.setEntrancePoint(x, y);
} else if (x === terrainData.targetX && y === terrainData.targetY) {
} else if (x === levelData.targetX && y === levelData.targetY) {
terrain.setTargetPoint(x, y);
}
}

View File

@@ -1,44 +1,42 @@
export default class Tilorswift
{
static getTerrainAsJson(terrain)
static getLevelAsJson(level)
{
console.log('Save da shit.');
let matrix = [];
console.log(terrain.fields.length);
for (let y = 0; y < terrain.fields.length; y++) {
for (let y = 0; y < level.terrain.fields.length; y++) {
let row = [];
for (let x = 0; x < terrain.fields[y].length; x++) {
row.push(terrain.fields[y][x].index);
for (let x = 0; x < level.terrain.fields[y].length; x++) {
row.push(level.terrain.fields[y][x].index);
}
matrix.push(row);
}
let data = {
tileset: terrain.tileset.setId,
rows: terrain.tilesY,
columns: terrain.tilesX,
startX: terrain.entranceTileX,
startY: terrain.entranceTileY,
targetX: terrain.targetTileX,
targetY: terrain.targetTileY,
tileset: level.getTilesetId(),
rows: level.getRows(),
columns: level.getColumns(),
startX: level.getStartX(),
startY: level.getStartY(),
targetX: level.getTargetX(),
targetY: level.getTargetY(),
gravity: level.gravity,
matrix: matrix,
};
return JSON.stringify(data);
}
static saveTerrainToFile(terrain)
static saveLevelToFile(level)
{
if (!terrain.hasEntrancePoint()) {
if (!level.hasEntrancePoint()) {
alert('Es muss ein Startpunkt definiert sein!');
return false;
}
if (!terrain.hasTargetPoint()) {
if (!level.hasTargetPoint()) {
alert('Es muss ein Zielpunkt definiert sein!');
return false;
}
@@ -49,7 +47,7 @@ export default class Tilorswift
return false;
}
let json = Tilorswift.getTerrainAsJson(terrain);
let json = Tilorswift.getLevelAsJson(level);
let download = document.createElement('a');
download.setAttribute('download', filename);

View File

@@ -41,7 +41,7 @@ export default class Dialog
return button;
}
createInputNumber(label, value = 0, min = 0, max = 999999)
createInputNumber(label, value = 0, min = 0, max = 999999, step = 1)
{
let htmlElement = document.createElement('div');
htmlElement.classList.add('dialog-input-area');
@@ -54,6 +54,9 @@ export default class Dialog
htmlElementInput.classList.add('dialog-input');
htmlElementInput.type = 'number';
htmlElementInput.value = value;
htmlElementInput.max = max;
htmlElementInput.min = min;
htmlElementInput.step = step;
htmlElement.appendChild(htmlElementLabel);
htmlElement.appendChild(htmlElementInput);

View File

@@ -0,0 +1,22 @@
import Dialog from "./Dialog.js";
import TilorswiftGravityUpdatedEvent from "../events/TilorswiftGravityUpdatedEvent.js";
export default class DialogGravity extends Dialog
{
constructor(gravity)
{
super();
this.setMessage('Gravitation einstellen');
this.inputGravity = this.createInputNumber('Stärke', gravity, 0, 10, 0.01);
this.createButton('Abbrechen');
this.buttonOk = this.createButton('OK');
this.buttonOk.addEventListener(
'click',
() => {
window.dispatchEvent(
new TilorswiftGravityUpdatedEvent(parseFloat(this.inputGravity.value))
);
}
)
}
}

View File

@@ -14,6 +14,8 @@ const TilorswiftEvent = {
NEW_TERRAIN: 'newTerrain',
NEW_TERRAIN_CLICKED: 'newTerrainClicked',
TILESET_SELECTED: 'tilesetSelected',
MENU_GRAVITY_CLICKED: 'menuGravityClicked',
GRAVITY_UPDATED: 'gravityUpdated',
};
export default TilorswiftEvent;

View File

@@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftGravityUpdatedEvent extends Event
{
constructor(gravity) {
super(TilorswiftEvent.GRAVITY_UPDATED);
this.gravity = gravity;
}
}

View File

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

View File

@@ -42,6 +42,7 @@ export default class TilesetPickerWidget extends Widget
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
this.loadTileset();
}

View File

@@ -1,5 +1,4 @@
import Terrain from "./Terrain.js";
import FileLoader from "../../js/FileLoader.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js";
import Mouse from "./Mouse.js";
import Tileset from "./Tileset.js";
@@ -23,27 +22,27 @@ import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
import Level from "../../js/Level.js";
import TilorswiftMenuGravityClickedEvent from "./events/TilorswiftMenuGravityClickedEvent.js";
import DialogGravity from "./dialog/DialogGravity.js";
let level = Level.createFromFile('../levels/moonbase.json');
if (GraphicSet[level.terrain.tileset.setId].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage + '")';
}
let loader = new FileLoader('../levels/level01.json');
let terrainData = JSON.parse(loader.getContent());
let image = new Image();
image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset;
image.src = Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset;
image.onload = function () {
let terrain = Terrain.createFromJson(terrainData);
if (GraphicSet[terrainData.tileset].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")';
}
document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
document.body.style.backgroundColor = GraphicSet[level.terrain.tileset.setId].backgroundColor;
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
map.appendChild(level.terrain.getElement());
let brush = new Brush();
let tileset = new Tileset(terrainData.tileset);
let tileset = new Tileset(level.terrain.tileset.setId);
let widgetBar = new WidgetBar('widget-bar');
let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@@ -70,6 +69,10 @@ image.onload = function () {
menuEdit.addMenuEntry(new MainMenuEntry('Spalten einfügen...', TilorswiftAddColumnsClickedEvent));
mainbar.addMenuGroup(menuEdit);
let menuLevel = new MenuGroup('Level');
menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
mainbar.addMenuGroup(menuLevel);
document.body.appendChild(mainbar.getElement());
window.addEventListener(
@@ -78,7 +81,7 @@ image.onload = function () {
if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
event.getField().setIndex(terrain.brushTileIndex);
event.getField().setIndex(level.terrain.brushTileIndex);
break;
case 2:
event.getField().setIndex(-1);
@@ -86,15 +89,15 @@ image.onload = function () {
}
} else if (brush.mode === BrushMode.ENTRANCE) {
if (event.getField().index === -1) {
let coordinates = terrain.getFieldCoordinates(event.getField());
terrain.setEntrancePoint(coordinates.x, coordinates.y);
let coordinates = level.terrain.getFieldCoordinates(event.getField());
level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
brush.mode = BrushMode.TERRAIN;
widgetBar.enableWidgets();
}
} else if (brush.mode === BrushMode.EXIT) {
if (event.getField().index === -1) {
let coordinates = terrain.getFieldCoordinates(event.getField());
terrain.setTargetPoint(coordinates.x, coordinates.y);
let coordinates = level.terrain.getFieldCoordinates(event.getField());
level.terrain.setTargetPoint(coordinates.x, coordinates.y);
brush.mode = BrushMode.TERRAIN;
widgetBar.enableWidgets();
}
@@ -113,7 +116,7 @@ image.onload = function () {
TilorswiftEvent.FIELD_ENTERED,
(event) => {
if (mouse.isPressedLeft) {
event.getField().setIndex(terrain.brushTileIndex);
event.getField().setIndex(level.terrain.brushTileIndex);
} else if (mouse.isPressedRight) {
event.getField().setIndex(-1);
}
@@ -127,6 +130,13 @@ image.onload = function () {
}
);
window.addEventListener(
TilorswiftEvent.MENU_GRAVITY_CLICKED,
() => {
new DialogGravity(level.gravity);
}
);
window.addEventListener(
TilorswiftEvent.ADD_ROWS_CLICKED,
() => {
@@ -141,17 +151,24 @@ image.onload = function () {
}
);
window.addEventListener(
TilorswiftEvent.GRAVITY_UPDATED,
(event) => {
level.gravity = event.gravity;
}
);
window.addEventListener(
TilorswiftEvent.ADD_ROWS,
function (event) {
terrain.addRows(event.beforeRow, event.rowCount);
level.terrain.addRows(event.beforeRow, event.rowCount);
}
);
window.addEventListener(
TilorswiftEvent.ADD_COLUMNS,
function (event) {
terrain.addColumns(event.beforeColumn, event.columnCount);
level.terrain.addColumns(event.beforeColumn, event.columnCount);
}
);
@@ -159,12 +176,15 @@ image.onload = function () {
TilorswiftEvent.NEW_TERRAIN,
(event) => {
let tileset = new Tileset(event.tilesetIndex);
terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
level.terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
document.body.style.backgroundColor = level.getBackgroundColor();
if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
} else {
document.body.style.backgroundImage = 'none';
}
map.innerHTML = '';
map.appendChild(terrain.getElement());
map.appendChild(level.terrain.getElement());
tilesetPicker.reloadTileset(tileset);
}
);
@@ -180,7 +200,7 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED,
function () {
if (Tilorswift.saveTerrainToFile(terrain)) {
if (Tilorswift.saveLevelToFile(level)) {
window.dispatchEvent(new TilorswiftSavedEvent());
}
}