mirror of
https://git.leinelab.org/Mal/mr-crocs-adventures.git
synced 2025-09-11 02:57:36 +02:00
Level class created and gravity editable.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
22
tilorswift/js/dialog/DialogGravity.js
Normal file
22
tilorswift/js/dialog/DialogGravity.js
Normal 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))
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
9
tilorswift/js/events/TilorswiftGravityUpdatedEvent.js
Normal file
9
tilorswift/js/events/TilorswiftGravityUpdatedEvent.js
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import TilorswiftEvent from "./TilorswiftEvent.js";
|
||||
|
||||
export default class TilorswiftMenuGravityClickedEvent extends Event
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super(TilorswiftEvent.MENU_GRAVITY_CLICKED);
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
@@ -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());
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user