feat: added classlist component

tsukinoko-kun · Jul 29, 2024 · dd3921c · dd3921c
1 parent 656dcb5
commit dd3921c
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 53 deletions.
diff --git a/apps/demo/src/counter.ts b/apps/demo/src/counter.ts
@@ -13,10 +13,10 @@ import {
     UiButton,
     UiInteraction,
     UiNode,
-    UiStyle,
     UiText,
     Update,
 } from "@tsukinoko-kun/ecs.ts"
+import { UiClassList } from "../../../lib/builtin/components/uiClassList"
 
 // this resource is used to store the counter value
 class Counter {
@@ -38,30 +38,47 @@ function spawnUi() {
     Commands.spawn(
         new CounterPageMarker(),
         new UiNode("div"),
-        new UiStyle()
-            .set("backgroundColor", "#f5f5f540")
-            .set("border", "solid 1px #202020")
-            .set("padding", "0.5rem 1rem")
-            .set("maxWidth", "64rem")
-            .set("margin", "4rem auto")
-            .set("display", "flex")
-            .set("flexDirection", "column")
-            .set("alignItems", "center")
-            .set("gap", "0.5rem"),
+        new UiClassList(
+            "bg-gray-300",
+            "border",
+            "border-gray-800",
+            "rounded-md",
+            "px-4",
+            "py-2",
+            "max-w-96",
+            "mx-auto",
+            "my-16",
+            "flex",
+            "flex-col",
+            "items-center",
+            "gap-md",
+        ),
     ).withChildren((parent) => {
-        parent.spawn(new UiNode("h1"), new UiText("Counter example"), new UiStyle().set("fontSize", "1.5rem"))
+        parent.spawn(new UiNode("h1"), new UiText("Counter example"), new UiClassList("text-red-400", "text-4xl"))
         parent.spawn(new UiNode("p"), new UiText("This is a simple counter example using the ECS.ts library."))
         parent.spawn(
             new UiAnchor("https://github.com/tsukinoko-kun/ecs.ts"),
             new UiText("ECS.ts on GitHub"),
-            new UiStyle().set("display", "block"),
+            new UiClassList("block", "text-blue-500", "hover:text-blue-700", "underline"),
+        )
+        parent.spawn(
+            new UiAnchor("./meep"),
+            new UiText("Meep"),
+            new UiClassList("block", "text-blue-500", "hover:text-blue-700", "underline"),
         )
-        parent.spawn(new UiAnchor("./meep"), new UiText("Meep"))
         parent.spawn(
             new UiButton(),
             new UiText("Click me!"),
             new UiInteraction(),
-            new UiStyle().set("maxWidth", "16rem").set("padding", "0.5rem 1rem").set("border", "solid 1px #202020"),
+            new UiClassList(
+                "px-4",
+                "py-2",
+                "border",
+                "border-gray-800",
+                "rounded-md",
+                "bg-gray-400",
+                "hover:bg-gray-500",
+            ),
             new CounterButtonMarker(),
         )
     })

diff --git a/apps/demo/src/index.html b/apps/demo/src/index.html
@@ -5,6 +5,7 @@
         <title>ECS Test</title>
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
         <link href="./style.css" rel="stylesheet" />
+        <script src="https://cdn.tailwindcss.com"></script>
     </head>
     <body>
         <main id="app"></main>

diff --git a/apps/demo/src/meep.ts b/apps/demo/src/meep.ts
@@ -11,6 +11,7 @@ import {
     UiNode,
     UiText,
 } from "@tsukinoko-kun/ecs.ts"
+import { UiClassList } from "../../../lib/builtin/components/uiClassList"
 
 class MeepPageMarker {}
 
@@ -21,7 +22,7 @@ function setTitle() {
 
 // this system is used to spawn the UI elements initially
 function spawnUi() {
-    Commands.spawn(new MeepPageMarker(), new UiNode("h1"), new UiText("Meep?"))
+    Commands.spawn(new MeepPageMarker(), new UiNode("h1"), new UiText("Meep?"), new UiClassList("text-4xl"))
 }
 
 function despawnUi() {

diff --git a/apps/demo/src/style.css b/apps/demo/src/style.css
@@ -1,15 +1,3 @@
-:root {
-    color-scheme: dark light;
-    font-family: sans-serif;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font: inherit;
-}
-
 h1,
 h2,
 h3,
@@ -19,30 +7,6 @@ h6 {
     text-wrap: balance;
 }
 
-h1 {
-    font-size: 5em;
-}
-
-h2 {
-    font-size: 4em;
-}
-
-h3 {
-    font-size: 3.5em;
-}
-
-h4 {
-    font-size: 3em;
-}
-
-h5 {
-    font-size: 2.5em;
-}
-
-h6 {
-    font-size: 2em;
-}
-
 p {
     text-wrap: pretty;
 }
diff --git a/lib/builtin/components/uiClassList.ts b/lib/builtin/components/uiClassList.ts
@@ -0,0 +1,39 @@
+export class UiClassList {
+    private _classList: Set<string>
+
+    public constructor(...classList: string[]) {
+        this._classList = new Set(classList)
+    }
+
+    public add(className: string): void {
+        this._classList.add(className)
+    }
+
+    public remove(className: string): void {
+        this._classList.delete(className)
+    }
+
+    public has(className: string): boolean {
+        return this._classList.has(className)
+    }
+
+    public toggle(className: string): void {
+        if (this.has(className)) {
+            this.remove(className)
+        } else {
+            this.add(className)
+        }
+    }
+
+    public clear(): void {
+        this._classList.clear()
+    }
+
+    public toArray(): string[] {
+        return Array.from(this._classList)
+    }
+
+    public toString(): string {
+        return Array.from(this._classList).join(" ")
+    }
+}
diff --git a/lib/builtin/components/uiStyle.ts b/lib/builtin/components/uiStyle.ts
@@ -1,8 +1,13 @@
 export class UiStyle {
     public readonly cssObject: CSSStyleDeclaration
 
-    constructor() {
+    public constructor(cssObject?: Partial<CSSStyleDeclaration>) {
         this.cssObject = document.createElement("div").style
+        if (cssObject) {
+            for (const key in cssObject) {
+                this.cssObject[key] = cssObject[key]!
+            }
+        }
     }
 
     public get css(): string {

diff --git a/lib/builtin/systems/html.ts b/lib/builtin/systems/html.ts
@@ -5,6 +5,7 @@ import { UiAnchor, UiButton, UiInteraction, UiNode, UiStyle, UiText } from "../c
 import { Entity } from "../../entity"
 import { inWorld, useWorld } from "../../world"
 import { Commands } from "../../commands"
+import { UiClassList } from "../components/uiClassList"
 
 export function htmlInteraction(): void {
     const root = res(HtmlRoot)
@@ -79,6 +80,10 @@ export function renderHtmlRoot(): void {
                 tagName = "a"
                 attr.set("href", c.href)
                 attr.set("target", c.target)
+            } else if (c instanceof UiClassList) {
+                const nowClassList = attr.get("class")?.split(" ") || []
+                nowClassList.push(...Array.from(c.toArray()))
+                attr.set("class", nowClassList.join(" "))
             }
         }