Main menu and save function to json file implemented.

tilorswift/js/Tilorswift.js

@@ -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();
+    }
+}

tilorswift/js/events/TilorswiftEvent.js

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

tilorswift/js/events/TilorswiftFieldClickedEvent.js

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

tilorswift/js/events/TilorswiftMenuSaveClickedEvent.js

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

tilorswift/js/events/TilorswiftSavedEvent.js

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

tilorswift/js/menu/MainMenu.js

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

tilorswift/js/menu/MainMenuEntry.js

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

tilorswift/js/menu/MenuGroup.js

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

tilorswift/js/module.js

@@ -4,6 +4,12 @@ import TilorswiftEvent from "./events/TilorswiftEvent.js";
 import Mouse from "./Mouse.js";
 import Tileset from "./Tileset.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');
 
@@ -26,6 +32,17 @@ image.onload = function () {
 
     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(
         TilorswiftEvent.FIELD_CLICKED,
         (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());
+        }
+    );
 };