299 lines
11 KiB
JavaScript
299 lines
11 KiB
JavaScript
import {LoadLevelDialog} from "../../js/ui/LoadLevelDialog.js";
|
|
import GraphicSet from "../../js/GraphicSet.js";
|
|
import Setting from "../../js/Setting.js";
|
|
import Brush from "./Brush.js";
|
|
import Tileset from "./Tileset.js";
|
|
import WidgetBar from "./menu/WidgetBar.js";
|
|
import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
|
|
import EntrancePointWidget from "./menu/EntrancePointWidget.js";
|
|
import TargetPointWidget from "./menu/TargetPointWidget.js";
|
|
import Mouse from "./Mouse.js";
|
|
import MainMenu from "./menu/MainMenu.js";
|
|
import MenuGroup from "./menu/MenuGroup.js";
|
|
import MainMenuEntry from "./menu/MainMenuEntry.js";
|
|
import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
|
|
import {TilorswiftMenuOpenCLickedEvent} from "./events/TilorswiftMenuOpenCLickedEvent.js";
|
|
import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js";
|
|
import TilorswiftAddRowsClickedEvent from "./events/TilorswiftAddRowsClickedEvent.js";
|
|
import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClickedEvent.js";
|
|
import TilorswiftMenuGravityClickedEvent from "./events/TilorswiftMenuGravityClickedEvent.js";
|
|
import TilorswiftEvent from "./events/TilorswiftEvent.js";
|
|
import BrushMode from "./BrushMode.js";
|
|
import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
|
|
import DialogGravity from "./dialog/DialogGravity.js";
|
|
import DialogAddRows from "./dialog/DialogAddRows.js";
|
|
import DialogAddColumns from "./dialog/DialogAddColumns.js";
|
|
import Terrain from "./Terrain.js";
|
|
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
|
|
import Level from "../../js/Level.js";
|
|
|
|
export default class Tilorswift
|
|
{
|
|
constructor(level) {
|
|
this.level = level;
|
|
this.map = document.getElementById('map');
|
|
this.brush = new Brush();
|
|
this.tileset = new Tileset(this.level.terrain.tileset.setId);
|
|
this.widgetBar = new WidgetBar('widget-bar');
|
|
this.tilesetPicker = new TilesetPickerWidget(this.tileset, this.brush);
|
|
this.widgetBar.addWidget(this.tilesetPicker);
|
|
this.entrancePicker = new EntrancePointWidget(this.widgetBar, this.brush);
|
|
this.widgetBar.addWidget(this.entrancePicker);
|
|
this.targetPicker = new TargetPointWidget(this.widgetBar, this.brush);
|
|
this.widgetBar.addWidget(this.targetPicker);
|
|
this.mouse = new Mouse();
|
|
this.mainbar = new MainMenu('mainbar');
|
|
}
|
|
|
|
init()
|
|
{
|
|
document.body.appendChild(this.widgetBar.getElement());
|
|
|
|
const menuFile = new MenuGroup('Datei');
|
|
menuFile.addMenuEntry(new MainMenuEntry('Neu...', TilorswiftMenuNewTerrainClickedEvent));
|
|
menuFile.addMenuEntry(new MainMenuEntry('Öffnen...', TilorswiftMenuOpenCLickedEvent));
|
|
menuFile.addMenuEntry(new MainMenuEntry('Speichern...', TilorswiftMenuSaveClickedEvent));
|
|
this.mainbar.addMenuGroup(menuFile);
|
|
|
|
const menuEdit = new MenuGroup('Bearbeiten');
|
|
menuEdit.addMenuEntry(new MainMenuEntry('Zeilen einfügen...', TilorswiftAddRowsClickedEvent));
|
|
menuEdit.addMenuEntry(new MainMenuEntry('Spalten einfügen...', TilorswiftAddColumnsClickedEvent));
|
|
this.mainbar.addMenuGroup(menuEdit);
|
|
|
|
const menuLevel = new MenuGroup('Level');
|
|
menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
|
|
this.mainbar.addMenuGroup(menuLevel);
|
|
|
|
document.body.appendChild(this.mainbar.getElement());
|
|
|
|
this.addEventListeners();
|
|
}
|
|
|
|
addEventListeners()
|
|
{
|
|
window.addEventListener(
|
|
TilorswiftEvent.FIELD_CLICKED,
|
|
(event) => {
|
|
if (this.brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
|
|
switch (event.button) {
|
|
case 0:
|
|
event.getField().setIndex(this.level.terrain.brushTileIndex);
|
|
break;
|
|
case 2:
|
|
event.getField().setIndex(-1);
|
|
break;
|
|
}
|
|
} else if (this.brush.mode === BrushMode.ENTRANCE) {
|
|
if (event.getField().index === -1) {
|
|
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
|
|
this.level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
|
|
this.brush.mode = BrushMode.TERRAIN;
|
|
this.widgetBar.enableWidgets();
|
|
}
|
|
} else if (this.brush.mode === BrushMode.EXIT) {
|
|
if (event.getField().index === -1) {
|
|
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
|
|
this.level.terrain.setTargetPoint(coordinates.x, coordinates.y);
|
|
this.brush.mode = BrushMode.TERRAIN;
|
|
this.widgetBar.enableWidgets();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
'contextmenu',
|
|
(event) => {
|
|
event.preventDefault();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.FIELD_ENTERED,
|
|
(event) => {
|
|
if (this.mouse.isPressedLeft) {
|
|
event.getField().setIndex(this.level.terrain.brushTileIndex);
|
|
} else if (this.mouse.isPressedRight) {
|
|
event.getField().setIndex(-1);
|
|
}
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.NEW_TERRAIN_CLICKED,
|
|
() => {
|
|
new DialogNewTerrain();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.MENU_GRAVITY_CLICKED,
|
|
() => {
|
|
new DialogGravity(this.level.gravity);
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.ADD_ROWS_CLICKED,
|
|
() => {
|
|
new DialogAddRows();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.ADD_COLUMNS_CLICKED,
|
|
() => {
|
|
new DialogAddColumns();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.GRAVITY_UPDATED,
|
|
(event) => {
|
|
this.level.gravity = event.gravity;
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.ADD_ROWS,
|
|
(event) => {
|
|
this.level.terrain.addRows(event.beforeRow, event.rowCount);
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.ADD_COLUMNS,
|
|
(event) => {
|
|
this.level.terrain.addColumns(event.beforeColumn, event.columnCount);
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.NEW_TERRAIN,
|
|
(event) => {
|
|
this.tileset = new Tileset(event.tilesetIndex);
|
|
this.level.terrain = new Terrain(this.tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
|
|
|
|
document.body.style.backgroundColor = this.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';
|
|
}
|
|
this.map.innerHTML = '';
|
|
this.map.appendChild(this.level.terrain.getElement());
|
|
this.tilesetPicker.reloadTileset(this.tileset);
|
|
}
|
|
);
|
|
|
|
/* Prevents Firefox's annoying default drag and drop behavior for images */
|
|
document.addEventListener(
|
|
'dragstart',
|
|
(event) => {
|
|
event.preventDefault();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.MENU_OPEN_CLICKED,
|
|
() => {
|
|
this.openLevelFromFile();
|
|
}
|
|
);
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.MENU_SAVE_CLICKED,
|
|
()=> {
|
|
if (this.saveLevelToFile()) {
|
|
window.dispatchEvent(new TilorswiftSavedEvent());
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
getLevelAsJson()
|
|
{
|
|
let matrix = [];
|
|
|
|
for (let y = 0; y < this.level.terrain.fields.length; y++) {
|
|
let row = [];
|
|
|
|
for (let x = 0; x < this.level.terrain.fields[y].length; x++) {
|
|
row.push(this.level.terrain.fields[y][x].index);
|
|
}
|
|
|
|
matrix.push(row);
|
|
}
|
|
|
|
let data = {
|
|
tileset: this.level.getTilesetId(),
|
|
rows: this.level.getRows(),
|
|
columns: this.level.getColumns(),
|
|
startX: this.level.getStartX(),
|
|
startY: this.level.getStartY(),
|
|
targetX: this.level.getTargetX(),
|
|
targetY: this.level.getTargetY(),
|
|
gravity: this.level.gravity,
|
|
matrix: matrix,
|
|
};
|
|
|
|
return JSON.stringify(data);
|
|
}
|
|
|
|
openLevelFromFile()
|
|
{
|
|
const dialog = new LoadLevelDialog();
|
|
dialog.onLoad = (json) => {
|
|
this.level = Level.createFromJson(json);
|
|
this.loadLevel();
|
|
dialog.close();
|
|
}
|
|
}
|
|
|
|
loadLevel()
|
|
{
|
|
this.tileset = new Tileset(this.level.terrain.tileset.setId);
|
|
|
|
document.body.style.backgroundColor = this.level.getBackgroundColor();
|
|
|
|
if (GraphicSet[this.level.terrain.tileset.setId].backgroundImage !== null) {
|
|
document.body.style.backgroundImage = 'url("../' + Setting.GRAPHICS_LOCATION + GraphicSet[this.level.terrain.tileset.setId].backgroundImage + '")';
|
|
} else {
|
|
document.body.style.backgroundImage = 'none';
|
|
}
|
|
this.map.innerHTML = '';
|
|
this.map.appendChild(this.level.terrain.getElement());
|
|
this.tilesetPicker.reloadTileset(this.tileset);
|
|
}
|
|
|
|
saveLevelToFile()
|
|
{
|
|
if (!this.level.hasEntrancePoint()) {
|
|
alert('Es muss ein Startpunkt definiert sein!');
|
|
return false;
|
|
}
|
|
|
|
if (!this.level.hasTargetPoint()) {
|
|
alert('Es muss ein Zielpunkt definiert sein!');
|
|
return false;
|
|
}
|
|
|
|
const filename = prompt('Dateiname', 'terrain.json');
|
|
|
|
if (filename === null) {
|
|
return false;
|
|
}
|
|
|
|
const json = this.getLevelAsJson(level);
|
|
const download = document.createElement('a');
|
|
|
|
download.setAttribute('download', filename);
|
|
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
|
|
download.click();
|
|
download.remove();
|
|
|
|
return true;
|
|
}
|
|
}
|