wgge 0.0.1

package/core/controller/ControllerBase.js

@@ -0,0 +1,64 @@
+import ActivatedTreeNode from "../ActivatedTreeNode";
+
+export default class ControllerBase extends ActivatedTreeNode {
+
+	/**
+	 * @type DemoGameModel
+	 */
+	game;
+
+	/**
+	 * @type ObjectModel
+	 */
+	model;
+
+	/**
+	 * @type array[(delta) => any]
+	 */
+	updateActions;
+
+	/**
+	 * @param {DemoGameModel} game
+	 * @param {ObjectModel} model
+	 */
+	constructor(game, model) {
+		super();
+		this.game = game;
+		this.model = model;
+
+		this.updateActions = null;
+	}
+
+	update(delta) {
+		if (!this.isActivated) {
+			return;
+		}
+
+		if (this.updateActions) {
+			while (this.updateActions.length > 0) {
+				const action = this.updateActions.shift();
+				action(delta);
+			}
+			this.updateActions = null;
+		}
+
+		this.updateInternal(delta);
+		this.children.forEach((c) => c.update(delta));
+	}
+
+	updateInternal(delta) {
+
+	}
+
+	/**
+	 *
+	 * @param action (delta) => any
+	 */
+	runOnUpdate(action) {
+		if (!this.updateActions) {
+			this.updateActions = [];
+		}
+		this.updateActions.push(action);
+	}
+
+}

package/core/controller/ControllerWithSaveGame.js

@@ -0,0 +1,27 @@
+import ControllerWithTimeout from "./ControllerWithTimeout";
+
+export default class ControllerWithSaveGame extends ControllerWithTimeout {
+
+	/**
+	 * @type DemoSaveGameModel
+	 */
+	saveGame;
+
+	/**
+	 * @param {DemoGameModel} game
+	 * @param {ObjectModel} model
+	 * @param {DemoSaveGameModel} saveGame
+	 */
+	constructor(game, model, saveGame = null) {
+		super(game, model);
+		if (!saveGame) {
+			saveGame = this.game.saveGame.get();
+		}
+		this.saveGame = saveGame;
+
+		if (!this.saveGame) {
+			console.error('no SaveGameModel provided for controller!');
+		}
+	}
+
+}

package/core/controller/ControllerWithTimeout.js

@@ -0,0 +1,10 @@
+import ControllerBase from "./ControllerBase";
+import TimeoutController from "./TimeoutController";
+
+export default class ControllerWithTimeout extends ControllerBase {
+
+	runAfterTimeout(timeout, action) {
+		return this.addChild(new TimeoutController(this.game, timeout, action));
+	}
+
+}

package/core/controller/NullableNodeController.js

@@ -0,0 +1,35 @@
+import ControllerBase from "./ControllerBase";
+
+export default class NullableNodeController extends ControllerBase {
+
+	/**
+	 * @type NullableNode
+	 */
+	model;
+
+	constructor(game, model, controllerFactory, defaultControllerFactory = null) {
+		super(game, model);
+
+		this.model = model;
+
+		this.controllerFactory = controllerFactory;
+		this.defaultControllerFactory = defaultControllerFactory;
+
+		this.addAutoEvent(
+			this.model,
+			'change',
+			() => this.updateController(),
+			true
+		);
+	}
+
+	updateController() {
+		this.resetChildren();
+		if (this.model.isSet()) {
+			this.addChild(this.controllerFactory(this.model.get()));
+		} else if (this.defaultControllerFactory) {
+			this.addChild(this.defaultControllerFactory());
+		}
+	}
+
+}

package/core/controller/TimeoutController.js

@@ -0,0 +1,26 @@
+import ControllerBase from "./ControllerBase";
+
+export default class TimeoutController extends ControllerBase {
+
+	/**
+	 *
+	 * @param {DemoGameModel} game
+	 * @param {Number} duration
+	 * @param {function} onFinished
+	 */
+	constructor(game, duration, onFinished) {
+		super(game, null);
+		this.duration = duration;
+		this.timeout = duration;
+		this.onFinished = onFinished;
+	}
+
+	updateInternal(delta) {
+		this.timeout -= delta;
+		if (this.timeout <= 0) {
+			this.removeMyself();
+			this.onFinished();
+		}
+	}
+
+}

package/core/helper/ArrayHelper.js

@@ -0,0 +1,19 @@
+export default class ArrayHelper {
+
+	static remove(arr, el) {
+		arr.splice(arr.indexOf(el), 1);
+	}
+
+	static random(arr) {
+		return arr[ArrayHelper.randomIndex(arr.length)];
+	}
+
+	static randomIndex(length) {
+		return Math.floor(Math.random() * length);
+	}
+
+	static unique(arr) {
+		return arr.filter((value, index, self) => self.indexOf(value) === index);
+	}
+
+}

package/core/helper/DOMHelper.js

@@ -0,0 +1,167 @@
+import StringHelper from "./StringHelper";
+
+export default class DOMHelper {
+
+	static addClass(element, css) {
+		if (Array.isArray((css)) && css.length > 0) {
+			css.forEach((cls) => {
+				if (typeof cls === 'string' && cls.length > 0) element.classList.add(cls);
+			});
+		} else if (css) {
+			css.split(' ').forEach((cls) => {
+				if (typeof cls === 'string' && cls.length > 0) element.classList.add(cls);
+			});
+		}
+	}
+
+	static removeClass(element, css) {
+		element.classList.remove(css);
+	}
+
+	static hasClass(element, css) {
+		return element.classList.contains(css);
+	}
+
+	static toggleClass(element, css, classActive = null) {
+		const hasClass = DOMHelper.hasClass(element, css);
+		if (hasClass && classActive !== true) {
+			DOMHelper.removeClass(element, css);
+		} else if (classActive !== false && !hasClass) {
+			DOMHelper.addClass(element, css);
+		}
+	}
+
+	/**
+	 *
+	 * @param parent Element
+	 * @param tag string
+	 * @param css string|array|null
+	 * @param innerText string|null
+	 * @param onClick ()=>any|null
+	 * @returns Element
+	 */
+	static createElement(parent, tag, css = null, innerText = null, onClick = null) {
+		const el = document.createElement(tag);
+		this.addClass(el, css);
+		if (parent) {
+			parent.appendChild(el);
+		}
+		if (innerText) {
+			el.innerText = innerText;
+		}
+		if (onClick) {
+			el.addEventListener('click', onClick);
+		}
+		return el;
+	}
+
+	static destroyElement(el) {
+		if (el && el.parentNode && typeof el.parentNode.removeChild === 'function') {
+			el.parentNode.removeChild(el);
+		}
+		if (el && typeof el.remove === 'function') {
+			el.remove();
+		}
+	}
+
+	static emptyElement(el) {
+		if (el && el.textContent !== undefined) {
+			el.textContent = '';
+		}
+	}
+
+	static isFullscreen() {
+		return (window.fullScreen || (window.innerWidth == screen.width && window.innerHeight == screen.height))
+	}
+
+	static openFullscreen(elem) {
+		if (elem.requestFullscreen) {
+			elem.requestFullscreen();
+		} else if (elem.webkitRequestFullscreen) { /* Safari */
+			elem.webkitRequestFullscreen();
+		} else if (elem.msRequestFullscreen) { /* IE11 */
+			elem.msRequestFullscreen();
+		}
+		DOMHelper.addClass(document.body, 'fullscreen');
+	}
+
+	static closeFullscreen() {
+		if (document.exitFullscreen) {
+			document.exitFullscreen();
+		} else if (document.webkitExitFullscreen) { /* Safari */
+			document.webkitExitFullscreen();
+		} else if (document.msExitFullscreen) { /* IE11 */
+			document.msExitFullscreen();
+		}
+		DOMHelper.removeClass(document.body, 'fullscreen');
+	}
+
+	static instantEditor(element, setter, textarea = false) {
+		if (element.dataset.instantEditor === '1') {
+			return;
+		}
+		element.dataset.instantEditor = '1';
+		const text = element.innerText;
+		DOMHelper.emptyElement(element);
+		const editor = DOMHelper.createElement(element, 'form', 'instant-editor');
+		const input = DOMHelper.createElement(editor, textarea ? 'textarea' : 'input');
+		input.value = text;
+		if (textarea) {
+			const cancel = DOMHelper.createElement(editor, 'button');
+			cancel.innerText = 'Cancel';
+			cancel.addEventListener('click', (e) => {
+				e.stopPropagation();
+				DOMHelper.destroyElement(editor);
+				element.innerText = text;
+				element.dataset.instantEditor = '0';
+			});
+			const save = DOMHelper.createElement(editor, 'input');
+			save.setAttribute('type', 'submit');
+			save.value = 'Save';
+		} else {
+			input.setAttribute('type', 'text');
+		}
+		input.focus();
+		editor.addEventListener('submit', (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			const value = input.value;
+			DOMHelper.destroyElement(editor);
+			element.dataset.instantEditor = '0';
+			element.innerText = value;
+			setter(value);
+		});
+		if (!textarea) {
+			editor.addEventListener('focusout', (e) => {
+				DOMHelper.destroyElement(editor);
+				element.innerText = text;
+				element.dataset.instantEditor = '0';
+			});
+		}
+	}
+
+	static magicEditor(element, setter, textarea = false) {
+		const addHintIfNeeded = () => {
+			if (element.innerText.length === 0) {
+				element.innerText = '(edit)';
+			}
+		}
+		addHintIfNeeded();
+		element.style.cursor = 'text';
+		element.addEventListener('click', () => {
+			DOMHelper.instantEditor(
+				element,
+				(value) => {
+					setter(value);
+					addHintIfNeeded();
+				},
+				textarea
+			);
+		});
+	}
+
+	static stripHtmlTags(text) {
+		return StringHelper.stripHtmlTags(text);
+	}
+
+}

package/core/helper/GUIHelper.js

@@ -0,0 +1,53 @@
+import * as dat from "dat.gui";
+
+export default class GUIHelper {
+
+	static createGUI() {
+		return new dat.GUI();
+	}
+
+	static addVector2(gui, vector, name, min, max, step) {
+		const folder = gui.addFolder(name);
+		GUIHelper.addScaler(folder, vector, 'x', min, max, step);
+		GUIHelper.addScaler(folder, vector, 'y', min, max, step);
+		return folder;
+	}
+
+	static addVector3(gui, vector, name, min, max, step) {
+		const folder = gui.addFolder(name);
+		GUIHelper.addScaler(folder, vector, 'x', min, max, step);
+		GUIHelper.addScaler(folder, vector, 'y', min, max, step);
+		GUIHelper.addScaler(folder, vector, 'z', min, max, step);
+		return folder;
+	}
+
+	static addQuaternion(gui, quat, name) {
+		const min = -Math.PI;
+		const max = Math.PI;
+		const step = Math.PI/180;
+		const folder = gui.addFolder(name);
+		GUIHelper.addScaler(folder, quat, 'x', min, max, step);
+		GUIHelper.addScaler(folder, quat, 'y', min, max, step);
+		GUIHelper.addScaler(folder, quat, 'z', min, max, step);
+		GUIHelper.addScaler(folder, quat, 'w', min, max, step);
+		return folder;
+	}
+
+	static addRotationVector3(gui, object, name) {
+		return GUIHelper.addVector3(gui, object, name, -Math.PI, Math.PI, Math.PI / 180);
+	}
+
+	static addScaleVector3(gui, object, name) {
+		return GUIHelper.addVector3(gui, object, name, 0, 25, 0.1);
+	}
+
+	static addScaler(gui, object, property, min, max, step, onChange = null) {
+		const item = gui.add(object, property, min, max, step).listen();
+		item.onChange(() => {
+				if (onChange) onChange();
+				if (typeof object.makeDirty === 'function') object.makeDirty();
+		});
+		return item;
+	}
+
+}

package/core/helper/HttpHelper.js

@@ -0,0 +1,33 @@
+export default class HttpHelper {
+
+	static async post(url, body) {
+		return fetch(url, {
+			method: 'POST', // *GET, POST, PUT, DELETE, etc.
+			mode: 'cors', // no-cors, *cors, same-origin
+			cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+			credentials: 'same-origin', // include, *same-origin, omit
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			redirect: 'follow', // manual, *follow, error
+			referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-uri
+			body: body // body data type must match "Content-Type" header
+		});
+	}
+
+	/**
+	 *
+	 * @param {string} fileName
+	 * @param {string} data
+	 */
+	static fakeDownload(fileName, data) {
+		const element = document.createElement('a');
+		element.style.display = 'none';
+		element.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent(data));
+		element.setAttribute('download', 'resources.json');
+		document.body.appendChild(element);
+		element.click();
+		document.body.removeChild(element);
+	}
+
+}

package/core/helper/ImageHelper.js

@@ -0,0 +1,36 @@
+import NumberHelper from "./NumberHelper";
+import Vector2 from "../model/vector/Vector2";
+
+export default class ImageHelper {
+
+	/**
+	 *
+	 * @param {Vector2} size
+	 * @param {Vector2} viewBoxSize
+	 * @param {Number} zoom
+	 * @param {Number} min
+	 * @param {Number} max
+	 * @returns {number}
+	 */
+	static sanitizeZoom(size, viewBoxSize, zoom = 0.0, min = 0, max = Number.MAX_VALUE) {
+		if (size.size() === 0) return 1;
+
+		const minZoomX = viewBoxSize.x / size.x;
+		const minZoomY = viewBoxSize.y / size.y;
+
+		min = Math.max(min, minZoomX, minZoomY);
+		return NumberHelper.between(min, max, zoom);
+	}
+
+	static sanitizeCenter(size, viewBoxSize, zoom, coordinates) {
+		const result = new Vector2(coordinates);
+		const vbs = viewBoxSize.multiply((1 / zoom) * 0.5);
+		result.x = Math.max(vbs.x, result.x);
+		result.x = Math.min(size.x - vbs.x, result.x);
+		result.y = Math.max(vbs.y, result.y);
+		result.y = Math.min(size.y - vbs.y, result.y);
+		return result;
+	}
+
+}
+

package/core/helper/NumberHelper.js

@@ -0,0 +1,28 @@
+export default class NumberHelper {
+
+	static round(number, decimals) {
+		const d = Math.pow(10, decimals);
+		return Math.round(number * d) / d;
+	}
+
+	static random(min, max) {
+		const diff = max - min;
+		return min + (diff * Math.random());
+	}
+
+	/**
+		Returns n if n is between min and max. Return min if n lower than min or return max if n is greater than max.
+	 */
+	static between(min, max, n) {
+		const minimum = Math.min(min, max);
+		const maximum = Math.max(min, max);
+		return Math.min(maximum, Math.max(minimum, n));
+	}
+
+	static isBetween(n, min, max) {
+		const minimum = Math.min(min, max);
+		const maximum = Math.max(min, max);
+		return n >= minimum && n <= maximum;
+	}
+
+}

package/core/helper/ObjectHelper.js

@@ -0,0 +1,10 @@
+export default class ObjectHelper {
+
+	static clone(obj) {
+		if (obj === null || obj === undefined) {
+			return obj;
+		}
+		return JSON.parse(JSON.stringify(obj));
+	}
+	
+}

package/core/helper/StringHelper.js

@@ -0,0 +1,59 @@
+export default class StringHelper {
+
+	static shorten(text, length = 25, ellipsis = '...') {
+		if (text === null || text === undefined || typeof text !== 'string') {
+			return text;
+		}
+		if (text.length <= length) {
+			return text;
+		}
+		let short = text.substring(0, length - ellipsis.length);
+		short += ellipsis;
+		return short;
+	}
+
+	static hash(value) {
+		let hash = 0;
+		if (value.length === 0) return hash;
+		for (let i = 0; i < value.length; i++) {
+			let ch = value.charCodeAt(i);
+			hash = ((hash << 5) - hash) + ch;
+			hash = hash & hash;
+		}
+		return hash;
+	}
+
+	static token(value) {
+		let hash = StringHelper.hash(value);
+		if (hash === 0) return null;
+		let token = 'a';
+		if (hash < 0) {
+			token = 'b';
+			hash = -hash;
+		}
+		return token + hash;
+	}
+
+	static paragraphize(text) {
+		if ((!text) || typeof text !== 'string') return '';
+		const arr = text.split(/(\<br\>|\<br\/\>|\n)/);
+		const strings = arr.filter((t) => StringHelper.stripHtmlTags(t.trim()).length > 0);
+		return strings.reduce((prev, current) => prev.concat(`<p>${current}</p>`), '');
+	}
+
+	static extractWord(str, pos = 0, sep = ' ') {
+		const words = str.split(sep);
+		if (words.length > pos) return words[pos];
+		return null;
+	}
+
+	static extractId(str, pos = 1) {
+		return StringHelper.extractWord(str, pos, '/');
+	}
+
+	static stripHtmlTags(text) {
+		if ((!text) || typeof text !== 'string') return '';
+		return text.replace(/(<([^>]+)>)/gi, '');
+	}
+
+}

package/core/model/ModelBase.js

@@ -0,0 +1,91 @@
+import NodeWithEvents from "./event/NodeWithEvents";
+
+export default class ModelBase extends NodeWithEvents {
+
+	/**
+	 * @type boolean
+	 */
+	isDirty;
+
+	/**
+	 * @type boolean
+	 */
+	isPersistent;
+
+	constructor(persistent = true) {
+		super();
+		this.isPersistent = persistent;
+		this.isDirty = true;
+
+		this.propertyValueDirtyHandler = () => this.makeDirty();
+	}
+
+	restoreState(state) {
+		this.restoreStateInternal(state);
+	}
+
+	/**
+	 * Override with node specific code
+	 * @param {object} state
+	 */
+	restoreStateInternal(state) {
+
+	}
+
+	getState() {
+		if (!this.isPersistent) {
+			return undefined;
+		}
+
+		return this.getStateInternal();
+	}
+
+	/**
+	 * Override with node specific state
+	 * @returns {any}
+	 */
+	getStateInternal() {
+		return undefined;
+	}
+
+	makeDirty() {
+		if (!this.isDirty) {
+			this.isDirty = true;
+			this.triggerEvent('dirty');
+		}
+	}
+
+	clean() {
+		if (!this.isDirty) return false;
+		this.isDirty = false;
+		return true;
+	}
+
+	clone() {
+		const n = new this.constructor();
+		n.restoreState(this.getState());
+		return n;
+	}
+
+	addOnDirtyListener(handler) {
+		this.addEventListener('dirty', handler);
+	}
+
+	removeOnDirtyListener(handler) {
+		this.removeEventListener('dirty', handler);
+	}
+
+	subscribeToOnDirtyEvent(node) {
+		node.addOnDirtyListener(this.propertyValueDirtyHandler);
+		return node;
+	}
+
+	unsubscribeFromOnDirtyEvent(node) {
+		node.removeOnDirtyListener(this.propertyValueDirtyHandler);
+		return node;
+	}
+
+	equalsTo(ch) {
+		return this === ch;
+	}
+}