Snow fullscreen effect implemented

tilorswift/js/Tilorswift.js

@@ -17,19 +17,27 @@ import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEv
 import TilorswiftAddRowsClickedEvent from "./events/TilorswiftAddRowsClickedEvent.js";
 import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClickedEvent.js";
 import TilorswiftMenuGravityClickedEvent from "./events/TilorswiftMenuGravityClickedEvent.js";
+import TilorswiftMenuEffectsClickedEvent from "./events/TilorswiftMenuEffectsClickedEvent.js";
 import TilorswiftEvent from "./events/TilorswiftEvent.js";
 import BrushMode from "./BrushMode.js";
 import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
 import DialogGravity from "./dialog/DialogGravity.js";
+import DialogEffects from "./dialog/DialogEffects.js";
 import DialogAddRows from "./dialog/DialogAddRows.js";
 import DialogAddColumns from "./dialog/DialogAddColumns.js";
 import Terrain from "./Terrain.js";
 import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
 import Level from "../../js/Level.js";
 import {IntelligentBrushSwitch} from "./menu/IntelligentBrushSwitch.js";
+import {SnowEffect} from "../../js/effects/SnowEffect.js";
+import {FullscreenEffectFactory} from "../../js/effects/FullscreenEffectFactory.js";
 
 export default class Tilorswift
 {
+    static EFFECT_NAMES = {
+        [SnowEffect.NAME]: 'Schnee',
+    }
+
     constructor(level) {
         this.level = level;
         this.map = document.getElementById('map');
@@ -65,6 +73,7 @@ export default class Tilorswift
 
         const menuLevel = new MenuGroup('Level');
         menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
+	menuLevel.addMenuEntry(new MainMenuEntry('Effekte...', TilorswiftMenuEffectsClickedEvent));
         this.mainbar.addMenuGroup(menuLevel);
 
         document.body.appendChild(this.mainbar.getElement());
@@ -96,6 +105,7 @@ export default class Tilorswift
             targetY: this.level.getTargetY(),
             gravity: this.level.gravity,
             matrix: matrix,
+	    effects: this.level.fullscreenEffects.map((effect) => {return effect.getName()}),
         };
 
         return JSON.stringify(data);
@@ -105,6 +115,7 @@ export default class Tilorswift
     {
         const dialog = new LoadLevelDialog();
         dialog.onLoad = (json) => {
+	    console.log(json);
             this.tileset = new Tileset(JSON.parse(json).tileset);
             this.level = Level.createFromJson(json);
             this.loadLevel();
@@ -297,6 +308,25 @@ export default class Tilorswift
             }
         );
 
+	window.addEventListener(
+            TilorswiftEvent.MENU_EFFECTS_CLICKED,
+	    () => {
+	    	const effects = [];
+
+		for (const effect of this.level.fullscreenEffects) {
+			effects.push(effect.getName());
+		}
+
+		new DialogEffects(
+			FullscreenEffectFactory.getNames(),
+			effects,
+			{
+				[SnowEffect.NAME]: 'Schnee',
+			}
+		);
+	    }
+	);
+
         window.addEventListener(
             TilorswiftEvent.ADD_ROWS_CLICKED,
             () => {
@@ -318,6 +348,21 @@ export default class Tilorswift
             }
         );
 
+	window.addEventListener(
+		TilorswiftEvent.EFFECTS_UPDATED,
+		(event) => {
+			this.level.fullscreenEffects = [];
+
+			const effectFactory = new FullscreenEffectFactory();
+
+			for (const effectName of event.effectNames) {
+				this.level.fullscreenEffects.push(
+					effectFactory.getEffect(effectName)
+				);
+			}
+		}
+	);
+
         window.addEventListener(
             TilorswiftEvent.ADD_ROWS,
             (event) => {

tilorswift/js/dialog/Dialog.js

@@ -1,6 +1,7 @@
 import GraphicSet from "../../../js/GraphicSet.js";
 import Setting from "../../../js/Setting.js";
 import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js";
+import {Checkbox} from "./elements/Checkbox.js";
 
 export default class Dialog
 {
@@ -66,6 +67,16 @@ export default class Dialog
         return htmlElementInput;
     }
 
+    createCheckbox(label, value, isChecked = false, onClick = () => {})
+    {
+	const checkbox = new Checkbox(label, value, isChecked);
+	checkbox.onClick = onClick;
+
+	this.inputAreaElement.appendChild(checkbox.htmlElement);
+
+	return checkbox;
+    }
+
     createTilesetSelector()
     {
         let htmlElement = document.createElement('div');
@@ -133,6 +144,8 @@ export default class Dialog
         return htmlElement;
     }
 
+
+
     createFileInput(types = [])
     {
         let input = document.createElement('input');

tilorswift/js/dialog/DialogEffects.js

@@ -0,0 +1,45 @@
+import Dialog from "./Dialog.js";
+import TilorswiftEffectsUpdatedEvent from "../events/TilorswiftEffectsUpdatedEvent.js";
+
+export default class DialogEffects extends Dialog
+{
+    constructor(effects, checked, translations)
+    {
+        super();
+        this.setMessage('Effekte');
+	this.effects = [];
+
+	for (const effect of effects) {
+		const checkbox = this.createCheckbox(
+			translations[effect], 
+			effect,
+			checked.indexOf(effect) !== -1,
+			() => {
+				console.log(checkbox.name, 'is', checkbox.isChecked());
+			}
+		);
+
+		this.effects.push(checkbox);
+		this.inputAreaElement.appendChild(checkbox.htmlElement);
+	}
+
+        this.createButton('Abbrechen');
+        this.buttonOk = this.createButton('OK');
+	this.buttonOk.addEventListener(
+            'click',
+            () => {
+		const effectNames = [];
+
+		for (const effect of this.effects) {
+			if (effect.isChecked()) {
+				effectNames.push(effect.name);
+			}
+		}
+
+                window.dispatchEvent(
+                    new TilorswiftEffectsUpdatedEvent(effectNames)
+                );
+            }
+        )
+    }
+}

tilorswift/js/dialog/elements/Checkbox.js

@@ -0,0 +1,29 @@
+export class Checkbox
+{
+	constructor(label, name, isChecked = false)
+	{
+		this.name = name;
+
+		this.htmlElement = document.createElement('div');
+
+		this.onClick = () => {};
+
+		this.checkbox = document.createElement('input');
+	        this.checkbox.type = 'checkbox';
+		this.checkbox.checked = isChecked;
+		this.checkbox.onclick = () => {
+			this.onClick();
+		}
+
+	        this.htmlLabel = document.createElement('label');
+        	this.htmlLabel.innerText = label;
+
+		this.htmlElement.appendChild(this.checkbox);
+		this.htmlElement.appendChild(this.htmlLabel);
+	}
+
+	isChecked()
+	{
+		return this.checkbox.checked;
+	}
+}

tilorswift/js/events/TilorswiftEffectsUpdatedEvent.js

@@ -0,0 +1,9 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftEffectsUpdatedEvent extends Event
+{
+    constructor(effectNames) {
+        super(TilorswiftEvent.EFFECTS_UPDATED);
+        this.effectNames = effectNames;
+    }
+}

tilorswift/js/events/TilorswiftEvent.js

@@ -17,6 +17,7 @@ const TilorswiftEvent = {
     TILESET_SELECTED: 'tilesetSelected',
     MENU_GRAVITY_CLICKED: 'menuGravityClicked',
     GRAVITY_UPDATED: 'gravityUpdated',
+    MENU_EFFECTS_CLICKED: 'menuEffectsClicked',
 };
 
 export default TilorswiftEvent;

tilorswift/js/events/TilorswiftMenuEffectsClickedEvent.js

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