Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
In this video
We handle the click event of each tile, and just log out to the console the coordinates of the tile that was clicked.
Assignment:
- Create the structure to independently control the css class of each tile.
- Do this by creating 9 different class properties named "tileClassXX" where XX is the coordinates of the tile.
- Bind each property to the css class of the correct tile.
- You should be able to set each of them to a default in the class and have the HTML reflect that class. The classes are "red", "blue", "neutral" and "assassin".
- In the next section we'll modify them in our click event.