FITUMI is an online multiplayer game built with React, TypeScript, and Supabase. Players can create or join a room with other players using a unique room code. This is my first attempt at a multiplayer game with live updates in the browser. It makes use of Supabase’s realtime databases to trigger reloads of various components.
The game itself is a pictionary-like game with an element of deception throw in. Players take turns contributing a single mark to a collaborative canvas. Each player with the exception of one is shown the subject of their artwork and must work together to sketch an image. At the same time, the excluded player who doesn’t know the subject, is attempting to blend in so as not to be found out. At the end, all participating players vote on who they believe wasn’t aware of the subject.
One of my favorite pieces of this application is the animation that plays out behind the Home and Lobby screens. This is an html canvas element with a script I wrote that draws strokes by randomly generating four points and creating a bezier curve between them with some recursive linear interpolation.
Above are the in game views with the first one being the active (or currently drawing) player’s view. The second image shows a player in waiting. It also shows the optional left-handed view which is nice for tablet users like myself!
It’s a highly entertaining game with a group of online friends. Try it out at fitumi.vercel.app