Main menu and save function to json file implemented.

This commit is contained in:
Mal 2020-02-02 23:00:14 +01:00
parent 9c3aca1bc9
commit d893483da9
11 changed files with 252 additions and 7 deletions

View File

@ -26,7 +26,7 @@ class ImageLoader
{ {
image.addEventListener( image.addEventListener(
'load', () => { 'load', () => {
this.update();1 this.update();
} }
); );
@ -133,7 +133,8 @@ const FRAME_DURATION = 1000 / FPS;
const GAME_SPEED = 1; const GAME_SPEED = 1;
const GRAVITY = 2; const GRAVITY = 2;
let levelJson = new FileLoader('levels/level.json'); let levelJson = new FileLoader('levels/test_stairs.json');
console.log(levelJson.getContent());
const LEVEL = levelJson.getContent(); const LEVEL = levelJson.getContent();
let lastRendered = undefined; let lastRendered = undefined;

View File

@ -0,0 +1,40 @@
export default class Tilorswift
{
static getTerrainAsJson(terrain)
{
let matrix = [];
for (let y = 0; y < terrain.fields.length; y++) {
let row = [];
for (let x = 0; x < terrain.fields[y].length; x++) {
row.push(terrain.fields[y][x].index);
}
matrix.push(row);
}
let data = {
tileset: terrain.tileset.image.src,
tiles: terrain.tileset.tiles,
scale: terrain.tileset.scale,
rows: terrain.tilesY,
columns: terrain.tilesX,
backgroundColor: terrain.backgroundColor,
matrix: matrix,
};
return JSON.stringify(data);
}
static saveTerrainToFile(terrain)
{
let json = Tilorswift.getTerrainAsJson(terrain);
let download = document.createElement('a');
download.setAttribute('download', 'terrain.json');
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
download.click();
download.remove();
}
}

View File

@ -2,6 +2,8 @@ const TilorswiftEvent = {
FIELD_CLICKED: 'fieldClicked', FIELD_CLICKED: 'fieldClicked',
FIELD_ENTERED: 'fieldEntered', FIELD_ENTERED: 'fieldEntered',
BUTTON_TILE_CLICKED: 'buttonTileClicked', BUTTON_TILE_CLICKED: 'buttonTileClicked',
MENU_SAVE_CLICKED: 'menuSaveClicked',
SAVED: 'saved',
}; };
export default TilorswiftEvent; export default TilorswiftEvent;

View File

@ -4,7 +4,6 @@ export default class TilorswiftFieldClickedEvent extends Event
{ {
constructor(field, button) constructor(field, button)
{ {
console.log('So kommt der Scheiß hier rein: ' + button);
super(TilorswiftEvent.FIELD_CLICKED); super(TilorswiftEvent.FIELD_CLICKED);
this.field = field; this.field = field;

View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftMenuSaveClickedEvent extends Event
{
constructor()
{
super(TilorswiftEvent.MENU_SAVE_CLICKED);
}
}

View File

@ -0,0 +1,8 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftSavedEvent extends Event
{
constructor() {
super(TilorswiftEvent.SAVED);
}
}

View File

@ -0,0 +1,27 @@
export default class MainMenu
{
constructor(id)
{
this.id = id;
this.menuGroups = [];
}
addMenuGroup(group)
{
this.menuGroups.push(group);
}
getElement()
{
let htmlElement = document.createElement('div');
htmlElement.id = this.id;
this.menuGroups.forEach(
(group) =>{
htmlElement.appendChild(group.getElement());
}
);
return htmlElement;
}
}

View File

@ -0,0 +1,22 @@
export default class MainMenuEntry
{
constructor(title, event)
{
this.title = title;
this.event = event;
}
getElement()
{
let htmlElement = document.createElement('li');
htmlElement.innerText = this.title;
htmlElement.addEventListener(
'click',
() => {
window.dispatchEvent(new this.event());
}
);
return htmlElement;
}
}

View File

@ -0,0 +1,34 @@
export default class MenuGroup
{
className = 'menu-group';
constructor(title)
{
this.title = title;
this.menuEntries = [];
}
addMenuEntry(entry)
{
this.menuEntries.push(entry);
}
getElement()
{
let htmlElement = document.createElement('div');
htmlElement.classList.add(this.className);
htmlElement.innerText = this.title;
let dropdown = document.createElement('ul');
dropdown.classList.add('menu-dropdown');
htmlElement.appendChild(dropdown);
this.menuEntries.forEach(
(entry) => {
dropdown.appendChild(entry.getElement());
}
);
return htmlElement;
}
}

View File

@ -4,6 +4,12 @@ import TilorswiftEvent from "./events/TilorswiftEvent.js";
import Mouse from "./Mouse.js"; import Mouse from "./Mouse.js";
import Tileset from "./Tileset.js"; import Tileset from "./Tileset.js";
import ButtonTile from "./ButtonTile.js"; import ButtonTile from "./ButtonTile.js";
import Tilorswift from "./Tilorswift.js";
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
import MainMenu from "./menu/MainMenu.js";
import MenuGroup from "./menu/MenuGroup.js";
import MainMenuEntry from "./menu/MainMenuEntry.js";
import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js";
let loader = new FileLoader('../levels/level.json'); let loader = new FileLoader('../levels/level.json');
@ -26,6 +32,17 @@ image.onload = function () {
let mouse = new Mouse(); let mouse = new Mouse();
let mainbar = new MainMenu('mainbar');
let menuFile = new MenuGroup('Datei');
menuFile.addMenuEntry(
new MainMenuEntry('Speichern', TilorswiftMenuSaveClickedEvent)
);
mainbar.addMenuGroup(menuFile);
document.body.appendChild(mainbar.getElement());
window.addEventListener( window.addEventListener(
TilorswiftEvent.FIELD_CLICKED, TilorswiftEvent.FIELD_CLICKED,
(event) => { (event) => {
@ -58,4 +75,28 @@ image.onload = function () {
} }
} }
); );
document.addEventListener(
'dragstart',
function (event) {
event.preventDefault();
}
);
window.addEventListener(
'keydown', function (event) {
if (event.code === 'KeyS') {
Tilorswift.saveTerrainToFile(terrain);
window.dispatchEvent(new TilorswiftSavedEvent());
}
}
);
window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED,
function () {
Tilorswift.saveTerrainToFile(terrain);
window.dispatchEvent(new TilorswiftSavedEvent());
}
);
}; };

View File

@ -1,3 +1,8 @@
@keyframes menuFadeIn {
from { width: 96px; }
to { width: 512px; }
}
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -9,26 +14,82 @@ body {
border-collapse: collapse; border-collapse: collapse;
} }
.row { #mainbar {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 32px;
background-color: #cccccc;
box-shadow: 0 0 20px black;
}
.menu-group {
position: relative;
display: inline-block;
cursor: pointer;
padding: 5px 20px;
overflow: visible;
font-family: sans-serif;
}
.menu-group:hover {
background-color: #5555cc;
}
.menu-dropdown {
display: none;
position: absolute;
top: 16px;
left: 0;
background-color: #cccccc;
list-style: none;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
padding-left: 0;
}
.menu-dropdown > li {
padding: 5px 20px;
width: 180px;
}
.menu-dropdown > li:hover {
background-color: #5555cc;
}
.menu-group:hover > .menu-dropdown {
display: block;
} }
#menu { #menu {
position: fixed; position: fixed;
top: 0; display: flex;
flex-flow: wrap row;
top: 32px;
left: 0; left: 0;
bottom: 0; bottom: 0;
padding-top: 20px;
width: 96px; width: 96px;
background-color: grey; overflow: hidden;
background-color: #cccccc;
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
} }
#menu:hover {
animation-name: menuFadeIn;
animation-duration: 0.5s;
width: 512px;
}
#map { #map {
position: fixed; position: fixed;
top: 0; top: 32px;
left: 96px; left: 96px;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: scroll; overflow: scroll;
background-color: black;
} }
.field, .button-tile { .field, .button-tile {
@ -37,6 +98,7 @@ body {
margin: 0; margin: 0;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer; cursor: pointer;
display: inline-flex;
} }
.selection { .selection {