wgge 2.0.9 → 2.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/core/Dictionary.js +0 -2
  2. package/core/model/collection/table/ModelNodeTable.js +35 -11
  3. package/core/model/vector/Rotation.js +10 -1
  4. package/core/model/vector/Vector3.js +113 -0
  5. package/game/GameRenderer.js +2 -2
  6. package/package.json +1 -1
  7. package/style/basic/game.less +86 -101
  8. package/style/basic/utilities.less +31 -18
package/core/Dictionary.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import NodeWithEvents from "./model/event/NodeWithEvents";
2
2
  import ChangeEvent from "./model/event/ChangeEvent";
3
3
 
4
- const DEBUG_HASH_TABLE = false;
5
-
6
4
  /**
7
5
  * Triggers Events: add, set, remove
8
6
  */
package/core/model/collection/table/ModelNodeTable.js CHANGED
@@ -5,18 +5,25 @@ import ModelNodeCollection from "../ModelNodeCollection";
5
5
  */
6
6
  export default class ModelNodeTable extends ModelNodeCollection {
7
7
 
8
+ cache = new Map();
9
+
10
+ /**
11
+ *
12
+ * @param {number|string|DirtyValue|null|undefined} id
13
+ * @returns {*|undefined}
14
+ */
8
15
  getById(id) {
9
- if (id === null || id === undefined || id === '') {
10
- return null;
16
+ if (typeof id === 'number') {
17
+ if (id === Number.NaN || id <= 0) return undefined;
18
+ return this.cache.get(id);
19
+ }
20
+ if (typeof id === 'string') {
21
+ return this.getById(Number(id));
11
22
  }
12
23
  if (typeof id === 'object' && typeof id.get === 'function') {
13
24
  return this.getById(id.get());
14
25
  }
15
- const i = Number(id);
16
- if (i === Number.NaN || i <= 0) {
17
- return null;
18
- }
19
- return this.children.find((ch) => ch.id.equalsTo(i));
26
+ return undefined;
20
27
  }
21
28
 
22
29
  get(id) {
@@ -34,6 +41,10 @@ export default class ModelNodeTable extends ModelNodeCollection {
34
41
  return this.maxId() + 1;
35
42
  }
36
43
 
44
+ /**
45
+ * @param {IdentifiedModelNode} node
46
+ * @returns {IdentifiedModelNode}
47
+ */
37
48
  add(node) {
38
49
  const id = this.nextId();
39
50
  if (!node) {
@@ -41,13 +52,26 @@ export default class ModelNodeTable extends ModelNodeCollection {
41
52
  }
42
53
  node.id.set(id);
43
54
  super.add(node);
55
+ this.cache.set(id, node);
44
56
  return node;
45
57
  }
46
58
 
47
- addClone(node) {
48
- const clone = node.clone();
49
- clone.id.set(this.nextId());
50
- return this.insert(clone, this.indexOf(node) + 1);
59
+ /**
60
+ * @param {IdentifiedModelNode} node
61
+ * @returns {IdentifiedModelNode}
62
+ */
63
+ remove(node) {
64
+ const removed = super.remove(node);
65
+ if (removed) this.cache.set(node.id.get(), undefined);
66
+ return removed;
67
+ }
68
+
69
+ restoreStateInternal(state) {
70
+ this.cache.clear();
71
+ super.restoreStateInternal(state);
72
+ this.forEach(
73
+ (node) => this.cache.set(node.id.get(), node)
74
+ );
51
75
  }
52
76
 
53
77
  }
package/core/model/vector/Rotation.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import DirtyValue from "../value/DirtyValue";
2
+ import FloatValue from "../value/FloatValue";
2
3
 
3
4
  const ROTATION_RANGE = 2 * Math.PI;
4
5
 
5
6
  /**
6
7
  * Keeps track of rotation in radians that is always in interval (-pi, +pi> which equals to (-180, 180> degrees
7
8
  */
8
- export default class Rotation extends DirtyValue {
9
+ export default class Rotation extends FloatValue {
9
10
 
10
11
  static normalizeValue(rads) {
11
12
  let result = rads % ROTATION_RANGE;
@@ -30,6 +31,10 @@ export default class Rotation extends DirtyValue {
30
31
  return degs * Math.PI / 180;
31
32
  }
32
33
 
34
+ static fromDegrees(degs) {
35
+ return new Rotation(Rotation.degToRad(degs));
36
+ }
37
+
33
38
  set(rads) {
34
39
  super.set(Rotation.normalizeValue(rads));
35
40
  }
@@ -42,6 +47,10 @@ export default class Rotation extends DirtyValue {
42
47
  return new Rotation(Rotation.diff(this.get(), value));
43
48
  }
44
49
 
50
+ invert() {
51
+ return this.add(Math.PI);
52
+ }
53
+
45
54
  equalsTo(value) {
46
55
  return (this.value === Rotation.normalizeValue(value));
47
56
  }
package/core/model/vector/Vector3.js ADDED
@@ -0,0 +1,113 @@
1
+ import ModelBase from "../ModelBase";
2
+
3
+ export default class Vector3 extends ModelBase {
4
+ x;
5
+ y;
6
+ z;
7
+
8
+ constructor(x, y, z) {
9
+ super();
10
+
11
+ this.x = 0;
12
+ this.y = 0;
13
+ this.z = 0;
14
+
15
+ if (y === undefined && typeof x === 'object') {
16
+ if (x.length === 3) {
17
+ this.setFromArray(x);
18
+ } else {
19
+ this.set(x);
20
+ }
21
+ } else if (x !== undefined && z !== undefined) {
22
+ this.set(x, y, z);
23
+ }
24
+ }
25
+
26
+ equalsTo(v) {
27
+ return (v) ? this.x === v.x && this.y === v.y && this.z === v.z : false;
28
+ }
29
+
30
+ set(x, y, z) {
31
+ if (y === undefined && typeof x === 'object') {
32
+ this.set(x.x, x.y, x.z);
33
+ return;
34
+ }
35
+
36
+ x = Number(x);
37
+ y = Number(y);
38
+ z = Number(z);
39
+
40
+ if ((this.x !== x || this.y !== y || this.z !== z)) {
41
+ const old = this.clone();
42
+ this.x = x;
43
+ this.y = y;
44
+ this.z = z;
45
+ this.makeDirty();
46
+ this.triggerEvent('change', {oldValue: old, newValue: this});
47
+ }
48
+ }
49
+
50
+ add(v) {
51
+ return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z);
52
+ }
53
+
54
+ multiply(s) {
55
+ return new Vector3(this.x * s, this.y * s, this.z * s);
56
+ }
57
+
58
+ subtract(v) {
59
+ return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z);
60
+ }
61
+
62
+ toArray() {
63
+ return [this.x, this.y, this.z];
64
+ }
65
+
66
+ setFromArray(arr) {
67
+ if (typeof arr === 'object' && arr.length === 3) {
68
+ this.set(arr[0], arr[1], arr[2]);
69
+ }
70
+ }
71
+
72
+ static fromArray(arr) {
73
+ const v = new Vector3();
74
+ v.setFromArray(arr);
75
+ return v;
76
+ }
77
+
78
+ clone() {
79
+ return new Vector3(this);
80
+ }
81
+
82
+ getStateInternal() {
83
+ return this.toArray();
84
+ }
85
+
86
+ restoreStateInternal(state) {
87
+ this.setFromArray(state);
88
+ }
89
+
90
+ asRgbColor() {
91
+ return `rgb(${Math.round(this.x)}, ${Math.round(this.y)}, ${Math.round(this.z)})`;
92
+ }
93
+
94
+ /**
95
+ * Components in 0-1 range (three.js style)
96
+ * @returns {number}
97
+ */
98
+ asHexColor() {
99
+ const r = Math.round(Math.min(Math.max(this.x, 0), 1) * 255);
100
+ const g = Math.round(Math.min(Math.max(this.y, 0), 1) * 255);
101
+ const b = Math.round(Math.min(Math.max(this.z, 0), 1) * 255);
102
+ return (r << 16) | (g << 8) | b;
103
+ }
104
+
105
+ size() {
106
+ return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2) + Math.pow(this.z, 2));
107
+ }
108
+
109
+ distanceTo(v) {
110
+ return this.subtract(v).size();
111
+ }
112
+
113
+ }
package/game/GameRenderer.js CHANGED
@@ -82,11 +82,11 @@ export default class GameRenderer extends DomRenderer {
82
82
  }
83
83
  if (isLoading) {
84
84
  if (!this.loading) {
85
- this.loading = DOMHelper.createElement(this.loadingLayer, 'div', 'loading');
85
+ this.loading = DOMHelper.createElement(this.loadingLayer, 'div', 'loading-overlay');
86
86
  const paper = DOMHelper.createElement(this.loading, 'div');
87
87
  const inner = DOMHelper.createElement(paper, 'div', 'inner p-3');
88
88
  const content = DOMHelper.createElement(inner, 'div', 'm-3 p-3');
89
- const label1 = DOMHelper.createElement(content, 'h2', null, 'Nahrávám');
89
+ const label1 = DOMHelper.createElement(content, 'h2', 'loading-title');
90
90
  this.label2 = DOMHelper.createElement(content, 'div', 'center');
91
91
  const progressWrapper = DOMHelper.createElement(content, 'div', 'progress-wrapper mt-2');
92
92
  this.loadingProgress = DOMHelper.createElement(progressWrapper, 'div', 'stretch');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wgge",
3
- "version": "2.0.9",
3
+ "version": "2.0.10",
4
4
  "description": "Web GL Game Engine",
5
5
  "main": "index.js",
6
6
  "devDependencies": {
package/style/basic/game.less CHANGED
@@ -1,9 +1,5 @@
1
- @dark-brown: #311a0a;
2
- @medium-brown: #885f32;
3
- @light-brown: #ad9475;
1
+ @import "./utilities.less";
4
2
 
5
- @orange: sandybrown;
6
- @gold: #e0b050;
7
3
  @red: darkred;
8
4
  @white: #e0e0e0;
9
5
  @light-gray: #a0a0a0;
@@ -12,6 +8,7 @@
12
8
  @black: rgb(0, 0, 0);
13
9
  @transparent-black: rgba(0, 0, 0, 0.7);
14
10
 
11
+ @font-family: "Droid Sans Mono Dotted", monospace;
15
12
  @font-size-extra-small: 10pt;
16
13
  @font-size-small: 16pt;
17
14
  @font-size-medium: 22pt;
@@ -42,132 +39,120 @@ h1, h2, h3, h4 {
42
39
  padding: 0;
43
40
  }
44
41
 
45
- .no-text-select {
46
- -webkit-user-select: none;
47
- -khtml-user-select: none;
48
- -moz-user-select: none;
49
- -o-user-select: none;
50
- user-select: none;
51
- -webkit-touch-callout: none;
52
- -ms-user-select: none;
53
- }
54
-
55
- .normal-text {
42
+ .text {
56
43
  .no-text-select();
57
-
58
- font-family: "Droid Sans Mono Dotted", monospace;
59
- font-size: @font-size-small;
44
+ font-family: @font-family;
45
+ font-size: @font-size-medium;
60
46
  }
61
47
 
62
- .decor-text {
63
- .normal-text();
64
-
65
- font-size: @font-size-medium;
48
+ .extra-small-text {
49
+ .text();
50
+ font-size: @font-size-small;
66
51
  }
67
52
 
68
53
  .small-text {
69
- .normal-text();
70
-
54
+ .text();
71
55
  font-size: @font-size-extra-small;
72
56
  }
73
57
 
74
- .cursor-default {
75
- cursor: default;
58
+ .medium-text {
59
+ .text();
60
+ font-size: @font-size-medium;
76
61
  }
77
62
 
78
- .cursor-pointer {
79
- cursor: pointer;
63
+ .large-text {
64
+ .text();
65
+ font-size: @font-size-large;
80
66
  }
81
67
 
82
- .info-float {
83
- position: fixed;
84
- right: @m-2;
85
- top: @m-2;
86
- background-color: @black;
87
- color: @white;
88
- padding: @m-2;
68
+ .extra-large-text {
69
+ .text();
70
+ font-size: @font-size-extra-large;
89
71
  }
90
72
 
91
- .loading {
92
- .decor-text();
93
-
94
- position: fixed;
95
- top: 0;
96
- left: 0;
97
- right: 0;
98
- bottom: 0;
99
- display: flex;
100
- align-items: center;
101
- justify-content: center;
102
- z-index: 2000;
103
- pointer-events: none;
104
- background-repeat: no-repeat;
105
- background-size: cover;
106
- background-position: center center;
107
-
108
- color: @white;
109
-
110
- div {
111
- border-radius: @m-2;
73
+ .wegge-game-container {
74
+ .cursor-default();
75
+ .medium-text();
76
+
77
+ .floating-widget {
78
+ position: fixed;
79
+ right: @m-2;
80
+ top: @m-2;
81
+ background-color: @black;
82
+ color: @white;
83
+ padding: @m-2;
112
84
  }
113
85
 
114
- .progress-wrapper {
115
- border-width: 1px;
116
- padding: 1px;
117
- border-style: solid;
118
- border-color: @white;
86
+ .loading-overlay {
87
+ position: fixed;
88
+ top: 0;
89
+ left: 0;
90
+ right: 0;
91
+ bottom: 0;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ z-index: 9999;
96
+ pointer-events: none;
97
+ background-repeat: no-repeat;
98
+ background-size: cover;
99
+ background-position: center center;
100
+
101
+ color: @white;
119
102
 
120
103
  div {
121
- height: @m-2;
122
- background-color: @white;
104
+ border-radius: @m-2;
123
105
  }
124
- }
125
- }
126
106
 
127
- .main-menu-layer {
128
- .cursor-default();
129
- position: fixed;
130
- top: 0;
131
- left: 0;
132
- right: 0;
133
- bottom: 0;
134
- display: flex;
135
- align-items: center;
136
- justify-content: center;
137
- background-color: @transparent-black;
138
-
139
- .main-menu {
140
- .decor-text();
141
- border-radius: @m-2;
142
- text-align: center;
143
- color: @white;
107
+ .progress-wrapper {
108
+ border-width: 1px;
109
+ padding: 1px;
110
+ border-style: solid;
111
+ border-color: @white;
144
112
 
145
- .item {
146
- &:hover {
147
- color: @red;
113
+ div {
114
+ height: @m-2;
115
+ background-color: @white;
148
116
  }
149
117
  }
150
118
  }
151
- }
152
119
 
153
- .menu {
154
- .decor-text();
120
+ .main-menu-layer {
121
+ .cursor-default();
122
+ position: fixed;
123
+ top: 0;
124
+ left: 0;
125
+ right: 0;
126
+ bottom: 0;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ background-color: @transparent-black;
131
+
132
+ .main-menu {
133
+ border-radius: @m-2;
134
+ text-align: center;
135
+ color: @white;
136
+
137
+ .item {
138
+ &:hover {
139
+ color: @red;
140
+ }
141
+ }
142
+ }
143
+ }
155
144
 
156
- text-align: center;
157
- color: @gray;
145
+ .menu {
146
+ text-align: center;
147
+ color: @gray;
158
148
 
159
- .item {
160
- .cursor-pointer();
149
+ .item {
150
+ .cursor-pointer();
161
151
 
162
- &:hover {
163
- color: @light-gray;
152
+ &:hover {
153
+ color: @light-gray;
154
+ }
164
155
  }
165
156
  }
166
- }
167
-
168
- .savegame-layer {
169
- .cursor-default();
170
- .normal-text();
171
- color: @dark-brown;
172
157
 
173
158
  }
package/style/basic/utilities.less CHANGED
@@ -6,8 +6,16 @@
6
6
  display: none !important;
7
7
  }
8
8
 
9
- .picture img {
10
- display: block;
9
+ .container-host {
10
+ position: relative;
11
+ }
12
+
13
+ .container-host > .container {
14
+ position: absolute !important;
15
+ top: 0;
16
+ left: 0;
17
+ bottom: 0;
18
+ right: 0;
11
19
  }
12
20
 
13
21
  .row {
@@ -30,11 +38,6 @@
30
38
  flex-direction: column-reverse;
31
39
  }
32
40
 
33
- .stretch {
34
- align-items: stretch;
35
- justify-content: stretch;
36
- }
37
-
38
41
  .flex-1 {
39
42
  flex: 1;
40
43
  }
@@ -61,9 +64,9 @@
61
64
  justify-content: center;
62
65
  }
63
66
 
64
- .center-vertical {
65
- justify-content: center;
66
- vertical-align: middle;
67
+ .stretch {
68
+ align-items: stretch;
69
+ justify-content: stretch;
67
70
  }
68
71
 
69
72
  .left {
@@ -74,16 +77,26 @@
74
77
  font-size: 75%;
75
78
  }
76
79
 
77
- .container-host {
78
- position: relative;
80
+ .no-text-select {
81
+ -webkit-user-select: none;
82
+ -khtml-user-select: none;
83
+ -moz-user-select: none;
84
+ -o-user-select: none;
85
+ user-select: none;
86
+ -webkit-touch-callout: none;
87
+ -ms-user-select: none;
79
88
  }
80
89
 
81
- .container-host > .container {
82
- position: absolute !important;
83
- top: 0;
84
- left: 0;
85
- bottom: 0;
86
- right: 0;
90
+ .picture img {
91
+ display: block;
92
+ }
93
+
94
+ .cursor-default {
95
+ cursor: default;
96
+ }
97
+
98
+ .cursor-pointer {
99
+ cursor: pointer;
87
100
  }
88
101
 
89
102
  .m-0, .mt-0, .my-0 {