Tileset dialog for Tilorswift and fix for adding rows.

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

16
graphic-sets.json Normal file
View File

@ -0,0 +1,16 @@
[
{
"name": "Nature",
"tileset": "landscape01.jpg",
"tiles": 8,
"backgroundColor": "#6096ff",
"backgroundImage": null
},
{
"name": "Moon",
"tileset": "moon.jpg",
"tiles": 2,
"backgroundColor": "black",
"backgroundImage": null
}
]

Binary file not shown.

After

Width:  |  Height:  |  Size: 267 KiB

20
js/GraphicSet.js Normal file
View File

@ -0,0 +1,20 @@
let GraphicSet = [
{
name: 'Nature',
tileset: 'landscape01.jpg',
tiles: 8,
scale: 3,
backgroundColor: '#6096ff',
backgroundImage: null
},
{
name: 'Moon',
tileset: 'moon.jpg',
tiles: 2,
scale: 3,
backgroundColor: 'black',
backgroundImage: 'background_earth.jpg'
}
];
export default GraphicSet;

View File

@ -7,8 +7,8 @@ import FileLoader from "./FileLoader.js";
import Camera from "./Camera.js"; import Camera from "./Camera.js";
import Gisela from "./Gisela.js"; import Gisela from "./Gisela.js";
import Setting from "./Setting.js"; import Setting from "./Setting.js";
import InterfaceEvent from "./events/InterfaceEvent.js";
import FrameRateMeasurer from "./FrameRateMeasurer.js"; import FrameRateMeasurer from "./FrameRateMeasurer.js";
import GraphicSet from "./GraphicSet.js";
class ImageLoader class ImageLoader
{ {
@ -160,7 +160,7 @@ const GRAVITY = 2;
let fps; let fps;
let frameDuration; let frameDuration;
let levelJson = new FileLoader('levels/level01.json'); let levelJson = new FileLoader('levels/moon.json');
const LEVEL = JSON.parse(levelJson.getContent()); const LEVEL = JSON.parse(levelJson.getContent());
@ -180,7 +180,7 @@ let loader = new ImageLoader();
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png'); loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png'); loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
loader.addImage(Setting.TILESET_LOCATION + 'landscape01.jpg'); loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset);
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png'); loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
new FrameRateMeasurer(); new FrameRateMeasurer();
@ -191,6 +191,15 @@ window.addEventListener(
let canvas = document.getElementById('canvas'); let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
canvas.style.backgroundAttachment = 'fixed';
canvas.style.backgroundSize = 'cover';
canvas.style.backgroundPosition = 'center center';
if (GraphicSet[LEVEL.tileset].backgroundImage !== null) {
canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
}
canvas.style.backgroundColor = LEVEL.backgroundColor;
window.addEventListener( window.addEventListener(
'resize', 'resize',
@ -212,7 +221,7 @@ window.addEventListener(
gisela = new Gisela(); gisela = new Gisela();
architecture.setMovableToTargetPosition(gisela); architecture.setMovableToTargetPosition(gisela);
fps = 120; //event.frameRate; fps = 120;
frameDuration = 1000 / fps; frameDuration = 1000 / fps;
window.requestAnimationFrame(MainLoop); window.requestAnimationFrame(MainLoop);
} }

View File

@ -3,6 +3,8 @@ import RetroArchitectureTile from "./RetroArchitectureTile.js";
import GeometryRectCollection from "../geometry/GeometryRectCollection.js"; import GeometryRectCollection from "../geometry/GeometryRectCollection.js";
import GeometryPoint from "../geometry/GeometryPoint.js"; import GeometryPoint from "../geometry/GeometryPoint.js";
import GeometryRect from "../geometry/GeometryRect.js"; import GeometryRect from "../geometry/GeometryRect.js";
import GraphicSet from "../GraphicSet.js";
import Setting from "../Setting.js";
export default class RetroArchitecture export default class RetroArchitecture
{ {
@ -10,6 +12,8 @@ export default class RetroArchitecture
{ {
this.tileset = tilesetSprite; this.tileset = tilesetSprite;
this.tiles = tiles; this.tiles = tiles;
this.backgroundColor = null;
this.backgroundImage = null;
this.rows = rows; this.rows = rows;
this.columns = columns; this.columns = columns;
this.matrix = []; this.matrix = [];
@ -37,6 +41,16 @@ export default class RetroArchitecture
} }
} }
setBackgroundColor(color)
{
this.backgroundColor = color;
}
setBackgroundImage(image)
{
this.backgroundImage = image;
}
getCollisionRects(rect) getCollisionRects(rect)
{ {
let posX = Math.floor(rect.position.x / this.tileWidth) - 2; let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
@ -200,6 +214,14 @@ export default class RetroArchitecture
let field = this.matrix[y][x]; let field = this.matrix[y][x];
if (field !== null && field !== undefined) { if (field !== null && field !== undefined) {
this.drawField(context, x, y, camera, field);
}
}
}
}
drawField(context, x, y, camera, field)
{
context.drawImage( context.drawImage(
this.tileset.canvas, this.tileset.canvas,
field.tile * this.tileWidth, field.tile * this.tileWidth,
@ -208,25 +230,30 @@ export default class RetroArchitecture
this.tileHeight, this.tileHeight,
x * this.tileWidth - camera.position.x, x * this.tileWidth - camera.position.x,
y * this.tileHeight - camera.position.y, y * this.tileHeight - camera.position.y,
this.tileWidth, this.tileWidth + 1,
this.tileHeight this.tileHeight + 1
); );
} }
}
}
}
static createFromData(data) static createFromData(data)
{ {
let tileset = new RetroSprite(data.tileset, data.scale); let graphicSet = GraphicSet[data.tileset];
console.log(data);
let tileset = new RetroSprite(
Setting.TILESET_LOCATION + graphicSet.tileset,
graphicSet.scale
);
let architecture = new RetroArchitecture( let architecture = new RetroArchitecture(
tileset, tileset,
data.tiles, graphicSet.tiles,
data.columns, data.columns,
data.rows data.rows
); );
architecture.setBackgroundColor(graphicSet.backgroundColor);
architecture.setBackgroundImage(graphicSet.backgroundImage);
architecture.startX = data.startX; architecture.startX = data.startX;
architecture.startY = data.startY; architecture.startY = data.startY;
architecture.targetX = data.targetX; architecture.targetX = data.targetX;

File diff suppressed because one or more lines are too long

1
levels/moon.json Normal file
View File

@ -0,0 +1 @@
{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}

View File

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

View File

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

View File

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

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 export default class Dialog
{ {
constructor() constructor()
@ -59,6 +63,66 @@ export default class Dialog
return htmlElementInput; 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) setMessage(message)
{ {
this.messageElement.innerText = message; this.messageElement.innerText = message;

View File

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

View File

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

View File

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

View File

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

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;
}
}

View File

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

View File

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

View File

@ -8,6 +8,9 @@ body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
background-attachment: fixed;
background-size: cover;
background-position: center center;
} }
#level { #level {
@ -90,7 +93,6 @@ body {
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: scroll; overflow: scroll;
background-color: black;
} }
#tileset-picker { #tileset-picker {
@ -104,7 +106,7 @@ body {
cursor: not-allowed; cursor: not-allowed;
} }
#tileset-selector { #tileset-selector-widget {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
@ -112,11 +114,11 @@ body {
box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
} }
#tileset-picker:hover > #tileset-selector { #tileset-picker:hover > #tileset-selector-widget {
display: block; display: block;
} }
#tileset-picker.widget-disabled:hover > #tileset-selector { #tileset-picker.widget-disabled:hover > #tileset-selector-widget {
display: none; display: none;
} }
@ -242,6 +244,54 @@ body {
cursor: pointer; cursor: pointer;
} }
#tileset-selector {
position: relative;
}
#tileset-avatar {
width: 96px;
height: 96px;
background-size: auto 100%;
cursor: pointer;
margin-bottom: 20px;
}
#tileset-list {
position: absolute;
top: 20px;
left: 116px;
display: none;
padding: 10px;
background-color: #cccccc;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.tileset {
display: table-row;
cursor: pointer;
}
.tileset:hover {
background-color: #5555cc;
}
.tileset-thumbnail {
display: table-cell;
width: 32px;
height: 32px;
background-size: auto 100%;
}
.tileset:hover > .tileset-thumbnail {
opacity: 0.5;
}
.tileset-title {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
/* /*
tr:hover > td > .selection { tr:hover > td > .selection {
opacity: 0.5; opacity: 0.5;