Tilorswift levels will be loaded asynchronously now
This commit is contained in:
parent
c6b0baa533
commit
f02fb4d411
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
14
js/Level.js
14
js/Level.js
|
@ -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)
|
||||||
|
|
|
@ -36,4 +36,9 @@ export class LoadLevelDialog extends Dialog
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openFileBrowser()
|
||||||
|
{
|
||||||
|
this.fileInput.click();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue