Setup

Create a new project and get the foundation ready for our tic-tac-toe game.

Create the Project

Open your terminal and run:

npx create-what tic-tac-toe
cd tic-tac-toe
npm install
npm run dev

Open http://localhost:5173 in your browser. You should see the default What app.

Start with a Clean Slate

Replace the contents of src/main.jsx with this starter code:

import { mount } from 'what-framework';

function Game() {
  return (
    <div className="game">
      <h1>Tic-Tac-Toe</h1>
      {/* We'll add the board here */}
    </div>
  );
}

mount(<Game />, '#app');

Add Some Styles

Create src/styles.css with the game styles:

/* Game Layout */
.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  font-family: -apple-system, sans-serif;
}

.game h1 {
  margin-bottom: 24px;
}

/* Board */
.board {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 4px;
  background: #333;
  padding: 4px;
  border-radius: 8px;
}

/* Squares */
.square {
  width: 80px;
  height: 80px;
  background: #fff;
  border: none;
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.square:hover {
  background: #f0f0f0;
}

.square:first-child { border-radius: 4px 0 0 0; }
.square:nth-child(3) { border-radius: 0 4px 0 0; }
.square:nth-child(7) { border-radius: 0 0 0 4px; }
.square:last-child { border-radius: 0 0 4px 0; }

/* Game Info */
.game-info {
  margin-top: 24px;
  text-align: center;
}

.status {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.moves {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moves button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.moves button:hover {
  background: #f5f5f5;
}

Import the Styles

Update your main.jsx to import the styles:

import './styles.css';

export default function Game() {
  return (
    <div className="game">
      <h1>Tic-Tac-Toe</h1>
    </div>
  );
}

Checkpoint

Your app should now show a centered "Tic-Tac-Toe" heading. If you see that, you're ready for the next step!