Melody McClure

import React, { useState, useEffect } from 'react';
import './Tic-Tac-Toe.css';

const initialState = {
  message: '',
  playerSide: '',
  playerToken: '',
  computerSide: '',
  computerToken: '',
  gameOver: true,
  board: [
    ['', '', ''],
    ['', '', ''],
    ['', '', ''],
  ],
  winOptions: [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ],
};

export default function TicTacToe() {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    const gameStatus = checkGameOver();
    if (gameStatus) {
      handleGameOver(gameStatus);
    }
    //eslint-disable-next-line
  }, [state.board])

  const playerChoice = (value) => {
    let computer = '';
    value === 'X' ? (computer = 'O') : (computer = 'X');
    setState({
      ...state,
      playerSide: value,
      computerSide: computer,
      gameOver: false,
      message: `You are ${value}'s, Joshua is ${computer}'s`,
    });
  };

  const checkGameOver = () => {
    for (const winOption of state.winOptions) {
      const [a, b, c] = winOption.map(
        (index) => state.board[Math.floor(index / 3)][index % 3]
      );
      if (a && a === b && a === c) {
        return a === state.playerSide ? 'player' : 'computer';
      }
    }
    if (state.board.every((row) => row.every((cell) => cell !== ''))) {
      return 'draw';
    }
    return null;
  };

  const playerMove = (e) => {
    const id = e.target.id;
    const newBoard = state.board.map((row) => [...row]);
    newBoard[Math.floor(id / 3)][id % 3] = state.playerSide;

    setState({
      ...state,
      board: newBoard,
      playerToken: id,
    });
    setTimeout(() => compTurn(newBoard), 1000);
  };

  const compTurn = (currentBoard) => {
    const newBoard = currentBoard.map((row) => [...row]);
    const emptyCells = [];
    newBoard.forEach((row, rowIndex) =>
      row.forEach((cell, colIndex) => {
        if (cell === '') {
          emptyCells.push({ rowIndex, colIndex });
        }
      })
    );
    if (emptyCells.length === 0) {
      return;
    }
    const compMove = Math.floor(Math.random() * emptyCells.length);
    newBoard[emptyCells[compMove].rowIndex][emptyCells[compMove].colIndex] =
      state.computerSide;

    setState({
      ...state,
      board: newBoard,
    });

    const gameStatus = checkGameOver();
    if (gameStatus) {
      handleGameOver(gameStatus);
    }
  };

  const handleGameOver = (gameStatus) => {
    if (gameStatus === 'player') {
      setState({
        ...initialState,
        message: 'Congratulations, you won!',
      });
    } else if (gameStatus === 'computer') {
      setState({
        ...initialState,
        message: 'Sorry, Joshua won. Better luck next time!',
      });
    } else if (gameStatus === 'draw') {
      setState({
        ...initialState,
        message: 'It\'s a draw! Play again?',
      });
    }
  };

  const handleResign = () => {
    setState({
      ...initialState,
      message: 'You have lost because you gave up. Choose a side to play again.',
    });
  };

  return (
    <>
      <div id="game">
      <h4 className='announcement'>{state.message}</h4>
        {!state.playerSide ?
          <div id='tic-tac-toe-board'>
            <div className='player-choice'>
              <h4>Choose a Side</h4>
              <div className="side-choice">
                <h2 onClick={() => playerChoice('X')}>X</h2>
                <h2 onClick={() => playerChoice('O')}>O</h2>
              </div>
            </div>
          </div> :
          <div id="tic-tac-toe-board">
            {state.board.flatMap((grid) => grid)
              .map((square, idx) => {
                return square === state.playerSide
                  ? <div className='player-square' id={idx} key={idx} >{square}</div>
                  : square === state.computerSide
                    ? <div className='computer-square' id={idx} key={idx} >{square}</div>
                    : <div className='square' id={idx} key={idx} onClick={playerMove}>{square}</div>
              })
            }
          </div>}
        <div className="actions">
          {!state.gameOver &&
            <button id="give-up" disabled={state.gameOver === true ? true : false} onClick={handleResign}>Resign</button>
          }
        </div>
      </div>
    </>
  );
}

"use client";

import { useCallback, useEffect, useState } from "react";

// The eight winning lines, as flat board indices (0-8) — the same idea from
// the 2021 version, kept because it was the cleanest part of the original.
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],
];

type Mark = "X" | "O";
type Cell = Mark | null;
type Outcome = { winner: Mark; line: number[] } | "draw" | null;

// Pure: given a board, who (if anyone) has won. No component state, no DOM —
// one source of truth the rest of the component can trust.
function getOutcome(board: Cell[]): Outcome {
  for (const line of LINES) {
    const [a, b, c] = line;
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return { winner: board[a] as Mark, line };
    }
  }
  return board.every(Boolean) ? "draw" : null;
}

// 2026 Joshua: a real brain via minimax. The board is tiny, so a full unpruned
// search is instant — and because getOutcome() is already a pure function, this
// is a ~25-line add-on, not a rewrite. Depth weighting makes him prefer faster
// wins and slower losses. Played perfectly, tic-tac-toe is unbeatable: you can
// only force a draw.
function minimax(board: Cell[], turn: Mark, me: Mark, depth: number): number {
  const o = getOutcome(board);
  if (o === "draw") return 0;
  if (o) return o.winner === me ? 10 - depth : depth - 10;
  const scores = board
    .map((cell, i) => {
      if (cell) return null;
      const next = [...board];
      next[i] = turn;
      return minimax(next, turn === "X" ? "O" : "X", me, depth + 1);
    })
    .filter((s): s is number => s !== null);
  return turn === me ? Math.max(...scores) : Math.min(...scores);
}

function bestMove(board: Cell[], me: Mark): number {
  let best = -Infinity;
  let move = -1;
  board.forEach((cell, i) => {
    if (cell) return;
    const next = [...board];
    next[i] = me;
    const score = minimax(next, me === "X" ? "O" : "X", me, 1);
    if (score > best) {
      best = score;
      move = i;
    }
  });
  return move;
}

const EMPTY: Cell[] = Array(9).fill(null);

type Mode = "random" | "thinking";

export default function TicTacToeGame() {
  const [board, setBoard] = useState<Cell[]>(EMPTY);
  const [playerSide, setPlayerSide] = useState<Mark | null>(null);
  const [thinking, setThinking] = useState(false);
  const [mode, setMode] = useState<Mode>("random");

  const computerSide: Mark | null =
    playerSide === "X" ? "O" : playerSide === "O" ? "X" : null;

  const outcome = getOutcome(board);
  const gameOver = outcome !== null;

  // '21 Joshua plays a random open square (beatable). '26 Joshua runs minimax
  // (unbeatable). The only difference is how this one line picks `choice`.
  // (The name is a nod to WarGames: "Shall we play a game?")
  const joshuaMove = useCallback(
    (current: Cell[], mark: Mark) => {
      const open = current
        .map((cell, i) => (cell ? null : i))
        .filter((i): i is number => i !== null);
      if (open.length === 0 || getOutcome(current)) return;
      const choice =
        mode === "thinking"
          ? bestMove(current, mark)
          : open[Math.floor(Math.random() * open.length)];
      const next = [...current];
      next[choice] = mark;
      setBoard(next);
    },
    [mode],
  );

  // After the player moves, let Joshua respond once the board has settled.
  useEffect(() => {
    if (!playerSide || !computerSide || gameOver) return;
    const marksPlaced = board.filter(Boolean).length;
    const playerToMove = marksPlaced % 2 === (playerSide === "X" ? 0 : 1);
    if (playerToMove) return;
    setThinking(true);
    const t = setTimeout(() => {
      joshuaMove(board, computerSide);
      setThinking(false);
    }, 600);
    return () => clearTimeout(t);
  }, [board, playerSide, computerSide, gameOver, joshuaMove]);

  function choose(side: Mark) {
    setBoard(EMPTY);
    setPlayerSide(side);
    setThinking(false);
  }

  function play(i: number) {
    if (!playerSide || board[i] || gameOver || thinking) return;
    const next = [...board];
    next[i] = playerSide;
    setBoard(next);
  }

  function reset() {
    setBoard(EMPTY);
    setPlayerSide(null);
    setThinking(false);
  }

  function pickMode(m: Mode) {
    setMode(m);
    reset();
  }

  const status = !playerSide
    ? "Pick a side — shall we play a game?"
    : outcome === "draw"
      ? mode === "thinking"
        ? "A draw — the best you can do against '26 Joshua."
        : "A draw. Play again?"
      : outcome
        ? outcome.winner === playerSide
          ? "You beat Joshua! 🎉"
          : "Joshua got you that time."
        : thinking
          ? "Joshua is thinking…"
          : `You're ${playerSide} · Joshua is ${computerSide}`;

  return (
    <div className="rounded-2xl border border-border bg-surface/60 p-6">
      <p className="eyebrow mb-3">Play Joshua</p>

      <div className="mb-4 inline-flex rounded-lg border border-border bg-surface-2 p-0.5 text-xs">
        {(
          [
            ["random", "'21 · random"],
            ["thinking", "'26 · thinks ahead"],
          ] as const
        ).map(([m, lbl]) => (
          <button
            key={m}
            onClick={() => pickMode(m)}
            className={`rounded-md px-3 py-1.5 transition-colors ${
              mode === m
                ? "bg-accent/20 text-accent"
                : "text-muted hover:text-fg"
            }`}
          >
            {lbl}
          </button>
        ))}
      </div>

      <p className="mb-4 min-h-5 text-sm text-muted">{status}</p>

      {!playerSide ? (
        <div className="flex items-center gap-3">
          {(["X", "O"] as const).map((s) => (
            <button
              key={s}
              onClick={() => choose(s)}
              className="h-14 w-14 rounded-xl border border-border bg-surface-2 font-display text-2xl font-bold text-fg transition-colors hover:border-accent hover:text-accent"
            >
              {s}
            </button>
          ))}
        </div>
      ) : (
        <div className="grid w-fit grid-cols-3 gap-2">
          {board.map((cell, i) => {
            const winning = outcome && outcome !== "draw" && outcome.line.includes(i);
            return (
              <button
                key={i}
                onClick={() => play(i)}
                disabled={!!cell || gameOver || thinking}
                className={`flex h-16 w-16 items-center justify-center rounded-xl border font-display text-2xl font-bold transition-colors ${
                  winning
                    ? "border-accent bg-accent/15 text-accent"
                    : "border-border bg-surface-2 text-fg hover:enabled:border-accent/60"
                } ${cell === computerSide ? "text-accent-2" : ""}`}
              >
                {cell}
              </button>
            );
          })}
        </div>
      )}

      {playerSide && (
        <button
          onClick={reset}
          className="mt-5 text-sm text-muted underline-offset-4 transition-colors hover:text-accent hover:underline"
        >
          {gameOver ? "New game" : "Resign"} →
        </button>
      )}
    </div>
  );
}