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

-

I··C··D··O··T··S··: A Web App Game

tl;dr - take me to the game already!
ICDots is a board game 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.

Game Reference


The Game:
  1. Board is between 2 and 7 (represented as 1 row of boxes).
  2. Number of players is between 2 and [Board] size.
  3. Players take turns.
  4. If a player pins a box, they go again.

Application URLs

Technology History

  • Inspired by a Codewars kata, the original kata solution was written with just JavaScript.
  • In making the game interactive, the first version of ICDots was written with JavaScript Prototypal Inheritance (e.g., let myGame = new Game() and Game.prototype.createBoard = function() { }). This was my first prototype-based coding project.
  • I then converted that version of the game to React with TypeScript. With this project, I added TypeScript alongside/during the conversion to React (as it should be done).

Tech Stack

Working on this project provided me a more in-depth look into
  • - JavaScript (ES5, ES2015 (ES6)) (+ downgrading ES7 .includes())
  • - React (16.2.0)
  • - TypeScript (2.13.0)
  • - Local component state and props

Tags

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

Comments

Post a Comment

Comments are typically approved within an hour or two of posting.

Popular Posts

JavaScript Informational: Best of the Basics

-
Image
Best of the Basics: JavaScript Informational JavaScript Informational: Best of the Basics: A full run through for entry- and mid-level developers looking for some solid fundamentals. Comments and suggestions always welcome. For those new to the language, this is my own personal introduction to the topic garnered from over 17 years of experience: I'm throwing it out into the informational nexus. -Keith D Commiskey So you wanna control your browser, ehhh...? Start with a Solid Base Variables are the crux of most programming languages, and a good place to start. You have to be able to ask for, handle, save, and recall various tidbits of information. Q: Why would you want to create a variable?   A: Variables are a part of what allows us to control “app”lications—such as your web browser. Everyone reading this informational on a web browser has the ability to create a variable in less than 30 seconds. For instance, most browsers allow you to open th
Read more

I Miss Century Bank (aka, I now have ATM Fees [fees being plural])

-
Recently, Wells Fargo acquired Century Bank. My first withdrawl at a Non-Wells Fargo ATM produced these results on my balance sheet. NON-MEMBER ATM FEE - ATM USAGE = $3.00 (the ATM fee itself) NON-WF ATM BAL INQUIRY FEE = $1.50 (for having the ATM tell me my balance) NON-WELLS FARGO ATM TRANSACTION FEE = $2.50 (for withdrawing $... isn't that double jeopardy, double indemnity, double taxation, or double something or other?) $7.00 to make a withdraw at a Non-Wells Fargo ATM. I so miss Century Bank! They not only didn't charge ATM fees, they reimbursed the any ATM fees charged. Are there any Century Bank-types still out there? * I tried Chase, and after hearing all their fees, I reconsidered, and they wanted $25 to close my account if done within 90 days of opening it. And b/c I decided against it, and wasn't going to do direct deposit, it was gonna be a $6/mo service charge. I had to put it on my calendar to remember to close it after paying them $12 to avoid paying the $25.
Read more

Migrating to Dart's Null Safety

-
Image
Prior to starting on my 4th Flutter mobile app, and because it seems that every plugin now supports it, I decided to give migrating to Dart's null safety a go. Sound null safety is available in Dart 2.12 and Flutter 2. In reading through the migration documentation, it appears the migration tool may pose as much time and effort as migrating by hand. And being I'm in this to learn the code, migrating by hand is the path I've opted for. I'm currently on Step 2.4 of the Migration Guide . Because each of my reminder apps is setup with a similar code base, I also decided to migrate all three apps at the same time. Thus far I've got one app down to 500 critical errors, while the other two are down to 396 and 393. Mobile Apps Critical Warn Info B4-I-Go 500 10 64 Hungry-on_Hand 396 8 56 Xpired To Be 393 10 58 Having started at over 600 critical errors on the B4-I-Go app , the migration thus far has been tedious, but informative and enlightening—to both Dart,
Read more