wgge 0.1.12 → 0.1.13

package/game/GameRenderer.js

@@ -2,9 +2,9 @@ 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";
+import MainMenuRenderer from "./menu/MainMenuRenderer";
 
 export default class GameRenderer extends DomRenderer {
 
@@ -31,7 +31,7 @@ export default class GameRenderer extends DomRenderer {
 			new NullableNodeRenderer(
 				this.game,
 				this.model.menu,
-				(m) => new MenuRenderer(this.game, m, this.menuLayer)
+				(m) => new MainMenuRenderer(this.game, m, this.menuLayer)
 			)
 		);
 

package/game/menu/MainMenuRenderer.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 MainMenuRenderer 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/MenuRenderer.js

@@ -1,7 +1,6 @@
 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 {
 
@@ -19,16 +18,14 @@ export default class MenuRenderer extends DomRenderer {
 			new CollectionRenderer(
 				this.game,
 				this.model.items,
-				(m) => new MenuItemRenderer(this.game, m, this.items)
+				(m) => new MenuItemRenderer(this.game, m, this.container)
 			)
 		);
 	}
 
 	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');
+		this.container = this.addElement('div', 'menu');
+
 	}
 
 	deactivateInternal() {

package/game/menu/item/MenuItemRenderer.js

@@ -15,7 +15,7 @@ export default class MenuItemRenderer extends DomRenderer {
 	}
 
 	activateInternal() {
-		this.container = this.addElement('h2', 'item');
+		this.container = this.addElement('div', 'item');
 		this.container.addEventListener(
 			'click',
 			(e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wgge",
-	"version": "0.1.12",
+	"version": "0.1.13",
 	"description": "Web GL Game Engine",
 	"main": "index.js",
 	"dependencies": {

package/style/basic/game.less

@@ -6,6 +6,9 @@
 @gold: #e0b050;
 @red: darkred;
 @white: #e0e0e0;
+@light-gray: #a0a0a0;
+@gray: #5a5a5a;
+@dark-gray: #2a2a2a;
 @black: rgb(0, 0, 0);
 @transparent-black: rgba(0, 0, 0, 0.7);
 
@@ -66,8 +69,12 @@ h1, h2, h3, h4 {
 	font-size: @font-size-extra-small;
 }
 
-.default-cursor {
-	//cursor: uri('img/cursor/cursor.png'), default;
+.cursor-default {
+	cursor: default;
+}
+
+.cursor-pointer {
+	cursor: pointer;
 }
 
 .info-float {
@@ -141,8 +148,23 @@ h1, h2, h3, h4 {
 	}
 }
 
+.menu {
+	.decor-text();
+
+	text-align: center;
+	color: @gray;
+
+	.item {
+		.cursor-pointer();
+		
+		&:hover {
+			color: @light-gray;
+		}
+	}
+}
+
 .savegame-layer {
-	.default-cursor();
+	.cursor-default();
 	.normal-text();
 	color: @dark-brown;