I tried creating a smartphone battle toggle puzzle with Next.js × Supabase Realtime

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY!;

export const supabase = createClient(supabaseUrl, supabaseKey);

export const GRID_SIZE = 8;
export const TOTAL_CELLS = GRID_SIZE * GRID_SIZE;
export const GAME_DURATION_SEC = 20;
export const COOLDOWN_MS = 200;
export const SYNC_INTERVAL_MS = 5000;

export type PlayerColor = "A" | "B";
export type Board = PlayerColor[];

export function createEmptyBoard(): Board {
  return new Array(TOTAL_CELLS).fill("A");
}

export function createRandomBoard(): Board {
  const board: Board = new Array(TOTAL_CELLS);
  const indices = Array.from({ length: TOTAL_CELLS }, (_, i) => i);

  for (let i = indices.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [indices[i], indices[j]] = [indices[j], indices[i]];
  }

  for (let i = 0; i < TOTAL_CELLS; i++) {
    board[indices[i]] = i < TOTAL_CELLS / 2 ? "A" : "B";
  }

  return board;
}

function toIndex(row: number, col: number): number {
  return row * GRID_SIZE + col;
}

export function toRowCol(index: number): [number, number] {
  return [Math.floor(index / GRID_SIZE), index % GRID_SIZE];
}

function getToggleTargets(index: number): number[] {
  const [row, col] = toRowCol(index);
  const targets = [index];

  if (row > 0) targets.push(toIndex(row - 1, col));
  if (row < GRID_SIZE - 1) targets.push(toIndex(row + 1, col));
  if (col > 0) targets.push(toIndex(row, col - 1));
  if (col < GRID_SIZE - 1) targets.push(toIndex(row, col + 1));

  return targets;
}

function flipColor(color: PlayerColor): PlayerColor {
  return color === "A" ? "B" : "A";
}

export function applyToggle(board: Board, index: number): Board {
  const newBoard = [...board];
  const targets = getToggleTargets(index);

  for (const t of targets) {
    newBoard[t] = flipColor(newBoard[t]);
  }

  return newBoard;
}

export function countColors(board: Board): { A: number; B: number } {
  let a = 0;
  let b = 0;

  for (const cell of board) {
    if (cell === "A") a++;
    else b++;
  }

  return { A: a, B: b };
}

export type GameResult = "A" | "B" | "draw";

export function judgeWinner(board: Board): GameResult {
  const { A, B } = countColors(board);
  if (A > B) return "A";
  if (B > A) return "B";
  return "draw";
}

"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import {
  type Board,
  type PlayerColor,
  type GameResult,
  createEmptyBoard,
  applyToggle,
  countColors,
  judgeWinner,
  GAME_DURATION_SEC,
  COOLDOWN_MS,
} from "@/lib/game-logic";

export type GamePhase = "waiting" | "playing" | "finished";

type OnTapCallback = (index: number) => void;

export function useGameState(onTap?: OnTapCallback) {
  const [board, setBoardState] = useState<Board>(() => createEmptyBoard());
  const [phase, setPhase] = useState<GamePhase>("waiting");
  const [myColor, setMyColor] = useState<PlayerColor>("A");
  const [timeLeft, setTimeLeft] = useState(GAME_DURATION_SEC);
  const [result, setResult] = useState<GameResult | null>(null);

  const lastTapTime = useRef(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const endTimeRef = useRef(0);
  const boardRef = useRef(board);
  boardRef.current = board;

  const { A: countA, B: countB } = countColors(board);

  const stopTimer = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  }, []);

  const finishGame = useCallback(() => {
    stopTimer();
    setPhase("finished");
    setResult(judgeWinner(boardRef.current));
  }, [stopTimer]);

  const startGame = useCallback(
    (initialBoard: Board, color: PlayerColor) => {
      setBoardState(initialBoard);
      boardRef.current = initialBoard;
      setMyColor(color);
      setPhase("playing");
      setResult(null);
      setTimeLeft(GAME_DURATION_SEC);
      endTimeRef.current = Date.now() + GAME_DURATION_SEC * 1000;

      stopTimer();
      timerRef.current = setInterval(() => {
        const remaining = Math.max(
          0,
          (endTimeRef.current - Date.now()) / 1000
        );
        setTimeLeft(remaining);
        if (remaining <= 0) finishGame();
      }, 100);
    },
    [stopTimer, finishGame]
  );

  const handleCellTap = useCallback(
    (index: number) => {
      if (phase !== "playing") return;
      const now = Date.now();
      if (now - lastTapTime.current < COOLDOWN_MS) return;
      lastTapTime.current = now;

      const newBoard = applyToggle(boardRef.current, index);
      setBoardState(newBoard);
      boardRef.current = newBoard;
      onTap?.(index);
    },
    [phase, onTap]
  );

  const setBoard = useCallback((newBoard: Board) => {
    setBoardState(newBoard);
    boardRef.current = newBoard;
  }, []);

  const resetGame = useCallback(() => {
    stopTimer();
    setPhase("waiting");
    setResult(null);
    setTimeLeft(GAME_DURATION_SEC);
    setBoardState(createEmptyBoard());
  }, [stopTimer]);

  useEffect(() => {
    return () => stopTimer();
  }, [stopTimer]);

  const applyRemoteTap = useCallback((index: number) => {
    const newBoard = applyToggle(boardRef.current, index);
    setBoardState(newBoard);
    boardRef.current = newBoard;
  }, []);

  const finishWithResult = useCallback(
    (remoteResult: GameResult) => {
      stopTimer();
      setPhase("finished");
      setResult(remoteResult);
    },
    [stopTimer]
  );

  return {
    board, phase, myColor, timeLeft,
    countA, countB, result,
    handleCellTap, applyRemoteTap, startGame,
    resetGame, setBoard, finishWithResult, finishGame,
  };
}

"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { supabase } from "@/lib/supabase";
import {
  type Board,
  type PlayerColor,
  type GameResult,
  judgeWinner,
  SYNC_INTERVAL_MS,
} from "@/lib/game-logic";
import type { useGameState } from "@/hooks/useGameState";

type GameStateHandle = ReturnType<typeof useGameState>;

type BroadcastPayload =
  | { type: "tap"; index: number }
  | { type: "start"; board: Board; myColorForGuest: PlayerColor }
  | { type: "sync"; board: Board }
  | { type: "result"; winner: GameResult; board: Board };

export function useOnlineGame(roomId: string, gameState: GameStateHandle) {
  const [isConnected, setIsConnected] = useState(false);
  const [opponentJoined, setOpponentJoined] = useState(false);
  const [isHost, setIsHost] = useState(false);

  const channelRef = useRef<ReturnType<typeof supabase.channel> | null>(null);
  const syncIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const gameStateRef = useRef(gameState);
  const isHostRef = useRef(false);
  gameStateRef.current = gameState;

  const broadcastTap = useCallback((index: number) => {
    channelRef.current?.send({
      type: "broadcast",
      event: "game",
      payload: { type: "tap", index } satisfies BroadcastPayload,
    });
  }, []);

  useEffect(() => {
    const channel = supabase.channel(`room:${roomId}`, {
      config: { presence: { key: crypto.randomUUID() } },
    });
    channelRef.current = channel;

    channel
      .on("presence", { event: "sync" }, () => {
        const state = channel.presenceState();
        const count = Object.keys(state).length;
        setOpponentJoined(count >= 2);
        if (count === 1) {
          isHostRef.current = true;
          setIsHost(true);
        }
      })
      .on("broadcast", { event: "game" }, ({ payload }) => {
        const msg = payload as BroadcastPayload;
        const gs = gameStateRef.current;
        switch (msg.type) {
          case "tap":
            gs.applyRemoteTap(msg.index);
            break;
          case "start":
            gs.startGame(msg.board, msg.myColorForGuest);
            break;
          case "sync":
            if (!isHostRef.current) gs.setBoard(msg.board);
            break;
          case "result":
            if (!isHostRef.current) {
              gs.setBoard(msg.board);
              gs.finishWithResult(msg.winner);
            }
            break;
        }
      })
      .subscribe(async (status) => {
        if (status === "SUBSCRIBED") {
          await channel.track({});
          setIsConnected(true);
        }
      });

    return () => {
      if (syncIntervalRef.current) clearInterval(syncIntervalRef.current);
      supabase.removeChannel(channel);
    };
  }, [roomId]);

  useEffect(() => {
    if (!isHost || gameState.phase !== "playing") {
      if (syncIntervalRef.current) {
        clearInterval(syncIntervalRef.current);
        syncIntervalRef.current = null;
      }
      return;
    }
    syncIntervalRef.current = setInterval(() => {
      channelRef.current?.send({
        type: "broadcast",
        event: "game",
        payload: {
          type: "sync",
          board: gameStateRef.current.board,
        } satisfies BroadcastPayload,
      });
    }, SYNC_INTERVAL_MS);

    return () => {
      if (syncIntervalRef.current) {
        clearInterval(syncIntervalRef.current);
        syncIntervalRef.current = null;
      }
    };
  }, [isHost, gameState.phase]);

  // Host: broadcast final result when game finishes
  useEffect(() => {
    if (!isHost || gameState.phase !== "finished") return;

    const board = gameStateRef.current.board;
    channelRef.current?.send({
      type: "broadcast",
      event: "game",
      payload: {
        type: "result",
        winner: judgeWinner(board),
        board,
      } satisfies BroadcastPayload,
    });
  }, [isHost, gameState.phase]);

  const broadcastStart = useCallback(
    (board: Board, myColor: PlayerColor) => {
      channelRef.current?.send({
        type: "broadcast",
        event: "game",
        payload: {
          type: "start",
          board,
          myColorForGuest: myColor === "A" ? "B" : "A",
        } satisfies BroadcastPayload,
      });
    },
    []
  );

  return { isConnected, opponentJoined, isHost, broadcastTap, broadcastStart };
}