wgge 0.0.1

package/core/model/value/IntValue.js

@@ -0,0 +1,20 @@
+import DirtyValue from "./DirtyValue";
+
+export default class IntValue extends DirtyValue {
+
+	set(value) {
+		if (value === null || value === undefined || value === '') {
+			super.set(Number.NaN);
+		} else {
+			super.set(Number(value));
+		}
+	}
+
+	isEmpty() {
+		return super.isEmpty() || Number.isNaN(this.value);
+	}
+
+	increase(num) {
+		this.set(this.get() + num);
+	}
+}

package/core/model/value/NullableNode.js

@@ -0,0 +1,66 @@
+import DirtyValue from "./DirtyValue";
+
+export default class NullableNode extends DirtyValue {
+	nodeFactory;
+
+	/**
+	 * @type {ObjectModel}
+	 */
+	value;
+
+	constructor(nodeFactory = null, persistent = true) {
+		super(null, persistent);
+
+		this.nodeFactory = nodeFactory;
+	}
+
+	/**
+	 *
+	 * @param {ObjectModel} value
+	 */
+	set(value) {
+		if (this.isSet()) {
+			this.unsubscribeFromOnDirtyEvent(this.value);
+		}
+
+		super.set(value);
+
+		if (this.isSet()) {
+			this.subscribeToOnDirtyEvent(this.value);
+		}
+	}
+
+	getStateInternal() {
+		if (this.isSet()) {
+			return this.value.getState();
+		}
+		return null;
+	}
+
+	restoreStateInternal(state) {
+		this.set(null);
+		if (state && this.isPersistent) {
+			if (!this.nodeFactory) {
+				console.log('No nodeFactory to restore NullableNode');
+				return;
+			}
+			const node = this.nodeFactory();
+			node.restoreState(state);
+			this.set(node);
+		}
+	}
+
+	clean() {
+		if (super.clean()) {
+			if (this.value && typeof this.value.clean === 'function') this.value.clean();
+			return true;
+		}
+	}
+
+	getResourcesForPreload() {
+		if (this.isSet()) {
+			return this.value.getResourcesForPreload();
+		}
+		return [];
+	}
+}

package/core/model/value/StringValue.js

@@ -0,0 +1,21 @@
+import DirtyValue from "./DirtyValue";
+
+export default class StringValue extends DirtyValue {
+
+	set(value) {
+		if (typeof value === 'string') {
+			super.set(value);
+		} else {
+			if (value && typeof value === 'object') {
+				super.set(value.toString());
+			} else {
+				super.set('');
+			}
+		}
+	}
+
+	isEmpty() {
+		return super.isEmpty() || this.value === '';
+	}
+
+}

package/core/model/vector/Quaternion.js

@@ -0,0 +1,82 @@
+import ObjectModel from "../ObjectModel";
+
+export default class Quaternion extends ObjectModel {
+	x;
+	y;
+	z;
+	w;
+
+	constructor(x, y, z, w) {
+		super();
+
+		this.x = 0;
+		this.y = 0;
+		this.z = 0;
+		this.w = 0;
+
+		if (y === undefined && typeof x === 'object') {
+			if (x.length === 4) {
+				this.setFromArray(x);
+			} else {
+				this.set(x);
+			}
+		} else if (x !== undefined && w !== undefined) {
+			this.set(x, y, z, w);
+		}
+	}
+
+	equalsTo(v) {
+		return (v) ? this.x === v.x && this.y === v.y && this.z === v.z && this.w === v.w : false;
+	}
+
+	set(x, y, z, w) {
+		if (y === undefined && typeof x === 'object') {
+			this.set(x.x, x.y, x.z, x.w);
+			return;
+		}
+
+		x = Number(x);
+		y = Number(y);
+		z = Number(z);
+		w = Number(w);
+
+		if ((this.x !== x || this.y !== y || this.z !== z || this.w !== w)) {
+			const old = this.clone();
+			this.x = x;
+			this.y = y;
+			this.z = z;
+			this.w = w;
+			this.makeDirty();
+			this.triggerEvent('change', {oldValue: old, newValue: this});
+		}
+	}
+
+	toArray() {
+		return [this.x, this.y, this.z, this.w];
+	}
+
+	setFromArray(arr) {
+		if (typeof arr === 'object' && arr.length === 4) {
+			this.set(arr[0], arr[1], arr[2], arr[3]);
+		}
+	}
+
+	static fromArray(arr) {
+		const v = new Quaternion();
+		v.setFromArray(arr);
+		return v;
+	}
+
+	clone() {
+		return new Quaternion(this);
+	}
+
+	getStateInternal() {
+		return this.toArray();
+	}
+
+	restoreStateInternal(state) {
+		this.setFromArray(state);
+	}
+
+}

package/core/model/vector/Rotation.js

@@ -0,0 +1,61 @@
+import DirtyValue from "../value/DirtyValue";
+
+const ROTATION_RANGE = 2 * Math.PI;
+
+/**
+ * Keeps track of rotation in radians that is always in interval (-pi, +pi> which equals to (-180, 180> degrees
+ */
+export default class Rotation extends DirtyValue {
+
+	static normalizeValue(rads) {
+		let result = rads % ROTATION_RANGE;
+		if (result > (ROTATION_RANGE / 2)) {
+			result = result - ROTATION_RANGE;
+		}
+		if (result <= (-ROTATION_RANGE / 2)) {
+			result = result + ROTATION_RANGE;
+		}
+		return result;
+	}
+
+	static diff(a, b) {
+		return Rotation.normalizeValue(Rotation.normalizeValue(a) - Rotation.normalizeValue(b));
+	}
+
+	static radToDeg(rads) {
+		return rads * 180 / Math.PI;
+	}
+
+	static degToRad(degs) {
+		return degs * Math.PI / 180;
+	}
+
+	set(value) {
+		super.set(Rotation.normalizeValue(value));
+	}
+
+	add(value) {
+		return new Rotation(this.get() + value);
+	}
+
+	subtract(value) {
+		return new Rotation(Rotation.diff(this.get(), value));
+	}
+
+	equalsTo(value) {
+		return (this.value === Rotation.normalizeValue(value));
+	}
+
+	clone() {
+		return new Rotation(this.value);
+	}
+
+	setDegrees(value) {
+		this.set(Rotation.degToRad(value));
+	}
+
+	getDegrees() {
+		return Rotation.radToDeg(this.get());
+	}
+
+}

package/core/model/vector/Vector2.js

@@ -0,0 +1,177 @@
+import ObjectModel from "../ObjectModel";
+import Rotation from "./Rotation";
+
+export default class Vector2 extends ObjectModel {
+	x;
+	y;
+
+	constructor(x, y, persistent) {
+		super(persistent);
+
+		this.x = 0;
+		this.y = 0;
+
+		if (y === undefined && typeof x === 'object') {
+			if (x.length === 2) {
+				this.setFromArray(x);
+			} else {
+				this.set(x);
+			}
+		} else if (x !== undefined) {
+			this.set(x, y);
+		}
+	}
+
+	distanceTo(v) {
+		return Math.sqrt(Math.pow(this.x - v.x, 2) + Math.pow(this.y - v.y, 2));
+	}
+
+	equalsTo(v) {
+		return (v) ? this.x === v.x && this.y === v.y : false;
+	}
+
+	/**
+	 *
+	 * @param x Number|Vector2
+	 * @param y Number|undefined
+	 */
+	set(x, y = undefined) {
+		if (y === undefined && typeof x === 'object') {
+			this.set(x.x, x.y);
+			return;
+		}
+
+		x = Number(x);
+		y = Number(y);
+
+		if (this.x !== x || this.y !== y) {
+			const old = this.clone();
+			this.x = x;
+			this.y = y;
+			this.makeDirty();
+			this.triggerEvent('change', {oldValue: old, newValue: this});
+		}
+	}
+
+	size() {
+		return this.distanceTo(new Vector2(0, 0));
+	}
+
+	setSize(size) {
+		const currentSize = this.size();
+		if (currentSize !== 0) {
+			const ratio = size / currentSize;
+			this.set(this.x * ratio, this.y * ratio);
+		}
+		return this;
+	}
+
+	round() {
+		return new Vector2(Math.round(this.x), Math.round(this.y));
+	}
+
+	add(v) {
+		return new Vector2(this.x + v.x, this.y + v.y);
+	}
+
+	multiply(s) {
+		return new Vector2(this.x * s, this.y * s);
+	}
+
+	subtract(v) {
+		return new Vector2(this.x - v.x, this.y - v.y);
+	}
+
+	sub(v) {
+		return this.subtract(v);
+	}
+
+	toArray() {
+		return [this.x, this.y];
+	}
+
+	setFromArray(arr) {
+		if (typeof arr === 'object' && arr.length === 2) {
+			this.set(arr[0], arr[1]);
+		}
+	}
+
+	clone() {
+		return new Vector2(this.x, this.y);
+	}
+
+	getStateInternal() {
+		return this.toArray();
+	}
+
+	restoreStateInternal(state) {
+		this.setFromArray(state);
+	}
+
+	/***
+	 * Return angle between AB and Y axis in radians
+	 * @param {Vector2} b
+	 * @returns {number}
+	 */
+	getAngleToYAxis(b) {
+		const diff = b.subtract(this);
+		const down = diff.y < 0;
+		const sinX = diff.x / diff.size();
+		const angle = Math.asin(sinX);
+		const result = down ?
+			Math.PI - angle :
+			angle;
+		return result || 0;
+	}
+
+	getNeighborPositions(size = 1, includeCenter = false) {
+		const neighbors = [];
+		const maxX = this.x + size;
+		for (let x = this.x - size; x <= maxX; x++) {
+			const maxY = this.y + size;
+			for (let y = this.y - size; y <= maxY; y++) {
+				const n = new Vector2(x, y);
+				if (includeCenter || !this.equalsTo(n)) {
+					neighbors.push(n);
+				}
+			}
+		}
+		return neighbors;
+	}
+
+	getClosest(positions) {
+		if ((!positions) || positions.length === 0) return null;
+		if (positions.length === 1) return positions[0];
+		let closest = positions[0];
+		let distance = this.distanceTo(closest);
+		for (let i = 1, max = positions.length; i < max; i++) {
+			const d = this.distanceTo(positions[i]);
+			if (d < distance) {
+				closest = positions[i];
+				distance = d;
+			}
+		}
+		return closest;
+	}
+
+	/**
+	 * If you are standing at this vector and looking at target vector, this will be rotation that you have to Y axis.
+	 * @param {Vector2} target
+	 * @returns {Rotation}
+	 */
+	getRotationFromYAxis(target) {
+		return new Rotation(this.getAngleToYAxis(target));
+	}
+
+	addOnChangeListener(eventHandler) {
+		this.addEventListener('change', eventHandler);
+	}
+
+	removeOnChangeListener(eventHandler) {
+		this.removeEventListener('change', eventHandler);
+	}
+
+	toString() {
+		return `[${this.x},${this.y}]`;
+	}
+}

package/core/model/vector/Vector3.js

@@ -0,0 +1,98 @@
+import ObjectModel from "../ObjectModel";
+import {Vector3 as ThreeVector3} from "three";
+
+export default class Vector3 extends ObjectModel {
+	x;
+	y;
+	z;
+
+	constructor(x, y, z) {
+		super();
+
+		this.x = 0;
+		this.y = 0;
+		this.z = 0;
+
+		if (y === undefined && typeof x === 'object') {
+			if (x.length === 3) {
+				this.setFromArray(x);
+			} else {
+				this.set(x);
+			}
+		} else if (x !== undefined && z !== undefined) {
+			this.set(x, y, z);
+		}
+	}
+
+	equalsTo(v) {
+		return (v) ? this.x === v.x && this.y === v.y && this.z === v.z : false;
+	}
+
+	set(x, y, z) {
+		if (y === undefined && typeof x === 'object') {
+			this.set(x.x, x.y, x.z);
+			return;
+		}
+
+		x = Number(x);
+		y = Number(y);
+		z = Number(z);
+
+		if ((this.x !== x || this.y !== y || this.z !== z)) {
+			const old = this.clone();
+			this.x = x;
+			this.y = y;
+			this.z = z;
+			this.makeDirty();
+			this.triggerEvent('change', {oldValue: old, newValue: this});
+		}
+	}
+
+	add(v) {
+		return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z);
+	}
+
+	multiply(s) {
+		return new Vector3(this.x * s, this.y * s, this.z * s);
+	}
+
+	subtract(v) {
+		return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z);
+	}
+
+	toArray() {
+		return [this.x, this.y, this.z];
+	}
+
+	setFromArray(arr) {
+		if (typeof arr === 'object' && arr.length === 3) {
+			this.set(arr[0], arr[1], arr[2]);
+		}
+	}
+
+	static fromArray(arr) {
+		const v = new Vector3();
+		v.setFromArray(arr);
+		return v;
+	}
+
+	clone() {
+		return new Vector3(this);
+	}
+
+	getStateInternal() {
+		return this.toArray();
+	}
+
+	restoreStateInternal(state) {
+		this.setFromArray(state);
+	}
+
+	getThree() {
+		return new ThreeVector3(this.x, this.y, this.z);
+	}
+
+	asRgbColor() {
+		return `rgb(${Math.round(this.x)}, ${Math.round(this.y)}, ${Math.round(this.z)})`;
+	}
+}

package/core/renderer/RendererBase.js

@@ -0,0 +1,46 @@
+import ActivatedTreeNode from "../ActivatedTreeNode";
+
+export default class RendererBase extends ActivatedTreeNode {
+
+	/**
+	 * @type GameModel
+	 */
+	game;
+
+	/**
+	 * @type ModelBase
+	 */
+	model;
+
+	/**
+	 * @param {GameModel} game
+	 * @param {ModelBase} model
+	 */
+	constructor(game, model) {
+		super();
+		this.game = game;
+		this.model = model;
+
+	}
+
+	render() {
+		if (!this.model.isDirty) {
+			return;
+		}
+		if (!this.isActivated) {
+			return;
+		}
+		this.renderInternal();
+		this.children.forEach((c) => c.render());
+		if (this.isRoot()) {
+			this.model.clean();
+		}
+	}
+
+	/**
+	 * Override this
+	 */
+	renderInternal() {
+	}
+
+}

package/core/renderer/canvas/CanvasRenderer.js

@@ -0,0 +1,60 @@
+import RendererBase from "../RendererBase";
+
+export default class CanvasRenderer extends RendererBase {
+
+	/**
+	 * @type HTMLCanvasElement
+	 */
+	canvas;
+
+	/**
+	 * @type CanvasRenderingContext2D
+	 */
+	context2d;
+
+	constructor(game, model, canvas) {
+		super(game, model);
+
+		this.canvas = canvas;
+
+	}
+
+	activateInternal() {
+		this.context2d = this.canvas.getContext('2d');
+	}
+
+	deactivateInternal() {
+		this.context2d = null;
+	}
+
+	/**
+	 *
+	 * @param {Vector2} start
+	 * @param {Vector2} size
+	 * @param {CanvasGradient|string} fill
+	 */
+	drawRect(start, size, fill = 'black') {
+		const end = start.add(size);
+		this.context2d.fillStyle = fill;
+		this.context2d.fillRect(start.x, start.y, end.x, end.y);
+	}
+
+	/**
+	 *
+	 * @param {Vector2} gradientStart
+	 * @param {Vector2} gradientSize
+	 * @param {Vector2} start
+	 * @param {Vector2} size
+	 * @param {[[Number, string|color]]} stops
+	 */
+	drawGradient(start, size, gradientStart, gradientSize, stops) {
+		const gradientEnd = gradientStart.add(gradientSize);
+		const grd = this.context2d.createLinearGradient(gradientStart.x, gradientStart.y, gradientEnd.x, gradientEnd.y);
+		stops.forEach((s) => {
+			grd.addColorStop(s[0], s[1]);
+		});
+		this.drawRect(start, size, grd);
+	}
+
+
+}