Colin Kiama

Last One Flying

Unknown — Mon, 17 Mar 2025 18:30:00 +0000

Last One Flying</h1> 2025-03-17</time> </header>
I created a retro-inspired arcade space shooter game. I made it using the with the Phaser Game Framework</a>.</p>
Play now for free on itch.io</a></p>
Overview Table </caption>

Name</td> Last One Flying</td> </tr>
Client</td> Colin Kiama</td> </tr>
Project Link</td> https://colinkiama.itch.io/last-one-flying</td> </tr>
Project Type</td> Game</td> </tr>
Technologies</td> Phaser.js</a>, Bun</a>, JavaScript </td> </tr>
Categories</td> Action, Arcade </td> </tr> </tbody> </table>
</iframe> </div>
Gameplay#</a> </h2>
In Last One Flying, is bombarded with waves of enemy spaceships charging and shooting at them.</p>
</p>
The main objective of the game is to shot down as many enemies as possible to achieve the highest score.</p>
However, if the player only has three lives. Each time they are hit, they lose one. When all of their lives are lost, it's game over!</p>
</p>
A big inspiration for this game was Asteroids</a>, an arcade shooter game that was release in 1979.</p>
This is where I got the idea to wrap the player around the screen when they travel off-screen.</p>
Art #</a> </h2>
Logo #</a> </h3>
</p>
The game is set in space so I wanted to create a logo that gave off "space vibes". I ended up finding a font called "Nasaulization</a>", inspried by the 1975 NASA logo.</p>
User Interface #</a> </h3>
User interface is mostly fixed with text. I use another space-inspired font called "Usuzi</a>".</p>
All of the menus in the game have a floating, hovering titles which is a metaphor for "floating in space".</p>
</p>
The in-game HUD shows (from left-to-right) HUD shows the pause button, player's health and the player's score</p>
</p>
The health indicator is inspired by Halo: Combat Evolved (2001)</a></p>
</p>
Soundtrack #</a> </h2>
To fit the retro aesthetic of the project, I decided to create the audio for the game using the Furnace</a> music tracker</a>.</p>
For a limited yet melodic soundtack, I opted for the Sega Genesis/Megadrive soundfont.</p> </iframe>
Colin Kiama</a> · Last One Flying - Original Sountrack</a></div>
Responsibilities #</a> </h2>

Game Design - Colin Kiama</li>
UI Design - Colin Kiama</li>
Art - Colin Kiama</li>
Audio - Colin Kiama</li>
Programming - Colin Kiama</li> </ul>
Play Last One Flying now on itch.io!</a></p>

Git Kingdoms - Feel confident about contributing to open-source projects

Unknown — Mon, 13 Nov 2023 19:00:00 +0000

Introduction #</a> </h2>
I’m pretty comfortable with collaborating in open-source projects however, this wasn’t always the case. A couple of years ago, I was intimidated at the idea of contributing to someone else’s project publicly.</p>
I used to think that I was the only one who felt like this but after asking people about this</a>, I’m starting to suspect that many people feel the same way (Not a large enough sample size to verify that this is true across the board).</p>
The downside of people feeling too intimidated to contribute to projects is that we miss out on many contributions that could advance open-source projects forward.</p>
On the flip side, there are bad actors in the open-source community who don’t feel intimidated. These people waste maintainers’ time and slow down projects.</p>
Hopefully, this guide will make maintainers’ lives easier by encouraging higher quality contributions.</p>
Maintainers Are Human Too #</a> </h2>
Maintainers get their roles by:</p>

Being one of the people who initially created/founded the project they are currently taking care of</li>
Being granted the role through the recognition of their contributions</li>
Being hired to be a maintainer</li> </ul>
In all these cases, maintainers don’t owe you anything!</p>
They work on projects in their free time or get paid to maintain projects by their employer. You aren’t the one paying.</p>
Even donating doesn’t entitle you to make demands about the direction of the project (unless otherwise stated).</p>
To make their lives easier, maintainers may add contributions guidelines and issue templates to their projects. This also helps contributors provide more detailed and useful information to maintainers about issues. These templates may also trigger automations too.</p>
Status Quo #</a> </h2>
As you can see, there are plenty of tasks that maintainers do in projects. Some of them are doing these tasks in their free time.</p>
It’s important to respect their time. Their free time could be reduced at any so please try to make their lives easier so that they can make the most out of it.</p>
If you still don’t understand why you should respect maintainers’ rules and guidelines, then consider the following analogy.</p>
Each project under a maintainer/user’s name is part of their kingdom.</strong> Since it’s their kingdom, they decide whether your contributions can be included into their projects so you must follow their rules to be able to contribute to the project.</p>
If you don’t follow their rules, you’ll find that it will take longer for your changes to be reviewed than other contributors who are following the maintainer’s rules and guidelines. Your contributions could possibly be rejected or never reviewed!</p>
If you don’t agree with the way maintainers run a project then there is a solution! Fork the project!</strong></p>
By forking the project, you have a copy of the changes made to the project up until the moment you forked it. You are free to apply your own changes on the existing work done and pull down changes from the upstream project over time.</p>
You are free to manage your fork in whatever way you wish to do so!</p>
Apologise Later#</a> </h2>
We’re human, we’re not perfect. We make mistakes sometimes.</p>
Fortunately, we do understand this. Measures are in place in projects to reduce the impact of mistakes. Maintainers do appreciate the help.</p>
If you have read through the contribution guidelines of a project and can confirm that you’ve followed all the instructions accordingly in your contributions, go ahead and submit your changes.</p>
Any mistakes you’ve made will be addressed in feedback. The positive intent of our contribution is clear.</p>
Conclusion #</a> </h2>
I believe that there is no need to be afraid of contributing to open-source projects. Especially if you have good intentions.</p>
Bad actors don’t aren’t afraid so you should not be afraid either.</p>

My Writing Process

Unknown — Mon, 24 Jul 2023 23:00:00 +0000

Intro #</a> </h2>
Recently, I finished writing a blog series over four months. During that time, I refined the process of me writing and publishing my work.</p>
The changes I made to my writing process over that period have improved the structure of my writing and increased the frequency that I publish each post over time, especially the time between the last three in my "Making Four-In-A-Row" blog series</a>.</p>
In this post, I will reveal the process I use to plan, write and publish at a consistent rate.</p>
The Process #</a> </h2>
First, I plan and write using pen and paper. It is easier for my ideas to flow when writing with a pen. When I type, they come to me much slower. However, I do digitise my work after the first draft since I already have written down the points from my ideas. I prefer making edits to drafts on a computer.</p>
Research #</a> </h3>
I have a topic that I am interested in writing about at this point. I look at multiple resources surrounding it (books, articles, websites, videos etc.) to learn more about the topic and obtain sources to reference from.</p>
Brainstorming #</a> </h3>
I draw a mind map or write down my thoughts related to the topic, allowing me to discover a variety of points about a topic to address in my post.</p>
Overview #</a> </h3>
After brainstorming, I select points that interest me or would be most relevant to potential readers. I write them down in a list.</p>
Outline #</a> </h3>
The outline is where I expand on my main points by including sub-points under my main points, which helps form the overall structure of my post.</p>
Draft #</a> </h3>
In this stage, I use the outline to create a draft.</p>
I fully expand on all points. Main points become sections. Sub-points become subsections or paragraphs under sections. Under sections, there may be a few paragraphs that introduce them.</p>
Also, I make sure to include references to the sources and media to include in the post. I add placeholders where attachments and quotes (including code blocks) may be so that I remember where to add them during digitisation. Once I complete the draft, I may send it to friends and colleagues for feedback.</p>
Redrafts and Digitisation #</a> </h3>
After completing the first draft, I proofread, revealing typos, grammar mistakes and ways to improve the clarity and conciseness of my points.</p>
If I receive feedback after sharing drafts, I will consider them too.</p>
I fix the typos and grammar mistakes and then refine points using the solutions I found during the proofreading process and the feedback I obtained.</p>
I repeat this process of improving my initial draft, proofreading and sending it to others for feedback until I believe it is ready to be published.</p>
Conclusion #</a> </h2>
I hope reading this post has encouraged you to start writing regularly (if you aren’t doing so already).</p>
Personally, writing for the past three months has given me clearer thoughts and helped me improve how I express my opinions about topics.</p>
You share a piece of who you are by stringing words together. You may move on to other things in life, but each piece of writing you create is a marker of who you were then.</p>
Through writing, you’re able to connect with people. You can inspire people to engage in conversations about the topics you</strong> discuss. You’re able to propose ideas that become viral!</p>
Writing is magical.</p>

Making Four-In-A-Row Using JavaScript - Part 9: Play Again

Unknown — Sun, 09 Jul 2023 13:12:00 +0000

Intro #</a> </h2>
In the previous blog post</a>, you added the status area to the game. Players and spectators now clearly understand what's happening at any time during gameplay.</p>
In this post, you'll add the ability to restart the game without having to refresh your browser.</p>
You'll do this by adding a "Play Again" button to the game.</p>
What Is The Play Again Button?#</a> </h2>
Let's take one more look at the mockup of the finished game:</p>
</p>
The "Play Again" button is a button that:</p>

Is only visible when the game ends (a player wins or the game ends in a draw).</li>
Restarts the game and disappears when clicked on.</li> </ul>
Creating The PlayAgainButton class #</a> </h2>
Just like the other components you've added so far, the "Play Again" button is also a game object.</p>
In the `src/components</code> directory, create a file create a file called PlayAgainButton.js</code>.</p>`
`In that file, create a class called PlayAgainButton</code> that extends from GameObject</code>:</p>`
`import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> </span></span> }</span></span></code></pre> You are also going to need some constants specific to this component too. Import PlayAgainButtonConfig</code>:</p>`
import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> import</span> {</span> PlayAgainButtonConfig</span> }</span> from</span> "</span>../constants/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> </span></span> }</span></span></code></pre> Next, add the drawing logic for the button's background. Add renderBackground()</code> to the PlayAgainButton</code> class:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> renderBackground</span>(</span>)</span> {</span></span> const</span> backgroundGradient</span> =</span> this</span>.</span>context</span>.</span>createLinearGradient</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>x</span>,</span> this</span>.</span>y</span> +</span> this</span>.</span>height</span>)</span>;</span></span> backgroundGradient</span>.</span>addColorStop</span>(</span>0</span>,</span> PlayAgainButtonConfig</span>.</span>BACKGROUND_START_COLOR</span>)</span>;</span></span> backgroundGradient</span>.</span>addColorStop</span>(</span>1</span>,</span> PlayAgainButtonConfig</span>.</span>BACKGROUND_END_COLOR</span>)</span>;</span></span> </span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> backgroundGradient</span>;</span></span> this</span>.</span>context</span>.</span>strokeStyle</span> =</span> `</span>${</span>PlayAgainButtonConfig</span>.</span>BORDER_WIDTH</span>}</span>px black</span>`</span>;</span></span> this</span>.</span>context</span>.</span>fillRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span></span> this</span>.</span>context</span>.</span>strokeRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span></span> }</span> </span></span> }</span></span></code></pre> Then, override the clear()</code> method from GameObject</code> to also take into account the button's borders:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> clear</span>(</span>)</span> {</span></span> const</span> clearRectX</span> =</span> this</span>.</span>x</span> -</span> PlayAgainButtonConfig</span>.</span>BORDER_WIDTH</span>;</span></span> const</span> clearRectY</span> =</span> this</span>.</span>y</span> -</span> PlayAgainButtonConfig</span>.</span>BORDER_WIDTH</span>;</span></span> const</span> clearRectWidth</span> =</span> this</span>.</span>width</span> +</span> PlayAgainButtonConfig</span>.</span>BORDER_WIDTH</span> </span> 2</span>;</span></span> const</span> clearRectHeight</span> =</span> this</span>.</span>height</span> +</span> PlayAgainButtonConfig</span>.</span>BORDER_WIDTH</span> </span> 2</span>;</span></span> </span> this</span>.</span>context</span>.</span>clearRect</span>(</span>clearRectX</span>,</span> clearRectY</span>,</span> clearRectWidth</span>,</span> clearRectHeight</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Now to add text to the button, add renderText()</code> to the PlayAgainButton</code> class:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> renderText</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> "</span>white</span>"</span>;</span></span> this</span>.</span>context</span>.</span>font</span> =</span> "</span>16px Arial</span>"</span>;</span></span> this</span>.</span>context</span>.</span>textAlign</span> =</span> "</span>center</span>"</span>;</span></span> this</span>.</span>context</span>.</span>textBaseline</span> =</span> "</span>top</span>"</span>;</span></span> </span> const</span> textMetrics</span> =</span> this</span>.</span>context</span>.</span>measureText</span>(</span>PlayAgainButtonConfig</span>.</span>TEXT</span>)</span>;</span></span> const</span> textHeight</span> =</span> textMetrics</span>.</span>actualBoundingBoxDescent</span>;</span></span> </span> //</span> Calculation ensures that text is displayed at the vertical center of the button</span></span> const</span> finalTextY</span> =</span> this</span>.</span>y</span> +</span> (</span>this</span>.</span>height</span> /</span> 2</span>)</span> -</span> textHeight</span> /</span> 2</span>;</span></span> </span> this</span>.</span>context</span>.</span>fillText</span>(</span>PlayAgainButtonConfig</span>.</span>TEXT</span>,</span> this</span>.</span>x</span> +</span> PlayAgainButtonConfig</span>.</span>WIDTH</span> /</span> 2</span>,</span> finalTextY</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Add the render()</code> method to the PlayAgainButton</code> class:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>renderBackground</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> </span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>renderText</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ..</span></span> }</span></span></code></pre>
Rendering The Button #</a> </h2>
You'll now add the "Play Again" button to the game. First, add the `PlayAgainButton</code> class to src/components/index.js</code> so that it can be imported from there:</p>`
import</span> Board</span> from</span> "</span>./Board.js</span>"</span>;</span></span> import</span> StatusArea</span> from</span> '</span>./StatusArea.js</span>'</span>;</span></span> import</span> PlayAgainButton</span> from</span> "</span>./PlayAgainButton.js</span>"</span>;</span></span> </span> </span> export</span> {</span> Board</span>,</span> StatusArea</span>,</span> PlayAgainButton</span> }</span>;</span></span></code></pre> Now switch to src/FrontEnd.js</code>. Import PlayAgainButton</code> and PlayAgainButtonConfig</code>:</p>
import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span>,</span> StatusAreaConfig</span>,</span> StatusMessages</span>,</span> PlayAgainButtonConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span>,</span> StatusArea</span>,</span> PlayAgainButton</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> }</span></span></code></pre> Add the playAgainButton</code> field to the FrontEnd</code> class:</p>
`export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> board</span>;</span></span> statusArea</span>;</span></span> playAgainButton</span>;</span></span> gameOver</span>;</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> Then add createPlayAgainButton()</code> to the FrontEnd</code> class:</p>`
export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createPlayAgainButton</span>(</span>)</span> {</span></span> let</span> buttonX</span> =</span> this</span>.</span>width</span> /</span> 2</span> -</span> PlayAgainButtonConfig</span>.</span>WIDTH</span> /</span> 2</span>;</span></span> let</span> buttonY</span> =</span> this</span>.</span>height</span> -</span> PlayAgainButtonConfig</span>.</span>MARGIN_BOTTOM</span>;</span></span> let</span> button</span> =</span> new</span> PlayAgainButton</span>(</span>this</span>.</span>context</span>,</span> buttonX</span>,</span> buttonY</span>,</span> PlayAgainButtonConfig</span>.</span>WIDTH</span>,</span> PlayAgainButtonConfig</span>.</span>HEIGHT</span>)</span>;</span></span> button</span>.</span>render</span>(</span>)</span>;</span></span> return</span> button</span>;</span></span> }</span></span> }</span></span></code></pre> In the start()</code> method, set the playAgainButton</code> field to the value returned from createPlayAgainButton()</code>:</p>
export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>statusArea</span> =</span> this</span>.</span>createStatusArea</span>(</span>)</span>;</span></span> this</span>.</span>board</span> =</span> this</span>.</span>createBoard</span>(</span>)</span>;</span></span> this</span>.</span>playAgainButton</span> =</span> this</span>.</span>createPlayAgainButton</span>(</span>)</span>;</span></span> </span> document</span>.</span>body</span>.</span>addEventListener</span>(</span>'</span>click</span>'</span>,</span> (</span>clickEvent</span>)</span> =></span> {</span></span> this</span>.</span>board</span>.</span>handleClick</span>(</span>clickEvent</span>)</span>;</span></span> }</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> If you check the game in your browser with a server running, you'll see the "Play Again" button on the canvas:</p> </p> It's great that the button shows up but nothing happens when you click on it. It's not supposed to show up at this stage of the game either 😂️. You'll fix these problems next.</p>
Handling Input #</a> </h2>
The "Play Again" button is only supposed to be visible when the game ends. Also, the `PlayAgainButton</code> class handles clicks similarly to the Board</code> class.</p>`
`To get started with this, go back to src/components/PlayAgainButton.js</code>. Add the buttonClicked</code> and isEnabled</code> fields to the PlayAgainButton</code> class:</p>`
`export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> buttonClicked</span>;</span></span> isEnabled</span>;</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> Then add a constructor to the PlayAgainButton</code> class. It will call the parent constructor and then set the isEnabled</code> field to false</code>:</p>`
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> constructor</span>(</span>context</span>,</span> x</span>,</span> y</span>,</span> width</span>,</span> height</span>)</span> {</span></span> super</span>(</span>context</span>,</span> x</span>,</span> y</span>,</span> width</span>,</span> height</span>)</span>;</span></span> this</span>.</span>isEnabled</span> =</span> false</span>;</span></span> }</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> Update render()</code> so that it sets the isEnabled</code> field to true</code> at the end:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> .. </span></span> </span> render</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>renderBackground</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> </span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>renderText</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> </span> this</span>.</span>isEnabled</span> =</span> true</span>;</span></span> }</span></span> }</span></span></code></pre> To set the logic to run when the button is clicked, add setClickHandler()</code> to the PlayAgainButton</code> class:</p>
`export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> setClickHandler</span>(</span>handler</span>)</span> {</span></span> this</span>.</span>buttonClicked</span> =</span> handler</span>;</span></span> }</span></span> }</span></span></code></pre> Add handleClick()</code> to process the click events that will be passed in:</p>`
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> handleClick</span>(</span>clickEvent</span>)</span> {</span></span> if</span> (</span>!</span>this</span>.</span>isEnabled</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> const</span> wasButtonClicked</span> =</span> clickEvent</span>.</span>offsetX</span> >=</span> this</span>.</span>x</span></span> &&</span> clickEvent</span>.</span>offsetX</span> <=</span> this</span>.</span>x</span> +</span> this</span>.</span>width</span></span> &&</span> clickEvent</span>.</span>offsetY</span> >=</span> this</span>.</span>y</span></span> &&</span> clickEvent</span>.</span>offsetY</span> <=</span> this</span>.</span>y</span> +</span> this</span>.</span>height</span>;</span></span> </span> if</span> (</span>!</span>wasButtonClicked</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> this</span>.</span>buttonClicked</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> It checks if the location where a player has clicked was actually within the bounds of the button.</p> There's one more thing to add to the PlayAgainButton</code> class now. It's the hide()</code> method:</p>
export</span> default</span> class</span> PlayAgainButton</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> hide</span>(</span>)</span> {</span></span> this</span>.</span>isEnabled</span> =</span> false</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> There are quite a few things you've added to the PlayAgainButton</code> class. Similar to when you handled clicks on the board, it will all make sense after making use of these changes in the FrontEnd</code> class.</p> In the FrontEnd</code> class, update the start()</code> method so that the click event handler callback also calls handleClick()</code> on the playAgainButton</code> field with the click event passed in:</p>
export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> .. </span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>statusArea</span> =</span> this</span>.</span>createStatusArea</span>(</span>)</span>;</span></span> this</span>.</span>board</span> =</span> this</span>.</span>createBoard</span>(</span>)</span>;</span></span> this</span>.</span>playAgainButton</span> =</span> this</span>.</span>createPlayAgainButton</span>(</span>)</span>;</span></span> </span> document</span>.</span>body</span>.</span>addEventListener</span>(</span>'</span>click</span>'</span>,</span> (</span>clickEvent</span>)</span> =></span> {</span></span> this</span>.</span>board</span>.</span>handleClick</span>(</span>clickEvent</span>)</span>;</span></span> this</span>.</span>playAgainButton</span>.</span>handleClick</span>(</span>clickEvent</span>)</span>;</span></span> }</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Then in processMoveResult()</code>, call render()</code> on the playAgainButton</code> field if the game is over:</p>
export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> .. </span></span> processMoveResult</span>(</span>moveResult</span>)</span> {</span></span> if</span> (</span>this</span>.</span>gameOver</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> const</span> indicatorColor</span> =</span> this</span>.</span>determineIndicatorColor</span>(</span>moveResult</span>)</span>;</span></span> </span> this</span>.</span>statusArea</span>.</span>render</span>(</span>indicatorColor</span>,</span> this</span>.</span>pickStatusMessage</span>(</span>moveResult</span>.</span>status</span>.</span>value</span>)</span>)</span></span> this</span>.</span>board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> </span> </span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>)</span> {</span></span> this</span>.</span>gameOver</span> =</span> true</span>;</span></span> }</span></span> </span> if</span> (</span>this</span>.</span>gameOver</span>)</span> {</span></span> this</span>.</span>playAgainButton</span>.</span>render</span>(</span>)</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> Also, import FourInARowGame</code>:</p> import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span>,</span> StatusAreaConfig</span>,</span> StatusMessages</span>,</span> PlayAgainButtonConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span>,</span> StatusArea</span>,</span> PlayAgainButton</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span>,</span> FourInARowGame</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> </span> </span> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> }</span></span></code></pre> Then, add a reset()</code> method to the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> reset</span>(</span>)</span> {</span></span> this</span>.</span>game</span> =</span> new</span> FourInARowGame</span>(</span>)</span>;</span></span> this</span>.</span>gameOver</span> =</span> false</span>;</span></span> </span> this</span>.</span>playAgainButton</span>.</span>hide</span>(</span>)</span>;</span></span> this</span>.</span>statusArea</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentTurn</span>,</span> this</span>.</span>pickStatusMessage</span>(</span>this</span>.</span>game</span>.</span>status</span>)</span>)</span>;</span></span> this</span>.</span>board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> This is the main method that restarts the game.</p> Lastly, in createPlayAgainButton()</code>, remove the call to render()</code> on button</code> and call setClickHandler()</code> on button</code>. Call reset()</code> in the callback:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createPlayAgainButton</span>(</span>)</span> {</span></span> let</span> buttonX</span> =</span> this</span>.</span>width</span> /</span> 2</span> -</span> PlayAgainButtonConfig</span>.</span>WIDTH</span> /</span> 2</span>;</span></span> let</span> buttonY</span> =</span> this</span>.</span>height</span> -</span> PlayAgainButtonConfig</span>.</span>MARGIN_BOTTOM</span>;</span></span> let</span> button</span> =</span> new</span> PlayAgainButton</span>(</span>this</span>.</span>context</span>,</span> buttonX</span>,</span> buttonY</span>,</span> PlayAgainButtonConfig</span>.</span>WIDTH</span>,</span> PlayAgainButtonConfig</span>.</span>HEIGHT</span>)</span>;</span></span> button</span>.</span>setClickHandler</span>(</span>(</span>)</span> =></span> this</span>.</span>reset</span>(</span>)</span>)</span>;</span></span> return</span> button</span>;</span></span> }</span></span> }</span></span></code></pre> Now if you check the game in your browser with a server running, you'll have a fully playable four-in-a-row game that you can replay after completing a game.</p> Conclusion#</a> </h2> Congratulations! You've finished the game. Feel free to modify it however you like. Maybe change how some of the components look? You could add animations too!</p> The source code of the game is available here: https://github.com/colinkiama/four-in-a-row-walkthrough</a></p>
Making Four-In-A-Row Using JavaScript - Part 8: Status Updates Unknown — Sat, 08 Jul 2023 11:30:00 +0000 Intro#</a> </h2> Welcome back! In the previous blog post</a>, you drew the game board and made the game playable by clicking on the board columns. In this post, you'll be adding the status area component to your four-in-a-row game.</p> Breaking Down The Status Area Component#</a> </h2> Let's refer back to the mockup of the finished game:</p> </p> The status area is at the top. It's broken down into 2 parts:</p> Player Turn Indicator: Indicates the current player's turn by showing the associated player's colour.</li> Status Message: Describes what is happening at each stage of the game (whose turn is it? Which player won? etc.)</li> </ul> Together they inform players and spectators about what is happening in the game.</p> Creating The StatusArea Class#</a> </h2> To get started, create a file under the src/components</code> directory called StatusArea.js</code>.</p> In the file that you've just created, create an empty class called StatusArea</code>. This class will inherit GameObject</code>:</p> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> StatusArea</span> extends</span> </span>GameObject</span> {</span></span> </span></span> }</span></span></code></pre>Player Turn Indicator#</a> </h2> The player turn indicator is a small circle that appears in the status area. It may have either of these states:</p> Yellow - Has a yellow colour when it's the yellow player's turn or the yellow player has won the game.</li> Red - Has a red colour when it's the red player's turn or the red player has won the game.</li> Invisible - The indicator is not visible when the game ends in a draw.</li> </ul> Now that you know how the player turn indicator behaves, the next step for you is to add it to your game.</p> Start Drawing The Player Turn Indicator#</a> </h3> To start off, import the Constants</code> object from the gameLogic</code> directory as well as StatusAreaConfig</code> and TokenColor</code> from the constants</code> directory:</p> import</span> {</span> Constants</span> }</span> from</span> "</span>../gameLogic/index.js</span>"</span>;</span></span> import</span> {</span> StatusAreaConfig</span>,</span> TokenColor</span> }</span> from</span> "</span>../constants/index.js</span>"</span>;</span></span> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> StatusArea</span> extends</span> </span>GameObject</span> {</span></span> </span></span> }</span></span></code></pre> Then, add renderPlayerTurnIndicator()</code> to the StatusArea</code> class:</p> export</span> default</span> class</span> StatusArea</span> extends</span> </span>GameObject</span> {</span></span> renderPlayerTurnIndicator</span>(</span>indicatorColor</span>)</span> {</span></span> let</span> indicatorColorValue</span>;</span></span> </span> switch</span> (</span>indicatorColor</span>)</span> {</span></span> case</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>:</span></span> indicatorColorValue</span> =</span> TokenColor</span>.</span>YELLOW</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>PlayerColor</span>.</span>RED</span>:</span></span> indicatorColorValue</span> =</span> TokenColor</span>.</span>RED</span>;</span></span> break</span>;</span></span> default</span>:</span></span> //</span> Unknown color. Do not attempt to render player turn indicator.</span></span> return</span>;</span></span> }</span></span> </span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> indicatorColorValue</span>;</span></span> const</span> indicatorY</span> =</span> this</span>.</span>y</span> +</span> StatusAreaConfig</span>.</span>INDICATOR_WIDTH</span> /</span> 2</span> +</span> StatusAreaConfig</span>.</span>PADDING_TOP</span>;</span></span> this</span>.</span>context</span>.</span>beginPath</span>(</span>)</span>;</span></span> </span> //</span> Draws a circle using CanvasDrawingContext2D.arc(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc</span></span> this</span>.</span>context</span>.</span>arc</span>(</span>this</span>.</span>width</span> /</span> 2</span>,</span> indicatorY</span>,</span> StatusAreaConfig</span>.</span>INDICATOR_WIDTH</span> /</span> 2</span>,</span> 0</span>,</span> Math</span>.</span>PI</span> </span> 2</span>)</span>;</span></span> </span> this</span>.</span>context</span>.</span>closePath</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>fill</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Next, add render()</code> to the StatusArea</code> class:</p> export</span> default</span> class</span> StatusArea</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>indicatorColor</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> </span> if</span> (</span>indicatorColor</span> !==</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>)</span> {</span></span> this</span>.</span>renderPlayerTurnIndicator</span>(</span>indicatorColor</span>)</span>;</span></span> }</span></span> </span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> Before continuing any further, you need to expose the StatusArea</code> class as a module through the src/components/index.js</code>:</p> import</span> Board</span> from</span> "</span>./Board.js</span>"</span>;</span></span> import</span> StatusArea</span> from</span> '</span>./StatusArea.js</span>'</span>;</span></span> </span> </span> export</span> {</span> Board</span>,</span> StatusArea</span> }</span>;</span></span></code></pre> Now what you've implemented the rendering logic of the player turn indicator and exposed the StatusArea</code> class through the components</code> directory, you are now ready to start rendering the player turn indicator.</p> Render Player Turn Indicator#</a> </h3> In src/FrontEnd.js</code> import StatusAreaConfig</code> and StatusArea</code>:</p> import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span>,</span> StatusAreaConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span>,</span> StatusArea</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> }</span></span></code></pre> Next, add the statusArea</code> field to the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> board</span>;</span></span> statusArea</span>;</span></span> gameOver</span>;</span></span> </span> //</span> ..</span></span> </span> }</span></span></code></pre> Add createStatusArea()</code> to the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createStatusArea</span>(</span>)</span> {</span></span> let</span> statusArea</span> =</span> new</span> StatusArea</span>(</span>this</span>.</span>context</span>,</span> 0</span>,</span> 0</span>,</span> this</span>.</span>width</span>,</span> StatusAreaConfig</span>.</span>HEIGHT</span>)</span>;</span></span> statusArea</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentTurn</span>)</span>;</span></span> return</span> statusArea</span>;</span></span> }</span></span> }</span></span></code></pre> In start()</code>, set statusArea</code> to a new status area returned from createStatusArea()</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>statusArea</span> =</span> this</span>.</span>createStatusArea</span>(</span>)</span>;</span></span> this</span>.</span>board</span> =</span> this</span>.</span>createBoard</span>(</span>)</span>;</span></span> </span> document</span>.</span>body</span>.</span>addEventListener</span>(</span>'</span>click</span>'</span>,</span> (</span>clickEvent</span>)</span> =></span> {</span></span> this</span>.</span>board</span>.</span>handleClick</span>(</span>clickEvent</span>)</span>;</span></span> }</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Add determineIndicatorColor()</code> to the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> determineIndicatorColor</span>(</span>moveResult</span>)</span> {</span></span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>)</span> {</span></span> return</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span></span> }</span> else</span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span>)</span> {</span></span> return</span> moveResult</span>.</span>winner</span>;</span></span> }</span> else</span> {</span></span> return</span> this</span>.</span>game</span>.</span>currentTurn</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> Then, update processMoveResult()</code> so that it also determines the next player's turn and passes in the colour of the next player to a call to the render()</code> method on statusArea</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span></span> processMoveResult</span>(</span>moveResult</span>)</span> {</span></span> if</span> (</span>this</span>.</span>gameOver</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> const</span> indicatorColor</span> =</span> this</span>.</span>determineIndicatorColor</span>(</span>moveResult</span>)</span>;</span></span> </span> this</span>.</span>statusArea</span>.</span>render</span>(</span>indicatorColor</span>)</span>;</span></span> this</span>.</span>board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> </span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>)</span> {</span></span> this</span>.</span>gameOver</span> =</span> true</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> Lastly, in createBoard()</code>, update the call to the Board</code> constructor so that the board when the game board is rendered, it's shifted down below the status area:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createBoard</span>(</span>)</span> {</span></span> let</span> board</span> =</span> new</span> Board</span>(</span>this</span>.</span>context</span>,</span> BoardConfig</span>.</span>MARGIN_LEFT</span>,</span> this</span>.</span>statusArea</span>.</span>height</span> +</span> BoardConfig</span>.</span>MARGIN_TOP</span>,</span> BoardConfig</span>.</span>WIDTH</span>,</span> BoardConfig</span>.</span>HEIGHT</span>)</span>;</span></span> board</span>.</span>setColumnSelectionHandler</span>(</span>(</span>columnIndex</span>)</span> =></span> this</span>.</span>playMove</span>(</span>columnIndex</span>)</span>)</span>;</span></span> board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> return</span> board</span>;</span></span> }</span></span> }</span></span></code></pre> If you check the game in your browser while a server is running, you'll see the indicator colour being rendered.</p> It'll update based on the current state of the game.</p> </p> Status Messages#</a> </h2> The status message is the text portion of the status area.</p> It is used to:</p> Display the current player's turn</li> Reveal which player has won a game</li> Shows when a game ends in a draw</li> </ul> Start Implementing Status Messages#</a> </h3> Add the renderMessage()</code> method to the StatusArea</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> renderMessage</span>(</span>message</span>)</span> {</span></span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> "</span>white</span>"</span>;</span></span> this</span>.</span>context</span>.</span>font</span> =</span> "</span>bold 16px Arial</span>"</span>;</span></span> this</span>.</span>context</span>.</span>textBaseline</span> =</span> "</span>top</span>"</span>;</span></span> this</span>.</span>context</span>.</span>textAlign</span> =</span> "</span>center</span>"</span>;</span> //</span> Default value had vertical alignment issues. "center" fixes those in this case</span></span> const</span> messageY</span> =</span> this</span>.</span>y</span> +</span> StatusAreaConfig</span>.</span>PADDING_TOP</span> +</span> StatusAreaConfig</span>.</span>INNER_MARGIN</span>;</span></span> this</span>.</span>context</span>.</span>fillText</span>(</span>message</span>,</span> this</span>.</span>width</span> /</span> 2</span>,</span> messageY</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Proceed by adding the message</code> parameter to the render()</code> method then calling renderMessage()</code> in render()</code>:</p> export</span> default</span> class</span> StatusArea</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>indicatorColor</span>,</span> message</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> </span> if</span> (</span>indicatorColor</span> !==</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>)</span> {</span></span> this</span>.</span>renderPlayerTurnIndicator</span>(</span>indicatorColor</span>)</span>;</span></span> }</span></span> </span> this</span>.</span>renderMessage</span>(</span>message</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ..</span></span></code></pre> Once you've done that, switch back to the src/FrontEnd.js</code> file. Import StatusMessages</code> from the constants</code> directory:</p> import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span>,</span> StatusAreaConfig</span>,</span> StatusMessages</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span></code></pre> Now, add logic that determines which status message to display depending on the current state of the game. Add pickStatusMessage()</code> to the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> pickStatusMessage</span>(</span>status</span>)</span> {</span></span> switch</span> (</span>status</span>)</span> {</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>:</span></span> //</span> The game is on the the next turn but the somebody has won from the previous turn. The winning player is the opposite of the player who currently has a turn.</span></span> return</span> this</span>.</span>game</span>.</span>currentTurn</span> ===</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span> ?</span> StatusMessages</span>.</span>RED_WIN</span> :</span> StatusMessages</span>.</span>YELLOW_WIN</span>;</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>DRAW</span>:</span></span> return</span> StatusMessages</span>.</span>DRAW</span>;</span></span> }</span></span> </span> //</span> At this point, we can assume that the game is either has just started </span></span> //</span> or is still in progress.</span></span> return</span> this</span>.</span>game</span>.</span>currentTurn</span> ===</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span> ?</span> StatusMessages</span>.</span>YELLOW_TURN</span> :</span> StatusMessages</span>.</span>RED_TURN</span>;</span></span> }</span></span> }</span></span></code></pre> Then in the processMoveResult()</code> method, update the render()</code> call on statusArea</code> so that it has an additional argument passed in. This argument is a method call to pickStatusMessage()</code> with the status value of moveResult</code> passed in:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> processMoveResult</span>(</span>moveResult</span>)</span> {</span></span> if</span> (</span>this</span>.</span>gameOver</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> const</span> indicatorColor</span> =</span> this</span>.</span>determineIndicatorColor</span>(</span>moveResult</span>)</span>;</span></span> </span> this</span>.</span>statusArea</span>.</span>render</span>(</span>indicatorColor</span>,</span> this</span>.</span>pickStatusMessage</span>(</span>moveResult</span>.</span>status</span>.</span>value</span>)</span>)</span></span> this</span>.</span>board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> </span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>)</span> {</span></span> this</span>.</span>gameOver</span> =</span> true</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> Lastly, repeat this same change in createStatusArea()</code> except that the argument passed in to pickStatusMessage()</code> will be the game's current status:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createStatusArea</span>(</span>)</span> {</span></span> let</span> statusArea</span> =</span> new</span> StatusArea</span>(</span>this</span>.</span>context</span>,</span> 0</span>,</span> 0</span>,</span> this</span>.</span>width</span>,</span> StatusAreaConfig</span>.</span>HEIGHT</span>)</span>;</span></span> statusArea</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentTurn</span>,</span> this</span>.</span>pickStatusMessage</span>(</span>this</span>.</span>game</span>.</span>status</span>)</span>)</span>;</span></span> return</span> statusArea</span>;</span></span> }</span></span> }</span></span></code></pre> If you check the game in your browser with a server running, you'll see that the status area will always reflect the current status of the game:</p> The player turn indicator will appear in states regarding a specific player</li> The status message will describe the current state of the game</li> </ul> </p> Conclusion#</a> </h2> Congratulations on getting this far! It's now clear to understand what is happening during gameplay.</p> Unfortunately, when the game ends, there's no way to start a new game without refreshing the page.</p> In the next (and final) part of this tutorial, you'll solve this problem by adding the final component to the game, the play again button.</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 7: Drawing The Board Unknown — Thu, 29 Jun 2023 18:58:00 +0000 Intro#</a> </h2> Welcome back! In the previous blog post</a>, you set up the canvas and created drawings on it. Now in this post, you'll draw the game board.</p> Game Objects#</a> </h2> What Is A Game Object?#</a> </h3> The game features multiple drawings on the canvas. These distinct drawings take up space both horizontally and vertically. They may be made up of other smaller related drawings. These distinct drawings will be referred to as "game objects".</p> Why Do We Need Game Objects?#</a> </h3> Looking back at the breakdown of the game's UI. Three components can be identified:</p> Status Area</li> Game Board</li> Play Again Button</li> </ol> All of these components share the following things in common:</p> They have position</li> They have dimensions</li> All drawn on the canvas</li> </ul> When referring to these components in a generalised way, we'll be considering these common traits and properties only. In the context of this game, the general name for these components will be "Game Object". The components listed above are all game objects</strong>.</p> To represent this relationship in code, you'll create a GameObject</code> class. The component classes will inherit from the GameObject</code> class. This will avoid you from rewriting the common logic and properties shared across all the components.</p> Creating The GameObject Class#</a> </h3> Unlike with the HTML elements, you will have to implement the size and positioning of game objects yourself. You'll also have to draw the game objects yourself too.</p> Create a directory under the src</code> directory called components</code>.</p> In the src/components</code> directory, create a new file called GameObject.js</code>.</p> In src/components/GameObject.js</code>, add the following to the file:</p> export</span> default</span> class</span> GameObject</span> {</span></span> x</span>;</span></span> y</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span> //</span> CanvasRenderingContext2D</span></span> </span> constructor</span>(</span>context</span>,</span> x</span>,</span> y</span>,</span> width</span>,</span> height</span>)</span> {</span></span> this</span>.</span>context</span> =</span> context</span>;</span></span> this</span>.</span>x</span> =</span> x</span>;</span></span> this</span>.</span>y</span> =</span> y</span>;</span></span> this</span>.</span>width</span> =</span> width</span>;</span></span> this</span>.</span>height</span> =</span> height</span>;</span></span> }</span></span> </span> clear</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>clearRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span></span> }</span></span> }</span></span></code></pre>Inheriting The GameObject Class#</a> </h3> Now that you've created the GameObject</code> class, in the src/components</code> directory, create a new file named Board.js</code>. After, in that file, create a Board</code> class that inherits from the GameObject</code> class:</p> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> </span> }</span></span></code></pre> To test out whether the GameObject</code> is being inherited by Board</code> correctly, you'll recreate the last post's white rectangle drawing using the Board</code> class.</p> Add a method called render()</code> to the Board</code> class that will render a white rectangle and then restore the state of the context object:</p> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> "</span>white</span>"</span>;</span></span> this</span>.</span>context</span>.</span>fillRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Notice how the x</code>, y</code>, width</code>, and height</code> fields were not defined in Board</code>. This is because they were inherited from GameObject</code>.</p> Create a new file in src/components</code> called index.js</code> and fill it with the following contents:</p> import</span> Board</span> from</span> "</span>./Board.js</span>"</span>;</span></span> </span> export</span> {</span> Board</span> }</span>;</span></span></code></pre> This code block above exports the Board</code> class as a module, making it available to import from src/components/index.js</code>. There will be more components in the future. This change will simplify the code required to import multiple components over time.</p> Return to the FrontEnd</code> class. Import the Board</code> class from src/components/index.js</code>:</p> import</span> {</span> FrontEndConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span></code></pre> Add a field called board</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> board</span>;</span></span> </span></span> //</span> ...</span></span> }</span></span></code></pre> Rewrite the start()</code> method in the Board</code> class:</p> Set the board</code> field to a new instance of the Board</code> class</li> Call the render()</code> method on board</code></li> </ul> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span></span> start</span>(</span>)</span> {</span></span> this</span>.</span>board</span> =</span> new</span> Board</span>(</span>this</span>.</span>context</span>,</span> 20</span>,</span> 20</span>,</span> 50</span>,</span> 100</span>)</span>;</span></span> this</span>.</span>board</span>.</span>render</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Notice that the Board</code> uses the same constructor defined in GameObject</code>.</p> If you check the game with your web server, you'll see the same white rectangle drawn on the canvas as the one you drew in the previous blog post.</p> </p> Drawing The Game Board#</a> </h2> Awesome! You've figured out how to create your game object and draw it on the canvas. Now it's time to draw the actual game board.</p> Board Background#</a> </h3> In src/components/Board.js</code>, import BoardConfig</code> from the constants file:</p> import</span> GameObject</span> from</span> '</span>./GameObject.js</span>'</span>;</span></span> import</span> {</span> BoardConfig</span> }</span> from</span> '</span>../constants/index.js</span>'</span>;</span></span></code></pre> Then create a new method in the Board</code> class called renderBoardBackground()</code>.</p> After, perform the following steps:</p> Move the code that draws the white rectangle into the renderBoardBackground()</code> method</li> Replace the fill style with the BACKGROUND_COLOR</code> field defined in the imported BoardConfig</code> object.</li> </ul> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span> import</span> {</span> BoardConfig</span> }</span> from</span> "</span>../constants/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> this</span>.</span>renderBoardBackground</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> </span> renderBoardBackground</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> BoardConfig</span>.</span>BACKGROUND_COLOR</span>;</span></span> this</span>.</span>context</span>.</span>fillRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span> </span></span> }</span></span> }</span></span></code></pre> In the FrontEnd</code> class, import BoardConfig</code> from the constants</code> file:</p> import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span></code></pre> Add a method called createBoard()</code> then do the following:</p> In createBoard()</code>, create a local variable that stores a new instance of the Board</code> class, calls the render()</code> method on it then returns it.</li> Rewrite the start()</code> method so that the board</code> field is set to the result returned from calling the createBoard()</code> method</li> </ul> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>board</span> =</span> this</span>.</span>createBoard</span>(</span>)</span>;</span></span> }</span></span> </span> createBoard</span>(</span>)</span> {</span></span> let</span> board</span> =</span> new</span> Board</span>(</span>this</span>.</span>context</span>,</span> BoardConfig</span>.</span>MARGIN_LEFT</span>,</span> BoardConfig</span>.</span>MARGIN_TOP</span>,</span> BoardConfig</span>.</span>WIDTH</span>,</span> BoardConfig</span>.</span>HEIGHT</span>)</span>;</span></span> board</span>.</span>render</span>(</span>)</span>;</span></span> return</span> board</span>;</span></span> }</span></span> }</span></span></code></pre> The board is now created with the positioning and dimensions from mockups of the game.</p> Now, with a web server running, if you check your game in your browser, you'll see that a blue rectangle has been rendered on the canvas.</p> </p> Board Slots#</a> </h3> Now you're ready to draw the slots on the board.</p> Add a parameter called nextBoard</code> to the Board</code> class' render()</code> method:</p> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> render</span>(</span>nextBoard</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> this</span>.</span>renderBoardBackground</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ..</span></span></code></pre> nextBoard</code> will contain the state of the board. It's an array of arrays of numbers representing the tokens in each board position. These will be used to render the board tokens in the slots.</p> Next, add a method called renderSlots()</code> to the Board</code> class. To keep the upcoming drawing commands simple, you'll modify the point of origin where you start drawing the slots. This way, you won't have to consider padding in later drawing commands in renderSlots()</code>. To do this, you'll use the CanvasRenderingContext2D.translate()</code></a> method:</p> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span></span> renderSlots</span>(</span>nextBoard</span>)</span> {</span></span> this</span>.</span>context</span>.</span>translate</span>(</span>this</span>.</span>x</span> +</span> BoardConfig</span>.</span>HORIZONTAL_PADDING</span>,</span> this</span>.</span>y</span> +</span> BoardConfig</span>.</span>VERTICAL_PADDING</span>)</span>;</span></span> }</span></span></code></pre> Start drawing the slots.</p> Set the stroke colour and line width:</p> this</span>.</span>context</span>.</span>strokeStyle</span> =</span> BoardConfig</span>.</span>SLOT_OUTLINE_COLOR</span>;</span></span> this</span>.</span>context</span>.</span>lineWidth</span> =</span> 2</span>;</span></span></code></pre> Store the radius of a slot in a local variable called slotRadius</code>:</p> const</span> slotRadius</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> /</span> 2</span>;</span></span></code></pre> Update import statements in src/components/Board.js</code> to include TokenColor</code> from the constants</code> directory and Constants</code> from the gameLogic</code> directory:</p> import</span> {</span> BoardConfig</span>,</span> TokenColor</span> }</span> from</span> "</span>../constants/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span> }</span> from</span> "</span>../gameLogic/index.js</span>"</span>;</span></span> import</span> GameObject</span> from</span> "</span>./GameObject.js</span>"</span>;</span></span></code></pre> Loop through each slot on the board and:</p> Calculate the positioning:</li> Obtain the token colour to render the slot with</li> </ul> for</span> (</span>let</span> rowIndex</span> =</span> 0</span>;</span> rowIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>;</span> rowIndex</span>++</span>)</span> {</span></span> for</span> (</span>let</span> columnIndex</span> =</span> 0</span>;</span> columnIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span> columnIndex</span>++</span>)</span> {</span></span> //</span> Note slot is a circle. (x, y) coordinates are the circle's centre.</span></span> const</span> totalSlotMarginsX</span> =</span> BoardConfig</span>.</span>SLOT_MARGIN</span> </span> columnIndex</span>;</span></span> const</span> totalPreviousSlotWidthsX</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> </span> columnIndex</span>;</span></span> const</span> slotX</span> =</span> totalSlotMarginsX</span> +</span> totalPreviousSlotWidthsX</span> +</span> slotRadius</span>;</span></span> </span> const</span> totalSlotMarginsY</span> =</span> BoardConfig</span>.</span>SLOT_MARGIN</span> </span> rowIndex</span>;</span></span> const</span> totalPreviousSlotWidthsY</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> </span> rowIndex</span>;</span></span> const</span> slotY</span> =</span> totalSlotMarginsY</span> +</span> totalPreviousSlotWidthsY</span> +</span> slotRadius</span>;</span></span> </span> const</span> tokenColorValue</span> =</span> nextBoard</span>[</span>rowIndex</span>]</span>[</span>columnIndex</span>]</span>;</span></span> </span> let</span> tokenColor</span>;</span></span> </span> switch</span> (</span>tokenColorValue</span>)</span> {</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>YELLOW</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>YELLOW</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>RED</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>RED</span>;</span></span> break</span>;</span></span> default</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>NONE</span></span> break</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> You now have the values you need to render each slot. To do so, add a method called renderSlot()</code> to the Board</code> class:</p> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> renderSlot</span>(</span>x</span>,</span> y</span>,</span> radius</span>,</span> color</span>)</span> {</span></span> this</span>.</span>context</span>.</span>beginPath</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>arc</span>(</span>x</span>,</span> y</span>,</span> radius</span>,</span> 0</span>,</span> Math</span>.</span>PI</span> </span> 2</span>)</span>;</span></span> this</span>.</span>context</span>.</span>closePath</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>stroke</span>(</span>)</span>;</span></span> </span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> color</span>;</span></span> this</span>.</span>context</span>.</span>beginPath</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>arc</span>(</span>x</span>,</span> y</span>,</span> radius</span> -</span> 1</span>,</span> 0</span>,</span> Math</span>.</span>PI</span> </span> 2</span>)</span>;</span></span> this</span>.</span>context</span>.</span>closePath</span>(</span>)</span>;</span></span> this</span>.</span>context</span>.</span>fill</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Now, call renderSlot()</code> right after the switch</code> block in renderSlots()</code>:</p> renderSlots</span>(</span>nextBoard</span>)</span> {</span></span> this</span>.</span>context</span>.</span>translate</span>(</span>this</span>.</span>x</span> +</span> BoardConfig</span>.</span>HORIZONTAL_PADDING</span>,</span> this</span>.</span>y</span> +</span> BoardConfig</span>.</span>VERTICAL_PADDING</span>)</span>;</span></span> this</span>.</span>context</span>.</span>strokeStyle</span> =</span> BoardConfig</span>.</span>SLOT_OUTLINE_COLOR</span>;</span></span> this</span>.</span>context</span>.</span>lineWidth</span> =</span> 2</span>;</span></span> </span> const</span> slotRadius</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> /</span> 2</span>;</span></span> </span> for</span> (</span>let</span> rowIndex</span> =</span> 0</span>;</span> rowIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>;</span> rowIndex</span>++</span>)</span> {</span></span> for</span> (</span>let</span> columnIndex</span> =</span> 0</span>;</span> columnIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span> columnIndex</span>++</span>)</span> {</span></span> //</span> Note slot is a circle. (x, y) coordinates are the circle's centre.</span></span> const</span> totalSlotMarginsX</span> =</span> BoardConfig</span>.</span>SLOT_MARGIN</span> </span> columnIndex</span>;</span></span> const</span> totalPreviousSlotWidthsX</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> </span> columnIndex</span>;</span></span> const</span> slotX</span> =</span> totalSlotMarginsX</span> +</span> totalPreviousSlotWidthsX</span> +</span> slotRadius</span>;</span></span> </span> const</span> totalSlotMarginsY</span> =</span> BoardConfig</span>.</span>SLOT_MARGIN</span> </span> rowIndex</span>;</span></span> const</span> totalPreviousSlotWidthsY</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> </span> rowIndex</span>;</span></span> const</span> slotY</span> =</span> totalSlotMarginsY</span> +</span> totalPreviousSlotWidthsY</span> +</span> slotRadius</span>;</span></span> </span> const</span> tokenColorValue</span> =</span> nextBoard</span>[</span>rowIndex</span>]</span>[</span>columnIndex</span>]</span>;</span></span> </span> let</span> tokenColor</span>;</span></span> </span> switch</span> (</span>tokenColorValue</span>)</span> {</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>YELLOW</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>YELLOW</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>RED</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>RED</span>;</span></span> break</span>;</span></span> default</span>:</span></span> tokenColor</span> =</span> TokenColor</span>.</span>NONE</span></span> break</span>;</span></span> }</span></span> </span> this</span>.</span>renderSlot</span>(</span>slotX</span>,</span> slotY</span>,</span> slotRadius</span>,</span> tokenColor</span>)</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> Add a call to renderSlots()</code> in the render()</code> method:</p> render</span>(</span>nextBoard</span>)</span> {</span></span> this</span>.</span>context</span>.</span>save</span>(</span>)</span>;</span></span> this</span>.</span>clear</span>(</span>)</span>;</span></span> this</span>.</span>renderBoardBackground</span>(</span>)</span>;</span></span> this</span>.</span>renderSlots</span>(</span>nextBoard</span>)</span>;</span></span> this</span>.</span>context</span>.</span>restore</span>(</span>)</span>;</span></span> }</span></span></code></pre> Lastly, in the FrontEnd</code> class, update the board.render()</code> method call in createBoard()</code> so that you pass in the current board state:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> createBoard</span>(</span>)</span> {</span></span> let</span> board</span> =</span> new</span> Board</span>(</span>this</span>.</span>context</span>,</span> BoardConfig</span>.</span>MARGIN_LEFT</span>,</span> BoardConfig</span>.</span>MARGIN_TOP</span>,</span> BoardConfig</span>.</span>WIDTH</span>,</span> BoardConfig</span>.</span>HEIGHT</span>)</span>;</span></span> board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> return</span> board</span>;</span></span> }</span></span> }</span></span></code></pre> If you check your browser now while your server is running, you'll see empty slots drawn on the board:</p> </p> Making The Game Playable#</a> </h2> You can attempt to hardcode a board state argument when calling the render()</code> method on the board</code> variable. The game will render the board state accordingly.</p> However, you currently aren't able to update the board state in-game.</p> One way to update the board state in-game is by responding to clicks on the canvas.</p> Unlike with HTML elements, you can't just rely on the built-in DOM events system to handle clicks on our game objects. Since you're drawing on the canvas, you'll have to handle the hit detection yourself and come up with your own event-handling interface.</p> Introducing Your Event Handling API#</a> </h3> In this game, you'll detect clicks by listening for the click event on the body of the page and then pass on the event data to relevant game objects to be processed.</p> To get started with this, add a new method to the GameObject</code> class called handleClick()</code>:</p> export</span> default</span> class</span> GameObject</span> {</span></span> x</span>;</span></span> y</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> </span> constructor</span>(</span>context</span>,</span> x</span>,</span> y</span>,</span> width</span>,</span> height</span>)</span> {</span></span> this</span>.</span>context</span> =</span> context</span>;</span></span> this</span>.</span>x</span> =</span> x</span>;</span></span> this</span>.</span>y</span> =</span> y</span>;</span></span> this</span>.</span>width</span> =</span> width</span>;</span></span> this</span>.</span>height</span> =</span> height</span>;</span></span> }</span></span> </span> clear</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>clearRect</span>(</span>this</span>.</span>x</span>,</span> this</span>.</span>y</span>,</span> this</span>.</span>width</span>,</span> this</span>.</span>height</span>)</span>;</span></span> }</span></span> </span> handleClick</span>(</span>clickEvent</span>)</span> {</span> }</span></span> }</span></span></code></pre> handleClick()</code> will be overridden by the GameObject</code> class' inheritors. The inheritors will add logic to the handleClick()</code> method for handling event data from clicks.</p> Implementing Your Event Handling API#</a> </h3> Now, in the Board</code> class, add a field called columnSelected</code>. This will be used to store a callback. The callback will contain logic to run that will be defined in the FrontEnd</code> class:</p> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> columnSelected</span>;</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> After that, add a method called setColumnSelectionHandler()</code>, which will be used to set the logic that will run from the callback:</p> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> setColumnSelectionHandler</span>(</span>callback</span>)</span> {</span></span> this</span>.</span>columnSelected</span> =</span> callback</span>;</span></span> }</span></span> }</span></span></code></pre> You now have the prerequisites for overriding handleClick()</code> in the Board</code> class.</p> Add the following methods to the Board</code> class:</p> handleClick()</code></li> trySelectColumn()</code></li> </ul> export</span> default</span> class</span> Board</span> extends</span> </span>GameObject</span> {</span></span> //</span> ..</span></span> </span> handleClick</span>(</span>clickEvent</span>)</span> {</span></span> this</span>.</span>trySelectColumn</span>(</span>clickEvent</span>)</span>;</span></span> }</span></span> </span> trySelectColumn</span>(</span>clickEvent</span>)</span> {</span></span> for</span> (</span>let</span> columnIndex</span> =</span> 0</span>;</span> columnIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span> columnIndex</span>++</span>)</span> {</span></span> const</span> totalSlotMargins</span> =</span> BoardConfig</span>.</span>SLOT_MARGIN</span> </span> columnIndex</span>;</span></span> const</span> totalPreviousSlotWidths</span> =</span> BoardConfig</span>.</span>SLOT_WIDTH</span> </span> columnIndex</span>;</span></span> const</span> columnX</span> =</span> this</span>.</span>x</span> +</span> BoardConfig</span>.</span>HORIZONTAL_PADDING</span> +</span> totalSlotMargins</span> +</span> totalPreviousSlotWidths</span>;</span></span> </span> const</span> wasColumnClicked</span> =</span> clickEvent</span>.</span>offsetX</span> >=</span> columnX</span></span> &&</span> clickEvent</span>.</span>offsetX</span> <=</span> (</span>columnX</span> +</span> BoardConfig</span>.</span>SLOT_WIDTH</span>)</span></span> &&</span> clickEvent</span>.</span>offsetY</span> >=</span> this</span>.</span>y</span> +</span> BoardConfig</span>.</span>VERTICAL_PADDING</span></span> &&</span> clickEvent</span>.</span>offsetY</span> <=</span> this</span>.</span>y</span> +</span> BoardConfig</span>.</span>HEIGHT</span> -</span> BoardConfig</span>.</span>VERTICAL_PADDING</span>;</span></span> </span> if</span> (</span>wasColumnClicked</span>)</span> {</span></span> this</span>.</span>columnSelected</span>(</span>columnIndex</span>)</span>;</span></span> break</span>;</span></span> }</span></span> }</span></span> }</span></span> }</span></span></code></pre> The trySelectColumn()</code> method figures out if the player clicked a column. If the player has clicked on a column, it will run the columnSelected</code> callback with the selected column's position index. For example, the leftmost column would have an index of 0</code>, and the third column would have an index of 2</code>.</p> Adding the callback logic#</a> </h3> Finally, you'll set up the click events in the FrontEnd</code> class and handle them.</p> In the start</code> method, add an event listener for clicks on the document's body. This will call the handleClick()</code> method on the board with event data:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>board</span> =</span> this</span>.</span>createBoard</span>(</span>)</span>;</span></span> </span> document</span>.</span>body</span>.</span>addEventListener</span>(</span>'</span>click</span>'</span>,</span> (</span>clickEvent</span>)</span> =></span> {</span></span> this</span>.</span>board</span>.</span>handleClick</span>(</span>clickEvent</span>)</span>;</span></span> }</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Now, you'll add the logic that will run in the Board</code> class' selectedColumn</code> callback.</p> Add a field called gameOver</code> in the FrontEnd</code> class. Set its value to false</code> in the FrontEnd</code> class' constructor:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> board</span>;</span></span> gameOver</span>;</span></span> </span> </span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>background</span> =</span> FrontEndConfig</span>.</span>GAME_BACKGROUND_COLOR</span>;</span></span> this</span>.</span>width</span> =</span> canvas</span>.</span>width</span>;</span></span> this</span>.</span>height</span> =</span> canvas</span>.</span>height</span>;</span></span> this</span>.</span>context</span> =</span> this</span>.</span>canvas</span>.</span>getContext</span>(</span>"</span>2d</span>"</span>)</span>;</span></span> this</span>.</span>gameOver</span> =</span> false</span>;</span></span> </span> this</span>.</span>enableHiDPISupport</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ..</span></span> }</span></span></code></pre> Update the import statements in src/FrontEnd.js</code> to include Constants</code> from the gameLogic</code> directory:</p> import</span> {</span> FrontEndConfig</span>,</span> BoardConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> import</span> {</span> Board</span> }</span> from</span> "</span>./components/index.js</span>"</span>;</span></span> import</span> {</span> Constants</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span></code></pre> Create the following methods: playMove()</code> and processMoveResult()</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ..</span></span> </span> playMove</span>(</span>columnIndex</span>)</span> {</span></span> let</span> moveResult</span> =</span> this</span>.</span>game</span>.</span>playMove</span>(</span>columnIndex</span>)</span>;</span></span> this</span>.</span>processMoveResult</span>(</span>moveResult</span>)</span>;</span></span> }</span></span> </span> processMoveResult</span>(</span>moveResult</span>)</span> {</span></span> if</span> (</span>this</span>.</span>gameOver</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span>;</span></span> }</span></span> </span> this</span>.</span>board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> </span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span> ||</span> moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>)</span> {</span></span> this</span>.</span>gameOver</span> =</span> true</span>;</span></span> }</span></span> }</span></span> }</span></span></code></pre> In createBoard()</code>, add a line before the call to render()</code> on the board. In that line, call the setColumnSelectionHandler()</code> method:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> createBoard</span>(</span>)</span> {</span></span> let</span> board</span> =</span> new</span> Board</span>(</span>this</span>.</span>context</span>,</span> BoardConfig</span>.</span>MARGIN_LEFT</span>,</span> BoardConfig</span>.</span>MARGIN_TOP</span>,</span> BoardConfig</span>.</span>WIDTH</span>,</span> BoardConfig</span>.</span>HEIGHT</span>)</span>;</span></span> board</span>.</span>setColumnSelectionHandler</span>(</span>(</span>columnIndex</span>)</span> =></span> this</span>.</span>playMove</span>(</span>columnIndex</span>)</span>)</span>;</span></span> board</span>.</span>render</span>(</span>this</span>.</span>game</span>.</span>currentBoard</span>)</span>;</span></span> return</span> board</span>;</span></span> }</span></span> }</span></span></code></pre> If you check your browser now while your server is running, you'll now be able to place tokens on the board, based on which column you clicked on.</p> </p> Conclusion#</a> </h2> Congratulations! This was a long post (maybe the longest in this blog series so far!). Hopefully, it was worthwhile to you now that you've made a playable four-in-a-row game.</p> However, it's not quite clear what's going on in the game. The board stops updating when a player wins or the game ends in a draw. There's no indication of the current status of the game.</p> In the next post, you'll fix that problem. You'll add the status area component to the game. This will enable players and spectators to be aware of the current status of the game at any time.</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 6: Blank Canvas Unknown — Sat, 27 May 2023 20:22:00 +0000 Intro#</a> </h2> First of all, great job following along with this series! You've completed the first 50% of this tutorial so far!</p> In the previous blog post</a>, you reorganised the project in preparation for work on the front end of the game. This is the post where the work starts.</p> Here's your expected outcome at the end of this tutorial:</p> </p> Here's a breakdown of the image above:</p> Top part: Status Area - Displays the colour of the current player's turn as well as a status message explaining what's happening in the game.</li> Middle part: Game Board - Displays where players have placed their tokens in the game.</li> Bottom Part: Play Again Button: Restarts the game. Shows up when the game is over.</li> </ul> This post will be focused on setting up the canvas - where each part of the game will be displayed on.</p> Setting Up Constants (Again)#</a> </h2> In the same way that you created a constants file for the game logic, you'll also need to create one for the front end.</p> Create a new directory in src</code> called constants</code> then, inside the directory you've just created (src/constants</code>), create a called index.js</code> with these contents:</p> export</span> const</span> FrontEndConfig</span> =</span> {</span></span> GAME_BACKGROUND_COLOR</span>:</span> "</span>#122A67</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> StatusMessages</span> =</span> {</span></span> DRAW</span>:</span> "</span>DRAW!</span>"</span>,</span></span> YELLOW_TURN</span>:</span> "</span>YELLOW PLAYER'S TURN</span>"</span>,</span></span> RED_TURN</span>:</span> "</span>RED PLAYER'S TURN</span>"</span>,</span></span> YELLOW_WIN</span>:</span> "</span>YELLOW PLAYER WINS!</span>"</span>,</span></span> RED_WIN</span>:</span> "</span>RED PLAYER WINS!</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> StatusAreaConfig</span> =</span> {</span></span> HEIGHT</span>:</span> 100</span>,</span></span> PADDING_TOP</span>:</span> 40</span>,</span></span> INNER_MARGIN</span>:</span> 28</span>,</span></span> INDICATOR_WIDTH</span>:</span> 16</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> BoardConfig</span> =</span> {</span></span> WIDTH</span>:</span> 284</span>,</span></span> HEIGHT</span>:</span> 242</span>,</span></span> MARGIN_TOP</span>:</span> 20</span>,</span></span> MARGIN_LEFT</span>:</span> 18</span>,</span></span> HORIZONTAL_PADDING</span>:</span> 18</span>,</span></span> VERTICAL_PADDING</span>:</span> 16</span>,</span></span> SLOT_MARGIN</span>:</span> 8</span>,</span></span> SLOT_WIDTH</span>:</span> 28</span>,</span></span> BACKGROUND_COLOR</span>:</span> "</span>#1D48B8</span>"</span>,</span></span> SLOT_OUTLINE_COLOR</span>:</span> "</span>#225FFD</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> TokenColor</span> =</span> {</span></span> NONE</span>:</span> "</span>#D9D9D9</span>"</span>,</span></span> YELLOW</span>:</span> "</span>#EAC02B</span>"</span>,</span></span> RED</span>:</span> "</span>#EA2B2B</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> PlayAgainButtonConfig</span> =</span> {</span></span> WIDTH</span>:</span> 128</span>,</span></span> HEIGHT</span>:</span> 40</span>,</span></span> TEXT</span>:</span> "</span>Play Again</span>"</span>,</span></span> MARGIN_BOTTOM</span>:</span> 80</span>,</span></span> BORDER_WIDTH</span>:</span> 1</span>,</span></span> BACKGROUND_START_COLOR</span>:</span> "</span>#225FFD</span>"</span>,</span></span> BACKGROUND_END_COLOR</span>:</span> "</span>#1D48B8</span>"</span>,</span></span> }</span>;</span></span></code></pre>Setting Up The Canvas#</a> </h2> Adding Canvas To The Body#</a> </h3> First, you'll need to add the <canvas></code> element to the <body></code> of the page. It'll need to have a width</code> of 320, a height</code> of 480, and an id</code> of "canvas". You do this in index.html</code>. It should look like this:</p> <!</span>DOCTYPE</span> html</span>></span></span> <</span>html</span> lang</span>=</span>"</span>en</span>"</span>></span></span> <</span>head</span>></span></span> <</span>meta</span> charset</span>=</span>"</span>UTF-8</span>"</span> /></span></span> <</span>meta</span> name</span>=</span>"</span>viewport</span>"</span> content</span>=</span>"</span>width=device-width, initial-scale=1.0</span>"</span> /></span></span> <</span>title</span>></span>Four in a row</span></</span>title</span>></span></span> </</span>head</span>></span></span> </span> <</span>body</span>></span></span> <</span>canvas</span> id</span>=</span>"</span>canvas</span>"</span> width</span>=</span>"</span>320</span>"</span> height</span>=</span>"</span>480</span>"</span>></span></</span>canvas</span>></span></span> <</span>script</span> src</span>=</span>"</span>src/index.js</span>"</span> type</span>=</span>"</span>module</span>"</span>></span><</span>/</span>script</span>></span></span> </</span>body</span>></span></span> </</span>html</span>></span></span></code></pre>Referencing The Canvas In Javascript#</a> </h3> Next, you'll reference the <canvas></code> element that you've added to the page from JavaScript.</p> Create a new file called in the src</code> directory called FrontEnd.js</code>. This will handle the front-end logic of the game.</p> Add the following code to the file you've just created:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> }</span></span> }</span></span></code></pre> The constructor of the FrontEnd</code> class has a parameter called game</code> which contains an instance of the FourInARowGame</code> class. The FourInARowGame</code> instance will be stored in the FrontEnd</code> class in the game</code> field. This will be used to update and retrieve the core game's state.</p> Next, you'll set up the canvas.</p> In the FrontEnd</code> class's constructor, obtain a reference to the canvas element on the page and store it in a class field called canvas</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> </span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Next, set 2 more fields called width</code> and height</code> to the canvas' width and height respectively:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> </span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> this</span>.</span>width</span> =</span> canvas</span>.</span>width</span>;</span></span> this</span>.</span>height</span> =</span> canvas</span>.</span>height</span>;</span></span> }</span></span> }</span></span></code></pre> This will come in handy later once you start drawing on the canvas.</p> Lastly, set the background of the canvas:</p> import</span> {</span> FrontEndConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> </span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>background</span> =</span> FrontEndConfig</span>.</span>GAME_BACKGROUND_COLOR</span>;</span></span> this</span>.</span>width</span> =</span> canvas</span>.</span>width</span>;</span></span> this</span>.</span>height</span> =</span> canvas</span>.</span>height</span>;</span></span> }</span></span> }</span></span></code></pre> Now let's see if you've referenced the canvas element properly.</p> In src/index.js</code>, update the code to create a new instance of the FrontEnd</code> class:</p> import</span> {</span> FourInARowGame</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> import</span> FrontEnd</span> from</span> "</span>./FrontEnd.js</span>"</span>;</span></span> </span> let</span> frontEnd</span> =</span> new</span> FrontEnd</span>(</span>new</span> FourInARowGame</span>(</span>)</span>)</span>;</span></span></code></pre> If you run an HTTP server and check the address it's pointing to, you should see a blue rectangle (That's the canvas you've created!):</p> </p> Drawing On The Canvas#</a> </h3> Let's proceed to draw on the canvas. To do this you'll need to get a 2D canvas rendering context</a>. Another way to think about this is that you're getting a set of art supplies (paints, paintbrushes, stencils, etc.) made for creating 2D drawings.</p> You'll set this rendering context object in the context</code> field of your FrontEnd</code> class:</p> import</span> {</span> FrontEndConfig</span> }</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> FrontEnd</span> {</span></span> game</span>;</span></span> canvas</span>;</span></span> width</span>;</span></span> height</span>;</span></span> context</span>;</span></span> </span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>background</span> =</span> FrontEndConfig</span>.</span>GAME_BACKGROUND_COLOR</span>;</span></span> this</span>.</span>width</span> =</span> canvas</span>.</span>width</span>;</span></span> this</span>.</span>height</span> =</span> canvas</span>.</span>height</span>;</span></span> this</span>.</span>context</span> =</span> this</span>.</span>canvas</span>.</span>getContext</span>(</span>"</span>2d</span>"</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> Next up, you'll need to scale the canvas for high-resolution displays to prevent issues with blurry drawings</a>.</p> First, create a method called enableHiDPIDisplaySupport()</code> in the FrontEnd</code> class:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> //</span> ...</span></span> enableHiDPISupport</span>(</span>)</span> {</span></span> //</span> Get the DPR and size of the canvas</span></span> const</span> dpr</span> =</span> window</span>.</span>devicePixelRatio</span>;</span></span> const</span> rect</span> =</span> this</span>.</span>canvas</span>.</span>getBoundingClientRect</span>(</span>)</span>;</span></span> </span> //</span> Set the "actual" size of the canvas</span></span> this</span>.</span>canvas</span>.</span>width</span> =</span> rect</span>.</span>width</span> </span> dpr</span>;</span></span> this</span>.</span>canvas</span>.</span>height</span> =</span> rect</span>.</span>height</span> </span> dpr</span>;</span></span> </span> //</span> Scale the context to ensure correct drawing operations</span></span> this</span>.</span>context</span>.</span>scale</span>(</span>dpr</span>,</span> dpr</span>)</span>;</span></span> </span> //</span> Set the "drawn" size of the canvas</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>width</span> =</span> `</span>${</span>rect</span>.</span>width</span>}</span>px</span>`</span>;</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>height</span> =</span> `</span>${</span>rect</span>.</span>height</span>}</span>px</span>`</span>;</span></span> }</span></span> }</span></span></code></pre> Now call the enableHiDPIDisplaySupport()</code> method in the FrontEnd</code> class constructor:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> constructor</span>(</span>game</span>)</span> {</span></span> this</span>.</span>game</span> =</span> game</span>;</span></span> this</span>.</span>canvas</span> =</span> document</span>.</span>getElementById</span>(</span>"</span>canvas</span>"</span>)</span>;</span></span> this</span>.</span>canvas</span>.</span>style</span>.</span>background</span> =</span> FrontEndConfig</span>.</span>GAME_BACKGROUND_COLOR</span>;</span></span> this</span>.</span>width</span> =</span> canvas</span>.</span>width</span>;</span></span> this</span>.</span>height</span> =</span> canvas</span>.</span>height</span>;</span></span> this</span>.</span>context</span> =</span> this</span>.</span>canvas</span>.</span>getContext</span>(</span>"</span>2d</span>"</span>)</span>;</span></span> </span> this</span>.</span>enableHiDPIDisplaySupport</span>(</span>)</span>;</span></span> }</span></span> </span> //</span> ...</span></span> }</span></span></code></pre> You're now ready to start drawing on the canvas.</p> Create a method called start()</code> in the FrontEnd</code> class and draw a white rectangle with a width of 50</code> and a height of 100</code>:</p> export</span> default</span> class</span> FrontEnd</span> {</span></span> constructor</span>(</span>game</span>)</span> {</span></span> //</span> ...</span></span> }</span></span> </span> start</span>(</span>)</span> {</span></span> this</span>.</span>context</span>.</span>fillStyle</span> =</span> "</span>white</span>"</span>;</span></span> this</span>.</span>context</span>.</span>fillRect</span>(</span>20</span>,</span> 20</span>,</span> 50</span>,</span> 100</span>)</span>;</span> //</span> fillRect(x, y, width, height);</span></span> }</span></span> }</span></span></code></pre> Now go back to src/index.js</code> and call the start()</code> method on the FrontEnd</code> class instance that you created:</p> import</span> {</span> FourInARowGame</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> import</span> FrontEnd</span> from</span> "</span>./FrontEnd.js</span>"</span>;</span></span> </span> let</span> frontEnd</span> =</span> new</span> FrontEnd</span>(</span>new</span> FourInARowGame</span>(</span>)</span>)</span>;</span></span> frontEnd</span>.</span>start</span>(</span>)</span>;</span></span></code></pre> Now, if you check your project with an HTTP server, in your browser, you'll see a blue canvas with a white rectangle drawn on it:</p> </p> Congratulations, you've covered the basics of drawing using the HTML5 Canvas API!</p> In the next post, you'll draw the game board on the canvas.</p> That's all for now! 👋️</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 5: Reorganisation Unknown — Sun, 14 May 2023 21:00:00 +0000 Intro#</a> </h2> In the previous blog post</a>, you checked for wins and draws in FourInARowGame</code>.</p> Now you'll be reorganising the work you've done so far in preparation for the HTML5 Canvas front-end that you'll be creating for the game.</p> Creating The Game Logic Directory#</a> </h2> First, create a new directory in the src</code> directory called gameLogic</code>.</p> Now move the src/constants</code> directory and src/FourInARowGame.js</code> to src/gameLogic</code>.</p> Lastly, create a file under src/gameLogic</code> called index.js</code> with the following contents:</p> import</span> FourInARowGame</span> from</span> "</span>./FourInARowGame.js</span>"</span>;</span></span> import</span> </span> as</span> Constants</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> </span> export</span> {</span> Constants</span>,</span> FourInARowGame</span> }</span>;</span></span></code></pre> From now on the core game logic will be stored in and referenced from src/gameLogic</code>. The outside of src/gameLogic</code> will be for the front end.</p> Importing From The Game Logic Module#</a> </h2> You're now exporting your core game logic as a module from src/gameLogic/index.js</code>. You'll now need to fix outdated imports of the FourInARowGame</code> class.</p> To do this, fix the import statement in src/index.js</code> so that you import the FourInARowGame</code> class from the game logic module:</p> import</span> {</span> FourInARowGame</span> }</span> from</span> "</span>./gameLogic/index.js</span>"</span>;</span></span> </span> window</span>.</span>fourInARowGame</span> =</span> new</span> FourInARowGame</span>(</span>)</span>;</span></span></code></pre> If you test the code in your web browser's console, you should still be able to interact with window.fourInARowGame</code> just like before.</p> If not, please make sure that you've followed the instructions in this post correctly!</p> Great! Now, you're ready to start working on the front end in the next post.</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 4: Winning Ways and Tedious Ties Unknown — Sun, 30 Apr 2023 05:17:00 +0000 Intro#</a> </h2> In the previous blog post</a>, you implemented player moves.</p> Now you're ready to check for wins and draws in the game.</p> Checking For Wins#</a> </h2> In four-in-a-row, there are three ways for a player to win a game:</p> Place 4 consecutive tokens horizontally</li> Place 4 consecutive tokens vertically</li> Place 4 consecutive tokens diagonally.</li> </ol> Since the board in the game has been created using an array of arrays, you can check for consecutive tokens by iterating through the game board, checking each direction for win lines.</p> Finding Win Lines#</a> </h3> While the directions to check for wins are different, we still are checking for the same number of consecutive tokens in each direction so, we can create a method that checks for the win lines for you.</p> Add a static method to the FourInARowGame</code> class called tryFindWinLine</code>:</p> /**</span></span> </span></span> options: {</span></span> * startRowIndex,</span></span> * startColumnIndex,</span></span> * rowCountStep,</span></span> * columnCountStep</span></span> * }</span></span> </span></span> Any missing options will be 0 by default.</span></span> /</span></span> static</span> tryFindWinLine</span>(</span>board</span>,</span> options</span>)</span> {</span></span> //</span> If `options` is null/undefined, set it's value to an empty object.</span></span> options</span> =</span> options</span> ||</span> {</span>}</span>;</span></span> </span> let</span> config</span> =</span> {</span></span> startRowIndex</span>:</span> options</span>.</span>startRowIndex</span> ||</span> 0</span>,</span></span> startColumnIndex</span>:</span> options</span>.</span>startColumnIndex</span> ||</span> 0</span>,</span></span> rowCountStep</span>:</span> options</span>.</span>rowCountStep</span> ||</span> 0</span>,</span></span> columnCountStep</span>:</span> options</span>.</span>columnCountStep</span> ||</span> 0</span></span> }</span>;</span></span> </span> let</span> count</span> =</span> 0</span>;</span></span> let</span> tokenToCheck</span> =</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>;</span></span> let</span> winLine</span> =</span> [</span>]</span>;</span></span> </span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>WIN_LINE_LENGTH</span>;</span> i</span>++</span>)</span> {</span></span> let</span> row</span> =</span> config</span>.</span>startRowIndex</span> +</span> config</span>.</span>rowCountStep</span> </span> i</span>;</span></span> let</span> column</span> =</span> config</span>.</span>startColumnIndex</span> +</span> config</span>.</span>columnCountStep</span> </span> i</span>;</span></span> </span> if</span> (</span>FourInARowGame</span>.</span>checkIfOutOfBounds</span>(</span>row</span>,</span> column</span>)</span>)</span> {</span></span> break</span>;</span></span> }</span></span> </span> let</span> currentToken</span> =</span> board</span>[</span>row</span>]</span>[</span>column</span>]</span>;</span></span> if</span> (</span>currentToken</span> ===</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>)</span> {</span></span> break</span>;</span></span> }</span></span> </span> if</span> (</span>tokenToCheck</span> ===</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>)</span> {</span></span> tokenToCheck</span> =</span> currentToken</span>;</span></span> }</span></span> </span> if</span> (</span>currentToken</span> ===</span> tokenToCheck</span>)</span> {</span></span> count</span>++</span>;</span></span> }</span></span> </span> winLine</span>.</span>push</span>(</span>{</span> row</span>:</span> row</span>,</span> column</span>:</span> column</span> }</span>)</span>;</span></span> }</span></span> </span> if</span> (</span>count</span> ===</span> Constants</span>.</span>BoardDimensions</span>.</span>WIN_LINE_LENGTH</span>)</span> {</span></span> return</span> {</span></span> winLine</span>:</span> winLine</span>,</span></span> winner</span>:</span> FourInARowGame</span>.</span>boardTokenToPlayerColor</span>(</span>tokenToCheck</span>)</span>,</span></span> }</span>;</span></span> }</span></span> </span> return</span> {</span></span> winLine</span>:</span> [</span>]</span></span> }</span>;</span></span> }</span></span></code></pre> The method above counts checks for consecutive tokens from a starting position. The behaviour of this method is controlled by the options</code> object that is passed in.</p> startRowIndex</code> and startColumnIndex</code> sets the start position.</p> The rowCountStep</code> and columnCountStep</code> control the direction win lines will be checked in. For example, A rowCountStep</code> of 0</code> and a columnCountStep</code> of 1</code> will check for a win line horizontally from the start position.</p> Two other methods are called in checkForWinLine()</code>.</p> FourInARowGame.checkIfOutBounds()</code> checks if a specified position is out of bounds. This allows us to stop checking for a win line early.</p> Add the static method to the FourInARowGame</code> class:</p> static</span> checkIfOutOfBounds</span>(</span>row</span>,</span> column</span>)</span> {</span></span> return</span> row</span> <</span> 0</span></span> ||</span> row</span> ></span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span></span> ||</span> column</span> <</span> 0</span></span> ||</span> column</span> ></span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span></span> }</span></span></code></pre> The other method is another static one called FourInARow.boardTokenToPlayerColor()</code> which turns board token values to player colour values.</p> Add it to the FourInARowGame</code> class:</p> static</span> boardTokenToPlayerColor</span>(</span>boardToken</span>)</span> {</span></span> switch</span> (</span>boardToken</span>)</span> {</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>YELLOW</span>:</span></span> return</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>;</span></span> case</span> Constants</span>.</span>BoardToken</span>.</span>RED</span>:</span></span> return</span> Constants</span>.</span>PlayerColor</span>.</span>RED</span>;</span></span> default</span>:</span></span> return</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>;</span></span> }</span></span> }</span></span></code></pre>Checking For Wins In All Directions#</a> </h3> Now that you've created methods to help you find win lines on the board, you're now ready to start checking if a player has won the game.</p> Create a new static method to the FourInARowGame</code> class called checkForWin()</code>:</p> //</span> Each win line is an array of board position coordinates:</span></span> //</span> e.g: winLine = [{row: 0, column: 0}, {row: 0, column: 1}, {row: 0, column : 2}, {row: 0, column: 3}]</span></span> static</span> checkForWin</span>(</span>board</span>)</span> {</span></span> //</span> Starts from bottom left of the board and ends on top right of board</span></span> for</span> (</span>let</span> columnIndex</span> =</span> 0</span>;</span> columnIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span> columnIndex</span>++</span>)</span> {</span></span> for</span> (</span>let</span> rowIndex</span> =</span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span> -</span> 1</span>;</span> rowIndex</span> ></span> -</span>1</span>;</span> rowIndex</span>--</span>)</span> {</span></span> //</span> Check for vertical win</span></span> let</span> verticalWinCheckResult</span> =</span> FourInARowGame</span>.</span>tryFindWinLine</span>(</span>board</span>,</span> {</span></span> startRowIndex</span>:</span> rowIndex</span>,</span></span> startColumnIndex</span>:</span> columnIndex</span>,</span></span> rowCountStep</span>:</span> -</span>1</span>,</span></span> }</span>)</span>;</span></span> </span> if</span> (</span>verticalWinCheckResult</span>.</span>winner</span>)</span> {</span></span> return</span> verticalWinCheckResult</span>;</span></span> }</span></span> </span> let</span> horizontalWinCheckResult</span> =</span> FourInARowGame</span>.</span>tryFindWinLine</span>(</span>board</span>,</span> {</span></span> startRowIndex</span>:</span> rowIndex</span>,</span></span> startColumnIndex</span>:</span> columnIndex</span>,</span></span> columnCountStep</span>:</span> -</span>1</span>,</span></span> }</span>)</span>;</span></span> </span> if</span> (</span>horizontalWinCheckResult</span>.</span>winner</span>)</span> {</span></span> return</span> horizontalWinCheckResult</span>;</span></span> }</span></span> </span> let</span> leftDiagonalWinCheck</span> =</span> FourInARowGame</span>.</span>tryFindWinLine</span>(</span>board</span>,</span> {</span></span> startRowIndex</span>:</span> rowIndex</span>,</span></span> startColumnIndex</span>:</span> columnIndex</span>,</span></span> rowCountStep</span>:</span> -</span>1</span>,</span></span> columnCountStep</span>:</span> -</span>1</span></span> }</span>)</span>;</span></span> </span> if</span> (</span>leftDiagonalWinCheck</span>.</span>winner</span>)</span> {</span></span> return</span> leftDiagonalWinCheck</span>;</span></span> }</span></span> </span> let</span> rightDiagonalWinCheck</span> =</span> FourInARowGame</span>.</span>tryFindWinLine</span>(</span>board</span>,</span> {</span></span> startRowIndex</span>:</span> rowIndex</span>,</span></span> startColumnIndex</span>:</span> columnIndex</span>,</span></span> rowCountStep</span>:</span> -</span>1</span>,</span></span> columnCountStep</span>:</span> 1</span></span> }</span>)</span>;</span></span> </span> if</span> (</span>rightDiagonalWinCheck</span>.</span>winner</span>)</span> {</span></span> return</span> rightDiagonalWinCheck</span>;</span></span> }</span></span> }</span></span> }</span></span> </span> return</span> {</span></span> winLine</span>:</span> [</span>]</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span></span> }</span>;</span></span> }</span></span></code></pre> This method above checks for win lines in all directions from each board position. It then returns a WinCheckResult</code> which is made up of:</p> a winLine</code> which is a list of consecutive board positions</li> a winner</code>, which contains the who won the game.</li> </ul> Notice how the rowCountStep</code> and columnCountStep</code> values are set for each direction.</p> Allowing Players To Win#</a> </h3> Now that you have created a method that checks for wins, you can now detect wins and update the status of the game accordingly.</p> Update the evaluateGame()</code> method so that it handles wins being detected:</p> evaluateGame</span>(</span>board</span>)</span> {</span></span> let</span> winCheckResult</span> =</span> FourInARowGame</span>.</span>checkForWin</span>(</span>board</span>)</span>;</span></span> </span> if</span> (</span>winCheckResult</span>.</span>winner</span> !==</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>)</span> {</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>;</span></span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> winCheckResult</span>.</span>winner</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span></span> }</span>,</span></span> winLine</span>:</span> winCheckResult</span>.</span>winLine</span></span> }</span>;</span></span> }</span></span> </span> //</span> From this point, we can assume that a successful move was made and the game will</span></span> //</span> continue on.</span></span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span></span> }</span>;</span></span> }</span></span></code></pre> One more thing you need to do is update playMove()</code> so that it re-evaluates the board when the game has already concluded:</p> playMove</span>(</span>columnIndex</span>)</span> {</span></span> switch</span> (</span>this</span>.</span>status</span>)</span> {</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>START</span>:</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>IN_PROGRESS</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>DRAW</span>:</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>:</span></span> //</span> The game is over at this point so</span></span> //</span> re-evaluate the latest board, returning the same game status</span></span> //</span> and board details.</span></span> return</span> this</span>.</span>evaluateGame</span>(</span>this</span>.</span>currentBoard</span>)</span>;</span></span> default</span>:</span></span> break</span>;</span></span> }</span></span> </span> let</span> moveResults</span> =</span> this</span>.</span>performMove</span>(</span>columnIndex</span>)</span>;</span></span> </span> //</span> Do not change player turn if move is invalid</span></span> if</span> (</span>moveResults</span>.</span>status</span> !==</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span> &&</span> moveResults</span>.</span>status</span>.</span>value</span> !==</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> this</span>.</span>currentTurn</span> =</span> this</span>.</span>currentTurn</span> ===</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span></span> ?</span> Constants</span>.</span>PlayerColor</span>.</span>RED</span></span> :</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>;</span></span> }</span></span> return</span> moveResults</span>;</span></span> }</span></span></code></pre> Feel free to test this out in your browser's console.</p> When a move results in a win, the move result object in the output will have the status</code> field with a value of win</code>, winner</code> will be set to either Red</code> or Yellow</code> and winLine</code> will be filled with positions.</p> Subsequent calls to playMove()</code> will produce the same output every time. The game is already over after all 😉.</p> Checking For A Draw#</a> </h2> Not every four-in-a-row game concludes with a win. There are cases where the board is filled with no winner. In these cases, the game ends in a draw.</p> You're now going to add the ability to detect a draw.</p> First, add a static method called checkForFilledBoard()</code> to the FourInARowGame</code> class:</p> static</span> checkForFilledBoard</span>(</span>board</span>)</span> {</span></span> for</span> (</span>let</span> j</span> =</span> 0</span>;</span> j</span> <</span> board</span>.</span>length</span>;</span> j</span>++</span>)</span> {</span></span> let</span> boardColumn</span> =</span> board</span>[</span>j</span>]</span>;</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> boardColumn</span>.</span>length</span>;</span> i</span>++</span>)</span> {</span></span> let</span> boardPosition</span> =</span> boardColumn</span>[</span>i</span>]</span>;</span></span> if</span> (</span>boardPosition</span> ===</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>)</span> {</span></span> return</span> false</span>;</span></span> }</span></span> }</span></span> }</span></span> </span> return</span> true</span>;</span></span> }</span></span></code></pre> Now, make another update to the evaluateGame()</code> method so that it checks for a draw and if true, returns a MoveResult</code> object that indicates that the game has ended with a draw:</p> evaluateGame</span>(</span>board</span>)</span> {</span></span> let</span> winCheckResult</span> =</span> FourInARowGame</span>.</span>checkForWin</span>(</span>board</span>)</span>;</span></span> </span> if</span> (</span>winCheckResult</span>.</span>winner</span> !==</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>)</span> {</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>;</span></span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> winCheckResult</span>.</span>winner</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>WIN</span>,</span></span> }</span>,</span></span> winLine</span>:</span> winCheckResult</span>.</span>winLine</span>,</span></span> }</span>;</span></span> }</span></span> </span> //</span> If board is full right now, we can assume the game to be a draw</span></span> //</span> since there weren't any winning lines detected.</span></span> if</span> (</span>FourInARowGame</span>.</span>checkForFilledBoard</span>(</span>board</span>)</span>)</span> {</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>DRAW</span>;</span></span> </span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>DRAW</span>,</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span>,</span></span> }</span>;</span></span> }</span></span> </span> //</span> From this point, we can assume that a successful move was made and the game will</span></span> //</span> continue on.</span></span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span>,</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span>,</span></span> }</span>;</span></span> }</span></span></code></pre> Feel free to test out these changes yourself in your browser's console. The MoveResult</code> object returned in the output will have a status</code> field with a value of draw</code>.</p> If you encounter any errors or unexpected behaviour then please go over the code you've written so far and read over this post again.</p> Otherwise, congratulations! You've now implemented the core logic of a four-in-a-row game in JavaScript.</p> In the upcoming posts in this blog series, you'll be working on the HTML5 Canvas front-end for your game and integrating the state machine object you've created into it!</p> That's all for now 👋!</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 3: Making Moves Unknown — Wed, 19 Apr 2023 23:02:00 +0000 Intro#</a> </h2> In the previous blog post</a>, you set up your FourInARowGame</code> class's fields.</p> Now you're ready to start implementing player moves and updating the state of the game accordingly.</p> Creating The Method#</a> </h2> You'll start by creating a new method in the FourInARowGame</code> class called playMove()</code>:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> //</span> ..</span></span> </span> static</span> createBoard</span>(</span>)</span> {</span></span> //</span> ..</span></span> }</span></span> </span> playMove</span>(</span>columnIndex</span>)</span> {</span></span> return</span> {</span></span> board</span>:</span> this</span>.</span>currentBoard</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span>,</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span>,</span></span> }</span>;</span></span> }</span></span> }</span></span></code></pre> Note: You're just returning mock data for now. You'll properly implement this method later on.</p> The playMove()</code> method takes in a columnIndex</code> argument. From this input, a move will be attempted and the result of the move will be evaluated and returned. The code example above shows a MoveResult</code> object being returned in the playMove()</code> method. A MoveResult</code> can contain:</p> The current state of the board after a move has been played</li> The winner</li> The status of the move</li> The win line - an array of positions of 4 consecutive tokens were located if found.</li> </ul> Interacting With Your State Machine#</a> </h2> Exposing Your State Machine Object#</a> </h3> Now, to try out your code, you'll interact with your Four-In-A-Row state machine in your browser.</p> First, you'll need to expose the object so that the browser's console can access it. One way you can do this is by adding an instance of the FourInARowGame</code> class to the window</code> object. Let's do that right now. Replace the contents of src/index.js</code> with the following:</p> import</span> FourInARowGame</span> from</span> "</span>./FourInARowGame.js</span>"</span>;</span></span> </span> window</span>.</span>fourInARowGame</span> =</span> new</span> FourInARowGame</span>(</span>)</span>;</span></span></code></pre> Now, ensure that an HTTP server is running from the root of your project and navigate to the server's address in your web browser.</p> Open up the console in your browser's developer tools (The keyboard shortcut to open in it Google Chrome is CTRL</code> + Shift</code> + J</code>) in your web browser then enter in: window.fourInARowGame</code>. You should see an output of the FourInARowGame</code> instance object. In Google Chrome it looks like this:</p> FourInARowGame</span> {</span>startingColor</span>:</span> '</span>yellow</span>'</span>,</span> currentTurn</span>:</span> '</span>yellow</span>'</span>,</span> status</span>:</span> '</span>start</span>'</span>,</span> board</span>:</span> Array</span>(</span>6</span>)</span>}</span></span></code></pre> There is also the option to expand the object so you can view more details about the object.</p> If you don't see some sort of representation of a FourInARow</code> instance object then please go over your code and check that you've followed the instructions correctly!</p> Play A (Fake) Move#</a> </h3> Now, call the playMove()</code> method from the FourInARow</code> instance, in the browser console window.</p> First, store the state machine in an easier-to-reference variable called game</code>:</p> let</span> game</span> =</span> window</span>.</span>fourInARowGame</span>;</span></span></code></pre> Then, call the playMove()</code> method with the columnIndex</code> parameter set to 0</code>:</p> game</span>.</span>playMove</span>(</span>0</span>)</span>;</span></span></code></pre> Your browser's console window should output something resembling the MoveResult</code> object you discussed earlier:</p> {</span>board</span>:</span> Array</span>(</span>6</span>)</span>,</span> winner</span>:</span> '</span>none</span>'</span>,</span> status</span>:</span> {</span>…</span>}</span>,</span> winLine</span>:</span> Array</span>(</span>0</span>)</span>}</span></span></code></pre> When expanded, you get more details:</p> {</span>board</span>:</span> Array</span>(</span>6</span>)</span>,</span> winner</span>:</span> '</span>none</span>'</span>,</span> status</span>:</span> {</span>…</span>}</span>,</span> winLine</span>:</span> Array</span>(</span>0</span>)</span>}</span></span> board</span>:</span> (</span>6</span>)</span> [</span>Uint8Array</span>(</span>7</span>)</span>,</span> Uint8Array</span>(</span>7</span>)</span>,</span> Uint8Array</span>(</span>7</span>)</span>,</span> Uint8Array</span>(</span>7</span>)</span>,</span> Uint8Array</span>(</span>7</span>)</span>,</span> Uint8Array</span>(</span>7</span>)</span>]</span></span> status</span>:</span> {</span>value</span>:</span> '</span>success</span>'</span>}</span></span> winLine</span>:</span> [</span>]</span></span> winner</span>:</span> "</span>none</span>"</span></span> [</span>[</span>Prototype</span>]</span>]</span>: </span>Object</span></span></code></pre> Now that you know the type of result that you're expecting after calling playMove()</code>, let's properly implement the method so that it returns real data based on the state of the board.</p> Implementing The Method (For Real This Time!)#</a> </h2> Firstly, you'll update the playMove()</code> method in your FourInARowGame</code> class so that it checks the current status of the game before allowing the player to make a move.</p> It wouldn't make sense for a player to be able to perform a move when the game has already ended in a win or a draw.</p> You'll also update the current status of the game from GameStatus.START</code> to being GameStatus.IN_PROGRESS</code>.</p> playMove</span>(</span>columnIndex</span>)</span> {</span></span> switch</span> (</span>this</span>.</span>status</span>)</span> {</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>START</span>:</span></span> this</span>.</span>status</span> =</span> GameStatus</span>.</span>IN_PROGRESS</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>DRAW</span>:</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>:</span></span> //</span> The game is over at this point so</span></span> //</span> re-evaluate the latest board, returning the same game status</span></span> //</span> and board details.</span></span> </span> //</span> TODO: Implement this properly</span></span> console</span>.</span>log</span>(</span>"</span>Game already ended in win or draw. re-evaluating latest game state)</span>;</span></span> default</span>:</span></span> break</span>;</span></span> }</span></span> }</span></span></code></pre> You'll re-evaluate the latest game state when a win or draw happens later.</p> For now, let's continue focusing on allowing a player to make a move that changes the game's state.</p> You will first create a method called performMove()</code>:</p> performMove</span>(</span>columnIndex</span>)</span> {</span></span> //</span> ...</span></span> }</span></span></code></pre> Now you need to create a copy of the current board that you can modify without changing the value of this.currentBoard</code>.</p> To do this, you'll create a static method called deepBoardCopy()</code>:</p> static</span> deepBoardCopy</span>(</span>oldBoard</span>)</span> {</span></span> let</span> newBoard</span> =</span> new</span> Array</span>(</span>Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>)</span>;</span></span> </span> for</span> (</span>let</span> rowIndex</span> =</span> 0</span>;</span> rowIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>;</span> rowIndex</span>++</span>)</span> {</span></span> newBoard</span>[</span>rowIndex</span>]</span> =</span> new</span> Uint8Array</span>(</span>Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>)</span>;</span></span> for</span> (</span>let</span> columnIndex</span> =</span> 0</span>;</span> columnIndex</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>;</span> columnIndex</span>++</span>)</span> {</span></span> newBoard</span>[</span>rowIndex</span>]</span>[</span>columnIndex</span>]</span> =</span> oldBoard</span>[</span>rowIndex</span>]</span>[</span>columnIndex</span>]</span>;</span></span> }</span></span> }</span></span> </span> return</span> newBoard</span>;</span></span> }</span></span></code></pre> Now store the board copy in a variable called nextBoard</code>:</p> performMove</span>(</span>columnIndex</span>)</span> {</span></span> let</span> nextBoard</span> =</span> FourInARowGame</span>.</span>deepBoardCopy</span>(</span>this</span>.</span>currentBoard</span>)</span>;</span></span> }</span></span></code></pre> The next thing you need to do is to perform the move on the board, to do this you'll create a method called tryPerformMove()</code>:</p> tryPerformMove</span>(</span>columnIndex</span>,</span> nextBoard</span>)</span> {</span></span> let</span> isMoveValid</span> =</span> false</span>;</span></span> </span> for</span> (</span>let</span> i</span> =</span> nextBoard</span>.</span>length</span> -</span> 1</span>;</span> i</span> ></span> -</span>1</span>;</span> i</span>--</span>)</span> {</span></span> let</span> boardRow</span> =</span> nextBoard</span>[</span>i</span>]</span>;</span></span> let</span> boardPosition</span> =</span> boardRow</span>[</span>columnIndex</span>]</span>;</span></span> </span> if</span> (</span>boardPosition</span> !==</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>)</span> {</span></span> continue</span>;</span></span> }</span></span> </span> boardRow</span>[</span>columnIndex</span>]</span> =</span> FourInARowGame</span>.</span>playerColorToBoardToken</span>(</span>this</span>.</span>currentTurn</span>)</span>;</span></span> isMoveValid</span> =</span> true</span>;</span></span> break</span>;</span></span> }</span></span> </span> if</span> (</span>!</span>isMoveValid</span>)</span> {</span></span> return</span> {</span></span> status</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>,</span></span> }</span>;</span></span> }</span></span> </span> return</span> {</span></span> status</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span>,</span></span> board</span>:</span> nextBoard</span></span> }</span>;</span></span> }</span></span></code></pre> The method above checks the column in the board the player specified from the bottom to the top for an empty position and then attempts to add the current player's token to the board position. Later it returns the result.</p> There is a static method here called playerColorToBoardToken</code> that was used, this sets the value in the board position to a numeric value that is associated with the current player's colour.</p> Add it to the FourInARowGame</code> class too:</p> static</span> createBoard</span>(</span>)</span> {</span></span> //</span> ...</span></span> }</span></span> </span> static</span> playerColorToBoardToken</span>(</span>playerColor</span>)</span> {</span></span> switch</span> (</span>playerColor</span>)</span> {</span></span> case</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>:</span></span> return</span> Constants</span>.</span>BoardToken</span>.</span>YELLOW</span>;</span></span> case</span> Constants</span>.</span>PlayerColor</span>.</span>RED</span>:</span></span> return</span> Constants</span>.</span>BoardToken</span>.</span>RED</span>;</span></span> default</span>:</span></span> return</span> Constants</span>.</span>BoardToken</span>.</span>NONE</span>;</span></span> }</span></span> }</span></span></code></pre> Now you'll go back to the performMove()</code> method and set the current game board to the board in the object returned from the tryPerformMove()</code> method:</p> performMove</span>(</span>columnIndex</span>)</span> {</span></span> let</span> nextBoard</span> =</span> FourInARowGame</span>.</span>deepBoardCopy</span>(</span>this</span>.</span>currentBoard</span>)</span>;</span></span> </span> let</span> moveAttemptResult</span> =</span> this</span>.</span>tryPerformMove</span>(</span>columnIndex</span>,</span> nextBoard</span>)</span>;</span></span> </span> if</span> (</span>moveAttemptResult</span>.</span>status</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span> {</span></span> board</span>:</span> nextBoard</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> message</span>:</span> "</span>Returned column is filled</span>"</span>,</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span></span> }</span></span> }</span></span> </span> //</span> From this point, the board move was successful.</span></span> this</span>.</span>currentBoard</span> =</span> moveAttemptResult</span>.</span>board</span>;</span></span> }</span></span></code></pre> If the value of the moveAttemptResult.status</code> is MoveStatus.Invalid</code> then you return a MoveResult</code> which has the same structure as the move data you returned in your fake playMove()</code> method implementation.</p> Lastly, you need to create a method called evaluateGame()</code> which will be used to check if the status of the game has changed and then returns a MoveResult</code>.</p> For now, you'll just return the MoveResult</code> of a successful move, which also indicates that the game is still in progress.</p> evaluateGame</span>(</span>board</span>)</span> {</span></span> //</span> From this point, you can assume that a successful move was made and the game will</span></span> //</span> continue on.</span></span> return</span> {</span></span> board</span>:</span> board</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span></span> }</span>;</span></span> }</span></span></code></pre> Make sure that you return the result of this method in performMove()</code>:</p> performMove</span>(</span>columnIndex</span>)</span> {</span></span> let</span> nextBoard</span> =</span> FourInARowGame</span>.</span>deepBoardCopy</span>(</span>this</span>.</span>currentBoard</span>)</span>;</span></span> </span> let</span> moveAttemptResult</span> =</span> this</span>.</span>tryPerformMove</span>(</span>columnIndex</span>,</span> nextBoard</span>)</span>;</span></span> </span> if</span> (</span>moveAttemptResult</span>.</span>status</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span>)</span> {</span></span> return</span> {</span></span> board</span>:</span> nextBoard</span>,</span></span> winner</span>:</span> Constants</span>.</span>PlayerColor</span>.</span>NONE</span>,</span></span> status</span>:</span> {</span></span> message</span>:</span> "</span>Returned column is filled</span>"</span>,</span></span> value</span>:</span> Constants</span>.</span>MoveStatus</span>.</span>INVALID</span></span> }</span>,</span></span> winLine</span>:</span> [</span>]</span></span> }</span></span> }</span></span> </span> //</span> From this point, the board move was successful.</span></span> this</span>.</span>currentBoard</span> =</span> moveAttemptResult</span>.</span>board</span>;</span></span> return</span> this</span>.</span>evaluateGame</span>(</span>moveAttemptResult</span>.</span>board</span>)</span>;</span></span> }</span></span></code></pre> Now the MoveResult</code> will show an updated board value based on the column the player placed their token in.</p> To complete your updates to the playMove()</code> method, you'll add a few more lines to it:</p> playMove</span>(</span>columnIndex</span>)</span> {</span></span> switch</span> (</span>this</span>.</span>status</span>)</span> {</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>START</span>:</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>IN_PROGRESS</span>;</span></span> break</span>;</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>DRAW</span>:</span></span> case</span> Constants</span>.</span>GameStatus</span>.</span>WIN</span>:</span></span> //</span> The game is over at this point so</span></span> //</span> re-evaluate the latest board, returning the same game status</span></span> //</span> and board details.</span></span> </span> //</span> TODO: Implement this properly</span></span> console</span>.</span>log</span>(</span>"</span>Game already ended in win or draw. re-evaluating latest game state</span>"</span>)</span>;</span></span> default</span>:</span></span> break</span>;</span></span> }</span></span> </span> let</span> moveResult</span> =</span> this</span>.</span>performMove</span>(</span>columnIndex</span>)</span>;</span></span> </span> //</span> Only change current turn while the game is still in progress.</span></span> if</span> (</span>moveResult</span>.</span>status</span>.</span>value</span> ===</span> Constants</span>.</span>MoveStatus</span>.</span>SUCCESS</span>)</span> {</span></span> this</span>.</span>currentTurn</span> =</span> this</span>.</span>currentTurn</span> ===</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span></span> ?</span> Constants</span>.</span>PlayerColor</span>.</span>RED</span></span> :</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>;</span></span> }</span></span> </span> return</span> moveResult</span>;</span></span> }</span></span></code></pre> You perform a move, update the current turn to the opposing player's turn then return the results of the move.</p> Testing Out Your Changes#</a> </h2> You added quite a few changes, let's test them out. Assuming you have a local HTTP server running at the root of the project, navigate to the server's address in your web browser and open the browser console window again.</p> First, enter the following line in your browser's console:</p> let</span> game</span> =</span> window</span>.</span>fourInARowGame</span>;</span></span></code></pre> Now call the playMove()</code> method with the columnIndex</code> parameter set to 1</code> instead of 0</code> to add the token to the second column on the game board:</p> game</span>.</span>playMove</span>(</span>1</span>)</span>;</span></span></code></pre> You should see a MoveResult</code> object returned. If you expand the object and then expand the board</code> field, you'll see that the value 1</code> has been added to the bottom of the second column on the board.</p> If you do, congratulations!</p> If not, please go over this post carefully to check for mistakes you may have made.</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 2: Beginning Unknown — Wed, 19 Apr 2023 23:01:00 +0000 Intro#</a> </h2> In the last blog post</a>, you set up the prerequisites and file structure of the project.</p> Now let's start implementing the logic of the game.</p> Rules Of The Game#</a> </h2> Four-in-a-row is a two-player game played on a 6 (rows) x 7 (columns) rack board, where the objective is to be the first player to form a vertical, horizontal or vertical line with four of your tokens.</p> The player who meets the objective first, wins. If the board is filled and there is no winner, the game ends in a draw.</p> Each token a player puts down a column falls to the lowest available space within a column.</p> Preparing To Implement The Logic#</a> </h2> Constants#</a> </h3> Now that you'll know the rules, you'll now write down relevant constant values that you'll be using throughout this project.</p> Create a new JavaScript file called index.js</code> in src/constants</code>.</p> Now add the following to the file you've just created:</p> export</span> const</span> GameStatus</span> =</span> {</span></span> IN_PROGRESS</span>:</span> "</span>in-progress</span>"</span>,</span></span> START</span>:</span> "</span>start</span>"</span>,</span></span> WIN</span>:</span> "</span>win</span>"</span>,</span></span> DRAW</span>:</span> "</span>draw</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> MoveStatus</span> =</span> {</span></span> INVALID</span>:</span> "</span>invalid</span>"</span>,</span></span> WIN</span>:</span> "</span>win</span>"</span>,</span></span> SUCCESS</span>:</span> "</span>success</span>"</span>,</span></span> DRAW</span>:</span> "</span>draw</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> PlayerColor</span> =</span> {</span></span> NONE</span>:</span> "</span>none</span>"</span>,</span></span> YELLOW</span>:</span> "</span>yellow</span>"</span>,</span></span> RED</span>:</span> "</span>red</span>"</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> BoardDimensions</span> =</span> {</span></span> ROWS</span>:</span> 6</span>,</span></span> COLUMNS</span>:</span> 7</span>,</span></span> WIN_LINE_LENGTH</span>:</span> 4</span>,</span></span> }</span>;</span></span> </span> export</span> const</span> BoardToken</span> =</span> {</span></span> NONE</span>:</span> 0</span>,</span></span> YELLOW</span>:</span> 1</span>,</span></span> RED</span>:</span> 2</span>,</span></span> }</span>;</span></span></code></pre>Setting Up The State Machine#</a> </h3> Now you will create a state machine which represents a four-in-a-row game.</p> Create a new JavaScript file called FourInARowGame.js</code> in /src</code> and add the following to it:</p> import</span> </span> as</span> Constants</span> from</span> "</span>./constants/index.js</span>"</span>;</span></span> </span> export</span> default</span> class</span> FourInARowGame</span> {</span></span> //</span> State machine code is going to be here!</span></span> }</span></span></code></pre> These lines reference the constants you wrote in src/constants/index.js</code>, making them available to use in FourInARowGame.js</code>. It also creates a class called FourInARowGame</code>.</p> Simple Fields#</a> </h4> To get the game going, you'll need to be aware of the following:</p> The current game's status - To know whether the game has ended or not and if it has ended, how it ended</li> The current turn - To figure out which player's token to put down when a move is next played</li> The starting colour player token - To determine who starts the game</li> The state of the board - To know which tokens have been placed on the board</li> </ul> Let's add these fields to your FourInARowGame</code> class:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> startingColor</span>;</span></span> currentTurn</span>;</span></span> status</span>;</span></span> currentBoard</span>;</span></span> </span> //</span> More to come...</span></span> }</span></span></code></pre> Regarding the starting colour, there isn't any rule about which colour should start but you'll set it to yellow</code>:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> //</span> ..</span></span> </span> constructor</span>(</span>)</span> {</span></span> this</span>.</span>startingColor</span> =</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>;</span></span> }</span></span> }</span></span></code></pre> Next up is the currentTurn</code> and status</code>. Since the game has just started, you'll set the value of currentTurn</code> to the value of startingColor</code> and set the value of status</code> to GameStatus.START</code>:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> //</span> ..</span></span> </span> constructor</span>(</span>)</span> {</span></span> this</span>.</span>startingColor</span> =</span> Constants</span>.</span>PlayerColor</span>.</span>YELLOW</span>;</span></span> this</span>.</span>currentTurn</span> =</span> this</span>.</span>startingColor</span>;</span></span> this</span>.</span>status</span> =</span> Constants</span>.</span>GameStatus</span>.</span>START</span>;</span></span> }</span></span> }</span></span></code></pre>Initialising The Board Field#</a> </h4> Now, for the currentBoard</code> field, you will initially set its value to an empty board; a single board in a game of Four-In-A-Row has 6 rows and 7 columns (42 positions in total). You'll use an array of arrays to represent this structure in JavaScript.</p> The first step is creating a static method in the FourInARowGame</code> class that creates an empty board for you:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> //</span> ..</span></span> </span> static</span> createBoard</span>(</span>)</span> {</span></span> let</span> board</span> =</span> new</span> Array</span>(</span>Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>)</span>;</span></span> </span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> Constants</span>.</span>BoardDimensions</span>.</span>ROWS</span>;</span> i</span>++</span>)</span> {</span></span> board</span>[</span>i</span>]</span> =</span> new</span> Uint8Array</span>(</span>Constants</span>.</span>BoardDimensions</span>.</span>COLUMNS</span>)</span>;</span></span> board</span>[</span>i</span>]</span>.</span>fill</span>(</span>Constants</span>.</span>BoardToken</span>.</span>NONE</span>)</span>;</span></span> }</span></span> </span> return</span> board</span>;</span></span> }</span></span> }</span></span></code></pre> Notice that Uint8Array</code> was used instead of Array</code> in the enclosed loop. This is because numbers in JavaScript are stored as the Number</code> data type by default, which stores 64-bit floating point numbers. You will only be using 3 possible numbers in each board position so Uint8</code> makes more sense which is the smallest numeric data type that your range of possible numbers fits in.</p> This saves memory considering that there are 42 positions in a board.</p> Now you can finish off initialising the currentBoard</code> field:</p> export</span> default</span> class</span> FourInARowGame</span> {</span></span> constructor</span>(</span>)</span> {</span></span> //</span> ..</span></span> </span> this</span>.</span>currentBoard</span> =</span> FourInARowGame</span>.</span>createBoard</span>(</span>)</span>;</span></span> }</span></span> }</span></span></code></pre> You are now ready to implement the logic that runs when a player makes a move.</p> You'll do this in the next post! See you then! 👋</p> Next Post</a></p> Making Four-In-A-Row Using JavaScript - Part 1: Setup Unknown — Wed, 19 Apr 2023 23:00:00 +0000 Intro#</a> </h2> In this blog series, I'll be walking you through how to make an HTML 5 Canvas Game.</p> Outline:</p> First, you'll create the core logic of the game - A back-end.</li> After implementing the back-end logic of the game, you'll create a front-end for the game using the HTML5 Canvas API.</li> </ol> The benefit of this approach is that you reduce the scope of bugs with core game logic by storing it all in a state machine object. The front end will simply be an interface for interacting with the state machine object.</p> Another benefit of this approach is that you'll have flexibility when choosing how to implement the game's front end. Maybe you'll find another way to use the HTML5 Canvas API. Maybe you'll use the built-in HTML elements. You could even try recreating the front end with WebGL or a game engine.</p> After this tutorial, you will be free to explore these various options!</p> Now, let's get started!</p> Prerequisites#</a> </h2> You'll need the following to be able to complete this tutorial:</p> A text editor (I recommend using Visual Studio Code</a> if you're unsure) - This is where you'll be writing your code.</li> A Web browser with access to developer tools - you'll be interacting with the browser console throughout the tutorial, especially at the start since the game won't have a front-end yet. I'll be using Google Chrome throughout this tutorial.</li> An HTTP Server (I recommend using the Live Server Visual Studio Code extension</a>). This is required because you'll be using ECMAScript Modules</a> without any JavaScript build tools. Attempting to try this without an HTTP server will result in a CORS</a> error.</li> </ol> Note: I strongly recommend using an HTTP Server with live reload support. You'll feel at peace knowing that you don't have to manually refresh your browser and possibly clear your cache to see the latest changes that you've made!</p> Setup#</a> </h2> Directory Structure#</a> </h3> First, create a directory where you'll write the code for the game. I suggest naming it "four-in-a-row".</p> Then, create this directory structure in the "four-in-a-row" project:</p> /src</span></span> /constants</span></span></code></pre>The HTML File#</a> </h3> Now let's set up the HTML file.</p> Create a file called index.html</code> in the root of the project directory.</p> Add this to the file's contents:</p> <!</span>DOCTYPE</span> html</span>></span></span> <</span>html</span> lang</span>=</span>"</span>en</span>"</span>></span></span> <</span>head</span>></span></span> <</span>meta</span> charset</span>=</span>"</span>UTF-8</span>"</span> /></span></span> <</span>meta</span> name</span>=</span>"</span>viewport</span>"</span> content</span>=</span>"</span>width=device-width, initial-scale=1.0</span>"</span> /></span></span> <</span>title</span>></span>Four in a row</span></</span>title</span>></span></span> </</span>head</span>></span></span> </span> <</span>body</span>></span></span> <</span>script</span> src</span>=</span>"</span>src/index.js</span>"</span> type</span>=</span>"</span>module</span>"</span>></span><</span>/</span>script</span>></span></span> </</span>body</span>></span></span> </</span>html</span>></span></span></code></pre> The code above sets the title of your page to "Four in a row", matches the page's width and scale to the device's screen width and scale, and references a JavaScript file called index.js</code>. This will be the entry point for your code for the game.</p> Entry point#</a> </h3> Now, create the file: src/index.js</code>.</p> You'll now do a quick check to see if the script file has been referenced correctly.</p> Add the following to src/index.js</code>:</p> console</span>.</span>log</span>(</span>"</span>Hello world</span>"</span>)</span>;</span></span></code></pre> Next, start an HTTP server in the root of your project directory.</p> When you visit the address of the server, you'll see an empty page. This is normal, you haven't added any controls or styling. However, if you open the developer tools in your web browser and select the console, you should see the following message:</p> Hello world</span></span></code></pre> If you don't see the message above, you probably didn't follow the instructions properly. Please go back over the previous steps and ensure that you've completed them.</p> Otherwise, congratulations! You've completed the first part of this tutorial! 🥳</p> In the next post, you'll begin the creation of the back end by creating a four-in-a-row state machine!</p> Next Post</a></p> Happy New Year 2023! - What's new? Unknown — Wed, 11 Jan 2023 12:00:00 +0000 Happy New Year! There have been some big changes since my last blog post.</p> Back to Windows#</a> </h2> I switched from hopping between Linux distros to settling with Windows 11. I really value a predictable, well-supported environment. Windows 11 has also fixed a lot of the complaints I had about aesthetics of Windows 10. I’m pleased with what they are doing with Windows 11.</p> Web Dev to Game Dev#</a> </h2> After working over 2 years as a front-end developer, I’ve gained a pretty good understanding of web development, however, in that time period, I’ve been able to think a lot about what I want to do.</p> It turns out, game development is what I’m extremely passionate about, so I started learning some game engines (Phaser.js</a>, Unity</a>), programming languages (TypeScript</a>, C++</a>) and even took part in a few game jams on itch.io</a>. Ninjump</a> is one of the games created for a game jam and is currently in the showcased on the portfolio page</a> of my website.</p> I’ll keep adding more games to my portfolio and developing my skills in the hopes that I do get to work on games professionally in the near future.</p> This journey has been super exciting so far and I’m looking forward to seeing where it takes me next!</p> Vala Website (2022) Unknown — Fri, 15 Jul 2022 18:00:00 +0000 Vala Website (2022)</h1> 2022-07-15</time> </header> </p> I created a website for a programming language called Vala.</p> It replaces an old set of wiki pages with a website that: Showcases Vala projects and features</li> Shows off the language's branding</li> Is optimised for speed</li> Has improved accessibility (especially regarding navigation and colour contrast).</li></ul> Overview Table </caption> Name</td> Vala Website (2022)</td> </tr> Client</td> Vala Community</td> </tr> Project Link</td> https://vala.dev</td> </tr> Project Type</td> Website</td> </tr> Technologies</td> Zola</a>, Tera</a>, JavaScript, HTML, CSS </td> </tr> Categories</td> Programming Language, Web </td> </tr> </tbody> </table> How I code in 2022 Unknown — Wed, 11 May 2022 00:00:00 +0000 My System#</a> </h2> I own a Starbook Mk V</a>. I wanted the most seamless experience possible with the OS of my choice: elementary OS</a> and wow, it delivers! It's fast, smooth, gets regular firmware updates over fwupd</a> and support is great (in terms of drivers, touchpad support and customer support).</p> Despite how slim it is, battery life is great. I average around 6-8 hours but on other operating systems like Pop!_OS 21.10</a>, I have gotten closer to the advertised maximum of 11 hours (around 8-10 hours).</p> Also, it's super easy to open the system for self-repairs and upgrades</a>. In fact they even offer a 1 year open warranty (at time this article has been written).</p> If it sounds like I'm selling this laptop to you, yes I am. If you want a, laptop made for Linux that is fast and "just works", this is it.</p> P.S. I'm writing this blog post with this laptop and it's been I haven't really been concious of the hardware itself. The experience has been so seamless that I just focus I'm just fully focused on writing this post instead.</p> Operating System#</a> </h2> I run elementary OS 6.1 Jólnir</a> on my main laptop.</p> I use it because it has the perfect balance of productivity and ease-of-use across all Linux Desktops (just to clarify, this is my personal opinion</strong>).</p> Still though, I do have several parts that I really don't like about it but, there's something about the aesthetics that makes me come back to the OS again whenever I swap to a different one.</p> Development Tools#</a> </h2> Sublime Text 4</a>#</a> </h3> I love that out of the box, it's pretty much a text editor with pretty decent, built-in syntax highlighting.</p> It's lightning quick and native too (your RAM will thank you).</p> Thanks to language server protocol</a> and the Sublime Text LSP package</a> that adds support for it to the editor you can add IDE-like features for the languages of your choice while still having full control of the exact worfklow you want.</p> Git</a>#</a> </h3> I use this for Version control</p> Thanks to Git, I can code features in parallel using feature branches.</p> If something goes wrong with my code, I can easily revert back to a working state.</p> Firefox</a>#</a> </h3> Not only is it an excellent browser, I'm also a big fan of the developer tool sections available there:</p> Accessibility: Makes it much easier to test for WCAG requirements</a></li> (Web) Console: There's an option to open a side bar that let's you easily write multi-line JavaScript code.</li> Also one of the only browsers that has actually implemented the freedesktop color scheme preference</a>.</li> </ul> Design Tools#</a> </h2> Figma</a>#</a> </h3> I make mockups and protoypes here before I start writign code that involves a UI.</p> By the way, it's free</strong> and works on all operating systems since it's browser-based!</p> (2022 Update: NOW IT HAS A DARK THEME !!</strong></a> 🌙️)</p> Special Mentions#</a> </h2> Mozilla Developer Network Documentation (MDN Docs)</a>#</a> </h3> I'm exteremely grateful to live in a time when such a resource exists. New things are being added to the web constantly. This website is a great way of learing about what APIs are out there, what's possible and also, which browsers support certain features.</p> Can I use</a>#</a> </h3> I love how this website gets straight to the point. "Can I use X feature on my website if I want to support at least browser version Y?"</p> Stack Overflow</a>#</a> </h3> My last resort.</p> Jailtime Unknown — Sun, 10 Apr 2022 20:31:00 +0000 Jailtime</h1> 2022-04-10</time> </header> </p> A browser extension that blocks websites by allowing you to add sites to a block list, making you more productive!</p> Available on both Google Chrome and Mozilla Firefox.</p> Overview Table </caption> Name</td> Jailtime</td> </tr> Client</td> Colin Kiama</td> </tr> Project Link</td> https://chrome.google.com/webstore/detail/jailtime/ffkepigdcjmnioppkooocmpgndoiopjd</td> </tr> Project Type</td> Web Browser Extension</td> </tr> Technologies</td> Stimulus Framework</a>, JavaScript, HTML, CSS </td> </tr> Categories</td> Programming Language, Web </td> </tr> </tbody> </table> Git Sweep Alias - Deleting stale local remote-tracking branches Unknown — Thu, 17 Feb 2022 00:00:00 +0000 I never remember the command for cleaning my remote branches so I decided to create an alias for them.</p> The alias#</a> </h2> git</span> sweep</span></span></code></pre> This is a shortcut for the git fetch --prune</a> command and a script that finds branches marked as gone</code> then deletes all of them. There's more detail about the process here: https://www.erikschierboom.com/2020/02/17/cleaning-up-local-git-branches-deleted-on-a-remote/</a></p> Setting the alias#</a> </h2> You can use set them using the git config command</a> or edit the git config file directly</a>.</p> Here's the command to set the alias with the git config</code> command:</p> git</span> config</span> -</span>-global</span> alias.sweep</span> "</span>! git fetch -p && git for-each-ref --format '%(refname:short) %(upstream:track)' | awk '</span>\$</span>2 == </span>\"</span>[gone]</span>\"</span> {print </span>\$</span>1}' | xargs -r git branch -D</span>"</span></span></code></pre> Here's what the config file should look like with the alias added:</p> [</span>alias</span>]</span></span> sweep</span> =</span> ! </span>"</span>git fetch -p && git for-each-ref --format '%(refname:short) %(upstream:track)' | awk '$2 == \</span>"</span>[gone]\</span>"</span> {print $1}' | xargs -r git branch -D</span>"</span></span></code></pre>Special Thanks#</a> </h2> Thank you Erik Schierboom</a> for providing the solution. Hopefully, this gets added directly into git one day. This alias is super useful for maintaining your repositories.</p> My experience with Zola - The static site generator Unknown — Thu, 10 Feb 2022 00:00:00 +0000 Introduction#</a> </h2> Around the time this article was written, this website was generated using Zola - a super-fast, modern static-site generator written in Rust</a>!</p> Why is Zola used for this website?#</a> </h2> My requirements were:</p> Speed - I need the site to be generated as fast as possible</li> Frictionless setup - I just want something that is simple to download and install. I don’t want to deal with potentially complex prerequisites</li> </ul> Zola fits my requirements the best. It’s typically distributed as a executable binary file</a>. The program is several MBs large which is awesome considering everything it does.</p> In November 2020, when I was deciding which static-site generator to use, the alternatives were mostly Node.js</a>-based programs (and still are https://jamstack.org/generators/</a> 😆).</p> So, while these generators provide so many useful, cool features, the issues are that:</p> They require Node.js on the machine that generates the site.</li> NPM package dependencies! I’ve seen the node_modules</code> folder can grow over 100x the size of the Zola itself.</li> Slower to generate the site than Zola.</li> </ul> I also checked out Hugo</a> and Jekyll</a> but I didn’t like the templating syntax of Hugo and Jekyll requires you to set up Ruby as a prerequisite.</p> Tradeoffs#</a> </h2> Here are tradeoffs based on the way I use Zola for this website:</p> Advantages:#</a> </h3> It’s (really really) fast. Written in Rust.</li> Compiles Sass for you</a></li> Decent templating syntax</a></li> Image resizing at build-time</a></li> Search</a></li> Multilingual Site Support</a></li> Shortcodes</a></li> Generates RSS feeds</a></li> Live reloads when serving the site locally</a></li> </ul> Disadvantages:#</a> </h3> Still maturing. There may be some features not available on here. You can help out here though: https://github.com/getzola/zola</a></li> Tooling around it isn’t as mature as other static-site generators.</li> </ul> Conclusion#</a> </h2> For my needs, no other static-site generator comes close.</p> Forums Unknown — Mon, 03 Jan 2022 23:12:00 +0000 My thoughts#</a> </h2> I feel like we could explore forums more</p> Reddit lets anybody create a community around a topic.</p> Discourse added a lot of dynamic social media-like interactions to the experience and allows you to host the whole experience yourself</p> And there are still the old reliable static ones still used in some places. No JS required xD</p> However, I haven’t really seen a balance of user freedom and monetisation opportunities (that aren’t ads).</p> Any thoughts? 👀 - send me an email with your response (there's email info below).</p> P.S. This was originally a tweet thread. You can view it here: https://twitter.com/colinkiama/status/1478139022908268546?s=21</a></p> For whenever I feel down and/or unproductive Unknown — Fri, 10 Sep 2021 21:09:23 +0000 At least one of these things have happened:</p> 1. You aren’t happy#</a> </h2> Take a break, do your favourite hobbies, go on a holiday, sort yourself out, sort your life out.</p> You do your best work when you love what you do, feel good about yourself and when your are in a positive mood 😄!</p> 2. You went straight to learning about how to do a task without starting it first#</a> </h2> You’re overwhelmed and you’re probably blaming yourself for “not being good enough”, which is 100% percent true, why are you trying to work on steps 2 and above when you haven’t even done step 1.</p> Take it one step at a time, just go for it, make your mistakes and overcome them one by one 😏!</p> Never forget: </iframe> </div></p> You are aware of your issues now#</a> </h2> Great! Now as long as you avoid the two issues above, you’ll make mistakes, you’ll face challenges but you’ll have the strength to overcome these challenges and shape the world in any way you want 🌍.</p> Now go do some cool stuff 👋!</p> Get started with debugging Vala programs in Sublime Text Unknown — Mon, 23 Aug 2021 10:51:00 +0000 February 2026 Update!</strong></p> Now includes gdb adapter instructions and additional configuration fields for a better debugging experience!</p> Prerequisites#</a> </h2> This tutorial assumes that you have a Vala program set up with Meson Build project structure.</p> Vala is a pretty underrated programming language in my opinion (but I'll probably get into that in another post). Find out more about it here: https://vala.dev</a></p> Find out more about meson here: https://mesonbuild.com</a></p> Step 1#</a> </h2> Install the Sublime Debugger package: https://packagecontrol.io/packages/Debugger</a></p> Step 2#</a> </h2> So depending on which compiler was used to compile the program, you need to use the correct debugger adapter for the best debugging experience. Otherwise, you'll experience issues like not being able to view variable values correctly.</p> GDB Debugger Adapter Instructions#</a> </h3> If your Vala project is being compiled with a GNU compiler, install the GDB adapter for the Sublime Debugger package: Debugger: Install Adapters</code></p> The GDB Adapter is "Native Debug" (code-debug) by WebFreak001: https://github.com/WebFreak001/code-debug</a></p> Node.js requirement#</a> </h4> This adapter does require Node.js to be installed to work. If you have problems with Sublime Text detecting Node.js in your PATH environment variable, you can adjust the Sublime Debugger package settings and set the path to node</code> binary manually.</p> To do this:</p> Open the Sublime Debugger settings: Preferences: Debugger Settings</code></p> Then you can set the path to node</code> like this:</p> {</span></span> "</span>node</span>"</span>:</span> "</span>/path/to/node</span>"</span></span> }</span></span></code></pre>LLDB Debugger Adapter Instructions#</a> </h3> If your Vala project is being compiled with an LLVM/Clang compiler, install the LLDB adapter for the Sublime Debugger package: Debugger: Install Adapters</code>.</p> The LLDB adapter is "codelldb" by vadimcn: https://github.com/vadimcn/codelldb</a></p> Step 3#</a> </h2> Build your program if you haven't already. You can run this command from the project root directory to set up a build directory in build/</code> then compile the program in the build/</code> directory:</p> meson</span> setup</span> build</span> &&</span> meson</span> compile</span> -</span>C</span> build</span></span></code></pre> Note: Meson Debug Build. The setup command uses the 'debug' build flag by default. It also inserts debug build flag arguments like -g</code>.</em></p> Step 4#</a> </h2> Ensure that you've opened a Sublime Text project. If not, create one. It's necessary for the debugger to work. You can do so by selecting: Project > Save Project As..</p> Save the project file to the root directory of your code.</p> Step 5#</a> </h2> Add debugger configuration project settings.</p> You can do this manually in the Sublime Text project file (project-name.sublime-project</code>), however, in this blog post we'll be using one of the debugger configuration templates via Debugger: Add Configuration</code>.</p> Based on the debugger adapter you want to use, there are differences to the way the debugger configurations are structured</p> GDB Instructions#</a> </h3> Next, select gdb</code> from the list.</p> At the time of writing this blog post, these are the following options:</p> GDB: Launch Program</li> GDB: Launch Attach to PID</li> GDB: Connect to gdbserver</li> GDB: Launch over SSH</li> GDB: Launch GUI over SSH with X11 forwarding</li> GDB: Debug external embedded device</li> </ul> Pick GDB: Launch Program</code>.</p> Now the project configuration file should open up with the configuration template added. Customise the debugger_configurations</code> field so that it looks something like this:</p> "</span>debugger_configurations</span>"</span>: </span>[</span></span> {</span></span> "</span>name</span>"</span>:</span> "</span>Launch</span>"</span>,</span></span> "</span>type</span>"</span>:</span> "</span>gdb</span>"</span>,</span></span> "</span>request</span>"</span>:</span> "</span>launch</span>"</span>,</span></span> "</span>target</span>"</span>:</span> "</span><relative_path_to_compiled_program_binary_from_cwd></span>"</span>,</span></span> "</span>cwd</span>"</span>:</span> "</span><current_working_directory_of_compiled_binary_program_to_run_in></span>"</span>,</span></span> "</span>env</span>"</span>:</span> {</span></span> "</span>G_MESSAGES_DEBUG</span>"</span>:</span> "</span>all</span>"</span></span> }</span>,</span></span> "</span>valuesFormatting</span>"</span>:</span> "</span>prettyPrinters</span>"</span></span> }</span></span> ]</span></span></code></pre> Here's a real life example:</p> "</span>debugger_configurations</span>"</span>: </span>[</span></span> {</span></span> "</span>name</span>"</span>:</span> "</span>Launch</span>"</span>,</span></span> "</span>type</span>"</span>:</span> "</span>gdb</span>"</span>,</span></span> "</span>request</span>"</span>:</span> "</span>launch</span>"</span>,</span></span> "</span>target</span>"</span>:</span> "</span>./valdo-plus</span>"</span>,</span></span> "</span>cwd</span>"</span>:</span> "</span>${folder}/build/src</span>"</span>,</span></span> "</span>valuesFormatting</span>"</span>:</span> "</span>prettyPrinters</span>"</span>,</span></span> "</span>env</span>"</span>:</span> {</span></span> "</span>G_MESSAGES_DEBUG</span>"</span>:</span> "</span>all</span>"</span></span> }</span></span> }</span></span> ]</span> </span></span></code></pre> cwd</code> refers to the current working directory that the program will run in.</p> Notice that target</code> (the compiled program binary to run) is a relative path from the value of cwd</code>.</p> Also ${folder}</code> refers to the root folder of the project.</p> For more information about the configuration attributes, visit the Native Debug project website: https://github.com/WebFreak001/code-debug</p> LLDB Instructions#</a> </h3> Next, select lldb</code> from the list.</p> At the time of writing this blog post, these are the following options:</p> CodeLLDB: Launch</li> CodeLLDB: Attach by PID</li> CodeLLDB: Attach by Name</li> CodeLLDB: Custom Launch</li> CodeLLDB: Debug Cargo Output</li> CodeLLDB: Debug Cargo Tests</li> </ul> Pick CodeLLDB: Launch</code>.</p> Now the project configuration file should open up with the configuration template added.</p> Customise the debugger_configurations</code> field so that it looks something like this:</p> "</span>debugger_configurations</span>"</span>: </span>[</span></span> {</span></span> "</span>type</span>"</span>:</span> "</span>lldb</span>"</span>,</span></span> "</span>request</span>"</span>:</span> "</span>launch</span>"</span>,</span></span> "</span>name</span>"</span>:</span> "</span>Launch</span>"</span>,</span></span> "</span>program</span>"</span>:</span> "</span><path_to_compiled_program_binary></span>"</span>,</span></span> "</span>terminal</span>"</span>:</span> "</span>console</span>"</span>,</span></span> "</span>cwd</span>"</span>:</span> "</span><current_working_directory_of_compiled_binary_program_to_run_in></span>"</span>,</span></span> "</span>env</span>"</span>:</span> {</span></span> "</span>G_MESSAGES_DEBUG</span>"</span>:</span> "</span>all</span>"</span></span> }</span></span> }</span></span> ]</span></span></code></pre> Here's a real life example:</p> "</span>debugger_configurations</span>"</span>: </span>[</span></span> {</span></span> "</span>type</span>"</span>:</span> "</span>lldb</span>"</span>,</span></span> "</span>request</span>"</span>:</span> "</span>launch</span>"</span>,</span></span> "</span>name</span>"</span>:</span> "</span>Launch</span>"</span>,</span></span> "</span>program</span>"</span>:</span> "</span>${folder}/build/src/valdo-plus</span>"</span>,</span></span> "</span>terminal</span>"</span>:</span> "</span>console</span>"</span>,</span></span> "</span>cwd</span>"</span>:</span> "</span>${folder}/build/src</span>"</span>,</span></span> "</span>env</span>"</span>:</span> {</span></span> "</span>G_MESSAGES_DEBUG</span>"</span>:</span> "</span>all</span>"</span></span> }</span></span> }</span></span> ]</span></span></code></pre> cwd</code> refers to the current working directory that the program will run in.</p> Notice that program</code> is a path to the compiled program binary to run.</p> Also ${folder}</code> refers to the root folder of the project.</p> For more information about the configuration attributes, visit the CodeLLDB project website: https://github.com/vadimcn/codelldb</p> Environment Variables For a Better Debugging Experience#</a> </h3> Take note that in the debugger configuration examples above, the environment variables are being set via the env</code> field. G_MESSAGES_DEBUG=all</code> is being set so that the Vala program can output debug log messages.</p> Step 6#</a> </h2> Start debugging.</p> Select Debugger: Open</code> to reveal the debugger's UI. You'll be able to press the play button to get started.</p> You can place breakpoints by clicking left of line numbers in the editor.</p> In the Debugger UI, the down arrow is for stepping over and the left and right arrows are for stepping out and into your code respectively.</p> This is just a small taste of what the debugger package offers. You can find out more about it in the project's readme: https://github.com/daveleroy/sublime_debugger</a></p> Happy debugging!</p> Dynamically creating component layouts in JavaScript Unknown — Fri, 30 Jul 2021 23:38:00 +0000 One function in a new file is all you need#</a> </h2> Check this out!</p> //</span> BlockListItem.js</span></span> </span> //</span>/ HTML Output</span></span> //</span>/<li class="block-list-item" data-controller="block-list-item" data-block-list-item-url-value="{{url}}"></span></span> //</span> <span>{{url}}</span></span></span> //</span> <button class="primary" data-action="block-list-item#delete">Remove</button></span></span> //</span> </li></span></span> export</span> function</span> create</span>(</span>url</span>)</span> {</span></span> let</span> urlSpan</span> =</span> document</span>.</span>createElement</span>(</span>"</span>span</span>"</span>)</span>;</span></span> urlSpan</span>.</span>textContent</span> =</span> url</span>;</span></span> </span> let</span> removeButton</span> =</span> document</span>.</span>createElement</span>(</span>"</span>button</span>"</span>)</span>;</span></span> removeButton</span>.</span>textContent</span> =</span> "</span>Remove</span>"</span>;</span></span> removeButton</span>.</span>classList</span>.</span>add</span>(</span>"</span>primary</span>"</span>)</span>;</span></span> removeButton</span>.</span>setAttribute</span>(</span>"</span>data-action</span>"</span>,</span> "</span>block-list-item#delete</span>"</span>)</span>;</span></span> </span> let</span> blockListItem</span> =</span> document</span>.</span>createElement</span>(</span>'</span>li</span>'</span>)</span>;</span></span> blockListItem</span>.</span>classList</span>.</span>add</span>(</span>"</span>block-list-item</span>"</span>)</span>;</span></span> blockListItem</span>.</span>setAttribute</span>(</span>"</span>data-controller</span>"</span>,</span> "</span>block-list-item</span>"</span>)</span>;</span></span> blockListItem</span>.</span>setAttribute</span>(</span>"</span>data-block-list-item-url-value</span>"</span>,</span> url</span>)</span>;</span></span> </span> blockListItem</span>.</span>appendChild</span>(</span>urlSpan</span>)</span>;</span></span> blockListItem</span>.</span>appendChild</span>(</span>removeButton</span>)</span>;</span></span> </span> return</span> blockListItem</span>;</span></span> }</span></span> </span></code></pre> ...and just like that, you have a component layout that can be reused across multiple vanilla JS code files!</p> Reusing the layout across different JavaScript files.#</a> </h2> In another JavaScript file, you could can use this component layout like this:</p> import</span> *</span> as</span> BlockListItemElement</span> from</span> "</span>./BlockListItem.js</span>"</span>;</span></span> </span> //</span> Somewhere down in the code, we'll create the HTML layout for the component:</span></span> let</span> url</span> =</span> "</span>https://www.instagram.com</span>"</span>;</span></span> let</span> blockListItem</span> =</span> BlockListItemElement</span>.</span>create</span>(</span>url</span>)</span>;</span></span></code></pre> Yachting Partners International (2021 Redesign) Unknown — Thu, 25 Mar 2021 00:00:00 +0000 Yachting Partners International (2021 Redesign)</h1> 2021-03-25</time> </header> </p> Covers all aspects of yacht services such as brokerage, chartering and management. I was the front-end developer for this project.</p> Overview Table </caption> Name</td> Yachting Partners International Wesbite (2021 Redesign)</td> </tr> Client</td> Yachting Partners International</td> </tr> Project Link</td> https://www.ypiyachts.com</td> </tr> Project Type</td> Website</td> </tr> Technologies</td> Twig</a>, Node.js</a>, JavaScript, HTML, Sass </td> </tr> Categories</td> Travel </td> </tr> </tbody> </table> How I code in 2020 Unknown — Sat, 12 Dec 2020 21:09:00 +0000 Here's what I use on my personal computer!</p> Operating System#</a> </h2> I run Pop!_OS 20.10</a> on my main laptop.</p> It's based on Ubuntu and it's the fastest and most productive Linux distribution that I've ever used!</p> Development Tools#</a> </h2> Visual Studio Code</a>#</a> </h3> My main code editor. It's has an easy to use layout, very customisable and is widely supported!</p> Git</a>#</a> </h3> I use this for Version control</p> Thanks to Git, I can code features in parallel using feature branches.</p> If something goes wrong with my code, I can easily revert back to a working state.</p> Starship</a>#</a> </h3> I love the enhancements that it adds to my terminal!:</p> Color-coding</li> Developer environement information</li> Current git status</li> and more...</li> </ul> Firefox</a>#</a> </h3> Not only is it an excellent browser, I'm also a big fan of the developer tool sections available there:</p> Accessibility: Makes it much easier to test for WCAG requirements</a></li> (Web) Console: There's an option to open a side bar that let's you easily write multi-line JavaScript code.</li> </ul> Also, it's one of the only browsers that reads that gets the "prefers-color-scheme" value from the Pop!_OS, (As far as I'm aware)</p> Design Tools#</a> </h2> Figma</a>#</a> </h3> I make mockups and protoypes here before I start writign code that involves a UI.</p> By the way, it's free</strong> and works on all operating systems since it's browser-based!</p> Pomodoro Timer UWP Unknown — Thu, 12 Nov 2020 00:41:00 +0000 Pomodoro Timer UWP</h1> 2020-11-12</time> </header> </p> A pomodoro timer app with features like "always-on-top" mode, background support and the ability to customise your each interval and how many sessions you'll have.</p> Overview Table </caption> Name</td> Pomodoro Timer UWP</td> </tr> Client</td> Colin Kiama</td> </tr> Project Link</td> https://www.microsoft.com/store/apps/9PJSR2QK1V1V?cid=colinkiamaSite</td> </tr> Project Type</td> App</td> </tr> Technologies</td> UWP</a>, WinUI</a>, C#, XAML </td> </tr> Categories</td> Productivity </td> </tr> </tbody> </table> </a> </div> Dysprose Unknown — Thu, 12 Nov 2020 00:40:00 +0000 Dysprose</h1> 2020-11-12</time> </header> </p> A Windows 10 Application for times when your ideas aren't coming together/you need to focus.</p> Start a session where you have to keep typing within a regular interval or risk all your work fading away right in front of you then save your work at the end.</p> Overview Table </caption> Name</td> Dysprose</td> </tr> Client</td> Colin Kiama</td> </tr> Project Link</td> https://www.microsoft.com/store/apps/9NNZQ38B48ZJ?cid=colinkiamaSite</td> </tr> Project Type</td> App</td> </tr> Technologies</td> UWP</a>, WinUI</a>, C#, XAML </td> </tr> Categories</td> Productivity </td> </tr> </tbody> </table> </a> </div>