-
Tic Tac Toe
-
{status}
-
-
+
+
Tic Tac Toe Multiplayer
+
+ {!matchId && (
+ <>
+ setUsername(e.target.value)}
+ />
+
+
+
+ )}
+
+ {matchId && (
+
+ )}
);
}
-
-// --- winner logic ---
-function calculateWinner(sq: any[]) {
- 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 (let [a,b,c] of lines) {
- if (sq[a] && sq[a] === sq[b] && sq[a] === sq[c]) {
- return sq[a];
- }
- }
- return null;
-}
diff --git a/src/tictactoe/providers/NakamaProvider.tsx b/src/tictactoe/providers/NakamaProvider.tsx
new file mode 100644
index 0000000..2fac9f2
--- /dev/null
+++ b/src/tictactoe/providers/NakamaProvider.tsx
@@ -0,0 +1,160 @@
+import {
+ Client,
+ DefaultSocket,
+ Session,
+ Socket,
+ MatchmakerTicket,
+ Match,
+ MatchData,
+} from "@heroiclabs/nakama-js";
+import React, { createContext, useContext, useState } from "react";
+
+export interface NakamaContextType {
+ client: Client;
+ socket: Socket | null;
+ session: Session | null;
+
+ loginOrRegister: (username: string) => Promise
;
+ joinMatchmaker: (mode: string) => Promise;
+ leaveMatchmaker: (ticket: string) => Promise;
+ joinMatch: (matchId: string) => Promise;
+ sendMatchData: (matchId: string, opCode: number, data: object) => void;
+ onMatchData: (
+ cb: (msg: { opCode: number; data: any; userId: string | null }) => void
+ ) => void;
+}
+
+export const NakamaContext = createContext(null);
+
+export function NakamaProvider({ children }: { children: React.ReactNode }) {
+ const [client] = useState(
+ () => new Client(
+ "defaultkey",
+ "127.0.0.1",
+ "7350"
+ )
+ );
+
+ const [socket, setSocket] = useState(null);
+ const [session, setSession] = useState(null);
+
+ // -----------------------
+ // LOGIN / REGISTER
+ // -----------------------
+ async function loginOrRegister(username: string): Promise {
+ try {
+ const s = await client.authenticateDevice(username, true);
+ setSession(s);
+
+ const newSocket = new DefaultSocket(
+ client.host,
+ client.port,
+ false, // useSSL
+ false // verbose
+ );
+
+ await newSocket.connect(s, true);
+ setSocket(newSocket);
+
+ console.log("[Nakama] Connected WS");
+ return s;
+ } catch (err) {
+ console.error("[Nakama] Login error", err);
+ throw err;
+ }
+ }
+
+ // -----------------------
+ // MATCHMAKING
+ // -----------------------
+ async function joinMatchmaker(mode: string): Promise {
+ if (!socket) throw new Error("Socket not ready.");
+
+ const ticket = await socket.addMatchmaker(
+ `+mode:"${mode}"`, // query
+ 2, // min players
+ 2, // max players
+ { mode } // string properties
+ );
+
+ console.log("[Nakama] Matchmaker ticket:", ticket.ticket);
+ return ticket.ticket;
+ }
+
+ async function leaveMatchmaker(ticket: string): Promise {
+ if (socket) {
+ await socket.removeMatchmaker(ticket);
+ }
+ }
+
+ // -----------------------
+ // JOIN MATCH
+ // -----------------------
+ async function joinMatch(matchId: string): Promise {
+ if (!socket) throw new Error("Socket not connected.");
+ const match = await socket.joinMatch(matchId);
+ console.log("[Nakama] Joined match:", matchId);
+ return match;
+ }
+
+ // -----------------------
+ // SEND MATCH DATA
+ // -----------------------
+ function sendMatchData(matchId: string, opCode: number, data: object = {}): void {
+ if (!socket) return;
+ socket.sendMatchState(matchId, opCode, JSON.stringify(data));
+ }
+
+ // -----------------------
+ // LISTENERS
+ // -----------------------
+ function onMatchData(
+ cb: (msg: { opCode: number; data: any; userId: string | null }) => void
+ ) {
+ if (!socket) return;
+
+ socket.onmatchdata = (msg: MatchData) => {
+ const raw = msg.data;
+ let decoded: any = null;
+
+ try {
+ decoded = JSON.parse(new TextDecoder().decode(raw));
+ } catch {
+ decoded = raw; // fallback to raw binary
+ }
+
+ cb({
+ opCode: msg.op_code,
+ data: decoded,
+ userId: msg.presence?.user_id ?? null,
+ });
+ };
+ }
+
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useNakama(): NakamaContextType {
+ const ctx = useContext(NakamaContext);
+ if (!ctx) {
+ throw new Error("useNakama must be used inside a NakamaProvider");
+ }
+ return ctx;
+}