TextButton is aligned with TextButtonComponents.

Author: KierPalin

guiComponents.ts

@@ -858,6 +858,90 @@ namespace microcode {
     }
 
 
+    export class TextButton {
+        public bounds: Bounds;
+        private text: string;
+        private callback: (x: any) => void;
+        private colour: number;
+        private textColour: number;
+
+        constructor(opts: {
+                text: string, 
+                callback: (x: any) => void, 
+                x?: number,
+                y?: number
+                colour?: number,
+                textColour?: number
+        }) {
+            this.text = opts.text;
+
+            const x = (opts.x != null) ? opts.x : 0;
+            const y = (opts.y != null) ? opts.y : 0;
+            this.bounds = new Bounds({top: y, left: x, width: (font.charWidth * this.text.length), height: font.charHeight + 2});
+            this.callback = opts.callback;
+            this.colour = (opts.colour != null) ? opts.colour : 6;
+            this.textColour = (opts.textColour != null) ? opts.textColour : 1;
+        }
+
+        draw() {
+            this.bounds.fillRect(this.colour);
+            screen().print(
+                this.text,
+                this.bounds.left + (screen().width >> 1) + 1,
+                this.bounds.top + (screen().height >> 1) + 1,
+                this.textColour
+            )
+        }
+    }
+    
+    
+    export class TextButtonCollection extends GUIComponentAbstract {
+        private textBtns: TextButton[];
+
+        constructor(opts: {
+            alignment: GUIComponentAlignment,
+            isActive: boolean,
+            textBtns: TextButton[],
+            isHidden?: boolean,
+            xOffset?: number,
+            yOffset?: number,
+            xScaling?: number,
+            yScaling?: number,
+            colour?: number,
+            border?: boolean,
+            title?: string,
+            text?: string | string[]
+        }) {
+            super({
+                alignment: opts.alignment,
+                xOffset: (opts.xOffset != null) ? opts.xOffset : 0,
+                yOffset: (opts.yOffset != null) ? opts.yOffset : 0,
+                width: GUIComponentAbstract.DEFAULT_WIDTH,
+                height: GUIComponentAbstract.DEFAULT_HEIGHT,
+                isActive: opts.isActive,
+                isHidden: opts.isHidden,
+                xScaling: opts.xScaling,
+                yScaling: opts.yScaling,
+                colour: opts.colour,
+                border: opts.border
+            });
+
+            this.textBtns = (opts.textBtns != null) ? opts.textBtns : [];
+
+            this.textBtns.forEach(btn => {
+                btn.bounds.left += this.bounds.left;
+                btn.bounds.top += this.bounds.top;
+            })
+        }
+
+        draw() {
+            super.draw();
+
+            this.textBtns.forEach(btn => btn.draw())            
+        }
+    }
+
+
     /**
      * Holds other components,
      * One component is active at a time

main.ts

@@ -77,27 +77,38 @@ namespace microcode {
     // const window = new Window({app, components: [comp1, comp2, comp3] })
     // app.pushScene(window)
 
-    let count = 0;
-    const comp1 = new ButtonCollection({
-        alignment: GUIComponentAlignment.TOP,
-        btns: [
-            [new Button({ icon: "pin_0", ariaId: "+1", x: 10, y: 10, onClick: () => {
-                count += 1;
-            }})],
-        ],
-        isActive: true,
-        colour: 2,
-        xScaling: 0.5,
-        yScaling: 0.7,
-        xOffset: -10
-    })
+    // let count = 0;
+    // const comp1 = new ButtonCollection({
+    //     alignment: GUIComponentAlignment.TOP,
+    //     btns: [
+    //         [new Button({
+    //             icon: "pin_0", ariaId: "+1", x: 10, y: 10, onClick: () => {
+    //                 count += 1;
+    //             }
+    //         })],
+    //     ],
+    //     isActive: true,
+    //     colour: 2,
+    //     xScaling: 0.5,
+    //     yScaling: 0.7,
+    //     xOffset: -10
+    // })
 
-    const comp2 = new GUIGraph({
-        alignment: GUIComponentAlignment.BOT,
-        graphableFns: [new GraphableFunction((_) => count)],
-        isActive: false,
-    })
+    // const comp2 = new GUIGraph({
+    //     alignment: GUIComponentAlignment.BOT,
+    //     graphableFns: [new GraphableFunction((_) => count)],
+    //     isActive: false,
+    // })
 
-    const window = new Window({ app, components: [comp1, comp2] })
+    // const window = new Window({ app, components: [comp1, comp2] })
+    // app.pushScene(window)
+
+    const txtBtnComp = new TextButtonCollection({
+        alignment: GUIComponentAlignment.CENTRE,
+        isActive: true,
+        textBtns: [new TextButton({text: "hi", callback: () => "hi", })],
+        xOffset: 10
+    })
+    const window = new Window({ app, components: [txtBtnComp] })
     app.pushScene(window)
 }