Modern Full-Stack Development

 Suggested  Exercises
One great thing about a game is there’s never a shortage of things you could do to it 
to expand it. I’ll suggest just a few things, some relatively straightforward, some that 
would be significantly more challenging (and therefore more useful as a learning 
experience):
•  Introduce the idea of “attack tiles.” Choose one of the existing tile 
types and declare it an “attack” type, just like how the wildcards are 
handled. When the player matches two of them, they gain an “attack.” 
With it, they can click a button (that you’ll add to the control area) 
and it will send a message to the server that is then sent to their 
opponent. The result is that the opponent loses 50 points and gets, 
say, four tile pairs added back. Nasty, but fits in with the “battle” part 
of BattleJong well! I’d suggest using Material-UI for this, but maybe 
you should instead find a different UI library for React, just to get 
some other experience?
•  Add the ability for a player to shuffle their board up to five times per 
game. This is often a part of Mahjong Solitaire’s implementations. 
It allows a player to get through a dead-ended board, at least a few 
times.
•  Provide alternate tilesets and let the player choose the one they like. 
You’ll have to come up with X
∗42 tile graphics, where X is how many 
tilesets you want to provide.
Chapter 11   time for fun: BattleJong, the Client

---

345
 Summary
In this chapter, we built the client side of BattleJong, making it a complete game. You 
learned a little more about Webpack, dealing with images specifically, and you saw the 
client side of the WebSocket equation. Of course, you got some experience with basic 
game design as well, but that was inevitable when building a game, wasn’t it?!
In the next – and final – chapter, we’ll cover one last topic, something that plays a 
role in modern application development: app deployment using containers and Docker 
specifically.
Chapter 11   time for fun: BattleJong, the Client

---

347
© Frank Zammetti 2020 
F. Zammetti, Modern Full-Stack Development, 
https://doi.org/10.1007/978-1-4842-5738-8_12