WasmCoffee Reference Manual

public final class Surface {
    public final int base;     // Linear memory byte address of framebuffer
    public final int width;    // Framebuffer width in pixels
    public final int height;   // Framebuffer height in pixels
    public final int byteSize; // width * height * 4 bytes

    public Surface(int base, int width, int height);
}

// Initialize a 600x400 framebuffer past static segments
Surface surf = new Surface(Memory.base(), 600, 400);
surf.clear(Color.fromRgb(0x0A0D14));
surf.fillRect(50, 50, 200, 100, Color.fromRgb(0x4ECDC4));
surf.drawLine(0, 0, 600, 400, Color.WHITE);

public record Vec2i(int x, int y) {
    public Vec2i add(Vec2i o); // Returns new Vec2i(x + o.x, y + o.y)
    public Vec2i sub(Vec2i o); // Returns new Vec2i(x - o.x, y - o.y)
}

public record Rect(int x, int y, int width, int height) {
    public int minX(); public int maxX();
    public int minY(); public int maxY();
    public boolean contains(int px, int py);
    public boolean intersects(Rect other);
    public static Rect clampToBounds(int cx, int cy, int bound, int maxW, int maxH);
}

Rng rng = new Rng(System.nanoTime());
int dice = rng.nextInt(6) + 1;     // 1 to 6
double angle = rng.range(0.0, Mathf.TWO_PI); // 0 to 2*PI

static final int FLAG_READ = 1, FLAG_WRITE = 2;

String describe(int mask) {
    return switch (mask) {
        case FLAG_READ | FLAG_WRITE -> "read-write";
        case Integer.MAX_VALUE -> "max-value";
        default -> "custom: " + Integer.toBinaryString(mask);
    };
}

public class MyGame {
    public static int wasm_get_pixels() { return Memory.base(); }
    public static int wasm_get_width()  { return 600; }
    public static int wasm_get_height() { return 400; }

    public static void wasm_update(double dt) {
        // Called every frame (60 FPS) before the host blits pixels to <canvas>
    }

    // Optional input hooks:
    public static void wasm_click(int x, int y) {}
    public static void wasm_pointer_down(int x, int y) {}
    public static void wasm_pointer_move(int x, int y) {}
    public static void wasm_pointer_up() {}
}

final class Web {
    @Import(module = "web") static native void bindKeys(String handler);
    @Import(module = "web") static native String keyCode(int eventId);
    @Import(module = "web") static native void playSound(int soundId);
}

public class Main {
    public static void onKey(int eventId, boolean down) {
        String key = Web.keyCode(eventId);
        if (down && key.equals("ArrowUp")) {
            Web.playSound(1); // 1 = high blip, -1 = low thud
        }
    }

    public static void main(String[] args) {
        Web.bindKeys("onKey");
    }
}

final class Web {
    // --- DOM & Elements ---
    @Import(module = "web") static native int byId(String id);
    @Import(module = "web") static native int createElement(String tag);
    @Import(module = "web") static native void appendChild(int parent, int child);
    @Import(module = "web") static native void setStyle(int el, String prop, String val);
    @Import(module = "web") static native void setInnerText(int el, String text);
    @Import(module = "web") static native void addEventListener(int el, String type, String handler, int arg);

    // --- Canvas 2D Context & Transformations ---
    @Import(module = "web") static native int getContext(int canvas, String kind);
    @Import(module = "web") static native void save(int ctx);
    @Import(module = "web") static native void restore(int ctx);
    @Import(module = "web") static native void translate(int ctx, double x, double y);
    @Import(module = "web") static native void rotate(int ctx, double angle);
    @Import(module = "web") static native void scale(int ctx, double sx, double sy);
    @Import(module = "web") static native void setTransform(int ctx, double a, double b, double c, double d, double e, double f);
    @Import(module = "web") static native void resetTransform(int ctx);
    @Import(module = "web") static native void setGlobalAlpha(int ctx, double alpha);

    // --- Rectangles & Screen Clearing ---
    @Import(module = "web") static native void fillRect(int ctx, double x, double y, double w, double h);
    @Import(module = "web") static native void strokeRect(int ctx, double x, double y, double w, double h);
    @Import(module = "web") static native void clearRect(int ctx, double x, double y, double w, double h);
    @Import(module = "web") static native void rect(int ctx, double x, double y, double w, double h);

    // --- Path Construction & Curves ---
    @Import(module = "web") static native void beginPath(int ctx);
    @Import(module = "web") static native void closePath(int ctx);
    @Import(module = "web") static native void moveTo(int ctx, double x, double y);
    @Import(module = "web") static native void lineTo(int ctx, double x, double y);
    @Import(module = "web") static native void arc(int ctx, double x, double y, double r, double a0, double a1);
    @Import(module = "web") static native void ellipse(int ctx, double x, double y, double rx, double ry, double rot, double a0, double a1);
    @Import(module = "web") static native void quadraticCurveTo(int ctx, double cx, double cy, double x, double y);
    @Import(module = "web") static native void bezierCurveTo(int ctx, double c1x, double c1y, double c2x, double c2y, double x, double y);
    @Import(module = "web") static native void fill(int ctx);
    @Import(module = "web") static native void stroke(int ctx);

    // --- Styles, Line Attributes & Gradients ---
    @Import(module = "web") static native void setFillStyle(int ctx, String css);
    @Import(module = "web") static native void setStrokeStyle(int ctx, String css);
    @Import(module = "web") static native void setLineWidth(int ctx, double w);
    @Import(module = "web") static native void setLineCap(int ctx, String cap);
    @Import(module = "web") static native void setLineJoin(int ctx, String join);
    @Import(module = "web") static native void setLineDash(int ctx, double a, double b);
    @Import(module = "web") static native void setShadowColor(int ctx, String color);
    @Import(module = "web") static native void setShadowBlur(int ctx, double blur);
    @Import(module = "web") static native int createLinearGradient(int ctx, double x0, double y0, double x1, double y1);
    @Import(module = "web") static native int createRadialGradient(int ctx, double x0, double y0, double r0, double x1, double y1, double r1);
    @Import(module = "web") static native void addColorStop(int grad, double offset, String color);
    @Import(module = "web") static native void setFillStyleGradient(int ctx, int grad);
    @Import(module = "web") static native void setStrokeStyleGradient(int ctx, int grad);

    // --- Text & Typography ---
    @Import(module = "web") static native void setFont(int ctx, String font);
    @Import(module = "web") static native void setTextAlign(int ctx, String align);
    @Import(module = "web") static native void setTextBaseline(int ctx, String baseline);
    @Import(module = "web") static native void fillText(int ctx, String text, double x, double y);
    @Import(module = "web") static native void strokeText(int ctx, String text, double x, double y);
    @Import(module = "web") static native double measureText(int ctx, String text);

    // --- Animation, Events, Storage & Audio ---
    @Import(module = "web") static native void requestFrame(String exportName);
    @Import(module = "web") static native void bindKeys(String exportName);
    @Import(module = "web") static native void bindPointer(String exportName);
    @Import(module = "web") static native String keyCode(int eventId);
    @Import(module = "web") static native double now();
    @Import(module = "web") static native void playSound(int soundId);
    @Import(module = "web") static native void setThrust(boolean on);
    @Import(module = "web") static native String storageGet(String key);
    @Import(module = "web") static native void storageSet(String key, String value);
    @Import(module = "web") static native void drawTileColumn(int ctx, int tile, int texX, double dx, double dy, double dw, double dh, double shade);
}

public class BouncingBlock {
    static final int W = 600, H = 400, SIZE = 24;
    static Surface surf;
    static double x = 100.0, y = 100.0;
    static double vx = 180.0, vy = 130.0; // Pixels per second

    public static int wasm_get_pixels() { return Memory.base(); }
    public static int wasm_get_width()  { return W; }
    public static int wasm_get_height() { return H; }

    public static void wasm_update(double dt) {
        surf.clear(Color.fromRgb(0x0C1017));

        // Advance position scaled by delta time
        x += vx * dt;
        y += vy * dt;

        // Bounce off horizontal boundaries
        if (x <= 0) {
            x = 0;
            vx = -vx;
        } else if (x + SIZE >= W) {
            x = W - SIZE;
            vx = -vx;
        }

        // Bounce off vertical boundaries
        if (y <= 0) {
            y = 0;
            vy = -vy;
        } else if (y + SIZE >= H) {
            y = H - SIZE;
            vy = -vy;
        }

        // Draw block
        surf.fillRect((int) x, (int) y, SIZE, SIZE, Color.fromRgb(0x52E3C2));
    }

    public static void main(String[] args) {
        surf = new Surface(Memory.base(), W, H);
    }
}

record Block(Vec2d pos, Vec2d vel, int size, int color) {
    Block move(double dt, int maxX, int maxY) {
        Vec2d nextPos = pos.add(vel.mul(dt));
        double vx = vel.x(), vy = vel.y();
        double px = nextPos.x(), py = nextPos.y();

        if (px <= 0.0) {
            px = 0.0;
            vx = -vx;
        } else if (px + size >= maxX) {
            px = maxX - size;
            vx = -vx;
        }

        if (py <= 0.0) {
            py = 0.0;
            vy = -vy;
        } else if (py + size >= maxY) {
            py = maxY - size;
            vy = -vy;
        }

        return new Block(new Vec2d(px, py), new Vec2d(vx, vy), size, color);
    }

    void draw(Surface surf) {
        surf.fillRect((int) pos.x(), (int) pos.y(), size, size, color);
    }
}

public class ModernBouncer {
    static final int W = 600, H = 400;
    static Surface surf;
    static Block block = new Block(
        new Vec2d(100.0, 100.0),
        new Vec2d(180.0, 130.0),
        24,
        Color.fromRgb(0x52E3C2)
    );

    public static int wasm_get_pixels() { return Memory.base(); }
    public static int wasm_get_width()  { return W; }
    public static int wasm_get_height() { return H; }

    public static void wasm_update(double dt) {
        surf.clear(Color.fromRgb(0x0C1017));
        block = block.move(dt, W, H);
        block.draw(surf);
    }

    public static void main(String[] args) {
        surf = new Surface(Memory.base(), W, H);
    }
}

// Complete Batched Canvas 2D Demo with Gradients, Shadows, Sprites & Animation

class Orb {
    float x, y, vx, vy, radius;
    String color, glow;

    Orb(float x, float y, float vx, float vy, float r, String c, String g) {
        this.x = x; this.y = y; this.vx = vx; this.vy = vy;
        this.radius = r; this.color = c; this.glow = g;
    }

    void update(float w, float h, float dt) {
        x += vx * dt;
        y += vy * dt;
        if (x - radius < 0.0f)     { x = radius;     vx = -vx; }
        else if (x + radius > w) { x = w - radius; vx = -vx; }
        if (y - radius < 50.0f)    { y = 50.0f + radius; vy = -vy; }
        else if (y + radius > h) { y = h - radius; vy = -vy; }
    }
}

public class BatchGraphicsDemo {
    static final float W = 600.0f, H = 400.0f;
    static final int SPRITE_STAR = 1;

    static int ctx;
    static Batch batch;
    static Orb[] orbs;
    static double lastTime = 0.0;
    static float angle = 0.0f;
    static int frames = 0;

    public static void main(String[] args) {
        // 1. Acquire canvas (or create one) and 2D context
        int canvas = BatchCanvas.getElementById("game");
        if (canvas == 0) {
            int parent = BatchCanvas.getElementById("stage-container");
            canvas = BatchCanvas.create(parent, (int) W, (int) H);
        }
        ctx = BatchCanvas.getContext(canvas);

        batch = new Batch();

        // 2. Bake offscreen glowing star sprite (ID = 1)
        batch.reset();
        batch.bakeBegin(SPRITE_STAR, 32, 32);
        batch.beginPath();
        batch.arc(16.0f, 16.0f, 12.0f, 0.0f, 6.2831853f);
        batch.setFill("rgba(78, 205, 196, 0.25)");
        batch.fill();
        batch.beginPath();
        batch.moveTo(16.0f, 4.0f);  batch.lineTo(20.0f, 13.0f);
        batch.lineTo(28.0f, 16.0f); batch.lineTo(20.0f, 19.0f);
        batch.lineTo(16.0f, 28.0f); batch.lineTo(12.0f, 19.0f);
        batch.lineTo(4.0f, 16.0f);  batch.lineTo(12.0f, 13.0f);
        batch.closePath();
        batch.setFill("#4ecdc4");
        batch.fill();
        batch.bakeEnd();
        batch.flush(ctx);

        // 3. Initialize particle state
        orbs = new Orb[] {
            new Orb(150.0f, 150.0f,  160.0f,  120.0f, 18.0f, "#ffd2a1", "#e8933f"),
            new Orb(300.0f, 220.0f, -130.0f,  180.0f, 24.0f, "#4ecdc4", "#2a6f6a"),
            new Orb(450.0f, 280.0f,  180.0f, -140.0f, 16.0f, "#58a6ff", "#1f6feb"),
        };

        lastTime = BatchCanvas.now();

        // 4. Start 60 FPS animation loop dispatching callback 1
        BatchCanvas.startAnimationLoop(1);
    }

    // Callback invoked every animation frame by the browser host
    public static void batchiness_invoke_callback(int cbId) {
        if (cbId == 1) {
            render();
        }
    }

    static void render() {
        frames++;
        double now = BatchCanvas.now();
        float dt = (float) ((now - lastTime) / 1000.0);
        lastTime = now;
        if (dt <= 0.0f || dt > 0.05f) dt = 0.01667f;
        angle += 1.8f * dt;

        // Clear previous command stream
        batch.reset();

        // Clear background cleanly (no lingering trails)
        batch.clearShadow();
        batch.clearRect(0.0f, 0.0f, W, H);
        batch.setFill("#0a0d14");
        batch.fillRect(0.0f, 0.0f, W, H);

        // Top banner with Linear Gradient
        batch.linearGradient(1, 0.0f, 0.0f, W, 0.0f);
        batch.addColorStop(1, 0.0f, "#1c2638");
        batch.addColorStop(1, 0.5f, "#2e3d57");
        batch.addColorStop(1, 1.0f, "#1c2638");
        batch.useGradientFill(1);
        batch.fillRect(0.0f, 0.0f, W, 46.0f);

        batch.setFont("bold 13px 'Inter', sans-serif");
        batch.setFill("#ffd2a1");
        batch.fillText("WasmCoffee Batched Canvas2D", 16.0f, 28.0f);

        // Draw glowing orbs
        for (int i = 0; i < orbs.length; i++) {
            Orb b = orbs[i];
            b.update(W, H, dt);

            batch.setShadow(b.glow, 16.0f);
            batch.beginPath();
            batch.arc(b.x, b.y, b.radius, 0.0f, 6.2831853f);
            batch.setFill(b.color);
            batch.fill();
            batch.clearShadow();
        }

        // Rotating baked sprite at center
        batch.save();
        batch.translate(W * 0.5f, H * 0.55f);
        batch.rotate(angle);
        batch.drawSprite(SPRITE_STAR, -16.0f, -16.0f);
        batch.restore();

        // HUD Text
        batch.setFont("11px 'JetBrains Mono', monospace");
        batch.setFill("#8e9bb0");
        batch.fillText("Frame: " + frames, 16.0f, H - 14.0f);

        // Flush entire frame to browser in 1 bridge crossing
        batch.flush(ctx);
    }
}