Designing Tic-Tac-Toe

With a partner, create a design for a tic-tac-toe game. Do not worry about writing code; rather, practice your technical design skills (i.e. thinking about how you would code this).

Objectives

Plan and design "ideas"
Collaborate and communicate effectively around technical ideas

Requirements

Features to consider:

Game should be played on the same computer.
As a user, I should be able to see a tic-tac-toe board.
As a user, the game should alternate turns, between X and O.
As a user, I should be able to click in a square and play either X or O, respective of the turn.
As a user, when I get three in a row, I should be told I've won and the game should be over.

TIPS:

These designs should be so detailed that you could give them another team and they could implement it with few (if any) questions.
If at any time you want to validate a piece of your design (e.g. the algorithm, event handling, or UI/UX), you can create an extremely simple site that proves or disproves your idea.

Explorer Mode

Submit a full design of how to approach this problem. This should include:

A digital mock up (created using software, or a photo/scan of an analog drawing)
Implementation details, such as how you are implementing each square
A list of events you are listening for
psuedo-code describing your program (e.g. event-handling, game logic)

Adventure Mode

Plan the implementation of a "vs computer" mode, that picks a random square.

Take a swing at creating your tic-tac-toe game.
Have fun with the CSS by adding colors, animations and effects to make the game more enjoyable.

Epic Mode

Modify your "vs computer" mode to follow a specific strategy (of your choice).

Additional Resources

Adobe XD, free software from Adobe for designing and prototyping website and mobile apps.
Moqups, a web-based tool for collaborating on wireframes, mockups and prototypes.
Read about Pseudocode