NS Lobby is a multi-user lobby where that users can join when they're waiting for their train to depart. Users can fill in their name and move their player around a virtual train station. This makes for a fun way to kill time while waiting for your train.
This project was part of the Minor Web Design & Development at the HvA. The goal of this project was to create a live connection between the client, server and other users and to send real time data both ways at the same time.
Goals / Learning Objectives
There were a couple of goals I wanted to achieve during this project.
- Deal with real time complexity
- Handle real time client-server interaction
- Handle real time data management
- Handle multi user support
- Move characters(DOM elements) through a space in real time
- Pull accurate data from the NS(Nederlandse Spoorwegen) API
- Animate characters and give them skins using Rive
To create a better idea of what happens within the app, I made a flowchart that describes all functions.
This flowchart is based on one of the earlier iterations of the app. The final version of the app may have a different flow. I created this chart mainly to give myself, as a developer, a better understanding of what happens within the app.
Data Model API
For this project I decided to use the NS(Nederlandse Spoorwegen) API. This API provides data about the Dutch railways. My general idea for the app was to create a lobby of sorts in which users could move their character around. The NS API proved to be a good fit for this idea and inspired me to create a lobby where users can move around a train station while they wait for their train to arrive.
By sending a request to the API, you can get data about the stations and trains. In my case the only data relevant to me were the specific station and its upcoming departures. I created a data model to get a better understanding of the data I would get back from the API and what data I'd want to use in the app.
The data lifecycle diagram describes the flow of data within the app. It shows emits and listeners for socket events and how the data is handled and what it sends back.
For the player movement I created idle and walk animations in all four directions. I used a mix of bone-based and frame-by-frame animation to get the desired result. To make these animations I used Rive. By using Rive I'm able to create bone-based animations and add input based logic to trigger animations on the web.
The final version of the app is a multi-user lobby where that users can join when they're waiting for their train to depart. Users can fill in their name and move their player around a virtual train station. This makes for a fun way to kill time while waiting for your train.
- Visual Studio Code
This project has been documented on Github.Github page