jugar-web

WASM browser integration for the Jugar game engine.

This crate provides the web platform layer that bridges Jugar to browsers. All game logic runs in Rust/WASM with ABSOLUTE ZERO JavaScript computation.

Architecture

┌─────────────────────────────────────────────────────────────┐
│                      Browser (JavaScript)                    │
│  - Event listeners (keyboard, mouse, touch)                  │
│  - requestAnimationFrame loop                               │
│  - Canvas2D rendering (drawing only)                        │
└─────────────────────────┬────────────────────────────────────┘
                          │ JSON Events ↓  ↑ JSON Commands
┌─────────────────────────┴────────────────────────────────────┐
│                      WebPlatform (Rust/WASM)                  │
│  - Input translation (browser events → InputState)          │
│  - Game logic (Pong, etc.)                                  │
│  - Render command generation (Canvas2DCommand)              │
│  - Time management (DOMHighResTimeStamp → seconds)          │
└──────────────────────────────────────────────────────────────┘

Usage

// JavaScript (minimal event forwarding + Canvas2D execution)
import init, { WebPlatform } from './jugar_web.js';

const platform = new WebPlatform('{"width":800,"height":600}');
const events = [];

document.addEventListener('keydown', (e) => {
    events.push({ event_type: 'KeyDown', timestamp: e.timeStamp, data: { key: e.code } });
});

function frame(timestamp) {
    const commands = JSON.parse(platform.frame(timestamp, JSON.stringify(events)));
    events.length = 0;

    // Execute Canvas2D commands
    for (const cmd of commands) {
        switch (cmd.type) {
            case 'Clear': ctx.fillStyle = rgba(cmd.color); ctx.fillRect(0, 0, w, h); break;
            case 'FillRect': ctx.fillStyle = rgba(cmd.color); ctx.fillRect(cmd.x, cmd.y, cmd.width, cmd.height); break;
            // ...
        }
    }

    requestAnimationFrame(frame);
}