teamsgoal24 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "teamsgoal24",
+  "version": "1.0.0",
+  "description": "Reusable Phaser UI components, keyboard input system and layout manager",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "phaser",
+    "phaser4",
+    "ui",
+    "input",
+    "keyboard",
+    "layout"
+  ],
+  "author": "TECHTEAM",
+  "license": "MIT",
+  "peerDependencies": {
+    "phaser": "^4.0.0"
+  }
+}
+

package/src/GameImg.js

@@ -0,0 +1,24 @@
+import * as Phaser from "phaser";
+export default class GameImg extends Phaser.GameObjects.Image {
+    constructor(scene, x, y, textureKey, frameName = null, options = {}) {
+        if (frameName) {
+            super(scene, x, y, textureKey, frameName);
+        } else {
+            super(scene, x, y, textureKey);
+        }
+
+        this.setOrigin(options.originX ?? 0.5, options.originY ?? 0.5);
+        this.setScale(options.scale ?? 1);
+        this.setAlpha(options.alpha ?? 1);
+
+        if (options.clickEffect) {
+            this.on("pointerdown", () => this.setScale(this.scale * 0.95));
+            this.on("pointerup", () => this.setScale(this.scale / 0.95));
+        }
+
+        if (options.onClick) {
+            this.on("pointerup", options.onClick);
+        }
+        scene.add.existing(this);
+    }
+}

package/src/GameText.js

@@ -0,0 +1,15 @@
+import * as Phaser from "phaser";
+export default class GameText extends Phaser.GameObjects.Text {
+    constructor(scene, x, y, text, styleOverrides = {}) {
+        const defaultStyle = {
+            fontSize: "42px",
+            fontFamily: "ROBOTO_MEDIUM",
+            color: "#ffffff",
+            stroke: "#ffffff",
+            align: "center",
+        };
+        const finalStyle = Object.assign({}, defaultStyle, styleOverrides);
+        super(scene, x, y, text, finalStyle);
+        scene.add.existing(this);
+    }
+}

package/src/InputController.js

@@ -0,0 +1,376 @@
+import { KeyBoardLayout } from "./keyBoardLayout";
+import LayoutManager from "./LayoutManger";
+import UIBuilder from "./UIBuilder";
+export default class InputController {
+    constructor(scene) {
+        this.scene = scene;
+        this.container = scene.add.container();
+        this.layout = new LayoutManager(scene.game);
+        this.builder = new UIBuilder(scene, this.layout);
+        this.activeInput = null;
+        this.cursor = null;
+        this.cursorIndex = 0;
+        this.cursorBlink = null;
+        this.keyboard = null;
+        this.keyboardUI = null;
+        this.selectionBg = null;
+        this.isTextSelected = false;
+        this.createKeyboard();
+        this.scene.game.events.on("Resize", this.onGameResize, this);
+    }
+
+    createKeyboard() {
+
+        const isMobile =
+            this.scene.sys.game.device.os.android ||
+            this.scene.sys.game.device.os.iOS;
+
+
+        if (!isMobile) return;
+        this.keyboard = this.builder.build(
+            { keyBoard: KeyBoardLayout.keyBoard },
+            this.container,
+        );
+        this.keyboardUI = this.keyboard.keyBoard.ui;
+        this.keyboardUI.keyBoardBg.setInteractive();
+        this.keyboard.keyBoard.setVisible(false);
+        this.keyMap = {
+            key1: "1",
+            key2: "2",
+            key3: "3",
+            key4: "4",
+            key5: "5",
+            key6: "6",
+            key7: "7",
+            key8: "8",
+            key9: "9",
+            key0: "0",
+            point: ".",
+            delete: "⌫",
+        };
+        Object.keys(this.keyMap).forEach((keyName) => {
+            const keyObj = this.keyboardUI[keyName];
+            keyObj.setInteractive({ useHandCursor: true });
+            keyObj.on("pointerdown", () => {
+                this.handleKey(this.keyMap[keyName]);
+            });
+        });
+        this.keyboardUI.input?.setOrigin(0.5);
+    }
+    attach(background, input, options = {}) {
+        this.inputOptions = options;
+
+        const triggers = Array.isArray(background) ? background : [background];
+
+        triggers.forEach((bg) => {
+            bg.setInteractive({ useHandCursor: true });
+
+            bg.on("pointerup", (pointer) => {
+                pointer.event.stopPropagation();
+                options.onBeforeFocus?.({
+                    trigger: bg,
+                    input,
+                });
+                this.activeInput = input;
+                this.cursorIndex = input.text.length;
+                if (this.keyboardUI?.input) {
+                    this.keyboardUI.input.setText(input.text);
+                }
+                if (!this.cursor) {
+                    this.createCursor(input);
+                }
+                if (this.isTextSelected && this.selectionBg) {
+                    this.selectionBg.destroy();
+                    this.selectionBg = null;
+                    this.isTextSelected = false;
+                    if (this.cursor) this.cursor.setVisible(true);
+                    if (this.cursorBlink) this.cursorBlink.paused = false;
+                    this.updateCursorPosition();
+                } else {
+                    if (this.cursor) this.cursor.setVisible(false);
+                    if (this.cursorBlink) this.cursorBlink.paused = true;
+                    this.highlightText(input);
+                    this.isTextSelected = true;
+                    this.updateCursorPosition();
+                }
+
+                if (this.keyboard?.keyBoard) {
+                    const isTouch =
+                        pointer.pointerType === "touch" ||
+                        pointer.event?.type === "touchend";
+
+                    if (isTouch) {
+                        this.container.setDepth(options.depth);
+                        this.keyboard.keyBoard.setVisible(true);
+                    }
+                }
+            });
+        });
+
+        this.scene.input.keyboard.on("keydown", (event) => {
+            if (!this.activeInput) return;
+            this.handleKey(event.key);
+        });
+
+        this.scene.input.on("pointerdown", (pointer) => {
+            const clickedInput = triggers.some((bg) =>
+                bg.getBounds().contains(pointer.worldX, pointer.worldY),
+            );
+
+            const kbBounds = this.keyboard?.keyBoard
+                ? this.keyboard.keyBoard.getBounds()
+                : null;
+
+            const clickedKeyboard = kbBounds
+                ? kbBounds.contains(pointer.worldX, pointer.worldY)
+                : false;
+
+            if (!clickedInput && !clickedKeyboard) {
+                this.blur();
+            }
+        });
+    }
+    handleKey(key) {
+        let MAX_DIGITS = 9;
+
+        if (!this.activeInput) return;
+        let text = this.activeInput.text || "";
+        if (text.includes(".") && this.inputOptions?.currencyType === "Fiat") {
+            MAX_DIGITS = 9;
+        }
+        else if (this.inputOptions?.currencyType === "Fiat") {
+            MAX_DIGITS = 7;
+        }
+        if (this.isTextSelected) {
+            if (key === "Backspace" || key === "⌫") {
+                text = "";
+                this.cursorIndex = 0;
+            } else if (/^[0-9.]$/.test(key)) {
+                text = key === "." ? "0." : key;
+                this.cursorIndex = text.length;
+            }
+            this.isTextSelected = false;
+            if (this.selectionBg) {
+                this.selectionBg.destroy();
+                this.selectionBg = null;
+            }
+            if (this.cursor) this.cursor.setVisible(true);
+            if (this.cursorBlink) this.cursorBlink.paused = false;
+            this.applyValue(text, this.activeInput, this.inputOptions);
+            return;
+        }
+
+        const MAX_DECIMALS = this.inputOptions?.currencyType === "Fiat" ? 2 : 6;
+        if (key === "Backspace" || key === "⌫") {
+            if (this.cursorIndex > 0) {
+                text =
+                    text.slice(0, this.cursorIndex - 1) + text.slice(this.cursorIndex);
+                this.cursorIndex--;
+            }
+        } else if (key === "Enter") {
+            this.blur();
+            return;
+        } else if (key === "." && !text.includes(".") && text.length < MAX_DIGITS) {
+            text =
+                text.slice(0, this.cursorIndex) + "." + text.slice(this.cursorIndex);
+            this.cursorIndex++;
+        }
+
+        else if (/^[0-9]$/.test(key)) {
+
+            if (text === "0") {
+                text = "";
+                this.cursorIndex = 0;
+            }
+            const digitsCount = text.replace(".", "").length;
+            if (digitsCount >= MAX_DIGITS) {
+                text =
+                    text.slice(0, this.cursorIndex - 1) +
+                    key +
+                    text.slice(this.cursorIndex);
+
+                return this.applyValue(text, this.activeInput, this.inputOptions);
+            }
+            if (text.includes(".")) {
+                const dotIndex = text.indexOf(".");
+                const decPart = text.split(".")[1] || "";
+                if (this.cursorIndex > dotIndex) {
+                    const decimalCursorPos = this.cursorIndex - dotIndex - 1;
+                    if (decPart.length >= MAX_DECIMALS) {
+                        if (decimalCursorPos >= MAX_DECIMALS) {
+                            text =
+                                text.slice(0, dotIndex + 1 + MAX_DECIMALS - 1) +
+                                key +
+                                text.slice(dotIndex + 1 + MAX_DECIMALS);
+                            this.cursorIndex = dotIndex + 1 + MAX_DECIMALS;
+                            return this.applyValue(text, this.activeInput, this.inputOptions);
+                        }
+                    }
+                }
+            }
+            if (digitsCount < MAX_DIGITS) {
+                text = text.slice(0, this.cursorIndex) + key + text.slice(this.cursorIndex);
+                this.cursorIndex++;
+            }
+        }
+        this.applyValue(text, this.activeInput, this.inputOptions);
+    }
+    applyValue(text, input) {
+        const { min = 0, max = Infinity, onChange } = this.inputOptions;
+        let finalText = text;
+        finalText = finalText.replace(/^0+(?=\d)/, "");
+        if (finalText.startsWith(".")) {
+            finalText = "0" + finalText;
+        }
+        if (finalText === "") {
+            finalText = "0";
+            this.cursorIndex = 1;
+            this.activeInput.setText(finalText);
+            if (this.keyboardUI?.input) {
+                this.keyboardUI.input.setText(finalText);
+            }
+            onChange?.({
+                value: null,
+                status: "empty",
+                rawText: "",
+            });
+            this.updateCursorPosition();
+            return;
+        }
+        const value = Number(finalText);
+        let status = "valid";
+        if (value < min) status = "below-min";
+        else if (value > max) status = "above-max";
+        this.activeInput.setText(finalText);
+        if (this.keyboardUI?.input) {
+            this.keyboardUI.input.setText(finalText);
+        }
+        onChange?.({ value, status, rawText: finalText });
+        this.updateCursorPosition();
+    }
+    createCursor(input) {
+        if (this.cursor) this.cursor.destroy();
+        if (this.cursorBlink) this.cursorBlink.remove();
+        const visualScale = this.getVisualScale(input);
+        const fontSize = parseInt(input.style.fontSize || 32) * visualScale.y;
+        this.cursor = this.scene.add.text(0, 0, "|", {
+            fontSize: `${fontSize}px`,
+            fontFamily: input.style.fontFamily,
+            color: "#fff",
+        });
+        this.cursor.setOrigin(0, input.originY ?? 0);
+        input.parentContainer.add(this.cursor);
+        this.cursorBlink = this.scene.time.addEvent({
+            delay: 500,
+            loop: true,
+            callback: () => {
+                if (this.cursor) this.cursor.visible = !this.cursor.visible;
+            },
+        });
+    }
+    updateCursorPosition() {
+        if (!this.activeInput || !this.cursor) return;
+        const input = this.activeInput;
+        const textBefore = input.text.slice(0, this.cursorIndex);
+        const context = input.context;
+        const visualScale = this.getVisualScale(input);
+        context.font = `${parseInt(input.style.fontSize || 32)}px ${input.style.fontFamily || "Arial"
+            }`;
+        const textWidth = context.measureText(textBefore).width * visualScale.x;
+        const padding = 6 * visualScale.x;
+        const left = input.x - input.width * (input.originX ?? 0);
+        this.cursor.setPosition(left + textWidth + padding, input.y - 2);
+        this.cursor.setOrigin(0, input.originY ?? 0);
+    }
+    blur() {
+        if (this.activeInput && this.activeInput.text === "") {
+            this.activeInput.setText("0");
+        }
+        if (this.activeInput && this.inputOptions?.onClose) {
+            const text = this.activeInput.text || "0";
+            const value = Number(text);
+            let status = "valid";
+            if (value < (this.inputOptions.min ?? 0)) status = "below-min";
+            else if (value > (this.inputOptions.max ?? Infinity)) {
+                status = "above-max";
+            }
+            this.inputOptions.onClose({
+                value,
+                status,
+                rawText: text,
+            });
+        }
+        this.activeInput = null;
+        this.cursorIndex = 0;
+        if (this.cursor) {
+            this.cursor.destroy();
+            this.cursor = null;
+        }
+        if (this.keyboard?.keyBoard) {
+            this.keyboard.keyBoard.setVisible(false);
+        }
+        if (this.cursorBlink) {
+            this.cursorBlink.remove();
+            this.cursorBlink = null;
+        }
+        if (this.selectionBg) {
+            this.selectionBg.destroy();
+            this.selectionBg = null;
+        }
+        this.isTextSelected = false;
+    }
+    hideKeyboard() {
+        this.blur();
+    }
+    onGameResize() {
+        if (!this.cursor) return;
+        this.cursor.setVisible(false);
+        if (this.cursorBlink) {
+            this.cursorBlink.paused = true;
+        }
+    }
+    hideAll() {
+        Object.values(this.keyboardUI).forEach((obj) => {
+            obj.setVisible(false);
+        });
+    }
+    highlightText(input) {
+        const text = input.text || "";
+        const context = input.context;
+        const visualScale = this.getVisualScale(input);
+        context.font = `${parseInt(input.style.fontSize || 32)}px ${input.style.fontFamily || "Arial"
+            }`;
+        const width =
+            context.measureText(text).width * visualScale.x + 8 * visualScale.x;
+        const height =
+            parseInt(input.style.fontSize || 32) * visualScale.y + 10 * visualScale.y;
+        this.cursorIndex = text.length;
+        if (this.selectionBg) {
+            this.selectionBg.destroy();
+        }
+        const left = input.x - input.width * (input.originX ?? 0);
+        const top = input.y - input.height * (input.originY ?? 0);
+        this.selectionBg = this.scene.add
+            .rectangle(left, top - 2, width, height, 0x3399ff, 0.7)
+            .setOrigin(0, 0);
+        input.parentContainer.addAt(
+            this.selectionBg,
+            input.parentContainer.getIndex(input),
+        );
+    }
+
+    getVisualScale(obj) {
+        let scaleX = 1;
+        let scaleY = 1;
+        let current = obj;
+        while (current) {
+            scaleX *= current.scaleX ?? 1;
+            scaleY *= current.scaleY ?? 1;
+            current = current.parentContainer;
+        }
+        return {
+            x: scaleX,
+            y: scaleY,
+        };
+    }
+}

package/src/LayoutManger.js

@@ -0,0 +1,62 @@
+export default class LayoutManager {
+    constructor(game) {
+        this.game = game;
+        this.items = [];
+        this.isPortrait = this.getOrientation();
+        this.isInputActive = false;
+        this.isMobile = this.game.device.os.android || this.game.device.os.iOS;
+        this.baseWidth = window.innerWidth;
+        this.baseHeight = window.innerHeight;
+        this.keyboardOpen = false;
+        window.addEventListener("resize", this.handleResize.bind(this));
+        this.game.scale.on("resize", this.resize, this);
+    }
+    handleResize() {
+        const currentHeight = window.innerHeight;
+        const diff = this.baseHeight - currentHeight;
+        this.keyboardOpen = this.isMobile && diff > window.innerHeight * 0.25;
+        if (!this.keyboardOpen) {
+            this.baseHeight = currentHeight;
+            this.baseWidth = window.innerWidth;
+        }
+    }
+
+    register(object, config) {
+        this.items.push({ object, config });
+        this.applyLayout(object, config);
+    }
+    resize() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+
+        let isPortrait;
+
+        if (this.keyboardOpen || this.isInputActive) {
+            isPortrait = this.isPortrait ?? this.getOrientation();
+        } else {
+            isPortrait = this.getOrientation();
+        }
+
+        this.isPortrait = isPortrait;
+
+        this.items.forEach(({ object, config }) => {
+            this.applyLayout(object, config);
+        });
+    }
+    applyLayout(obj, config) {
+        const layout =
+            (this.isPortrait ? config.portrait : config.landscape) ||
+            config.landscape ||
+            config.portrait ||
+            {};
+        obj.setPosition(layout.x ?? 0, layout.y ?? 0);
+        obj.setScale(layout.scale ?? 1);
+    }
+
+    getOrientation() {
+        if (screen.orientation) {
+            return screen.orientation.type.includes("portrait");
+        }
+        return window.innerHeight > window.innerWidth;
+    }
+}

package/src/UIBuilder.js

@@ -0,0 +1,86 @@
+import GameImg from "./GameImg";
+import GameText from "./GameText";
+
+export default class UIBuilder {
+    constructor(scene, layoutManager) {
+        this.scene = scene;
+        this.layout = layoutManager;
+    }
+    build(config, parent = null) {
+        const ui = {};
+        Object.entries(config).forEach(([key, item]) => {
+            const obj = this.createObject(item);
+            if (!obj) return;
+            if (parent) parent.add(obj);
+            if (item.x !== undefined || item.y !== undefined) {
+                obj.setPosition(item.x ?? 0, item.y ?? 0);
+            }
+            if (item.scale !== undefined) {
+                obj.setScale(item.scale);
+            }
+            if (item.scaleX !== undefined || item.scaleY !== undefined) {
+                obj.setScale(item.scaleX ?? 1, item.scaleY ?? 1);
+            }
+            if (item.portrait || item.landscape) {
+                this.layout.register(obj, item);
+            }
+            if (item.underline && obj.type === "Text") {
+                this.addUnderline(obj, item, parent);
+            }
+            ui[key] = obj;
+            if (item.children) {
+                obj.ui = this.build(item.children, obj);
+            }
+        });
+        return ui;
+    }
+    addUnderline(obj, config, parent) {
+        const width = obj.width;
+        const height = obj.height;
+        const originX = obj.originX;
+        const originY = obj.originY;
+        const offsetX = (0.5 - originX) * width;
+        const offsetY = (1 - originY) * height;
+        const line = this.scene.add.rectangle(
+            obj.x + offsetX,
+            obj.y + offsetY,
+            width,
+            config.underline?.thickness ?? 2,
+            Phaser.Display.Color.HexStringToColor(
+                config.underline?.color ?? obj.style.color,
+            ).color,
+        );
+        line.setOrigin(0.5, 0);
+        if (parent) parent.add(line);
+    }
+    createObject(config) {
+        const scene = this.scene;
+        const type = config.type ?? "image";
+        switch (type) {
+            case "image":
+                if (config.asset?.atlas) {
+                    return new GameImg(
+                        scene,
+                        0,
+                        0,
+                        config.asset?.atlas,
+                        config.asset?.frame,
+                    );
+                } else {
+                    return new GameImg(scene, 0, 0, config.asset?.frame);
+                }
+            case "text":
+                return new GameText(
+                    scene,
+                    0,
+                    0,
+                    config.text?.value ?? "",
+                    config.text?.style ?? {},
+                );
+            case "container":
+                return scene.add.container(0, 0);
+            default:
+                return null;
+        }
+    }
+}

package/src/index.js

@@ -0,0 +1,6 @@
+export { default as GameImg } from "./GameImg.js";
+export { default as GameText } from "./GameText.js";
+export { default as LayoutManager } from "./LayoutManger.js";
+export { default as UIBuilder } from "./UIBuilder.js";
+export { default as InputController } from "./InputController.js";
+export { KeyBoardLayout } from "./keyBoardLayout.js";

package/src/keyBoardLayout.js

@@ -0,0 +1,106 @@
+const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+const getFrame = (name) => `${isDark ? "D" : "L"}_${name}.png`;
+const getBg = (name) => `${isDark ? "D" : "L"}_${name}`;
+export const KeyBoardLayout = {
+    keyBoard: {
+        type: "container",
+        children: {
+            keyBoardBg: {
+                type: "image",
+                asset: {
+                    atlas: "",
+                    frame: isDark ? getBg("background") : getBg("background"),
+                },
+                portrait: { x: 600, y: 2200, scale: 2 },
+                landscape: { x: 960, y: 870, scale: 0.8 },
+            },
+            input: {
+                type: "text",
+                text: {
+                    value: "100",
+                    style: {
+                        fontFamily: "ROBOTO_BLACK",
+                        fontSize: "62px",
+                        color: "#fff",
+                    },
+                },
+                portrait: { x: 610, y: 1800, scale: 1 },
+                landscape: { x: 960, y: 730, scale: 1 },
+            },
+            key1: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("1") },
+                portrait: { x: 210, y: 1970 },
+                landscape: { x: 210, y: 850, scale: 0.7 },
+            },
+            key2: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("2") },
+                portrait: { x: 610, y: 1970 },
+                landscape: { x: 510, y: 850, scale: 0.7 },
+            },
+            key3: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("3") },
+                portrait: { x: 1010, y: 1970 },
+                landscape: { x: 810, y: 850, scale: 0.7 },
+            },
+            key4: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("4") },
+                portrait: { x: 210, y: 2170 },
+                landscape: { x: 1110, y: 850, scale: 0.7 },
+            },
+            key5: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("5") },
+                portrait: { x: 610, y: 2170 },
+                landscape: { x: 1410, y: 850, scale: 0.7 },
+            },
+            key6: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("6") },
+                portrait: { x: 1010, y: 2170 },
+                landscape: { x: 210, y: 1000, scale: 0.7 },
+            },
+            key7: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("7") },
+                portrait: { x: 210, y: 2370 },
+                landscape: { x: 510, y: 1000, scale: 0.7 },
+            },
+            key8: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("8") },
+                portrait: { x: 610, y: 2370 },
+                landscape: { x: 810, y: 1000, scale: 0.7 },
+            },
+            key9: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("9") },
+                portrait: { x: 1010, y: 2370 },
+                landscape: { x: 1110, y: 1000, scale: 0.7 },
+            },
+            point: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("point") },
+                portrait: { x: 210, y: 2570 },
+                landscape: { x: 1710, y: 850, scale: 0.7 },
+            },
+            key0: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("0") },
+                portrait: { x: 610, y: 2570 },
+                landscape: { x: 1410, y: 1000, scale: 0.7 },
+            },
+            delete: {
+                type: "image",
+                asset: { atlas: "keyBoard", frame: getFrame("delete") },
+                portrait: { x: 1010, y: 2570 },
+                landscape: { x: 1710, y: 1000, scale: 0.7 },
+            },
+        },
+    },
+};
+
+export default KeyBoardLayout;