@sansavision/create-pulse 0.4.3 → 0.4.5

package/templates/aurora-auth-node-demo/src/routes/dashboard/demos/game-sync/page.client.tsx

@@ -0,0 +1,375 @@
+
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import { Gamepad2, Shield, Wifi, WifiOff, Loader2, RotateCcw, Copy, Users, LogIn, AlertCircle } from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+type Cell = "X" | "O" | null;
+
+export default function GameSyncPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [authUser, setAuthUser] = useState<{ id: string; claims: Record<string, string> } | null>(null);
+    const [connecting, setConnecting] = useState(true);
+    const [board, setBoard] = useState<Cell[]>(Array(9).fill(null));
+    const [currentTurn, setCurrentTurn] = useState<"X" | "O">("X");
+    const [mySymbol, setMySymbol] = useState<"X" | "O" | null>(null);
+    const [winner, setWinner] = useState<string | null>(null);
+    const [players, setPlayers] = useState<string[]>([]);
+    const connRef = useRef<PulseConnection | null>(null);
+    // Room management
+    const [roomCode, setRoomCode] = useState<string>("");
+    const [joinCode, setJoinCode] = useState("");
+    const [error, setError] = useState("");
+    const [inRoom, setInRoom] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const mySymbolRef = useRef<"X" | "O" | null>(null);
+    const sessionRef = useRef(session);
+
+    // Keep refs in sync with state
+    useEffect(() => { sessionRef.current = session; }, [session]);
+    useEffect(() => { mySymbolRef.current = mySymbol; }, [mySymbol]);
+
+    const checkWinner = useCallback((b: Cell[]): Cell => {
+        const lines = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],
+            [0, 4, 8], [2, 4, 6],
+        ];
+        for (const [a, c, d] of lines) {
+            if (b[a] && b[a] === b[c] && b[a] === b[d]) return b[a];
+        }
+        return null;
+    }, []);
+
+    // Connect to relay on mount
+    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]);
+
+    function joinRoom(code: string) {
+        if (!connRef.current || !sessionRef.current) return;
+        const sess = sessionRef.current;
+
+        const streamName = `ttt-${code}`;
+        const stream = connRef.current.stream(streamName);
+        streamRef.current = stream;
+        setRoomCode(code);
+        setInRoom(true);
+
+        // Send join message
+        stream.send(JSON.stringify({
+            type: "join",
+            name: sess.user.name,
+            userId: sess.user.id,
+        }));
+
+        // Listen for game events — uses refs to avoid stale closures
+        stream.on("data", (data: Uint8Array) => {
+            try {
+                const msg = JSON.parse(new TextDecoder().decode(data));
+                const currentSession = sessionRef.current;
+                if (!currentSession) return;
+                const selfId = currentSession.user.id;
+                const selfName = currentSession.user.name;
+
+                if (msg.type === "move" && msg.userId !== selfId) {
+                    setBoard((prev) => {
+                        const next = [...prev];
+                        next[msg.cell] = msg.symbol;
+                        const w = checkWinner(next);
+                        if (w) setWinner(`${msg.name} (${w}) wins!`);
+                        else if (next.every((c) => c)) setWinner("Draw!");
+                        return next;
+                    });
+                    setCurrentTurn(msg.symbol === "X" ? "O" : "X");
+                } else if (msg.type === "join" && msg.userId !== selfId) {
+                    setPlayers((prev) => {
+                        if (!prev.includes(msg.name)) {
+                            // Announce presence back with current symbol from ref
+                            stream.send(JSON.stringify({
+                                type: "presence",
+                                name: selfName,
+                                userId: selfId,
+                                symbol: mySymbolRef.current
+                            }));
+                            return [...prev, msg.name];
+                        }
+                        return prev;
+                    });
+                } else if (msg.type === "presence" && msg.userId !== selfId) {
+                    setPlayers((prev) => prev.includes(msg.name) ? prev : [...prev, msg.name]);
+                } else if (msg.type === "reset" && msg.userId !== selfId) {
+                    setBoard(Array(9).fill(null));
+                    setCurrentTurn("X");
+                    setWinner(null);
+                }
+            } catch { /* ignore */ }
+        });
+
+        // First player is X
+        setMySymbol("X");
+        mySymbolRef.current = "X";
+        setPlayers([sess.user.name]);
+    }
+
+    function createRoom() {
+        const code = Math.random().toString(36).substring(2, 8).toUpperCase();
+        joinRoom(code);
+    }
+
+    function handleJoinExisting() {
+        const cleaned = joinCode.trim().toUpperCase();
+        if (cleaned) {
+            if (!/^[A-Z0-9]{6}$/.test(cleaned)) {
+                setError("Invalid room code format. Must be exactly 6 alphanumeric characters.");
+                return;
+            }
+            setError("");
+            joinRoom(cleaned);
+            // Second player joining gets O — set both state AND ref
+            setMySymbol("O");
+            mySymbolRef.current = "O";
+        }
+    }
+
+    function copyRoomCode() {
+        navigator.clipboard.writeText(roomCode);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+
+    function handleCellClick(index: number) {
+        if (board[index] || winner || !streamRef.current || !mySymbol) return;
+        if (currentTurn !== mySymbol) return;
+
+        streamRef.current.send(JSON.stringify({
+            type: "move",
+            cell: index,
+            symbol: mySymbol,
+            name: session?.user?.name,
+            userId: session?.user?.id,
+        }));
+
+        // Apply move locally
+        setBoard((prev) => {
+            const next = [...prev];
+            next[index] = mySymbol;
+            const w = checkWinner(next);
+            if (w) setWinner(`${session?.user?.name} (${mySymbol}) wins!`);
+            else if (next.every((c) => c)) setWinner("Draw!");
+            return next;
+        });
+        setCurrentTurn(mySymbol === "X" ? "O" : "X");
+    }
+
+    function handleReset() {
+        if (!streamRef.current) return;
+        streamRef.current.send(JSON.stringify({
+            type: "reset",
+            userId: session?.user?.id,
+        }));
+        setBoard(Array(9).fill(null));
+        setCurrentTurn("X");
+        setWinner(null);
+    }
+
+    function leaveRoom() {
+        setInRoom(false);
+        setRoomCode("");
+        setBoard(Array(9).fill(null));
+        setCurrentTurn("X");
+        setMySymbol(null);
+        mySymbolRef.current = null;
+        setWinner(null);
+        setPlayers([]);
+        streamRef.current = null;
+    }
+
+    return (
+        <div className="p-8">
+            <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-green-500 to-emerald-600 flex items-center justify-center">
+                        <Gamepad2 className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold">Game State Sync</h1>
+                        <p className="text-sm text-slate-500">Real-time tic-tac-toe with room-based multiplayer</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>
+            ) : !inRoom ? (
+                /* ── Room Lobby ── */
+                <div className="max-w-lg mx-auto">
+                    <div className="glass rounded-2xl p-8 text-center mb-6">
+                        <div className="text-5xl mb-4">🎮</div>
+                        <h2 className="text-xl font-bold mb-2">Join or Create a Game</h2>
+                        <p className="text-sm text-slate-400 mb-6">
+                            Create a room and share the code with a friend, or join an existing room to play tic-tac-toe!
+                        </p>
+
+                        <button
+                            onClick={createRoom}
+                            disabled={!connected}
+                            className="w-full py-3.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed 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">
+                                <span className="px-3 bg-slate-800 text-slate-500 uppercase tracking-wider">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>
+                        )}
+
+                        <div className="flex gap-2">
+                            <input
+                                type="text"
+                                value={joinCode}
+                                onChange={(e) => { setJoinCode(e.target.value.toUpperCase()); setError(""); }}
+                                placeholder="Enter room code..."
+                                maxLength={6}
+                                className="flex-1 px-4 py-3 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none text-center text-lg font-mono tracking-wider placeholder:text-slate-600 transition-colors"
+                            />
+                            <button
+                                onClick={handleJoinExisting}
+                                disabled={!connected || !joinCode.trim()}
+                                className="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                            >
+                                <LogIn className="w-4 h-4" />Join
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="glass rounded-xl p-4 text-center">
+                        <p className="text-xs text-slate-400">
+                            💡 <span className="text-green-400 font-medium">How It Works</span> — Game state is synced in real-time via Pulse streams.
+                            Each room gets its own stream, so multiple games can run simultaneously.
+                        </p>
+                    </div>
+                </div>
+            ) : (
+                /* ── Game Board ── */
+                <div className="max-w-lg mx-auto">
+                    {/* Room header */}
+                    <div className="glass rounded-xl p-4 mb-4 flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <button onClick={copyRoomCode}
+                                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20 hover:bg-green-500/20 transition-colors">
+                                <span className="text-xs text-slate-400">Room:</span>
+                                <span className="text-sm font-mono font-bold text-green-400">{roomCode}</span>
+                                <Copy className="w-3 h-3 text-green-400" />
+                            </button>
+                            {copied && <span className="text-xs text-green-400 animate-pulse">Copied!</span>}
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <div className="flex items-center gap-1.5">
+                                <Users className="w-3.5 h-3.5 text-slate-400" />
+                                <span className="text-xs text-slate-400">{players.length} player(s)</span>
+                            </div>
+                            <button onClick={leaveRoom}
+                                className="text-xs text-red-400 hover:text-red-300 transition-colors">Leave</button>
+                        </div>
+                    </div>
+
+                    {/* Game info */}
+                    <div className="glass rounded-xl p-4 mb-6 flex items-center justify-between">
+                        <div className="text-sm">You are: <span className={`font-bold text-lg ${mySymbol === "X" ? "text-cyan-400" : "text-pink-400"}`}>{mySymbol}</span></div>
+                        <div className="text-sm text-slate-400">
+                            {winner || (<>Turn: <span className={`font-bold ${currentTurn === "X" ? "text-cyan-400" : "text-pink-400"}`}>{currentTurn}</span>{currentTurn === mySymbol && " (your turn)"}</>)}
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-3 mb-6">
+                        {board.map((cell, i) => (
+                            <button key={i} onClick={() => handleCellClick(i)}
+                                disabled={!!cell || !!winner || currentTurn !== mySymbol || !connected}
+                                className={`aspect-square rounded-xl text-4xl font-bold transition-all ${cell ? "glass" : "bg-slate-800/50 border border-slate-700 hover:border-purple-500 hover:bg-slate-800"
+                                    } ${!cell && !winner && currentTurn === mySymbol ? "cursor-pointer" : "cursor-default"} disabled:opacity-60`}>
+                                <span className={cell === "X" ? "text-cyan-400" : "text-pink-400"}>{cell}</span>
+                            </button>
+                        ))}
+                    </div>
+
+                    {winner && (
+                        <div className="text-center">
+                            <p className="text-xl font-bold mb-4 gradient-text">{winner}</p>
+                            <button onClick={handleReset}
+                                className="inline-flex items-center gap-2 px-6 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-lg font-medium transition-all">
+                                <RotateCcw className="w-4 h-4" />Play Again
+                            </button>
+                        </div>
+                    )}
+
+                    {players.length < 2 && !winner && (
+                        <div className="text-center glass rounded-xl p-4 mt-4">
+                            <Loader2 className="w-5 h-5 animate-spin text-green-400 mx-auto mb-2" />
+                            <p className="text-sm text-slate-400">Waiting for opponent to join...</p>
+                            <p className="text-xs text-slate-500 mt-1">Share code <span className="font-mono font-bold text-green-400">{roomCode}</span> with a friend</p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/demos/game-sync/page.tsx

@@ -0,0 +1,5 @@
+import GameSyncPage from "./page.client";
+
+export default function Page() {
+    return <GameSyncPage />;
+}