/tic-tac-toe

Intermediate Vanilla Javascript Solo Project

Primary LanguageJavaScript

Tic Tac Toe: Nocturne

Turing School of Software & Design Mod 2108 FEE - Final Solo Project

A game of browser tic tac toe, fully dynamic in response to user interaction. Nocturnal animal themed. Built out through applying my knowledge of the data model, event delegation, DOM manipulation via Javascript, localStorage, and all programming fundamentals.

Deployable Link

https://github.com/kbergsund/tic-tac-toe

Languages/Technology

Javascript, HTML, CSS, Github, Atom, Chrome Dev Tools

Learning Goals

  • Solidify & demnstrate understanding of all Mod 1 concepts & lessons (DRY Javascript/CSS, semantic HTML, event delegation, localStorage, etc.).
  • Understand the different between the data model & DOM display. Build out complex web app with the latter dependent on the former for a single source of truth.
  • Break down complex final spec into smaller, actionable iterations that build on each other cleanly and effectively.

Install & Setup

  • Clone this repo
  • Input open index.html within the command line

Web App Attributes

Code Architecture:

  • player.js - Declaration of Player class that tracks unique player id, token (emoji), and number of wins.
  • game.js - Where the data model lives and all changes to the data model take place. An array of 9 empty strings that correspond to the 9 tiles on the tic-tac-toe grid is the app's source of truth- it is set as a game.board property. Two other properties are two object instances of the Player class. Other methods include toggling whose turn it is, evaluating win conditions using logic & arithmetic, checking for a draw, and resetting the data model.
  • main.js - Where all DOM manipulation takes place. The DOM is dependent on and built directly from the data model. The only global variable is an object instance of the Game class. One event listener is set up on a parent element of the gameboard so that event delegation is optimized.

Functionality:

  1. On page load, users are greeted by the game board, framed by two scoreboards and the corresponding animal tokens (in place of X's and O's). A message at the top relays who's turn it is.

Static image of web app site

  1. Users alternate clicking on the tile where they wish to place their token. The data model & then DOM update on each click. Users cannot click on a square that is already occupied- as represented by a default cursor on hover. It will remain their turn until they choose an unoccupied square.

Take Turns - Occupied Square Disabling

  1. In a winning scenario, the dynamic message at the top will update to dictate who has won. Their corresponding scoreboard will increase by 1. After 1.5 seconds the gameboard will reset entirely for a new game.

Win Scenarios

  1. In a draw scenario, a message will display. Neither scoreboard will increase. After 1.5 seconds the gameboard will reset.

Draw Scenario

  1. Upon page refresh, the scoreboard data & display will persist so that users can leave and come back and not lose track of the competition.

Scoreboard Persist

  1. At any time, users can click the 'Clear Scores & Restart' button at the bottom. This will zero out both scoreboards. It will also clear any game currently in progress.

Clear Data

Contributors

Kyra Bergsund

Project Specs

See here for spec and rubric.