@sansavision/create-pulse 0.4.4 → 0.4.6

package/templates/nextjs-auth-node-demo/src/app/dashboard/demos/arena-game/page.tsx

@@ -0,0 +1,640 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Gamepad2,
+    Shield,
+    Wifi,
+    WifiOff,
+    Loader2,
+    Users,
+    Copy,
+    Check,
+    Swords,
+    Trophy,
+    Zap,
+    Activity,
+    AlertCircle,
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+interface PlayerState {
+    x: number;
+    y: number;
+    color: string;
+    label: string;
+    score: number;
+}
+
+interface Collectible {
+    x: number;
+    y: number;
+    color: string;
+    collected: boolean;
+    id: number;
+}
+
+export default function ArenaGamePage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [connecting, setConnecting] = useState(true);
+    const [authUser, setAuthUser] = useState<{
+        id: string;
+        claims: Record<string, string>;
+    } | null>(null);
+
+    // Room management
+    const [roomId, setRoomId] = useState("");
+    const [inputRoomId, setInputRoomId] = useState("");
+    const [error, setError] = useState("");
+    const [inGame, setInGame] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [playerCount, setPlayerCount] = useState(1);
+    const [opponent, setOpponent] = useState<string | null>(null);
+
+    // Game state
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const localPlayerRef = useRef<PlayerState>({
+        x: 0.3, y: 0.5, color: "#7C3AED", label: "P1", score: 0,
+    });
+    const remotePlayerRef = useRef<PlayerState>({
+        x: 0.7, y: 0.5, color: "#10B981", label: "P2", score: 0,
+    });
+    const collectiblesRef = useRef<Collectible[]>(
+        Array.from({ length: 5 }).map((_, i) => ({
+            x: 0.1 + Math.random() * 0.8,
+            y: 0.1 + Math.random() * 0.8,
+            color: "#F59E0B",
+            collected: false,
+            id: i,
+        }))
+    );
+
+    const keysRef = useRef<{ [key: string]: boolean }>({});
+    const connRef = useRef<PulseConnection | null>(null);
+    const animationIdRef = useRef<number>(0);
+    const [scores, setScores] = useState({ p1: 0, p2: 0 });
+    const [syncMetrics, setSyncMetrics] = useState({ ups: 0, delay: "—" });
+    const statsRef = useRef({ updatesThisSecond: 0, lastDelay: 0 });
+
+    // Keyboard listeners
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            keysRef.current[e.key.toLowerCase()] = true;
+        };
+        const handleKeyUp = (e: KeyboardEvent) => {
+            keysRef.current[e.key.toLowerCase()] = false;
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, []);
+
+    // Connect to Pulse
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+    }, [session]);
+
+    // Drawing helpers
+    const drawPlayer = (
+        ctx: CanvasRenderingContext2D,
+        x: number,
+        y: number,
+        color: string,
+        label: string
+    ) => {
+        // Glow
+        ctx.beginPath();
+        ctx.arc(x, y, 24, 0, Math.PI * 2);
+        ctx.fillStyle = color + "30";
+        ctx.fill();
+
+        // Body
+        ctx.beginPath();
+        ctx.arc(x, y, 18, 0, Math.PI * 2);
+        ctx.fillStyle = color + "50";
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 15;
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+
+        // Label
+        ctx.fillStyle = "white";
+        ctx.font = "bold 11px 'Inter', sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(label, x, y);
+        ctx.textAlign = "start";
+    };
+
+    const drawArena = useCallback(
+        (
+            ctx: CanvasRenderingContext2D,
+            canvas: HTMLCanvasElement,
+            p1: PlayerState,
+            p2: PlayerState
+        ) => {
+            const w = canvas.width;
+            const h = canvas.height;
+
+            ctx.fillStyle = "#0a0a14";
+            ctx.fillRect(0, 0, w, h);
+
+            // Grid
+            ctx.strokeStyle = "rgba(255,255,255,0.04)";
+            ctx.lineWidth = 1;
+            for (let x = 0; x < w; x += 40) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, h);
+                ctx.stroke();
+            }
+            for (let y = 0; y < h; y += 40) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(w, y);
+                ctx.stroke();
+            }
+
+            // Collectibles
+            collectiblesRef.current.forEach((c) => {
+                if (c.collected) return;
+                ctx.beginPath();
+                ctx.arc(c.x * w, c.y * h, 8, 0, Math.PI * 2);
+                ctx.fillStyle = c.color;
+                ctx.fill();
+                ctx.shadowColor = c.color;
+                ctx.shadowBlur = 12;
+                ctx.fill();
+                ctx.shadowBlur = 0;
+            });
+
+            // Players
+            drawPlayer(ctx, p1.x * w, p1.y * h, p1.color, p1.label);
+            drawPlayer(ctx, p2.x * w, p2.y * h, p2.color, p2.label);
+
+            // Scores
+            ctx.fillStyle = "rgba(255,255,255,0.5)";
+            ctx.font = "12px monospace";
+            ctx.fillText(
+                `${p1.label}: ${p1.score}  ${p2.label}: ${p2.score}`,
+                10,
+                20
+            );
+
+            // Synced badge
+            ctx.fillStyle = "rgba(6,182,212,0.5)";
+            ctx.fillText("🔗 Synced via Pulse", w - 150, 20);
+        },
+        []
+    );
+
+    // Join a game room
+    const joinGame = useCallback(
+        (room: string) => {
+            if (!connRef.current || !session) return;
+
+            const stream = connRef.current.stream(`arena:${room}`);
+            const playerName = session.user.name || "Anonymous";
+
+            // Announce join
+            stream.send(
+                JSON.stringify({
+                    type: "join",
+                    name: playerName,
+                    userId: session.user.id,
+                })
+            );
+
+            // Listen for game messages
+            stream.on("data", (data: Uint8Array) => {
+                try {
+                    const msg = JSON.parse(new TextDecoder().decode(data));
+
+                    if (msg.type === "join" && msg.userId !== session.user.id) {
+                        setOpponent(msg.name);
+                        setPlayerCount(2);
+                        // Assign remote label
+                        remotePlayerRef.current.label = msg.name.charAt(0).toUpperCase();
+                    } else if (msg.type === "state" && msg.userId !== session.user.id) {
+                        // Remote player position update
+                        remotePlayerRef.current.x +=
+                            (msg.x - remotePlayerRef.current.x) * 0.7;
+                        remotePlayerRef.current.y +=
+                            (msg.y - remotePlayerRef.current.y) * 0.7;
+                        remotePlayerRef.current.score = msg.score || 0;
+                        if (msg.ts) {
+                            const delay = Date.now() - msg.ts;
+                            statsRef.current.lastDelay = delay;
+                        }
+                    } else if (msg.type === "collect" && msg.userId !== session.user.id) {
+                        // Remote player collected a collectible
+                        const c = collectiblesRef.current.find(
+                            (c) => c.id === msg.collectibleId
+                        );
+                        if (c) c.collected = true;
+                    } else if (msg.type === "respawn") {
+                        // Respawn collectibles
+                        collectiblesRef.current.forEach((c, i) => {
+                            c.x = msg.positions[i].x;
+                            c.y = msg.positions[i].y;
+                            c.collected = false;
+                        });
+                    }
+                } catch {
+                    /* ignore */
+                }
+            });
+
+            // Set local player label
+            localPlayerRef.current.label = playerName.charAt(0).toUpperCase();
+            localPlayerRef.current.score = 0;
+            remotePlayerRef.current.score = 0;
+
+            // Game loop
+            const SPEED = 0.006;
+            let frameCount = 0;
+
+            const tick = () => {
+                if (!canvasRef.current) return;
+                const ctx = canvasRef.current.getContext("2d");
+                if (!ctx) return;
+
+                const keys = keysRef.current;
+                const p = localPlayerRef.current;
+
+                if (keys["w"] || keys["arrowup"]) p.y = Math.max(0.05, p.y - SPEED);
+                if (keys["s"] || keys["arrowdown"]) p.y = Math.min(0.95, p.y + SPEED);
+                if (keys["a"] || keys["arrowleft"]) p.x = Math.max(0.05, p.x - SPEED);
+                if (keys["d"] || keys["arrowright"])
+                    p.x = Math.min(0.95, p.x + SPEED);
+
+                // Check collectible collisions
+                collectiblesRef.current.forEach((c) => {
+                    if (c.collected) return;
+                    const dist = Math.hypot(p.x - c.x, p.y - c.y);
+                    if (dist < 0.04) {
+                        c.collected = true;
+                        p.score++;
+                        setScores((prev) => ({
+                            ...prev,
+                            p1: p.score,
+                        }));
+                        stream.send(
+                            JSON.stringify({
+                                type: "collect",
+                                userId: session.user.id,
+                                collectibleId: c.id,
+                            })
+                        );
+                    }
+                });
+
+                // Respawn collectibles
+                if (collectiblesRef.current.every((c) => c.collected)) {
+                    const newPositions = collectiblesRef.current.map(() => ({
+                        x: 0.1 + Math.random() * 0.8,
+                        y: 0.1 + Math.random() * 0.8,
+                    }));
+                    collectiblesRef.current.forEach((c, i) => {
+                        c.x = newPositions[i].x;
+                        c.y = newPositions[i].y;
+                        c.collected = false;
+                    });
+                    stream.send(
+                        JSON.stringify({ type: "respawn", positions: newPositions })
+                    );
+                }
+
+                // Draw
+                drawArena(ctx, canvasRef.current, p, remotePlayerRef.current);
+
+                // Send state at ~30fps
+                frameCount++;
+                if (frameCount % 2 === 0) {
+                    statsRef.current.updatesThisSecond++;
+                    stream.send(
+                        JSON.stringify({
+                            type: "state",
+                            userId: session.user.id,
+                            x: p.x,
+                            y: p.y,
+                            score: p.score,
+                            ts: Date.now(),
+                        })
+                    );
+                }
+
+                animationIdRef.current = requestAnimationFrame(tick);
+            };
+
+            animationIdRef.current = requestAnimationFrame(tick);
+
+            // Stats interval
+            const statsInterval = setInterval(() => {
+                setSyncMetrics({
+                    ups: statsRef.current.updatesThisSecond,
+                    delay:
+                        statsRef.current.lastDelay > 0
+                            ? `${statsRef.current.lastDelay}ms`
+                            : "—",
+                });
+                setScores({
+                    p1: localPlayerRef.current.score,
+                    p2: remotePlayerRef.current.score,
+                });
+                statsRef.current.updatesThisSecond = 0;
+            }, 1000);
+
+            setInGame(true);
+            setRoomId(room);
+
+            // Return cleanup
+            return () => {
+                cancelAnimationFrame(animationIdRef.current);
+                clearInterval(statsInterval);
+            };
+        },
+        [session, drawArena]
+    );
+
+    // Create room
+    function createRoom() {
+        const id = crypto.randomUUID().slice(0, 8);
+        setRoomId(id);
+        joinGame(id);
+    }
+
+    // Join existing room
+    function handleJoinRoom(e: React.FormEvent) {
+        e.preventDefault();
+        const cleaned = inputRoomId.trim();
+        if (!cleaned) return;
+
+        if (!/^[a-zA-Z0-9-]{6,12}$/.test(cleaned)) {
+            setError("Invalid room format. Must be 6-12 characters (letters, numbers, hyphens).");
+            return;
+        }
+
+        setError("");
+        joinGame(cleaned);
+    }
+
+    // Copy room ID
+    function copyRoomId() {
+        navigator.clipboard.writeText(roomId);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+
+    // Cleanup
+    useEffect(() => {
+        return () => {
+            cancelAnimationFrame(animationIdRef.current);
+        };
+    }, []);
+
+    return (
+        <div className="p-8">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-8">
+                <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
+                        <Swords className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold">Arena Game</h1>
+                        <p className="text-sm text-slate-500">
+                            Real-time multiplayer collectible arena via Pulse
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                    {authUser && (
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                            <Shield className="w-3.5 h-3.5 text-green-400" />
+                            <span className="text-xs text-green-400">
+                                {authUser.claims.name || authUser.id}
+                            </span>
+                        </div>
+                    )}
+                    {connected ? (
+                        <div className="flex items-center gap-1.5">
+                            <Wifi className="w-4 h-4 text-green-400" />
+                            <span className="text-xs text-green-400">Connected</span>
+                        </div>
+                    ) : (
+                        <div className="flex items-center gap-1.5">
+                            <WifiOff className="w-4 h-4 text-red-400" />
+                            <span className="text-xs text-red-400">Disconnected</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {connecting ? (
+                <div className="flex items-center justify-center py-20">
+                    <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                    <span className="text-slate-400">Connecting...</span>
+                </div>
+            ) : !inGame ? (
+                /* Room selection */
+                <div className="max-w-xl mx-auto space-y-6">
+                    <div className="glass rounded-2xl p-8 text-center">
+                        <Gamepad2 className="w-16 h-16 text-orange-400 mx-auto mb-4" />
+                        <h2 className="text-xl font-bold mb-2">Join or Create a Game</h2>
+                        <p className="text-sm text-slate-400 mb-8">
+                            Create a room and share the code with a friend, or join
+                            an existing room. Move your player with WASD or Arrow keys
+                            and collect golden orbs to score!
+                        </p>
+
+                        <button
+                            onClick={createRoom}
+                            disabled={!connected}
+                            className="w-full px-6 py-3 bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-400 hover:to-red-400 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 mb-6"
+                        >
+                            🎮 Create New Room
+                        </button>
+
+                        <div className="relative mb-6">
+                            <div className="absolute inset-0 flex items-center">
+                                <div className="w-full border-t border-slate-700" />
+                            </div>
+                            <div className="relative flex justify-center text-xs uppercase">
+                                <span className="bg-slate-900 px-3 text-slate-500">
+                                    or join existing
+                                </span>
+                            </div>
+                        </div>
+
+                        {error && (
+                            <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2 text-red-400 text-sm text-left">
+                                <AlertCircle className="w-4 h-4 shrink-0" />
+                                <p>{error}</p>
+                            </div>
+                        )}
+
+                        <form onSubmit={handleJoinRoom} className="flex gap-3">
+                            <input
+                                type="text"
+                                value={inputRoomId}
+                                onChange={(e) => { setInputRoomId(e.target.value); setError(""); }}
+                                placeholder="Enter room code..."
+                                className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                            <button
+                                type="submit"
+                                disabled={!connected || !inputRoomId.trim()}
+                                className="px-6 py-2.5 bg-orange-600 hover:bg-orange-500 rounded-xl font-medium transition-all disabled:opacity-50"
+                            >
+                                Join
+                            </button>
+                        </form>
+                    </div>
+
+                    {/* How it works */}
+                    <div className="glass rounded-xl p-5 border-l-4 border-orange-500">
+                        <h3 className="text-sm font-semibold text-orange-400 mb-1">
+                            💡 How It Works
+                        </h3>
+                        <p className="text-sm text-slate-400">
+                            Player positions are synced ~30 times per second via Pulse
+                            streams. Collectible spawns and collections are broadcast to
+                            all players. The relay ensures consistent game state across
+                            all connected players with sub-50ms latency.
+                        </p>
+                    </div>
+                </div>
+            ) : (
+                /* In Game */
+                <div className="space-y-4">
+                    {/* Room info bar */}
+                    <div className="flex items-center justify-between glass rounded-xl px-5 py-3">
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-2">
+                                <Swords className="w-4 h-4 text-orange-400" />
+                                <span className="text-sm font-medium">Room:</span>
+                                <code className="text-xs bg-slate-800 px-2 py-1 rounded font-mono text-orange-300">
+                                    {roomId}
+                                </code>
+                                <button
+                                    onClick={copyRoomId}
+                                    className="p-1.5 rounded-lg hover:bg-slate-700 transition-colors"
+                                    title="Copy room code"
+                                >
+                                    {copied ? (
+                                        <Check className="w-3.5 h-3.5 text-green-400" />
+                                    ) : (
+                                        <Copy className="w-3.5 h-3.5 text-slate-400" />
+                                    )}
+                                </button>
+                            </div>
+                            <div className="flex items-center gap-2 text-sm text-slate-400">
+                                <Users className="w-4 h-4" />
+                                {playerCount} player(s)
+                                {opponent && (
+                                    <span className="text-green-400 ml-1">
+                                        vs {opponent}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                        <div className="text-xs text-slate-500">
+                            Use <kbd className="px-1.5 py-0.5 rounded bg-slate-700 text-slate-300 font-mono">WASD</kbd>{" "}
+                            or <kbd className="px-1.5 py-0.5 rounded bg-slate-700 text-slate-300 font-mono">Arrow keys</kbd>{" "}
+                            to move
+                        </div>
+                    </div>
+
+                    {/* Game canvas */}
+                    <div className="flex gap-4">
+                        <div className="flex-1">
+                            <canvas
+                                ref={canvasRef}
+                                width={900}
+                                height={500}
+                                className="w-full bg-black/40 border border-slate-800 rounded-2xl shadow-lg ring-1 ring-white/5"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Metrics */}
+                    <div className="grid grid-cols-4 gap-4">
+                        <div className="glass rounded-xl p-4 text-center">
+                            <Trophy className="w-5 h-5 text-purple-400 mx-auto mb-1" />
+                            <div className="text-2xl font-bold font-mono text-purple-400">
+                                {scores.p1}
+                            </div>
+                            <div className="text-[10px] text-slate-500 uppercase tracking-widest mt-1">
+                                Your Score
+                            </div>
+                        </div>
+                        <div className="glass rounded-xl p-4 text-center">
+                            <Trophy className="w-5 h-5 text-emerald-400 mx-auto mb-1" />
+                            <div className="text-2xl font-bold font-mono text-emerald-400">
+                                {scores.p2}
+                            </div>
+                            <div className="text-[10px] text-slate-500 uppercase tracking-widest mt-1">
+                                Opponent
+                            </div>
+                        </div>
+                        <div className="glass rounded-xl p-4 text-center">
+                            <Zap className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
+                            <div className="text-2xl font-bold font-mono text-cyan-400">
+                                {syncMetrics.ups}
+                            </div>
+                            <div className="text-[10px] text-slate-500 uppercase tracking-widest mt-1">
+                                Updates/sec
+                            </div>
+                        </div>
+                        <div className="glass rounded-xl p-4 text-center">
+                            <Activity className="w-5 h-5 text-amber-400 mx-auto mb-1" />
+                            <div className="text-2xl font-bold font-mono text-amber-400">
+                                {syncMetrics.delay}
+                            </div>
+                            <div className="text-[10px] text-slate-500 uppercase tracking-widest mt-1">
+                                Latency
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}