Mal/mr-crocs-adventures
1
0
Fork 0
mirror of https://git.leinelab.org/Mal/mr-crocs-adventures.git synced 2025-09-11 02:57:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tileset dialog for Tilorswift and fix for adding rows.

Browse Source
This commit is contained in:
Mal
2020-02-14 00:12:24 +01:00
parent 72589544bd
commit 04c3d0253b
19 changed files with 297 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
tilorswift/js/Terrain.js
View File

@@ -1,6 +1,7 @@
import Field from "./Field.js";
import Tileset from "./Tileset.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js";
import GraphicSet from "../../js/GraphicSet.js";
export default class Terrain
{
@@ -15,6 +16,7 @@ export default class Terrain
this.targetTileX = undefined;
this.targetTileY = undefined;
this.backgroundColor = backgroundColor;
this.backgroundImage = undefined;
this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
@@ -24,7 +26,6 @@ export default class Terrain
init()
{
this.htmlElement.id = 'level';
this.htmlElement.style.backgroundColor = this.backgroundColor;
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';
@@ -65,6 +66,8 @@ export default class Terrain
for (let q = 0; q < quantity; q++) {
this._insertRow(index);
this.tilesY++;
this.entranceTileY = this.entranceTileY === undefined ? undefined : this.entranceTileY + 1;
this.targetTileY = this.targetTileY === undefined ? undefined : this.targetTileY + 1;
}
this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';
@@ -82,11 +85,18 @@ 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));
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]);
}
}
@@ -96,6 +106,8 @@ export default class Terrain
for (let c = 0; c < quantity; c++) {
this._insertColumn(index);
this.tilesX++;
this.entranceTileX = this.entranceTileX === undefined ? undefined : this.entranceTileX + 1;
this.targetTileX = this.targetTileX === undefined ? undefined : this.targetTileX + 1;
}
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
@@ -175,11 +187,10 @@ export default class Terrain
static createFromJson(terrainData)
{
let imageTileset = new Image();
imageTileset.src = terrainData.tileset;
let graphicSet = GraphicSet[terrainData.tileset];
let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, terrainData.backgroundColor);
let tileset = new Tileset(terrainData.tileset);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
for (let y = 0; y < terrainData.rows; y++) {
for (let x = 0; x < terrainData.columns; x++) {

13
tilorswift/js/Tileset.js
View File

@@ -1,10 +1,15 @@
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
export default class Tileset
{
constructor(image, tiles, scale = 1)
constructor(setId)
{
this.image = image;
this.tiles = tiles;
this.scale = scale;
this.setId = setId;
this.image = new Image();
this.image.src = Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
this.tiles = GraphicSet[this.setId].tiles;
this.scale = GraphicSet[this.setId].scale;
}
getWidth()

8
tilorswift/js/Tilorswift.js
View File

@@ -2,8 +2,11 @@ export default class Tilorswift
{
static getTerrainAsJson(terrain)
{
console.log('Save da shit.');
let matrix = [];
console.log(terrain.fields.length);
for (let y = 0; y < terrain.fields.length; y++) {
let row = [];
@@ -15,16 +18,13 @@ export default class Tilorswift
}
let data = {
tileset: terrain.tileset.image.src,
tiles: terrain.tileset.tiles,
scale: terrain.tileset.scale,
tileset: terrain.tileset.setId,
rows: terrain.tilesY,
columns: terrain.tilesX,
startX: terrain.entranceTileX,
startY: terrain.entranceTileY,
targetX: terrain.targetTileX,
targetY: terrain.targetTileY,
backgroundColor: terrain.backgroundColor,
matrix: matrix,
};

64
tilorswift/js/dialog/Dialog.js
View File

@@ -1,3 +1,7 @@
import GraphicSet from "../../../js/GraphicSet.js";
import Setting from "../../../js/Setting.js";
import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js";
export default class Dialog
{
constructor()
@@ -59,6 +63,66 @@ export default class Dialog
return htmlElementInput;
}
createTilesetSelector()
{
let htmlElement = document.createElement('div');
htmlElement.id = 'tileset-selector';
let htmlElementLabel = document.createElement('div');
htmlElementLabel.classList.add('dialog-label');
htmlElementLabel.innerText = 'Terrain';
let htmlAvatarElement = document.createElement('div');
htmlAvatarElement.id = 'tileset-avatar';
htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[0].tileset + '")';
let htmlListElement = document.createElement('div');
htmlListElement.id = 'tileset-list';
htmlElement.appendChild(htmlElementLabel);
htmlElement.appendChild(htmlAvatarElement);
htmlElement.appendChild(htmlListElement);
htmlAvatarElement.addEventListener(
'click',
() => {
htmlListElement.style.display = 'block';
}
);
GraphicSet.forEach(
(graphicSet, index) => {
let htmlTilesetElement = document.createElement('div');
htmlTilesetElement.classList.add('tileset');
let htmlThumbnail = document.createElement('div');
htmlThumbnail.classList.add('tileset-thumbnail');
htmlThumbnail.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
htmlTilesetElement.appendChild(htmlThumbnail);
let htmlTitleElement = document.createElement('div');
htmlTitleElement.classList.add('tileset-title');
htmlTitleElement.innerText = graphicSet.name;
htmlTilesetElement.appendChild(htmlTitleElement);
htmlTilesetElement.addEventListener(
'click',
() => {
htmlListElement.style.display = 'none';
htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")';
window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
}
);
htmlListElement.appendChild(htmlTilesetElement);
}
);
this.inputAreaElement.appendChild(htmlElement);
return htmlElement;
}
setMessage(message)
{
this.messageElement.innerText = message;

4
tilorswift/js/dialog/DialogAddRows.js
View File

@@ -18,11 +18,11 @@ export default class DialogAddRows extends Dialog
getPosition()
{
return this.inputPosition.value;
return parseInt(this.inputPosition.value);
}
getRowsCount()
{
return this.inputRows.value;
return parseInt(this.inputRows.value);
}
}

16
tilorswift/js/dialog/DialogNewTerrain.js
View File

@@ -1,6 +1,6 @@
import Dialog from "./Dialog.js";
import TilorswiftNewTerrainEvent from "../events/TilorswiftNewTerrainEvent.js";
import Setting from "../../../js/Setting.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
export default class DialogNewTerrain extends Dialog
{
@@ -9,19 +9,29 @@ export default class DialogNewTerrain extends Dialog
this.setMessage('Neues Terrain erstellen');
this.inputRows = this.createInputNumber('Zeilen');
this.inputColumns = this.createInputNumber('Spalten');
this.inputTerrain = this.createTilesetSelector();
this.buttonCancel = this.createButton('Abbrechen');
this.buttonCreate = this.createButton('Erstellen');
this.terrainIndex = 0;
this.buttonCreate.addEventListener(
'click',
() => {
window.dispatchEvent(
new TilorswiftNewTerrainEvent(
Setting.TILESET_LOCATION + 'landscape01.jpg', /* TODO */
this.terrainIndex,
this.inputColumns.value,
this.inputRows.value
)
)
);
}
);
window.addEventListener(
TilorswiftEvent.TILESET_SELECTED,
(event) => {
this.terrainIndex = event.tilesetIndex;
console.log(event.tilesetIndex);
}
);
}

1
tilorswift/js/events/TilorswiftEvent.js
View File

@@ -13,6 +13,7 @@ const TilorswiftEvent = {
ADD_COLUMNS_CLICKED: 'addColumnsClicked',
NEW_TERRAIN: 'newTerrain',
NEW_TERRAIN_CLICKED: 'newTerrainClicked',
TILESET_SELECTED: 'tilesetSelected',
};
export default TilorswiftEvent;

5
tilorswift/js/events/TilorswiftNewTerrainEvent.js
View File

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

9
tilorswift/js/events/TilorswiftTilesetSelectedEvent.js Normal file
View File

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

18
tilorswift/js/menu/TilesetPickerWidget.js
View File

@@ -12,6 +12,8 @@ export default class TilesetPickerWidget extends Widget
this.brush = brush;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.htmlElement.appendChild(this.htmlElementSelector);
this.loadTileset();
window.addEventListener(
@@ -27,12 +29,20 @@ export default class TilesetPickerWidget extends Widget
loadTileset()
{
this.htmlElement.appendChild(this.htmlElementSelector);
for (let t = 0; t < this.tileset.tiles; t++) {
let button = new ButtonTile(this.tileset, t);
this.htmlElementSelector.appendChild(button.getElement());
}
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
}
reloadTileset(tileset)
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.loadTileset();
}
createElementPicker()
@@ -42,8 +52,6 @@ export default class TilesetPickerWidget extends Widget
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
return htmlElement;
}
@@ -51,7 +59,7 @@ export default class TilesetPickerWidget extends Widget
createElementSelector()
{
let htmlElementSelector = document.createElement('div');
htmlElementSelector.id = 'tileset-selector';
htmlElementSelector.id = 'tileset-selector-widget';
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';

21
tilorswift/js/module.js
View File

@@ -21,19 +21,29 @@ import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClick
import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
let loader = new FileLoader('../levels/level01.json');
let terrainData = JSON.parse(loader.getContent());
let image = new Image();
image.src = terrainData.tileset;
image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].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;
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
let brush = new Brush();
let tileset = new Tileset(image, 8, 3);
let tileset = new Tileset(terrainData.tileset);
let widgetBar = new WidgetBar('widget-bar');
let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@@ -148,9 +158,14 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.NEW_TERRAIN,
(event) => {
terrain = new Terrain(tileset, event.tilesX, event.tilesY, event.backgroundColor);
let tileset = new Tileset(event.tilesetIndex);
terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
}
map.innerHTML = '';
map.appendChild(terrain.getElement());
tilesetPicker.reloadTileset(tileset);
}
);