Biome
Biome is a game in which the player creates a small ecosystem of aquatic creatures. It can be gradually explored at a relaxing pace, but players can also compete to see who can discover all the creatures fastest.
Purpose
Biome was my first web app written in JavaScript. I wanted to create an interactive app with an account system that could save the user’s information and also facilitate simple interactions between users.
Technology
I chose Express for the core of the project. It’s a minimal approach to creating a web app that would allow me to get my hands on some of the lower-level functionality that JavaScript frameworks typically abtract away from the developer.
For the database, I chose MariaDB to gain some experience with SQL.
Project Structure
I seperated out the functionality of the app into several files. server.js handles all the routing for the app. controller.js contains all the business logic. db-man.js contains functions that interface with the database.
For the app view, I used HTML templates coupled with a view controller that injects data into the template.
Functionality
The view controller and server controller talk to each other via AJAX and server-sent events (SSE). When the view loads, it sends a POST request to the server via AJAX, and the server responds with a JSON payload that contains the app’s current state. The view is likewise refreshed any time the user interacts with the view.
In the game of Biome, events occur periodically which change the state of the app. I found that using SSE, I could have the view controller subscribe to a channel through which the server can send messages. I set it up so that if the view controller receives a message from the server, it will refresh the view with new data.
User Data
Biome supports user accounts which save the uer’s progress in the game. I used Express Session to manage logins, which saves the user’s session id in a cookie. When a user creates an account, their password is encrypted before being stored in the database using bcrypt.
The game has a function that tracks how much time it takes to complete the game, and it displays the name of the user with the best time in the app view.
Accessibility
In order to make the app accessible to users with a vision impairment, I used semantic HTML, alt text for images and ARIA labels to make the app screen reader-friendly. When something changes on the game board as a result of a server sent event, the screen reader will announce the change in real time.
The app is also able to be controlled solely by keyboard to facilitate users with a motor impairment.
Design
I went with a deep-sea theme for Biome, so the background colors are a deep, dark blue. The creatures are designed to look like they are glowing in the dark underwater environment. The header text and link styling also matches this theme.
Feedback
I recieved positive feedback on the theme and gameplay of the app, and the account system works well. Some users criticized the gameplay for being opaque or hard to understand at first. I added a small explanation of how to play the game on the homepage to try to address this.