feat: text inputs

CHANGELOG.md

@@ -99,6 +99,7 @@ add([
 - added quadratic bezier and Catmull-Rom evaluation
 - added evaluation of the first and second derivatives for all splines
 - added higher order easing functions linear, steps and cubic-bezier
+- added a text input component
 
 ## Deprecated
 

examples/ciTest.json

@@ -52,6 +52,7 @@
     "easing",
     "bench",
     "gamepad",
-    "binding"
+    "binding",
+    "textInput"
   ]
 }

examples/textInput.js

@@ -0,0 +1,31 @@
+// Start kaboom
+kaplay();
+
+setBackground(BLACK)
+
+// Add the game object that asks a question
+add([
+    anchor("top"),
+    pos(width()/2, 0),
+    text("Whats your favorite food :D")
+]);
+
+// Add the node that you write in
+const food = add([
+    text(""),
+    textInput(true, 10), // make it have focus and only be 20 chars max
+    pos(width()/2, height()/2),
+    anchor("center"),
+]);
+
+// add the response
+add([
+    text(""),
+    anchor("bot"),
+    pos(width()/2, height()),
+    {
+      update(){
+        this.text = `wow i didnt know you love ${food.text} so much, but i like it too :D`
+      }
+    }
+])

src/components/index.ts

@@ -23,6 +23,7 @@ export * from "./misc/lifespan";
 export * from "./misc/named";
 export * from "./misc/state";
 export * from "./misc/stay";
+export * from "./misc/textInput";
 export * from "./misc/timer";
 export * from "./physics/area";
 export * from "./physics/body";

src/components/misc/textInput.ts

@@ -0,0 +1,51 @@
+import { getKaboomContext } from "../../kaboom";
+import type { Comp, KEventController } from "../../types";
+
+/**
+ * The {@link stay `stay()`} component.
+ *
+ * @group Component Types
+ */
+export interface TextInputComp extends Comp {
+    /**
+     * Enable the text input array from being modified by user input.
+     */
+    hasFocus: boolean;
+}
+
+export function textInput(
+    hasFocus: boolean = true,
+    maxInputLength?: number,
+): TextInputComp {
+    let k = getKaboomContext(this);
+    let charEv: KEventController;
+    let backEv: KEventController;
+    return {
+        id: "textInput",
+        hasFocus: hasFocus,
+        add() {
+            charEv = k.onCharInput((character) => {
+                if (
+                    this.hasFocus
+                    && (!maxInputLength || this.text.length < maxInputLength)
+                ) {
+                    if (k.isKeyDown("shift")) {
+                        this.text += character.toUpperCase();
+                    } else {
+                        this.text += character;
+                    }
+                }
+            });
+
+            backEv = k.onKeyPress("backspace", () => {
+                if (this.hasFocus) {
+                    this.text = this.text.slice(0, -1);
+                }
+            });
+        },
+        destroy() {
+            charEv.cancel();
+            backEv.cancel();
+        },
+    };
+}

src/kaboom.ts

@@ -233,6 +233,7 @@ import {
     state,
     stay,
     text,
+    textInput,
     tile,
     timer,
     uvquad,
@@ -5155,9 +5156,7 @@ const kaplay = <
                     if (data[tag]) {
                         // pushes the inspect function (eg: `sprite: "bean"`)
                         lines.push(`${data[tag]}`);
-                    }
-
-                    else {
+                    } else {
                         // pushes only the tag (name of the component)
                         lines.push(`${tag}`);
                     }
@@ -5709,6 +5708,7 @@ const kaplay = <
         body,
         doubleJump,
         shader,
+        textInput,
         timer,
         fixed,
         stay,

src/types.ts

@@ -42,6 +42,7 @@ import type {
     StayComp,
     TextComp,
     TextCompOpt,
+    TextInputComp,
     TileComp,
     TileCompOpt,
     TimerComp,
@@ -135,6 +136,7 @@ export type {
     StayComp,
     TextComp,
     TextCompOpt,
+    TextInputComp,
     Texture,
     TileComp,
     TileCompOpt,
@@ -699,6 +701,23 @@ export interface KaboomCtx<
      * @group Components
      */
     shader(id: string, uniform?: Uniform | (() => Uniform)): ShaderComp;
+    /**
+     * Enable timer related functions like wait(), loop(), tween() on the game object.
+     *
+     * @example
+     * ```js
+     * const obj = add([
+     *     text(""),
+     *     textInput(),
+     * ])
+     *
+     * obj.hasFocus = false
+     * debug.log(obj.text) // oh no i cant see my new text since it was disabled
+     * ```
+     *
+     * @group Components
+     */
+    textInput(hasFocus?: boolean, maxInputLength?: number): TextInputComp;
     /**
      * Enable timer related functions like wait(), loop(), tween() on the game object.
      *