From 2d17ccbb98f7717e12f8331424d04eb00bbeedf2 Mon Sep 17 00:00:00 2001
From: dragoncoder047 <101021094+dragoncoder047@users.noreply.github.com>
Date: Thu, 26 Dec 2024 22:49:52 -0500
Subject: [PATCH] feat: add ability to override text styles (#559)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel Báez <danielbaezibarrola+githubsus@gmail.com>
---
 CHANGELOG.md                     |  1 +
 src/gfx/draw/drawText.ts         |  7 ++++++
 src/gfx/formatText.ts            |  4 +++
 tests/playtests/styleOverride.js | 43 ++++++++++++++++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 tests/playtests/styleOverride.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2a05ca6..cbe3ff58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -104,6 +104,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 
 - Fixed artifacts present in some TrueType fonts.
+- Allow to override the default style in styled text chunks with `override: true` flag
 - Fixed `.use()` and `.unuse()` with area components.
 
 ## [3001.0.0] "Spooky Beans!" - 2024-10-31
diff --git a/src/gfx/draw/drawText.ts b/src/gfx/draw/drawText.ts
index 6633ff41..bfc3ef0a 100644
--- a/src/gfx/draw/drawText.ts
+++ b/src/gfx/draw/drawText.ts
@@ -109,6 +109,13 @@ export interface CharTransform {
      * For example, an opacity of 0.4 with 2 set in the transformation, the resulting opacity will be 0.8 (0.4 × 2).
      */
     opacity?: number;
+
+    /**
+     * If true, the styles applied by this specific {@link DrawTextOpt.styles} entry transform
+     * will override, rather than compose with, the default styles given in {@link DrawTextOpt.transform} and by other
+     * components' styles.
+     */
+    override?: boolean
 }
 
 /**
diff --git a/src/gfx/formatText.ts b/src/gfx/formatText.ts
index 27116d25..36bd0450 100644
--- a/src/gfx/formatText.ts
+++ b/src/gfx/formatText.ts
@@ -30,6 +30,10 @@ type FontAtlas = {
 const fontAtlases: Record<string, FontAtlas> = {};
 
 function applyCharTransform(fchar: FormattedChar, tr: CharTransform) {
+    if (tr.override) {
+        Object.assign(fchar, tr);
+        return;
+    }
     if (tr.pos) fchar.pos = fchar.pos.add(tr.pos);
     if (tr.scale) fchar.scale = fchar.scale.scale(vec2(tr.scale));
     if (tr.angle) fchar.angle += tr.angle;
diff --git a/tests/playtests/styleOverride.js b/tests/playtests/styleOverride.js
new file mode 100644
index 00000000..b560588d
--- /dev/null
+++ b/tests/playtests/styleOverride.js
@@ -0,0 +1,43 @@
+kaplay({ background: "#000000" });
+
+add([
+    pos(100, 100),
+    text("No override: Hello [foo]styled[/foo] text", {
+        transform: {
+            color: WHITE.darken(200),
+        },
+        styles: {
+            foo: {
+                color: RED
+            }
+        }
+    })
+]);
+
+add([
+    pos(100, 150),
+    text("With override: Hello [foo]styled[/foo] text", {
+        transform: {
+            color: WHITE.darken(200),
+        },
+        styles: {
+            foo: {
+                color: RED,
+                override: true
+            }
+        }
+    })
+]);
+
+add([
+    pos(100, 200),
+    text("With override and color(): Hello [foo]styled[/foo] text", {
+        styles: {
+            foo: {
+                color: RED,
+                override: true
+            }
+        }
+    }),
+    color(WHITE.darken(200)),
+]);