Skip to content

Latest commit

 

History

History
54 lines (46 loc) · 2.04 KB

README.md

File metadata and controls

54 lines (46 loc) · 2.04 KB

Javascript Tic-Tac-Toe in three verses

Verse 1: Object Oriented JS

Major Concepts

  • An object maintains it's own state and behavior.

Objects

CONTROLLER & VIEW

  • Game: handles I/O and game loop, is unaware of game logic but has encapsulated knowledge of a game to be able to get and display moves.
    • Methods: reset, start, isOver, inputPlayers, inputMove, displayBoard
    • State: players, gameBoard, winner

MODELS

  • Board: contains game logic and state
    • Methods: checkWinner, makeMove
    • State: boardValues ['X'|'O'|'']
  • Square: contains square logic
    • State: value ['X'|'O'|'']
  • Players: contains player information, is unaware of game logic
    • Methods:
    • State: marker ('X'|'O')

Reference

Verse 2: React

  • Declarative views - know what but not how.
  • Components manage their own state and know how to render themselves (like objects).
  • One way data binding, state is immutable
  • Components take in data and render UI without side-effects (like functional)

Components

  • Square
  • Board
  • Game

Reference

Verse 3: Functional JS

  • Avoid mutating state
    • Functions don't change state they return new state
    • No shared mutable state
    • Data and mutations still exist - just moved to the edge of the program
  • First class functions
  • High order functions
  • Tail optimized recursion
  • Supports concurrency - allows for parallel programming - optimization

Functions

  • makeMove - does not modify the state of the board but returns a new board with the updated state in it (or the old board if the move is not legal).
  • findWinner - passed board, returns winner.
  • play - need to replace while loop with recursion to not store state of gameOver.