Skip to content
Game: Dots and Boxes - My 'React with TypeScript' version of a game inspired by a Codewars kata.
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
LICENSE
README.md
package.json
tsconfig.json
tsconfig.test.json
tslint.json

README.md

I··C··D··O··T··S (––and––lines––)

A React (with TypeScript) Web App (Game)

A React-based game inspired by a Codewars kata.

  • This game is for 2-7 players who will take turns selecting lines to form boxes.
  • Scoring is 1 point per box pinned.
  • Line colors have no distinction other than one is horizontal and one is vertical, and the alternating colors felt visually appealing.

The goal of this project was to convert my previous JavaScript Prototypal Inheritance CodePen to React. I added TypeScript alongside/during the conversion (as it should be done; it's not an after-thought, it's a development tool).

Application URLs

Tech Stack

Working on this project provided me a more in-depth look into

  • JavaScript (ES5, ES2015 (ES6))
  • React (16.2.0)
  • TypeScript (2.13.0)
  • Local component state and props

Tags

[JavaScript] [react] [reactjs] [typescript] [coding practice] [coding fun]

Other Potential Enhancements

  • Save states to local storage.
  • Activate multi-game option (the code is already in place for this).
  • Enable real-time playing (2-way data binding...?)

Tribute | Create React App with TypeScript

This project was bootstrapped with Create React App with TypeScript.

You can find the most recent version of the CRA guide here.

If installing through the Microsoft GitHub page, you'll find their install uses the same scripts imported from the same location (wmonk/create-react-app-typescript).

create-react-app my-app --scripts-version=react-scripts-ts

changelog

README.md#updating-to-new-releases

> In most cases bumping the react-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.
You can’t perform that action at this time.