Tilorswift levels will be loaded asynchronously now

This commit is contained in:
Mal 2023-09-19 11:44:56 +02:00
parent c6b0baa533
commit f02fb4d411
5 changed files with 117 additions and 98 deletions

View File

@ -4,7 +4,8 @@ export default class FileLoader
{ {
this.filename = filename; this.filename = filename;
this.content = ''; this.content = '';
this.loadContent();
this.onLoad = () => {};
} }
getContent() getContent()
@ -19,6 +20,7 @@ export default class FileLoader
request.onreadystatechange = () => { request.onreadystatechange = () => {
if (request.status === 200 && request.readyState === 4) { if (request.status === 200 && request.readyState === 4) {
this.content = request.responseText; this.content = request.responseText;
this.onLoad(this.content);
} }
}; };

View File

@ -74,15 +74,17 @@ export default class Level
this.gravity = gravity; this.gravity = gravity;
} }
static createFromFile(filename) static createFromFile(filename, callback = () => {})
{ {
let loader = new FileLoader(filename); let loader = new FileLoader(filename);
let levelData = JSON.parse(loader.getContent()); loader.onLoad = (data) => {
let terrain = Terrain.createFromJson(levelData); const json = JSON.parse(data);
let level = new Level(terrain); const level = new Level(Terrain.createFromJson(json));
level.setGravity(levelData.gravity); level.setGravity(json.gravity);
return level; callback(level);
}
loader.loadContent();
} }
static createFromJson(json) static createFromJson(json)

View File

@ -36,4 +36,9 @@ export class LoadLevelDialog extends Dialog
} }
); );
} }
openFileBrowser()
{
this.fileInput.click();
}
} }

View File

@ -69,6 +69,92 @@ export default class Tilorswift
this.addEventListeners(); this.addEventListeners();
} }
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.tileset = new Tileset(JSON.parse(json).tileset);
this.level = Level.createFromJson(json);
this.loadLevel();
dialog.close();
}
dialog.openFileBrowser();
}
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;
}
addEventListeners() addEventListeners()
{ {
window.addEventListener( window.addEventListener(
@ -204,95 +290,11 @@ export default class Tilorswift
window.addEventListener( window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED, TilorswiftEvent.MENU_SAVE_CLICKED,
()=> { () => {
if (this.saveLevelToFile()) { if (this.saveLevelToFile()) {
window.dispatchEvent(new TilorswiftSavedEvent()); 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;
}
} }

View File

@ -4,12 +4,20 @@ import ImageLoader from "../../js/ImageLoader.js";
import GraphicSet from "../../js/GraphicSet.js"; import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js"; import Setting from "../../js/Setting.js";
const level = Level.createFromFile('../levels/moonbase.json');
const imageLoader = new ImageLoader(); const imageLoader = new ImageLoader();
imageLoader.addImage('../' + Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset);
for (const graphicSet of GraphicSet) {
imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tileset);
}
imageLoader.onLoad = () => { imageLoader.onLoad = () => {
const tilorswift = new Tilorswift(level); Level.createFromFile(
tilorswift.init(); '../levels/moonbase.json',
tilorswift.loadLevel(); (level) => {
const tilorswift = new Tilorswift(level);
tilorswift.loadLevel();
tilorswift.init();
}
);
} }
imageLoader.load(); imageLoader.load();