About zkkmin

This project took me really long to finish. I spent so much time trying to write a comprehensive blog post on explaining the project. But I realized my goal is to create 100 projects in using Angular framework, not to produce 100 how-to tutorials on Angular.

So this post is rather an update on what I’ve done than a guide post.

In this project, I’ve created a website with a dashboard which is password protected. JWT authentication is implemented using a backend created in Django and hosted in my c9.io instance.

This project has taken more then what I’ve intended. In this project, I am creating a memory game called concentration. There are several versions of concentration game. But I’ve implemented the simplest one.

The Game

There 2 pairs of cards with number 1 to 8.

The cards are laid face down.

Each turn, the player click a pair of cards to flip.

If the pair matches, the player score points.

If the pair is not matched, the pair of cards turns back to face down.

It is a pretty simple project. But it had taken me more time than I should have because I have overcomplicated the overall game design.

Following are the steps I’ve taken to develop the game.

Design game engine

Card object

cardNumber

A string value which will be used to compare between two cards for similarity

image

A URL to image resource of the card

isFaceup

To keep track of the current state of the card

done

To keep track of whether the card is already matched

Deck object

cards

An array of card objects

shuffle( )

Shuffle cards

flipDown()

To put all the cards in the deck face down

Game object

score

current score of the player

move

total number of moves made by player

match

total number of matched pairs

deck

a deck to play

deal( )

call shuffle of the deck

checkScore( )

compare two cards which are facing up for similarity

Provide game functions in service

Create a service called game. Inside the game.service.ts file define two functions as follow:

createDeck(count: number)

Create and return a deck of card with the provided number of cards

getGame(deck: Deck)

Create and return a game object using the provided deck

Components

CardComponent

Uses card object as the data model

Implements flipping on click event

GameBoardComponent

Uses a list of CardComponents to create the game board to play

Design game board page

Create simple and ugly page to stop myself from wasting too much time fiddling with CSS and colors

This project has two components; the main page and audio track player page. On the home page, four images of famous Burmese Monks are shown in card style. When the user clicked on a card, they are brought to a player with the dhamma talks of the selected monk.

Basically, I am trying to learn how to use the Angular router for navigation between different components in a single page application.

Everything went well, except for one thing. I have been spending way too much time messing around with CSS and colors instead of focusing on functionality.

So, from now on I will spend less time on design aspect and more on functional aspects for future projects.

I used to learn a lot of programming languages for fun. When I found someone recommends a language online, I would check out the tutorials and blogs, and learn basic syntax of the language for a few days. But eventually the initial curiosity wore off and I would move on to something new and shiny.

Yes, I am one of those people who do a lot of tutorial and online courses but never create anything. I hate myself for this and decided to do something about it.

So I am starting this experiment to create 100 web applications in Angular.io. They are not necessarily going to be good apps. They may be shitty and useless. I don’t care. What I want to know is can I make this hundred times no matter what?

As a first project, I am creating a time-honored tradition of creating a hello world app. The functional specifications are as followed:

A web page displaying “Hello World!!”

Deployed on a server

A git repo

The official guide from the Angular website has enough information to accomplish the task. For deployment, I use firebase, which provides a super easy deployment and hosting.