This is an ongoing project based around the idea of remote workers being able to connect in a shared online space. For now the demo shows users being able to chat using chat bubbles, or use topics to store chats. You can test out the multiplayer features by opening a second window in another browser or incognito mode.
This project has many interesting technical features.
Real Time Updates
Players are notified in real time about other player movements, chats, or topic creations. This is accomplished through the use of Phoenix Channels and a dynamic room/topic system implemented in the app. The Phoenix Presence module is also used to notify users of new/departing players.
2d Game Mechanics
This project was an opportunity for me to try out the excellent Phaser game library to make 2d webGL enabled games. The design of the world and tileSet is taken from an excellent tutorial on Phaser games here https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6
The demo game has many stateful items which must be tracked in real time and stored from session to session. Player positions, statue positions, and saved chats must all be available to new players and saved after all players exit. This requires coordination between the main database and the app server to deliver unique sets of data to each user depending on their state in the demo.
This is a fun project we used within my current working group. I wanted to have a Github display that surfaced the movement of work instead of the static state at any given time.
It tracks changes to Github issues/branches/PRs in a repo and then presents any changes as tickets on this board. The tickets are seperated by user and color coded by how old they are.
By checking the site throughout the day a user is told what has changed, instead of trying to figure out what has changed using the Github Kanban board
This main technical challenge of this project was setting up OAuth so that users could access our private work repo. Aside from that, it was fun to set up real time communication with all the clients using socket.io. This allowed us to keep the board up all day on an unused tv in the office instead of having to refresh the page.
This is a small template that can be used for anyone who wants to try to make a site combining Three JS and React. It is a powerful combination that I think has a lot of potential. Three JS offers very rich visuals, but having a React layer ontop allows the user to have web controls they are familiar with.
In the demo a user can hover on any of the blocks, then use the React popup to change the color of the block. The color is also shown directly in the React popup to highlight that information passing between the two frameworks is real time and a two way street.
A very fun/challenging project I did to create a robot that can write out tweets on a whiteboard. The image shows the first time it successfully completed "Hello World"
The main logic was written onto an Arduino board. This included an api for receiving tweet information, a font translator to turn the tweet text into a motor instruction set, and the motor control code to actually write out the message.
The mechanical system was a series of servo motors with external controllers and power supply. I burned through a lot of control boards before I figured out they weren't rated for that much current! A Lego and string system was used to hold the whiteboard marker.