Abandon ScaleGrid bg for now, working though!

res/style.css

@@ -56,18 +56,26 @@ menubutton:active {
 flow.dialogue-container {
 	fill-width: true;
 	height: 20;
-	debug: true;
+	layout: vertical;
 }
 
 dialogue-box {
 	fill-width: true;
 	height: 20;
+	/* background: tile("ui.png", 5, 5); */
+	/* background-tile-pos: 1 1; */
+	background: blue;
+	padding: 10;
 }
 
-scale-grid#dialogueBackground {
-	/* fill-width: true; */
+dialogue-options {
+	fill-width: true;
+	background: red;
+	layout: vertical;
 }
 
-/* text#dialogueText { */
-/* 	font : url("res/font/minecraftia_regular_6.fnt"); */
-/* } */
+dialogue-option {
+	fill-width: true;
+	background: green;
+	padding: 10;
+}

src/Game.hx

@@ -22,6 +22,8 @@ class GameContainer extends h2d.Flow implements h2d.domkit.Object {
 	public function new(?parent) {
 		super(parent);
 		initComponent();
+		this.maxWidth = Const.W;
+		this.minWidth = Const.W;
 	}
 }
 
@@ -83,8 +85,8 @@ class Game extends hxd.App {
 		var dialogueParent = new h2d.Flow();
 		dialogueParent.dom = domkit.Properties.create("flow", dialogueParent);
 		dialogueParent.dom.addClass('dialogue-container');
-		style.addObject(dialogueParent);
 		layer.addChildAt(dialogueParent, 2);
+		style.addObject(dialogueParent);
 		dialogueBoxController = new DialogueBoxController(globalEventBus, dialogueParent, style);
 
 		#if debug

src/components/DialogueBoxComponent.hx

@@ -1,6 +1,7 @@
 package components;
 
 import dialogue.event.NextLine;
+import dialogue.event.OptionsShown.OptionChoice;
 
 @:uiComp("dialogue-option")
 class DialogueOptionComponent extends h2d.Flow implements h2d.domkit.Object {
@@ -46,7 +47,17 @@ class DialogueOptionsComponent extends h2d.Flow implements h2d.domkit.Object {
 	${options}
 	</dialogue-options>;
 
-	public var options:Array<DialogueOptionComponent>;
+	public var options = new Array<DialogueOptionComponent>();
+
+	public function new(options:Array<OptionChoice>, ?parent) {
+		super(parent);
+		initComponent();
+		for (option in options) {
+			this.options.push(
+					new DialogueOptionComponent(option.text, this)
+			);
+		}
+	}
 }
 
 @:uiComp("dialogue-box")
@@ -57,9 +68,7 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 	var game:Game;
 
 	static var SRC = <dialogue-box>
-		<scale-grid id="dialogueBackground">
 		<text text={displayedText} public font={Game.current.font} id="dialogueText" />
-		</scale-grid>
 	</dialogue-box>
 
 	public var displayedText(get, set):String;
@@ -88,13 +97,6 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 		super(parent);
 		initComponent();
 		internalText = text;
-		this.dialogueBackground.tile = Res.ui.toTile();
-		this.dialogueBackground.borderWidth = 5;
-		this.dialogueBackground.borderHeight = 5;
-		this.dialogueBackground.colorKey = 0xFF00FF;
-		this.dialogueBackground.width = this.innerWidth;
-		this.dialogueBackground.height = this.innerHeight;
-		// trace(this.dialogueBackground.width);
 
 		enableInteractive = true;
 		interactive.onClick = function(_) onClick();

src/listeners/DialogueBoxController.hx

@@ -45,7 +45,7 @@ class DialogueBoxController {
 		// int.onClick = function(_) click();
 
 		eventBus.subscribe(LineShown, dialogue);
-		// eventBus.subscribe(OptionsShown, renderOptions);
+		eventBus.subscribe(OptionsShown, renderOptions);
 		// eventBus.subscribe(OptionSelected, onOptionSelected);
 		eventBus.subscribe(DialogueComplete, onDialogueComplete);
 	}
@@ -71,15 +71,9 @@ class DialogueBoxController {
 		curDialogue = d;
 	}
 
-	// function renderOptions(event:OptionsShown) {
-	// 	for (option in event.options) {
-	// 		addOption(option.text, option.enabled, function() {
-	// 			if (option.enabled) {
-	// 				globalEventBus.publishEvent(new OptionSelected(option.index));
-	// 			}
-	// 		});
-	// 	}
-	// }
+	function renderOptions(event:OptionsShown) {
+		new DialogueOptionsComponent(event.options, this.parent);
+	}
   //
 	// function newPanel(w, h) {
 	// 	var g = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5);