wgge 0.0.1

package/editor/table/row/TableRowRenderer.js

@@ -0,0 +1,97 @@
+import DomRenderer from "../../../core/renderer/dom/DomRenderer";
+import DOMHelper from "../../../core/helper/DOMHelper";
+import NumberHelper from "../../../core/helper/NumberHelper";
+
+export default class TableRowRenderer extends DomRenderer {
+
+	/**
+	 * @type ObjectModel
+	 */
+	model;
+
+	/**
+	 * @type ModelNodeTable|ModelNodeCollection
+	 */
+	table;
+
+	constructor(game, model, dom, collection) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.collection = collection;
+
+		this.container = null;
+
+		this.addAutoEvent(
+			this.collection.selectedNode,
+			'change',
+			() => {
+				if (this.collection.selectedNode.equalsTo(this.model)) {
+					DOMHelper.addClass(this.container, 'active');
+				} else {
+					DOMHelper.removeClass(this.container, 'active');
+				}
+			},
+			true
+		);
+	}
+
+	activateInternal() {
+		this.container = this.addElement('tr');
+		this.container.addEventListener('click', () => this.collection.selectedNode.set(this.model));
+
+		this.updateRow();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+
+	renderInternal() {
+		this.updateRow();
+	}
+
+	updateRow() {
+		DOMHelper.emptyElement(this.container);
+
+		const grab = DOMHelper.createElement(this.container, 'td');
+		const icon = DOMHelper.createElement(grab, 'div', 'grab-icon');
+		icon.setAttribute('draggable', "true");
+		icon.addEventListener('dragstart', (e) => {
+			this.collection.triggerEvent('drag-start', this.model);
+		});
+		this.container.addEventListener('dragover', (e) => e.preventDefault());
+		this.container.addEventListener('drop', (e) => {
+			e.preventDefault();
+			this.collection.triggerEvent('drag-drop', this.model);
+		});
+
+		this.model.properties.forEach((name, value) => {
+			const cell = DOMHelper.createElement(this.container, 'td');
+			let text = '';
+			if (value !== undefined && value !== null) {
+				if (typeof value === 'object') {
+					if (value.value !== undefined) {
+						text = NumberHelper.shorten(value.value);
+					} else if (value.x !== undefined && value.y !== undefined) {
+						text = '[' + NumberHelper.round(value.x, 2) + ',' + NumberHelper.round(value.y, 2);
+						if (value.z !== undefined) {
+							text += ',' + NumberHelper.round(value.z, 2);
+						}
+						if (value.w !== undefined) {
+							text += ',' + NumberHelper.round(value.w, 2);
+						}
+						text += ']';
+					} else {
+						text = NumberHelper.shorten(value.toString());
+					}
+				} else {
+					text = NumberHelper.shorten(value);
+				}
+			}
+			cell.innerText = text;
+		});
+
+	}
+
+}

package/game/GameController.js

@@ -0,0 +1,144 @@
+import * as localForage from "localforage";
+import ControllerBase from "../core/controller/ControllerBase";
+import EditorController from "../editor/EditorController";
+import ControlsController from "./controls/ControlsController";
+
+export default class GameController extends ControllerBase {
+
+	/**
+	 * @type GameModel
+	 */
+	model;
+
+	constructor(model) {
+		super(model, model);
+
+		this.model = model;
+
+		this.isResourcesDirty = false;
+		this.resourcesTimeOut = null;
+
+		this.addChild(new ControlsController(this.game, this.model.controls));
+		this.addChild(new EditorController(this.game, this.model.editor));
+
+		this.addAutoEvent(
+			this.model,
+			'new-game',
+			() => this.runOnUpdate(() => this.startNewGame())
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'show-main-menu',
+			() => this.showMainMenu()
+		);
+
+		this.addAutoEvent(
+			window,
+			'resize',
+			() => {
+				this.runOnUpdate(() => this.model.viewBoxSize.set(window.innerWidth, window.innerHeight));
+			},
+			true
+		);
+
+		this.addAutoEvent(
+			this.model.controls,
+			'debug-key',
+			() => {
+				this.model.isInDebugMode.invert();
+			}
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'save-ui',
+			() => {
+				this.saveGameToStorage().then(() => {
+					console.log('savegame saved');
+				});
+				this.saveResourcesToStorage().then(() => {
+					console.log('resources saved');
+				});
+			}
+		);
+
+	}
+
+	activateInternal() {
+		this.loadResourcesFromStorage().then(() => {
+			this.model.resources.addOnDirtyListener(() => this.isResourcesDirty = true);
+			this.showMainMenu();
+		});
+	}
+
+	updateInternal(delta) {
+
+		// saving of resources during debugging
+		if (this.game.isInDebugMode.get()) {
+			this.resourcesTimeOut = (this.resourcesTimeOut === null) ? 3000 : this.resourcesTimeOut - delta;
+			if (this.isResourcesDirty && this.resourcesTimeOut <= 0) {
+				this.resourcesTimeOut = null;
+				this.isResourcesDirty = false;
+				this.saveResourcesToStorage().then(() => {
+					this.resourcesTimeOut = null;
+					console.log('resources saved');
+				});
+			}
+		}
+	}
+
+	async loadResourcesFromStorage() {
+		try {
+			const state = await localForage.getItem('wegge-resources');
+			if (state) {
+				this.model.resources.restoreState(state);
+			} else {
+				console.log('nothing in storage');
+			}
+		} catch (err) {
+			console.error(err);
+		}
+	}
+
+	async saveResourcesToStorage() {
+		const state = this.model.resources.getState();
+		try {
+			await localForage.setItem('wegge-resources', state);
+		} catch (err) {
+			console.error(err);
+		}
+	}
+
+	async loadGameFromStorage() {
+		try {
+			const state = await localForage.getItem('wegge-autosave');
+			if (state) {
+				const saveGame = this.saveGameFactory();
+				saveGame.restoreState(state);
+				this.model.saveGame.set(saveGame);
+				this.model.menu.set(null);
+			} else {
+				console.log('no saved game in storage');
+			}
+		} catch (err) {
+			console.error('Error when loading saved game.', err);
+		}
+	}
+
+	async saveGameToStorage() {
+		const saveGame = this.model.saveGame.get();
+		if (!saveGame) return;
+		const state = saveGame.getState();
+		try {
+			await localForage.setItem('wegge-autosave', state);
+		} catch (err) {
+			console.error(err);
+		}
+	}
+
+	hideMenu() {
+		this.model.menu.set(null);
+	}
+
+}

package/game/GameModel.js

@@ -0,0 +1,73 @@
+import ObjectModel from "../core/model/ObjectModel";
+import Vector2 from "../core/model/vector/Vector2";
+import ControlsModel from "./controls/ControlsModel";
+import ResourcesModel from "./resources/ResourcesModel";
+import EditorModel from "../editor/EditorModel";
+import NullableNode from "../core/model/value/NullableNode";
+import BoolValue from "../core/model/value/BoolValue";
+import GlobalAudioModel from "../core/audio/global/GlobalAudioModel";
+import AssetCache from "./resources/assets/AssetCache";
+
+export default class GameModel extends ObjectModel {
+
+	/**
+	 * @type BoolValue
+	 */
+	isInDebugMode;
+
+	/**
+	 * @type EditorModel
+	 */
+	editor;
+
+	/**
+	 * @type NullableNode<MenuModel>
+	 */
+	menu;
+
+	/**
+	 * @type Vector2
+	 */
+	viewBoxSize;
+
+	/**
+	 * @type NullableNode<SaveGameModel>
+	 */
+	saveGame;
+
+	/**
+	 * @type ResourcesModel
+	 */
+	resources;
+
+	/**
+	 * @type AssetCache
+	 */
+	assets;
+
+	/**
+	 * @type GlobalAudioModel
+	 */
+	audio;
+
+	/**
+	 * @type ControlsModel
+	 */
+	controls;
+
+	constructor(debugModeEnabled = true) {
+		super(false);
+
+		this.isInDebugMode = this.addProperty('isInDebugMode', new BoolValue(debugModeEnabled));
+		this.editor = this.addProperty('editor', new EditorModel());
+		this.menu = this.addProperty('menu', new NullableNode());
+
+		this.viewBoxSize = this.addProperty('viewBoxSize', new Vector2());
+		this.saveGame = this.addProperty('saveGame', new NullableNode());
+		this.resources = this.addProperty('resources', new ResourcesModel());
+		this.assets = new AssetCache(this.resources);
+		this.audio = this.addProperty('audio', new GlobalAudioModel());
+		this.controls = this.addProperty('controls', new ControlsModel());
+	}
+
+}

package/game/GameRenderer.js

@@ -0,0 +1,108 @@
+import DomRenderer from "../core/renderer/dom/DomRenderer";
+import EditorRenderer from "../editor/EditorRenderer";
+import NullableNodeRenderer from "../core/renderer/generic/NullableNodeRenderer";
+import GlobalAudioRenderer from "../core/audio/global/GlobalAudioRenderer";
+import MenuRenderer from "./menu/MenuRenderer";
+import ConditionalNodeRenderer from "../core/renderer/generic/ConditionalNodeRenderer";
+import DOMHelper from "../core/helper/DOMHelper";
+
+export default class GameRenderer extends DomRenderer {
+
+	/**
+	 * @type GameModel
+	 */
+	model;
+
+	constructor(model, dom) {
+		super(model, model, dom);
+
+		this.model = model;
+		this.loading = null;
+		this.addClass('wegge-host');
+
+		this.addChild(
+			new GlobalAudioRenderer(
+				this.model,
+				this.model.audio
+			)
+		);
+
+		this.addChild(
+			new NullableNodeRenderer(
+				this.game,
+				this.model.menu,
+				(m) => new MenuRenderer(this.game, m, this.menuLayer)
+			)
+		);
+
+		this.addChild(
+			new ConditionalNodeRenderer(
+				this.game,
+				this.model.isInDebugMode,
+				() => this.model.isInDebugMode.get(),
+				() => new EditorRenderer(this.game, this.model.editor, this.editorLayer)
+			)
+		);
+
+		this.addAutoEvents(
+			this.model.assets,
+			['session-finished-loaders-changed', 'session-total-loaders-changed'],
+			() => this.updateLoading(),
+			true
+		);
+
+		this.addAutoEvent(
+			window,
+			'resize',
+			() => this.model.triggerEvent('resize'),
+			true
+		);
+	}
+
+	activateInternal() {
+		const initLoading = document.getElementById('initial_loading');
+		if (initLoading) DOMHelper.destroyElement(initLoading);
+
+		this.container = this.addElement('div', 'wegge-game-container container container-host');
+
+		this.saveGameLayer = DOMHelper.createElement(this.container, 'div', 'savegame-layer container container-host');
+		this.loadingLayer = DOMHelper.createElement(this.container, 'div', 'loading-layer');
+		this.menuLayer = DOMHelper.createElement(this.container, 'div', 'menu-layer');
+		this.editorLayer = DOMHelper.createElement(this.container, 'div', 'editor-layer');
+
+		this.model.assets.preload(this.model.getResourcesForPreload());
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+		this.container = null;
+		this.saveGameLayer = null;
+		this.loadingLayer = null;
+		this.menuLayer = null;
+		this.editorLayer = null;
+	}
+
+	updateLoading() {
+		const isLoading = this.model.assets.blockingLoaders > 0;
+		if (this.loading && !isLoading) {
+			this.removeElement(this.loading);
+			this.loading = null;
+		}
+		if (isLoading) {
+			if (!this.loading) {
+				this.loading = DOMHelper.createElement(this.loadingLayer, 'div', 'loading');
+				const paper = DOMHelper.createElement(this.loading, 'div');
+				const inner = DOMHelper.createElement(paper, 'div', 'inner p-3');
+				const content = DOMHelper.createElement(inner, 'div', 'm-3 p-3');
+				const label1 = DOMHelper.createElement(content, 'h2', null, 'Nahrávám');
+				this.label2 = DOMHelper.createElement(content, 'div', 'center');
+				const progressWrapper = DOMHelper.createElement(content, 'div', 'progress-wrapper mt-2');
+				this.loadingProgress = DOMHelper.createElement(progressWrapper, 'div', 'stretch');
+			}
+			const portion = this.game.assets.sessionFinishedLoaders / this.game.assets.sessionTotalLoaders;
+			this.loadingProgress.style.width = `${Math.round(portion * 100)}%`;
+			this.label2.innerText = `${this.game.assets.sessionFinishedLoaders}/${this.game.assets.sessionTotalLoaders}`;
+		}
+	}
+
+}

package/game/controls/ControlsController.js

@@ -0,0 +1,104 @@
+import ControllerBase from "../../core/controller/ControllerBase";
+
+export default class ControlsController extends ControllerBase {
+	dom;
+
+	/**
+	 * @type ControlsModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model);
+
+		this.model = model;
+		this.dom = dom || window.document.body;
+	}
+
+	activateInternal() {
+		this.deactivateInternal();
+		this.dom.addEventListener('mousemove', (e) => this.onMouseMove(e));
+		this.dom.addEventListener('mouseenter', (e) => this.onMouseEnter(e));
+		this.dom.addEventListener('mouseleave', (e) => this.onMouseLeave(e));
+		this.dom.addEventListener('mousedown', (e) => this.updateMouseButtons(e));
+		this.dom.addEventListener('mouseup', (e) => this.updateMouseButtons(e));
+		this.dom.addEventListener('wheel', (e) => this.onZoom(e), {passive: true});
+		window.addEventListener('keydown', (e) => this.onKeyDown(e), false);
+		window.addEventListener('keyup', (e) => this.onKeyUp(e), false);
+		window.addEventListener('contextmenu', (e) => this.onContextMenu(e), false);
+	}
+
+	deactivateInternal() {
+
+	}
+
+	onKeyDown(event) {
+		//this.caps = event.getModifierState("CapsLock");
+		//console.log(event);
+		const key = event.keyCode ? event.keyCode : event.charCode;
+		//console.log(key);
+
+		switch (key) {
+			case 13: /*Enter*/
+				//this.model.interacting.set(true);
+				break;
+			case 192: /*~*/ //this.model.triggerEvent('debug-key'); break;default:
+			default:
+				this.model.triggerEvent(`key-down-${key}`);
+		}
+	}
+
+	onKeyUp(event) {
+		//this.caps = event.getModifierState("CapsLock");
+		const key = event.keyCode ? event.keyCode : event.charCode;
+		//console.log("key:" + key);
+		switch (key) {
+			case 13: /*Enter*/
+				//this.model.interacting.set(false);
+				break;
+			case 27: /*Esc*/
+				this.model.triggerEvent('esc-key');
+				break;
+			case 192: /*~*/
+				this.model.triggerEvent('debug-key');
+				break;
+			default:
+				this.model.triggerEvent(`key-up-${key}`);
+		}
+	}
+
+	onMouseMove(e) {
+		this.model.mouseCoordinates.set(e.clientX, e.clientY);
+		this.model.isMouseOver.set(true);
+	}
+
+	onMouseEnter() {
+		this.model.isMouseOver.set(true);
+	}
+
+	onMouseLeave() {
+		this.model.isMouseOver.set(false);
+		this.model.mouseDownLeft.set(false);
+		this.model.mouseDownRight.set(false);
+	}
+
+	onContextMenu(e) {
+		if (!(e.ctrlKey && this.game.isInDebugMode.get())) {
+			e.preventDefault();
+		}
+		e.stopPropagation();
+		return false;
+	}
+
+	updateMouseButtons(e) {
+		const left = ((e.buttons === 1) || (e.buttons === 3));
+		const right = (e.buttons === 2);
+		this.model.mouseDownLeft.set(left);
+		this.model.mouseDownRight.set(right);
+	}
+
+	onZoom(e) {
+		this.model.triggerEvent('zoom', e.deltaY > 0 ? 1 : -1);
+	}
+
+}

package/game/controls/ControlsModel.js

@@ -0,0 +1,60 @@
+import Vector2 from "../../core/model/vector/Vector2";
+import ObjectModel from "../../core/model/ObjectModel";
+import BoolValue from "../../core/model/value/BoolValue";
+
+const CLICK_TIMEOUT = 250;
+
+export default class ControlsModel extends ObjectModel {
+
+	/**
+	 * @type BoolValue
+	 */
+	isMouseOver;
+
+	/**
+	 * @type Vector2
+	 */
+	mouseCoordinates;
+
+	mouseDownLeft;
+	mouseDownRight;
+	leftClickTime;
+	rightClickTime;
+
+	constructor() {
+		super();
+
+		this.isMouseOver = this.addProperty('isMouseOver', new BoolValue(false));
+		this.mouseCoordinates = this.addProperty('mouseCoordinates', new Vector2());
+		this.mouseDownLeft = this.addProperty('mouseDownLeft', new BoolValue(false));
+		this.mouseDownLeft.addOnChangeListener((params) => this.onMouseLeftChange(params.newValue));
+		this.mouseDownRight = this.addProperty('mouseDownRight', new BoolValue(false));
+		this.mouseDownRight.addOnChangeListener((params) => this.onMouseRightChange(params.newValue));
+
+		this.leftClickTime = 0;
+		this.rightClickTime = 0;
+	}
+
+	onMouseLeftChange(down) {
+		const time = performance.now();
+		if (down) {
+			this.leftClickTime = time;
+		} else {
+			if ((time - this.leftClickTime) < CLICK_TIMEOUT) {
+				this.triggerEvent('left-click', this.mouseCoordinates.clone());
+			}
+		}
+	}
+
+	onMouseRightChange(down) {
+		const time = performance.now();
+		if (down) {
+			this.rightClickTime = time;
+		} else {
+			if ((time - this.rightClickTime) < CLICK_TIMEOUT) {
+				this.triggerEvent('right-click', this.mouseCoordinates.clone());
+			}
+		}
+	}
+
+}

package/game/menu/MenuModel.js

@@ -0,0 +1,25 @@
+import ModelNodeCollection from "../../core/model/collection/ModelNodeCollection";
+import ObjectModel from "../../core/model/ObjectModel";
+import StringValue from "../../core/model/value/StringValue";
+
+export default class MenuModel extends ObjectModel {
+
+	/**
+	 * @type StringValue
+	 */
+	name;
+
+	/**
+	 * @type ModelNodeCollection<MenuItemModel>
+	 */
+	items;
+
+	constructor(name = '', persistent = false) {
+		super(persistent);
+
+		this.name = this.addProperty('name', new StringValue(name));
+		this.items = this.addProperty('items', new ModelNodeCollection());
+
+	}
+
+}

package/game/menu/MenuRenderer.js

@@ -0,0 +1,37 @@
+import DomRenderer from "../../core/renderer/dom/DomRenderer";
+import CollectionRenderer from "../../core/renderer/generic/CollectionRenderer";
+import MenuItemRenderer from "./item/MenuItemRenderer";
+import DOMHelper from "../../core/helper/DOMHelper";
+
+export default class MenuRenderer extends DomRenderer {
+
+	/**
+	 * @type MenuModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+
+		this.addChild(
+			new CollectionRenderer(
+				this.game,
+				this.model.items,
+				(m) => new MenuItemRenderer(this.game, m, this.items)
+			)
+		);
+	}
+
+	activateInternal() {
+		this.container = this.addElement('div', 'main-menu-layer');
+		this.paper = DOMHelper.createElement(this.container, 'div', 'main-menu paper');
+		this.inner = DOMHelper.createElement(this.paper, 'div', 'inner p-3');
+		this.items = DOMHelper.createElement(this.inner, 'div', 'items m-3');
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+}

package/game/menu/item/MenuItemModel.js

@@ -0,0 +1,31 @@
+import ObjectModel from "../../../core/model/ObjectModel";
+import StringValue from "../../../core/model/value/StringValue";
+import BoolValue from "../../../core/model/value/BoolValue";
+
+export default class MenuItemModel extends ObjectModel {
+
+	/**
+	 * @type StringValue
+	 */
+	text;
+
+	/**
+	 * @type BoolValue
+	 */
+	isActive;
+
+	constructor(text = '', onClick = null, persistent = false) {
+		super(persistent);
+
+		this.text = this.addProperty('text', new StringValue(text));
+		this.isActive = this.addProperty('isActive', new BoolValue(false));
+
+		if (onClick) {
+			this.addEventListener(
+				'click',
+				onClick
+			);
+		}
+	}
+
+}