Working main menu 🎉

compile.hxml

@@ -1,4 +1,5 @@
 -cp src
+--macro Init.setup()
 -lib heaps
 -lib hlsdl
 -hl rewild.hl

res/style.css

@@ -12,35 +12,35 @@ container {
 	layout: vertical;
 }
 
-button {
+menubutton {
 	background: #333;
 	fill-width: true;
 	height: 30;
 	transition: background 0.5;
 }
 
-button.highlight {
+menubutton.highlight {
 	background: #a33;
 }
 
-button text {
+menubutton text {
 	align: middle middle;
 }
 
-button:hover {
+menubutton:hover {
 	background: #444;
 }
 
-button text {
+menubutton text {
 	align: middle middle;
 	color : #aaa;
 	transition : color;
 }
 
-button:hover text {
+menubutton:hover text {
 	color : white;
 }
 
-button:active {
+menubutton:active {
 	background: #666;
 }

src/Init.hx

@@ -0,0 +1,5 @@
+class Init {
+    public static function setup() {
+        domkit.Macros.registerComponentsPath("components.$Component");
+    }
+}

src/Main.hx

@@ -1,5 +1,6 @@
+import components.MenubuttonComponent;
+
 @:uiComp("view")
-// Naming scheme of component classes can be customized with domkit.Macros.registerComponentsPath();
 class ViewComp extends h2d.Flow implements h2d.domkit.Object {
 	static var SRC = <view class="mybox" min-width="200" content-halign={align}>
 		<text text={"Rewild"}/>
@@ -13,51 +14,14 @@ class ViewComp extends h2d.Flow implements h2d.domkit.Object {
 	}
 }
 
-@:uiComp("button")
-class ButtonComp extends h2d.Flow implements h2d.domkit.Object {
-	static var SRC = <button>
-		<text public id="labelTxt" />
-	</button>
-
-	public var label(get, set):String;
-
-	function get_label()
-		return labelTxt.text;
-
-	function set_label(s) {
-		labelTxt.text = s;
-		return s;
-	}
-
-	public function new(?parent) {
-		super(parent);
-		initComponent();
-		enableInteractive = true;
-		interactive.onClick = function(_) onClick();
-		interactive.onOver = function(_) {
-			dom.hover = true;
-		};
-		interactive.onPush = function(_) {
-			dom.active = true;
-		};
-		interactive.onRelease = function(_) {
-			dom.active = false;
-		};
-		interactive.onOut = function(_) {
-			dom.hover = false;
-		};
-	}
-
-	public dynamic function onClick() {}
-}
-
 @:uiComp("container")
 class ContainerComp extends h2d.Flow implements h2d.domkit.Object {
 	static var SRC = <container>
 		<view(align,[]) id="view"/>
-		<button public id="btn"/>
+		<menubutton("New game") public id="btnNewGame"/>
-		<button public id="btn1"/>
+		<menubutton("Continue game") public id="btnContinueGame"/>
-		<button public id="btn2"/>
+		<menubutton("Credits") public id="btnCredits"/>
+		<menubutton("Quit") public id="btnQuit"/>
 	</container>;
 
 	public function new(align:h2d.Flow.FlowAlign, ?parent) {
@@ -77,16 +41,11 @@ class Main extends hxd.App {
 		onResize();
 		var root = new ContainerComp(Right, center);
 
-		// Override
+		root.btnContinueGame.onClick = function() {
-		root.btn.label = "Button";
+			root.btnContinueGame.dom.addClass("highlight");
-		root.btn1.label = "Highlight ON";
-		root.btn2.labelTxt.text = "Highlight OFF";
-
-		root.btn1.onClick = function() {
-			root.btn.dom.addClass("highlight");
 		}
-		root.btn2.onClick = function() {
+		root.btnQuit.onClick = function() {
-			root.btn.dom.removeClass("highlight");
+			Sys.exit(0);
 		}
 
 		style = new h2d.domkit.Style();

src/components/MenubuttonComponent.hx

@@ -0,0 +1,40 @@
+package components;
+
+@:uiComp("menubutton")
+class MenubuttonComponent extends h2d.Flow implements h2d.domkit.Object {
+	static var SRC = <menubutton>
+		<text text={label} public id="labelTxt" />
+	</menubutton>
+
+	public var label(get, set):String;
+
+	function get_label()
+		return labelTxt.text;
+
+	function set_label(s) {
+		labelTxt.text = s;
+		return s;
+	}
+
+	public function new(label:String, ?parent) {
+		super(parent);
+		initComponent();
+		enableInteractive = true;
+		interactive.onClick = function(_) onClick();
+		interactive.onOver = function(_) {
+			dom.hover = true;
+		};
+		interactive.onPush = function(_) {
+			dom.active = true;
+		};
+		interactive.onRelease = function(_) {
+			dom.active = false;
+		};
+		interactive.onOut = function(_) {
+			dom.hover = false;
+		};
+	}
+
+	public dynamic function onClick() {}
+}
+