tictactoe.md

tictactoe

• What is tic tac toe?
• Build a data structure to represent the game board.
• Write a function that updates the board with somebody's chosen position. Don't worry about detecting if somebody has won.
• Write a function to detect that somebody has won.
• What should the UI look like? Use excalidraw to mock up the layout of the page
• Set up codesandbox.io with React and draw the board using the data structure we built earlier. Don't make it interactive, just draw the board.
• Add a feature so that clicking on the board fills the spot.
• Show a message when the game is over.
• Set up players and turns.
• Set up a bot player. It doesn't need to be smart.
• How do we make the game support a 4 x grid?
• Extra credit/take home: make the bot smart. Look up the minimax algorithm. Or watch this video. https://www.youtube.com/watch?v=trKjYdBASyQ

Incomplete example

https://codesandbox.io/s/muddy-pond-4fv7e?file=/src/App.js

Empty board

import React from "react";
import "./styles.css";

const board = [
  new Array(3).fill(null),
  new Array(3).fill(null),
  new Array(3).fill(null)
];

export default function App() {
  return (
    <div className="App">
      {board.map((row) => (
        <div style={{ margin: 64 }}>
          {row.map((col) => (
            <span style={{ margin: 32, padding: 16 }}>hi</span>
          ))}
        </div>
      ))}
    </div>
  );
}

Board with state

import React, { useState } from "react";
import "./styles.css";

const getCellString = (player) => {
  if (player === true) {
    return "X";
  }
  if (player === false) {
    return "O";
  }
  return null;
};

const getCellColor = (player) => {
  if (player === null) {
    return "#ddd";
  }
  return { true: "#abf5c9", false: "#f5abe5" }[player.toString()];
};

const updateBoard = (board, r, c, player) => {
  // TODO: Do this better
  const newBoard = JSON.parse(JSON.stringify(board));
  newBoard[r][c] = player;
  return newBoard;
};

export default function App() {
  const [player, setPlayer] = useState(true);
  const [board, setBoard] = useState([
    new Array(3).fill(null),
    new Array(3).fill(null),
    new Array(3).fill(null)
  ]);

  return (
    <div className="App" style={{marginTop: 100}}>
      {/* TODO: Update this to use flexbox or css grid */}
      {board.map((row, r) => (
        <div key={r} style={{ position: "relative" }}>
          {row.map((cell, c) => (
            <div
              key={c}
              style={{
                display: "inline-block",
                minHeight: 64,
                minWidth: 64,
                marginLeft: 2,
                marginRight: 2,
                marginBottom: 1,
                background: getCellColor(cell)
              }}
              onClick={() => {
                setPlayer(!player);
                setBoard(updateBoard(board, r, c, player));
              }}
            >
              <span
                style={{ position: "absolute", marginTop: 24, marginLeft: -5 }}
              >
                {getCellString(cell)}
              </span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}