⚽ WASM Football Keypad Engine

An ultra-fast, zero-dependency WebAssembly (WASM) football controller engine written in C++ and compiled for high-performance web games.

📦 Installation

npm install wasm-football-keypad

🚀 Quick Start Example
import { FootballGamepad } from 'wasm-football-keypad';

const gamepad = new FootballGamepad();

// Initialize and fetch the C++ WebAssembly module
await gamepad.init('./node_modules/wasm-football-keypad/dist/football_keypad.wasm');

// Inside your main game loop (60 FPS)
function gameLoop(timestamp) {
    // Update C++ frame registers
    gamepad.updateFrame();

    // 1. Read movement vectors (-1, 0, or 1)
    const move = gamepad.getVector();
    player.x += move.x * player.speed;
    player.y += move.y * player.speed;

    // 2. Query low-latency action flags
    if (gamepad.isShooting()) {
        executePowerShoot();
    } else if (gamepad.isUpThroughPass()) {
        executeLoftedPass(); // Combines Sprint + Held Pass
    } else if (gamepad.isCrossing()) {
        executeCross();
    } else if (gamepad.isTackling()) {
        executeSlideTackle();
    }

    requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

🎨 Customizing Button Sizes & Positions
Because the low-level logic is completely decoupled from the UI, you can freely resize, reposition, or restyle the buttons in CSS to match your game's UI layout.
1. Resizing Buttons with CSS Variables
Define custom property overrides in your game's stylesheet:
:root {
    --dpad-button-size: 56px;     /* Scales D-Pad keys */
    --action-button-size: 60px;   /* Scales Action buttons (A, B, C, D) */
    --button-gap: 8px;           /* Gap between controls */
}

/* Apply sizes to controls */
.dpad-btn {
    width: var(--dpad-button-size);
    height: var(--dpad-button-size);
}

.btn-action {
    width: var(--action-button-size);
    height: var(--action-button-size);
}

2. Scaling the Entire Gamepad Layout
Scale the controller container dynamically for mobile devices, tablets, or desktops:
#gamepad-container {
    transform: scale(1.2); /* Scales up entire controller by 20% */
    transform-origin: bottom center;
}

/* Tablet view adjustments */
@media (min-width: 768px) {
    #gamepad-container {
        transform: scale(1.5);
    }
}

3. Splitting Controls Across Corners
Position the D-Pad on the bottom-left and the Action Diamond on the bottom-right for a classic handheld layout:
.dpad {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.diamond {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

🛠️ API Reference
Method Return Type Description
getVector() { x: number, y: number } Returns normalized directional movement vector (-1, 0, 1).
isSprinting() boolean true if Sprint (X1) is held.
isShooting() boolean true if Shoot (D) is pressed.
isTackling() boolean true if Tackle (C) is pressed.
isCrossing() boolean true if Cross (B) is pressed.
isThroughPass() boolean true if Pass (A) is held > 250ms.
isUpThroughPass() boolean

📄 License
MIT © Okoye Chibuike