This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

Rules of React

Here are some rules to keep handy as you build Tic Tac Toe - following them will help you avoid lots of problems.

  • Never update State directly, always use setState()
  • Never alter the DOM directly, always operate on a value in state
  • Only call setState once per method or render cycle
  • State is for values that change, Props is for values to pass to a child component, constants should be set outside the component

For cleaner React

Some guidelines for better looking React code:

  • Instead of using this.state multiple times, destructure the state object to save values
  • "export default" can be written when you create the component class, or at the end of the file. Whichever you choose, stay consistent!

Extra Challenges

  • Use flexbox to set up your grid
  • Allow users to choose their mark (X, O, a color, an emoji, etc...)
  • Create a component for alerts and push the win/lose messages there instead of using an alert

This challenge is intended to let you practice maintaining state in a React application and
become more familiar with passing props and dealing with user interactions. This game will be for two
users, playing on one device, taking turns. You will have to use component state to keep track of
whose turn it is and which squares have been marked by each player. One hint is that you should not
directly manipulate the DOM to keep track of changes (in other words, no direct DOM manipulation like
getElementById("square").style = ...). React state and props should do all the heavy lifting.

On another note - this project will challenge your knowledge of React but should also be an exercise
in creating good user experiences. Your view should be styled to look good as well as function
flawlessly.

Here are the user stories to guide your progress:

  • As a user, I should start off seeing a 3x3 grid on the main page

tic-tac-toe board

  • As a user, I should be able to click on a square to mark it. My partner should be able to
    click on a square after me and see their mark.

  • As a user, when someone has won the game (3 squares in a row: horizontally, vertically, or diagonally)
    or there are no more squares, an alert will tell me who has won or that there are no more squares
    and the game has ended.

winner

Battleship Stories

First Break it Down

Read all the stories.
Get the elements of the view and model that will be needed to complete the first epic. In other words, design it, but don't implement the whole thing at once. Create a piece at a time when you need it.
Take it one story at a time. It is easier to have many small wins than to have one big catastrophe.

Remember correct indentation.

Use the comment recipe for planning out functions.

One more thing

  1. Initialize git and after every story add, commit and push your code to github.

First Epic

  1. As a user I can see a 10 x 10 grid so that I can see the gameboard.

  2. As a user when I click on a position, the position changes color so that I can tell that a position has been torpedoed.

  3. As a user I can see how many torpedoes I have used, so that I can keep track of how many I have used.
  4. As a user once a position has been torpedoed, it cannot be torpedoed again so that I don't waste torpedoes.

  5. As user I expect there to be 5 single length ships on the board.

  6. As a user when I click on a position I can see if there was a ship at that location so that I can see if I hit a ship. If there is a ship it counts as a hit.

    • Hint: Check the board for the presence of a SHIP.
      • If nothing is there it is a MISS.
      • If a SHIP is there, it will be a HIT.

  7. As a user I have won the game when I have 5 hits on the board, so that I know when the game is won and over.
  8. As a user I have a limit of 25 torpedoes to hit all ships, and when I run out I have lost the game, so that that game is a challenge.
  9. As a user if I lose, I can see where the ships were, so that I know there were actual ships on the board.

Second Epic

  1. As a user I can see how many torpedoes I have left instead of how many I have used.
  2. As a user I don't have ships that touch, so that there is always space between ships.

  3. As a user I can torpedo a 5 block ship, so that the game is diverse.

  4. As a user I can torpedo two 4 block ships, so that the game is diverse.
  5. As a user I can torpedo two 3 block ships,, so that the game is diverse.
  6. As a user I can torpedo two 2 block ships, so that the game is diverse.
  7. As a user I can torpedo one 1 block submarine, so that the game is diverse.

Third Epic

  1. As a user the ships can be oriented vertical or horizontal but not diagonally, so that there is a diverse placement of ships on the board.

  2. As a user I can randomly place the two 4 block ships, one vertical one horizontal, so that there is a diverse placement of 4 block ships on the board.
  3. As a user I can randomly place the 3 block ships, one vertical one horizontal, so that there is a diverse placement of 3 block ships on the board.
  4. As a user I can randomly place the two 2 block ships, one vertical one horizontal, so that there is a diverse placement of 2 block ships on the board.
  5. As a user I can see the status of ships I have sunk/not sunk, so that I have an easier way of knowing how many and which ships I left.