TODO.md

@@ -2,30 +2,26 @@
 
 ## Features
 
-- [ ] Saving and loading games
+- Saving and loading games
-- [ ] Character select
+- Character select
-- [ ] Stats
+- Stats
-- [ ] Better open / closed state graphics for rooms
+- Better open / closed state graphics for rooms
-- [ ] Displaying sprites (characters, objects)
+- Displaying sprites (characters, objects)
-- [ ] Inventory
+- Inventory
-- [ ] Room labels
+- Room labels
-- [ ] Background music
+- Background music
-- [ ] Sound effects
+- Sound effects
-- [ ] Custom debug console commands
 
 ## Bugs
 
-- [x] Console rendering issues
+- Fix console rendering issues
-- [ ] DOM tree rendering issues
-- [x] Inconsistent text formatting
 
 ### Dialogue
 
-- [x] Text formatting
+- Text formatting
-- [ ] Character profiles / speaker ID
+- Character profiles / speaker ID
-- [ ] Scrollable dialogue pane (like Citizen Sleeper / Disco Elysium)
 
 ## Code architecture
 
-- [x] Move dialogue- and option-drawing out of `Game.hx`
+- Move dialogue- and option-drawing out of `Game.hx`
-- [x] Use domkit for dialogue
+- Use domkit for dialogue

compile-hl.hxml

@@ -2,4 +2,4 @@ compile-common.hxml
 
 -D windowTitle=StoneInAGlasshouse
 -lib hlsdl
--hl bin/glasshouse.hl
+-hl bin/rewild.hl

makefile

@@ -1,23 +1,23 @@
 .PHONY: watch run
 
-default: bin/glasshouse.hl
+default: bin/rewild.hl
 
 SOURCES := $(shell find . -name \*.hx -print)
 
-bin/glasshouse.hl: $(SOURCES)
+bin/rewild.hl: $(SOURCES)
 	haxe compile-hl.hxml
 
-bin/glasshouse.js: $(SOURCES)
+bin/rewild.js: $(SOURCES)
 	haxe compile-js.hxml
 
 debug: $(SOURCES)
 	haxe --debug compile-hl.hxml
 
 clean:
-	rm -f bin/glasshouse.hl bin/glasshouse.js
+	rm -f bin/rewild.hl bin/rewild.js
 
 watch:
 	@inotifywait --recursive --monitor --event modify,move,create,delete --include '.*.hx$$' ./ | while read changed; do echo $$changed; make debug; done
 
 run:
-	hl bin/glasshouse.hl
+	hl bin/rewild.hl

res/style.css

@@ -55,30 +55,19 @@ menubutton:active {
 
 flow.dialogue-container {
 	fill-width: true;
-	min-height: 20;
+	height: 20;
-	layout: vertical;
+	debug: true;
 }
 
 dialogue-box {
 	fill-width: true;
-	background: blue;
+	height: 20;
-	padding: 10;
-	alpha: 0.9;
-	min-height: 20;
 }
 
-dialogue-options {
+scale-grid#dialogueBackground {
-	fill-width: true;
+	/* fill-width: true; */
-	layout: vertical;
 }
 
-dialogue-option {
+/* text#dialogueText { */
-	fill-width: true;
+/* 	font : url("res/font/minecraftia_regular_6.fnt"); */
-	background: green;
+/* } */
-	padding: 10;
-	alpha: 0.9;
-}
-
-dialogue-option.disabled {
-	alpha: 0.5;
-}

res/text/rooms.yarn

@@ -1,42 +1,37 @@
 title: Room:quarters
 ---
 <<declare $roll = 0>>
-<<declare $quartersIntroSeen = false>>
 <<declare $hangarKeyFound = false>>
 <<declare $sleepingMatSetUp = false>>
-<<if not $quartersIntroSeen>>
+You: It's the crew quarters. 
-You: It's the [room]crew quarters[/room]. 
 You: Well, it will be. Set-up hasn't started yet.
 You: That was meant to be one of my first jobs after defrost...
 You: ...but it doesn't exactly seem like a priority now.
-<<set $quartersIntroSeen to true>>
-<<endif>>
 You: Maybe there's something useful here?
--> Search the lockers [ability](perception)[/ability] <<if not $hangarKeyFound>>
+-> Search the lockers (perception) <<if not $hangarKeyFound>>
 	<<set $roll to dice(6)>>
-	<<if $roll > 0>>
+	<<if $roll > 2>>
-		You: Aha! A small piece of paper with the [item]access code[/item] for the [room]hangar[/room].
+		You: Aha! A small piece of paper with the **hangar access code**.
 		<<room hangar>>
 		<<set $hangarKeyFound to true>>
 	<<else>>
 		You: Just some dust bunnies. Guess they stowed away from Earth.
 	<<endif>>
--> Set up a sleeping mat [ability](ingenuity)[/ability] <<if not $sleepingMatSetUp>>
+-> Set up a sleeping mat (ingenuity) <<if not $sleepingMatSetUp>>
   <<set $roll to dice(6)>>
   <<if $roll > 2>>
 		You: Nice, at least I have somewhere to crash now.
 		<<set $sleepingMatSetUp to true>>
   <<else>>
-		You: [failure]Hmm, I was never good at this camping stuff. Maybe I can find somewhere else to rest.[/failure]
+		You: Hmm, I was never good at this camping stuff. Maybe I can find somewhere else to rest.
   <<endif>>
 -> Leave
 ===
 title: Room:hangar
 ---
-You: The [room]hangar[/room] seems eerily deserted.
+You: The **hangar** seems eerily deserted.
 ===
 title: Room not open
 ---
 You: Hmm, that part of the ship is still inaccessible. I wonder how to get in?
-<<room hangar>>
 ===

src/Game.hx

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

src/components/DialogueBoxComponent.hx

@@ -1,12 +1,6 @@
 package components;
 
-import h2d.HtmlText;
-import hxyarn.dialogue.markup.MarkupParseResult;
-
 import dialogue.event.NextLine;
-import dialogue.event.LineShown;
-import dialogue.event.OptionSelected;
-import dialogue.event.OptionsShown.OptionChoice;
 
 @:uiComp("dialogue-option")
 class DialogueOptionComponent extends h2d.Flow implements h2d.domkit.Object {
@@ -24,16 +18,9 @@ class DialogueOptionComponent extends h2d.Flow implements h2d.domkit.Object {
 		return s;
 	}
 
-	var choice:OptionChoice;
+	public function new(label:String, ?parent) {
-
-	public function new(choice:OptionChoice, ?parent) {
 		super(parent);
 		initComponent();
-		this.choice = choice;
-		this.label = choice.text;
-		if (!choice.enabled) {
-			this.dom.addClass('disabled');
-		}
 		enableInteractive = true;
 		interactive.onClick = function(_) onClick();
 		interactive.onOver = function(_) {
@@ -50,10 +37,7 @@ class DialogueOptionComponent extends h2d.Flow implements h2d.domkit.Object {
 		};
 	}
 
-	public dynamic function onClick() {
+	public dynamic function onClick() {}
-		if (this.choice.enabled) 
-			Game.current.globalEventBus.publishEvent(new OptionSelected(this.choice.index));
-	}
 }
 
 @:uiComp("dialogue-options")
@@ -62,23 +46,7 @@ class DialogueOptionsComponent extends h2d.Flow implements h2d.domkit.Object {
 	${options}
 	</dialogue-options>;
 
-	public var options = new Array<DialogueOptionComponent>();
+	public var options:Array<DialogueOptionComponent>;
-
-	public function new(options:Array<OptionChoice>, ?parent) {
-		super(parent);
-		initComponent();
-		for (option in options) {
-			this.options.push(
-					new DialogueOptionComponent(option, this)
-			);
-		}
-	}
-
-	override function onRemove() {
-		for (option in this.options)
-			option.remove();
-		super.onRemove();
-	}
 }
 
 @:uiComp("dialogue-box")
@@ -87,10 +55,11 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 	var chan:hxd.snd.Channel;
 	var textPos:Int = 0;
 	var game:Game;
-	public var lineMarkup:MarkupParseResult;
 
 	static var SRC = <dialogue-box>
-		<html-text text={displayedText} public font={Game.current.font} id="dialogueText" />
+		<scale-grid id="dialogueBackground">
+			<text text={displayedText} public font={Game.current.font} id="dialogueText" />
+		</scale-grid>
 	</dialogue-box>
 
 	public var displayedText(get, set):String;
@@ -114,12 +83,18 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 		return t;
 	}
 
-	public function new(lineShown:LineShown, ?parent) {
+	public function new(text:String, ?parent) {
 		this.game = Game.current;
 		super(parent);
 		initComponent();
-		this.lineMarkup = lineShown.markUpResults;
+		internalText = text;
-		this.internalText = lineShown.line();
+		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();
@@ -128,6 +103,7 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 	function updateText() {
 		if (textPos == internalText.length) {
 			timer.stop();
+			// onReady();
 			// if (chan != null)
 			// 	chan.stop();
 			return;
@@ -144,66 +120,7 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 		// 	}
 		// }
 		textPos++;
-		displayedText = applyTextAttributes(internalText.substr(0, textPos));
+		displayedText = internalText.substr(0, textPos);
-	}
-
-	function applyTextAttributes(text:String):String {
-		var characterOffset = 0;
-		var characterAttribute = lineMarkup.tryGetAttributeWithName("character");
-		if (characterAttribute != null)
-			characterOffset = -characterAttribute.length;
-
-		var htmlTagsByIndex = new Map<Int, String>();
-
-		for (attribute in lineMarkup.attributes) {
-			var startTagIndex = attribute.position + characterOffset;
-			if (startTagIndex < text.length) {
-				var currrentStartTag = "";
-				var currentEndTag = "";
-				var endTagIndex = Std.int(Math.min(text.length, startTagIndex + attribute.length));
-				if (htmlTagsByIndex.exists(startTagIndex))
-					currrentStartTag = htmlTagsByIndex.get(startTagIndex);
-
-				if (htmlTagsByIndex.exists(endTagIndex))
-					currentEndTag = htmlTagsByIndex.get(endTagIndex);
-
-				if (attribute.name == "room") {
-					var openTag = '$currrentStartTag<font color="#00FF00">';
-					var closeTag = '</font>$currentEndTag';
-					htmlTagsByIndex.set(startTagIndex, openTag);
-					htmlTagsByIndex.set(endTagIndex, closeTag);
-				} else if (attribute.name == "item") {
-					var openTag = '$currrentStartTag<font color="#CD853F">';
-					var closeTag = '</font>$currentEndTag';
-					htmlTagsByIndex.set(startTagIndex, openTag);
-					htmlTagsByIndex.set(endTagIndex, closeTag);
-				}
-			}
-		}
-
-		var sb = new StringBuf();
-
-		for (i in 0...text.length) {
-			var char = text.charAt(i);
-			if (htmlTagsByIndex.exists(i)) {
-				sb.add(htmlTagsByIndex.get(i));
-			}
-
-			sb.add(char);
-		}
-
-		if (htmlTagsByIndex.exists(text.length)) {
-			sb.add(htmlTagsByIndex.get(text.length));
-		}
-
-		return sb.toString();
-	}
-
-	override function onRemove() {
-		super.onRemove();
-		// if (chan != null)
-		// 	chan.stop();
-		// timer.stop();
 	}
 
 	public dynamic function onClick() {
@@ -211,7 +128,7 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 			Game.current.globalEventBus.publishEvent(new NextLine());
 		else if (textPos < internalText.length) {
 			textPos = internalText.length;
-			displayedText = applyTextAttributes(internalText);
+			displayedText = internalText;
 			updateText();
 		};
 	}

src/listeners/DialogueBoxController.hx

@@ -15,8 +15,7 @@ import dialogue.event.NextLine;
 import components.DialogueBoxComponent;
 
 class DialogueBoxController {
-	public var dialogueBox:DialogueBoxComponent;
+	public var curDialogue:DialogueBoxComponent;
-	public var dialogueOptions:DialogueOptionsComponent;
 
 	var game:Game;
 	var bg:h2d.ScaleGrid;
@@ -29,40 +28,98 @@ class DialogueBoxController {
 	public function new(eventBus:EventBus, parent:h2d.Object, style:h2d.domkit.Style) {
 		this.parent = parent;
 		this.style = style;
+		// game = Game.current;
+		// parent.getScene().add(this, 1);
+		// bg = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5, this);
+		// bg.colorKey = 0xFF00FF;
+		// tf = new h2d.Text(game.font, this);
+		// tf.y = 5;
+		// tf.x = 7;
+		// tf.dropShadow = {
+		// 	dx: 0,
+		// 	dy: 1,
+		// 	color: 0,
+		// 	alpha: 0.3
+		// };
+		// int = new h2d.Interactive(0, 0, this);
+		// int.onClick = function(_) click();
 
-		eventBus.subscribe(LineShown, onLineShown);
+		eventBus.subscribe(LineShown, dialogue);
-		eventBus.subscribe(OptionsShown, onOptionsShown);
+		// eventBus.subscribe(OptionsShown, renderOptions);
-		eventBus.subscribe(OptionSelected, onOptionSelected);
+		// eventBus.subscribe(OptionSelected, onOptionSelected);
 		eventBus.subscribe(DialogueComplete, onDialogueComplete);
 	}
 
+	// override function onRemove() {
+	// 	super.onRemove();
+	// 	// if (chan != null)
+	// 	// 	chan.stop();
+	// 	// timer.stop();
+	// }
+
 	public dynamic function onClick() {}
 
 	public dynamic function onReady() {}
 
-	function onLineShown(event:LineShown) {
+	function dialogue(event:LineShown) {
-		if (dialogueBox == null) {
+		if (curDialogue != null) {
-			var d = new DialogueBoxComponent(event, this.parent);
+			curDialogue.remove();
+		}
+		var d = new DialogueBoxComponent(event.line(), this.parent);
 		style.addObject(d);
-			dialogueBox = d;
+
-		} else {
+		curDialogue = d;
-			dialogueBox.lineMarkup = event.markUpResults;
-			dialogueBox.internalText = event.line();
-		}
 	}
 
-	function onOptionsShown(event:OptionsShown) {
+	// function renderOptions(event:OptionsShown) {
-		dialogueOptions = new DialogueOptionsComponent(event.options, this.parent);
+	// 	for (option in event.options) {
-	}
+	// 		addOption(option.text, option.enabled, function() {
-	
+	// 			if (option.enabled) {
-	function onOptionSelected(event:OptionSelected) {
+	// 				globalEventBus.publishEvent(new OptionSelected(option.index));
-		dialogueOptions.remove();
+	// 			}
-	}
+	// 		});
+	// 	}
+	// }
+  //
+	// function newPanel(w, h) {
+	// 	var g = new h2d.ScaleGrid(Res.ui.toTile(), 5, 5);
+	// 	g.width = w;
+	// 	g.height = h;
+	// 	g.colorKey = 0xFF00FF;
+	// 	root.scene.getH2dObject().getScene().add(g, 1);
+	// 	return g;
+	// }
+  //
+	// function addOption(o:String, enabled:Bool, callback:() -> Void) {
+	// 	var spr = newPanel(Const.W, 60);
+	// 	curDialogue.addChild(spr);
+	// 	var tf = new h2d.Text(font, spr);
+	// 	if (!enabled) {
+	// 		tf.color = new Vector4(0.5, 0.5, 0.5, 1);
+	// 	}
+	// 	tf.text = o;
+	// 	tf.x = 10;
+	// 	tf.y = 10;
+	// 	spr.x = 0;
+	// 	spr.y = 100 + options.length * 60;
+	// 	var int = new h2d.Interactive(spr.width, spr.height, spr);
+	// 	int.onClick = function(_) {
+	// 		callback();
+	// 	}
+	// 	int.cursor = Button;
+	// 	options.push(spr);
+	// 	return spr;
+	// }
+  //
+	// function onOptionSelected(event:OptionSelected) {
+	// 	for (o in options) {
+	// 		o.remove();
+	// 	}
+	// 	options.splice(0, options.length);
+	// }
 
 	function onDialogueComplete(event:DialogueComplete) {
-		dialogueBox.remove();
+		curDialogue.remove();
-		if (dialogueOptions != null)
-			dialogueOptions.remove();
-		dialogueBox = null;
 	}
+
 }