The Bug Among Us

I’ve added “run code” for the users to check if they have fixed the bugs yet. Also, there is a read only guide that players (civillians) can use as a reference and helper in completing the tasks

Winning screen! Civilians win if there are no sabotagers, sabotagers win if there are no civilians. I know, I know, I should have put it as if sabotager = civilians, sabotager win. But users can’t test it if I put it as that

I’ve used Liveblocks to implement real time players’ cursor. Now, you can see what others are doing! The cursor matches the color of the players too

The routes are now protected. Took quite a long time to figure how to redirect the players to the current page if they try to go to another page. I try to implement liveblocks to see other players’ cursors but it won’t work

I’ve made the emergency button working now. Finally (fr this time) completed v1.0

Last fixes to deploy the app in railway.v1.0 is done! The routes are not protected yet though. I’ll fixed route protection and optimize the website for speed in v2.0

Implement the tasks for civillians and sabotagers. V1 is now complete. This is not completely finished yet as there is still some bugs that I need to fix and functions that I need to implement for better gameplay

P.S: The emergency button is not working yet 🙏

Loaded the voted category into the editor. Each category has a different code file. Also added some loading states for better UX:)

Refrain players from voting themselves, and show if eliminated player is the sabotager or not in the elimination page. If skip votes = highest voted player => no one is eliminated. If 2 players have the same amount of votes, no one is eliminated

Finally completed player voting system (tried to do it in last devlog). It works!!

I changed the socket.id to playerId so that I can later sync the players to server, which can avoid bugs like 1 player can vote multiple time. Well, I messed up pretty badly and has to revert the git commit for like 3 times before I got it right, ts so painful to do T.T

completed the real time chat! Now, players can chat with each other inside the room

Completed the basic UI of the discussion page and I’ve assigned each player a color (later will be important for the chat). The routes are not protected yet tho, so yes, you can see me going through routes in the website. I’ll fix this at the end when the game is finished.

I’ve designed the basic structures of the discussion page. Now, when the timer ends, they will switch pages and the round increment. After 4/4 players move back to lobby. I tried to tackle the templates of codes for players to edit but end up failing miserably =(. I’ll probably tackle it again in next update, or maybe not ;-;

I’ve completed the basic structure of the code editor, now players can edit and it will display the real time edit of other players! Also, when the timer end, the players will be moved to the discussion page (I also styled the timer to make it appear as a warning when timer is leass than 10s =>. Overall, everything is moving smoothly as planned.

I’ve completed the basic structures of the gameplay page. Working role assigning, timer for each round, and the basic UI. Also debug some of the small errors too

Completed role assigning, pretty simple really. Next come the difficult part 🥲

Finished voting category section. The votes are real time data, I also included a loading screen. I’m gonna add a role assigning function after voting (before the loading screen). There’ll be 2 roles, Civilians and Sabotagers.

Complete lobby page: players inside room, share room code, better UI and UX, toggle to “vote” page when all players are ready. I also built the basic structures of the voting page, won’t do anything yet tho.

Better UI and UX (clearer bg, popup for name, detect if there is no name, close popup, …)

Improve the UI a bit and implement socket.io to make the game multiplayer. Next step is gonna be the gameplay:)

Set up the basic structures and pages of the game, can create a room with different IDs now