Working on a project knowing that it will be discarded later gave me a lot of freedom on the actual implementation. I didn't have to worry about scale and, to a certain degree, maintainability. I figured I only need to keep this maintainable in terms of a few weeks when we're still feeling out the features.
Make it Modable
I do however need to make the prototype modable and make it easier for other people to play and tweak the variables. All the textual and stat data in the game are externalized on a database in Firebase.
Firebase is cool because it lets non programmers edit the data on the fly and have it reflected on all instances of the game. Kapitolyo district is too rich? Open firebase, tweak the stat, and everyone gets updated to the new stat.
Take Advantage of Language Features
Laying out the UI is straightforward in HTML. Displaying the daily status reports as a newspaper was a no-brainer because that's what html was originally intended for.
All the data interrelationships were possible thanks to AngularJS. 2-way data binding means gamedata getting updated in one part of the game would be reflected every where else.
The graphs and charts were done on D3. I always find drawing graphs fun so I always wanted to add them into the game. It doesn't add anything to the gameplay but it helps a lot on showing player feedback.
Keep an eye on UX
While this is just a prototype we still need to keep the playing experience in mind. We wanted to test the gameplay and it would be very difficult to get feedback if players keep getting frustrated with the UI. It's very easy to get lost especially in a strategy game.
The game used to look like this:
Now it looks like this:
After prototyping in HTML5 we now have a general idea on the direction we want this game to take. However, I have a few misgivings with this approach. Something I will write in great detail on my next blog post.