wgge 2.0.9 → 2.0.11

package/core/Dictionary.js

@@ -1,8 +1,6 @@
 import NodeWithEvents from "./model/event/NodeWithEvents";
 import ChangeEvent from "./model/event/ChangeEvent";
 
-const DEBUG_HASH_TABLE = false;
-
 /**
  * Triggers Events: add, set, remove
  */

package/core/model/collection/table/ModelNodeTable.js

@@ -5,18 +5,25 @@ import ModelNodeCollection from "../ModelNodeCollection";
  */
 export default class ModelNodeTable extends ModelNodeCollection {
 
+	cache = new Map();
+
+	/**
+	 *
+	 * @param {number|string|DirtyValue|null|undefined} id
+	 * @returns {*|undefined}
+	 */
 	getById(id) {
-		if (id === null || id === undefined || id === '') {
-			return null;
+		if (typeof id === 'number') {
+			if (id === Number.NaN || id <= 0) return undefined;
+			return this.cache.get(id);
+		}
+		if (typeof id === 'string') {
+			return this.getById(Number(id));
 		}
 		if (typeof id === 'object' && typeof id.get === 'function') {
 			return this.getById(id.get());
 		}
-		const i = Number(id);
-		if (i === Number.NaN || i <= 0) {
-			return null;
-		}
-		return this.children.find((ch) => ch.id.equalsTo(i));
+		return undefined;
 	}
 
 	get(id) {
@@ -34,6 +41,10 @@ export default class ModelNodeTable extends ModelNodeCollection {
 		return this.maxId() + 1;
 	}
 
+	/**
+	 * @param {IdentifiedModelNode} node
+	 * @returns {IdentifiedModelNode}
+	 */
 	add(node) {
 		const id = this.nextId();
 		if (!node) {
@@ -41,13 +52,26 @@ export default class ModelNodeTable extends ModelNodeCollection {
 		}
 		node.id.set(id);
 		super.add(node);
+		this.cache.set(id, node);
 		return node;
 	}
 
-	addClone(node) {
-		const clone = node.clone();
-		clone.id.set(this.nextId());
-		return this.insert(clone, this.indexOf(node) + 1);
+	/**
+	 * @param {IdentifiedModelNode} node
+	 * @returns {IdentifiedModelNode}
+	 */
+	remove(node) {
+		const removed = super.remove(node);
+		if (removed) this.cache.set(node.id.get(), undefined);
+		return removed;
+	}
+
+	restoreStateInternal(state) {
+		this.cache.clear();
+		super.restoreStateInternal(state);
+		this.forEach(
+			(node) => this.cache.set(node.id.get(), node)
+		);
 	}
 
 }

package/core/model/vector/Rotation.js

@@ -1,11 +1,12 @@
 import DirtyValue from "../value/DirtyValue";
+import FloatValue from "../value/FloatValue";
 
 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 {
+export default class Rotation extends FloatValue {
 
 	static normalizeValue(rads) {
 		let result = rads % ROTATION_RANGE;
@@ -30,6 +31,10 @@ export default class Rotation extends DirtyValue {
 		return degs * Math.PI / 180;
 	}
 
+	static fromDegrees(degs) {
+		return new Rotation(Rotation.degToRad(degs));
+	}
+
 	set(rads) {
 		super.set(Rotation.normalizeValue(rads));
 	}
@@ -42,6 +47,10 @@ export default class Rotation extends DirtyValue {
 		return new Rotation(Rotation.diff(this.get(), value));
 	}
 
+	invert() {
+		return this.add(Math.PI);
+	}
+
 	equalsTo(value) {
 		return (this.value === Rotation.normalizeValue(value));
 	}

package/core/model/vector/Vector3.js

@@ -0,0 +1,113 @@
+import ModelBase from "../ModelBase";
+
+export default class Vector3 extends ModelBase {
+	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);
+	}
+
+	asRgbColor() {
+		return `rgb(${Math.round(this.x)}, ${Math.round(this.y)}, ${Math.round(this.z)})`;
+	}
+
+	/**
+	 * Components in 0-1 range (three.js style)
+	 * @returns {number}
+	 */
+	asHexColor() {
+		const r = Math.round(Math.min(Math.max(this.x, 0), 1) * 255);
+		const g = Math.round(Math.min(Math.max(this.y, 0), 1) * 255);
+		const b = Math.round(Math.min(Math.max(this.z, 0), 1) * 255);
+		return (r << 16) | (g << 8) | b;
+	}
+
+	size() {
+		return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2) + Math.pow(this.z, 2));
+	}
+
+	distanceTo(v) {
+		return this.subtract(v).size();
+	}
+
+}

package/game/GameRenderer.js

@@ -82,13 +82,10 @@ export default class GameRenderer extends DomRenderer {
 		}
 		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.loading = DOMHelper.createElement(this.loadingLayer, 'div', 'loading-overlay');
+				const inner = DOMHelper.createElement(this.loading, 'div', 'loading-overlay-inner');
+				this.label2 = DOMHelper.createElement(inner, 'div', 'center');
+				const progressWrapper = DOMHelper.createElement(inner, 'div', 'progress-wrapper mt-2');
 				this.loadingProgress = DOMHelper.createElement(progressWrapper, 'div', 'stretch');
 			}
 			const portion = this.game.assets.sessionFinishedLoaders.get() / this.game.assets.sessionTotalLoaders.get();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wgge",
-	"version": "2.0.9",
+	"version": "2.0.11",
 	"description": "Web GL Game Engine",
 	"main": "index.js",
 	"devDependencies": {

package/style/basic/game.less

@@ -1,9 +1,5 @@
-@dark-brown: #311a0a;
-@medium-brown: #885f32;
-@light-brown: #ad9475;
+@import "./utilities.less";
 
-@orange: sandybrown;
-@gold: #e0b050;
 @red: darkred;
 @white: #e0e0e0;
 @light-gray: #a0a0a0;
@@ -12,6 +8,7 @@
 @black: rgb(0, 0, 0);
 @transparent-black: rgba(0, 0, 0, 0.7);
 
+@font-family: "Droid Sans Mono Dotted", monospace;
 @font-size-extra-small: 10pt;
 @font-size-small: 16pt;
 @font-size-medium: 22pt;
@@ -42,132 +39,116 @@ h1, h2, h3, h4 {
 	padding: 0;
 }
 
-.no-text-select {
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-o-user-select: none;
-	user-select: none;
-	-webkit-touch-callout: none;
-	-ms-user-select: none;
-}
-
-.normal-text {
+.text {
 	.no-text-select();
-
-	font-family: "Droid Sans Mono Dotted", monospace;
-	font-size: @font-size-small;
+	font-family: @font-family;
+	font-size: @font-size-medium;
 }
 
-.decor-text {
-	.normal-text();
-
-	font-size: @font-size-medium;
+.extra-small-text {
+	.text();
+	font-size: @font-size-small;
 }
 
 .small-text {
-	.normal-text();
-
+	.text();
 	font-size: @font-size-extra-small;
 }
 
-.cursor-default {
-	cursor: default;
+.medium-text {
+	.text();
+	font-size: @font-size-medium;
 }
 
-.cursor-pointer {
-	cursor: pointer;
+.large-text {
+	.text();
+	font-size: @font-size-large;
 }
 
-.info-float {
-	position: fixed;
-	right: @m-2;
-	top: @m-2;
-	background-color: @black;
-	color: @white;
-	padding: @m-2;
+.extra-large-text {
+	.text();
+	font-size: @font-size-extra-large;
 }
 
-.loading {
-	.decor-text();
-
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 2000;
-	pointer-events: none;
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center center;
-
-	color: @white;
-
-	div {
-		border-radius: @m-2;
-	}
+.wegge-game-container {
+	.cursor-default();
+	.medium-text();
 
-	.progress-wrapper {
-		border-width: 1px;
-		padding: 1px;
-		border-style: solid;
-		border-color: @white;
+	.floating-widget {
+		position: fixed;
+		right: @m-2;
+		top: @m-2;
+		background-color: @black;
+		color: @white;
+		padding: @m-2;
+	}
 
-		div {
-			height: @m-2;
-			background-color: @white;
+	.loading-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+		pointer-events: none;
+		background-color: @black;
+		color: @light-gray;
+
+		.loading-overlay-inner {
+
+			.progress-wrapper {
+				border-width: 1px;
+				padding: 1px;
+				border-style: solid;
+				border-color: @white;
+
+				div {
+					height: @m-2;
+					background-color: @white;
+				}
+			}
 		}
 	}
-}
 
-.main-menu-layer {
-	.cursor-default();
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: @transparent-black;
-
-	.main-menu {
-		.decor-text();
-		border-radius: @m-2;
-		text-align: center;
-		color: @white;
-
-		.item {
-			&:hover {
-				color: @red;
+	.main-menu-layer {
+		.cursor-default();
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: @transparent-black;
+
+		.main-menu {
+			border-radius: @m-2;
+			text-align: center;
+			color: @white;
+
+			.item {
+				&:hover {
+					color: @red;
+				}
 			}
 		}
 	}
-}
-
-.menu {
-	.decor-text();
 
-	text-align: center;
-	color: @gray;
+	.menu {
+		text-align: center;
+		color: @gray;
 
-	.item {
-		.cursor-pointer();
+		.item {
+			.cursor-pointer();
 
-		&:hover {
-			color: @light-gray;
+			&:hover {
+				color: @light-gray;
+			}
 		}
 	}
-}
-
-.savegame-layer {
-	.cursor-default();
-	.normal-text();
-	color: @dark-brown;
 
 }

package/style/basic/utilities.less

@@ -6,8 +6,16 @@
   display: none !important;
 }
 
-.picture img {
-	display: block;
+.container-host {
+	position: relative;
+}
+
+.container-host > .container {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 }
 
 .row {
@@ -30,11 +38,6 @@
   flex-direction: column-reverse;
 }
 
-.stretch {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
 .flex-1 {
   flex: 1;
 }
@@ -61,9 +64,9 @@
   justify-content: center;
 }
 
-.center-vertical {
-	justify-content: center;
-	vertical-align: middle;
+.stretch {
+	align-items: stretch;
+	justify-content: stretch;
 }
 
 .left {
@@ -74,16 +77,26 @@
   font-size: 75%;
 }
 
-.container-host {
-  position: relative;
+.no-text-select {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+	-webkit-touch-callout: none;
+	-ms-user-select: none;
 }
 
-.container-host > .container {
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+.picture img {
+	display: block;
+}
+
+.cursor-default {
+	cursor: default;
+}
+
+.cursor-pointer {
+	cursor: pointer;
 }
 
 .m-0, .mt-0, .my-0 {