Fix a bug

TODO.md

@@ -11,15 +11,19 @@
 - [ ] Room labels
 - [ ] Background music
 - [ ] Sound effects
+- [ ] Custom debug console commands
 
 ## Bugs
 
-- [ ] Fix console rendering issues
+- [x] Console rendering issues
+- [ ] DOM tree rendering issues
+- [x] Inconsistent text formatting
 
 ### Dialogue
 
-- [ ] Text formatting
+- [x] Text formatting
 - [ ] Character profiles / speaker ID
+- [ ] Scrollable dialogue pane (like Citizen Sleeper / Disco Elysium)
 
 ## Code architecture
 

compile-hl.hxml

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

makefile

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

res/style.css

@@ -55,18 +55,16 @@ menubutton:active {
 
 flow.dialogue-container {
 	fill-width: true;
-	height: 20;
+	min-height: 20;
 	layout: vertical;
 }
 
 dialogue-box {
 	fill-width: true;
-	height: 20;
-	/* background: tile("ui.png", 5, 5); */
-	/* background-tile-pos: 1 1; */
 	background: blue;
 	padding: 10;
 	alpha: 0.9;
+	min-height: 20;
 }
 
 dialogue-options {

res/text/rooms.yarn

@@ -1,37 +1,42 @@
 title: Room:quarters
 ---
 <<declare $roll = 0>>
+<<declare $quartersIntroSeen = false>>
 <<declare $hangarKeyFound = false>>
 <<declare $sleepingMatSetUp = false>>
-You: It's the crew quarters. 
+<<if not $quartersIntroSeen>>
+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 (perception) <<if not $hangarKeyFound>>
+-> Search the lockers [ability](perception)[/ability] <<if not $hangarKeyFound>>
 	<<set $roll to dice(6)>>
-	<<if $roll > 2>>
-		You: Aha! A small piece of paper with the **hangar access code**.
+	<<if $roll > 0>>
+		You: Aha! A small piece of paper with the [item]access code[/item] for the [room]hangar[/room].
 		<<room hangar>>
 		<<set $hangarKeyFound to true>>
 	<<else>>
 		You: Just some dust bunnies. Guess they stowed away from Earth.
 	<<endif>>
--> Set up a sleeping mat (ingenuity) <<if not $sleepingMatSetUp>>
+-> Set up a sleeping mat [ability](ingenuity)[/ability] <<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: Hmm, I was never good at this camping stuff. Maybe I can find somewhere else to rest.
+		You: [failure]Hmm, I was never good at this camping stuff. Maybe I can find somewhere else to rest.[/failure]
   <<endif>>
 -> Leave
 ===
 title: Room:hangar
 ---
-You: The **hangar** seems eerily deserted.
+You: The [room]hangar[/room] 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/components/DialogueBoxComponent.hx

@@ -1,6 +1,10 @@
 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;
 
@@ -69,6 +73,12 @@ class DialogueOptionsComponent extends h2d.Flow implements h2d.domkit.Object {
 			);
 		}
 	}
+
+	override function onRemove() {
+		for (option in this.options)
+			option.remove();
+		super.onRemove();
+	}
 }
 
 @:uiComp("dialogue-box")
@@ -77,9 +87,10 @@ 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>
-		<text text={displayedText} public font={Game.current.font} id="dialogueText" />
+		<html-text text={displayedText} public font={Game.current.font} id="dialogueText" />
 	</dialogue-box>
 
 	public var displayedText(get, set):String;
@@ -103,11 +114,12 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 		return t;
 	}
 
-	public function new(text:String, ?parent) {
+	public function new(lineShown:LineShown, ?parent) {
 		this.game = Game.current;
 		super(parent);
 		initComponent();
-		internalText = text;
+		this.lineMarkup = lineShown.markUpResults;
+		this.internalText = lineShown.line();
 
 		enableInteractive = true;
 		interactive.onClick = function(_) onClick();
@@ -116,7 +128,6 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 	function updateText() {
 		if (textPos == internalText.length) {
 			timer.stop();
-			// onReady();
 			// if (chan != null)
 			// 	chan.stop();
 			return;
@@ -133,7 +144,66 @@ class DialogueBoxComponent extends h2d.Flow implements h2d.domkit.Object {
 		// 	}
 		// }
 		textPos++;
-		displayedText = internalText.substr(0, textPos);
+		displayedText = applyTextAttributes(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() {
@@ -141,7 +211,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 = internalText;
+			displayedText = applyTextAttributes(internalText);
 			updateText();
 		};
 	}

src/listeners/DialogueBoxController.hx

@@ -36,25 +36,19 @@ class DialogueBoxController {
 		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) {
-		if (dialogueBox != null) {
-			dialogueBox.remove();
+		if (dialogueBox == null) {
+			var d = new DialogueBoxComponent(event, this.parent);
+			style.addObject(d);
+			dialogueBox = d;
+		} else {
+			dialogueBox.lineMarkup = event.markUpResults;
+			dialogueBox.internalText = event.line();
 		}
-		var d = new DialogueBoxComponent(event.line(), this.parent);
-		style.addObject(d);
-
-		dialogueBox = d;
 	}
 
 	function onOptionsShown(event:OptionsShown) {
@@ -69,6 +63,6 @@ class DialogueBoxController {
 		dialogueBox.remove();
 		if (dialogueOptions != null)
 			dialogueOptions.remove();
+		dialogueBox = null;
 	}
-
 }