Devlog #09

I got some spare time to work today, so I thought I would add a few tiny features to elevate the Pass n’ Play experience. I think this project is ready to ship; each game is fully playable and I think now is a good time where feedback can help me greatly improve each game so it provides the best experience possible!

Completed Work: Parties

With a lot of assistance from AI (when figuring out how to properly get my localStorage function working), I have incorporated a new “Party” system into each game! It allows a group to save all of their names as a “Party” to their device so that they can quickly fill in every player’s name upon loading a new game. The new system supports up to 8 parties, which can each be given a unique name. Aside from making it easier to switch games, because of its localStorage usage, if the same group of friends regularly use my website, they can skip the step of inputting their names every time they decide to play.

This idea was inspired by a similar feature I saw on an app (I can’t find its name) that was very similar to Imposter Who. Right now, the system is built into each game’s game setup screen, but I am considering moving it to the home screen so that each game screen is a bit more clean. If you are a reviewer reading this, let me know if the “Party” system gets in the way.

Completed Work: Round Timer

I also added the option for a round timer to the Imposter game. It was relatively simple as I just had to move around the timer code I used for Signal Jam. The CSS was moved to my global CSS file and I copied over and adjusted the HTML and JS.

While I was at it, I made a few more polishes, such as adding a custom designed scroll bar.

Next Steps:

I am going to ship the project today. I already have my README drafted, I just need to make a few edits.

I am not done with this project. I’m going to wait and see what feedback I get, but some plans I have for the future are making a globalized JavaScript file, adding a custom word/prompt bank feature to most games, adding more prompts to each game, adding more party games that can be played on one screen and adding a filter and sort system to the homepage. 

Thanks for reading! 

Devlog #08

Development has really slowed down now that I am entering the thick of it at school. Regardless, over the past two weekends, I finished Signal Jam and started the fourth (and final) game before shipping, The Outsider!

Completed Work: Signal Jam

Finishing this up was quick and smooth. I don’t remember exactly how long it took, but it was fast enough that I decided to wait until completing the idea I had sitting in the back of my mind (The Outsider) before posting another devlog.

I reused the Results screen code from the previous games, tweaked the content to be specific to the game, and added a few extra if statements since this game has more win conditions. After playtesting, I made some small polish changes and committed everything.

Completed Work: The Outsider

This game’s flow was inspired by Chameleon.  I went in expecting it to make a quick reskin of Imposter with a new word grid feature, but building that grid took more time than planned. Getting the grid to look good on both mobile and desktop was tricky. I eventually decided to lock mobile players into landscape mode so the grid would have more space and be easier to see when everyone’s looking at the same screen. Then, I had to figure out wrapping and line break issues to ensure the words were consistently displayed neatly.

One technical highlight I would like to share is that, originally, I thought about storing the selected word index using a data-selected-index attribute on the grid container, but since attributes only store strings, handling 0 (the first cell index) would have required extra checks to avoid false negatives. Instead, I used a closure variable (selectedIndex) inside the function that built the word grid. This clean solution enables it to reset automatically each time the grid renders, which also clears the previous selection. 

Next Steps:

The project is basically ready to ship! I’ll make one more devlog to add some localStorage features and wrap things up before release. 

Thanks for reading!

Devlog #07

The CSS Revamp is complete and the third game for Pass n’ Play is in development. After this devlog, I’m going to make sure I post more frequent devlogs. I keep procrastinating…

Completed Work: Finished Polishing Website

After the last devlog, I spent 4 more hours finishing up the CSS and the Imposter Game. The second installment to Pass n’ Play is now fully functional, with 156 different words to play with. It is also fully polished to a level I am ready to present, both in game flow and aesthetics. I think one thing that made this process longer than I had initially thought it would be is the fact many minute details needed adjustments throughout all my code. Since I had copied over the secret saboteur code for the imposter game before changing up the UI, I had to ensure I properly transferred the new style changes I made to the HTML and JS of the imposter game (since only my css is globalized).

I finally think I have locked in the style that I would like to use for this website and that my code is a lot more organized than before. This should hopefully make development quicker in the future.

Completed Work: New Game

Also continuing from my last devlog, I have begun working on the third party game for Pass n’ Play: Signal Jam. Its fundamental gameplay is similar to the classic 20 Questions, however it has specialized roles which I believe create interesting dynamics and increase the fun. The game flow was inspired by another party game called Werewords. So far I have my game information, game setup, main discussion and voting screens done. It currently has 75 unique words as game prompts.

I’m finding it a bit hard to add additional insightful details because I am basically repeating the process I had to make the Imposter. So, I’m going to describe how I have refined my process to work a bit faster than with the Imposter game.

I first made the Game Information page so I have all the rules established. Each game is its own file that keeps all files specific to the game within it. So in order to write the game information I copied the Secret Saboteur info.html and edited the content to explain the rules for Signal Jam. This page has no JavaScript and was already linked to my generalized info.css file, so I did not have to do anything else.

After that, I started building the game in sections, starting with all the code I would need up to the discussion screen. For the HTML, I would copy over individual blocks of code I knew I could reuse (often editing them to fit the language of the new game), note what new components  I needed, and research how I could add it to the game. For instance, this game has a round timer, which no other game had, so I had to add  a few new HTML and JS elements. Also, to keep things organized, instead of adding more stuff to the main game.css file, I used a separate style.css page. Once everything was polished to a level I was happy with, I started on the next chunk of my game. I continued this process until the game was completed. This was much better than what I did before for the Imposter game where I basically duplicated all the code for Secret Saboteur and then scoured through it to see what I needed to change and remove.

Next Steps:

I primarily need to complete the game (which is almost done, I just need to make the Results Screen!) Afterwards, I want to add a custom word bank feature to the game that saves with localStorage and an option to add a round timer to the discussion screen. Finally, I got to think of one more game to add before I ship.

Thanks for reading! 

Devlog #06

It certainly has been a while since my last devlog! I paused development for a few weeks in order to finish another website idea I had been working on. I honestly then procrastinated on working on this again once I realized I had to readjust and familiarize myself to the inner workings of my old code. It was definitely more disorganised than I had remembered leaving it. When I did eventually start,  school was also beginning, so I have only been able to work on it in small intervals throughout the week. This slow development, combined with the roadblocks I stumbled upon (as described below) made the past 10 hours of development time come quite unexpectedly.

Completed Work: Imposter Game Functionality

As I said in the last devlog, I would begin to work on my second game: Imposter. I got the HTML done relatively quickly. I would say about half of my time was spent finishing the game logic for my Imposter game, which is now fully functional. It honestly took longer than I thought because my code for Secret Saboteur did not translate as smoothly as I thought it would to the imposter game.

Directly copy-pasting the Secret Saboteur code for the Imposter game led to a few errors, and I spent a lot of time combing through the imposter code to figure out what needed to be changed or removed from the secret saboteur code. I definitely need to figure out a better approach for adding new games. Fortunately, I have been able to implement Secret Sabouter’s CSS without many issues.

Completed Work: Design Revamp

As I was working on Imposter, I had been brainstorming ways to improve the UI and had settled on a few ideas. So before polishing the CSS for the Imposter game, I decided to revamp and finalize the UI for the secret saboteur game. With my old design, I felt as though everything was competing for attention. I think I used the card style way too often, which did not bring much diversity to the design and made organization a bit fuzzy. With my new design changes, I believe my design now has more breathing room and utilizes each game’s accent colors more directly. I also tried to make my shadow sizes, border radii and spacing a bit more consistent. Instead of using emojis, I have been trying to complete SVG icons. I sourced them from Lucide’s Lucide and Bootstrap’s icon libraries.

This definitely took up most of my time. Completing this took a lot longer than I was expecting. I think one reason time flew by so quickly is because when I first tried to change up my design, I messed up a lot of things. Midway through the process, I was questioning if doing this was a mistake, because I had ruined the look of Secret Saboteur and caused its game flow to stop working due to inconsistently changing a few class names. If I had to do this again, I would take note of exactly what I changed so I can easily work through errors and debugging.

I also found that as I was redoing my design, I ended up cleaning up a bit of my Javascript and CSS in the process. There was quite a bit of code from abandoned ideas still hanging around.

Next Steps:

I would not say the Imposter Game or the design changes are completely done. Those 10 hours snuck up on me; I think I need to spend a bit more time getting each of my games the level of polish I would like. However, I don;t think it will take too long, as I am really close to finishing this “polishing” process.

After that, I’m going to try and add two more games before making my first ship. You’ll have to wait until the next devlog to see what party game I add next. By the way, feel free to suggest any games and I’ll try to see if I can add them.

Thanks for reading! - 2026/09/06

Devlog #05

The first Pass n’ Play game is now fully playable and polished! The core functionality was finished shortly after posting the last devlog (about 3.5 hours of coding in), but the real work happened afterward. In order to make the game feel more polished and actually part of the Pass n’ Play design system I had to tighten the layout, fix hierarchy inconsistencies, and clean up the UI. 

Completed Work: Javascript

Right after posting the last devlog, I realized I had completely forgotten to implement the Guesser role. Once I added it, I noticed I had accidentally configured the game so the first player always became the guesser. This meant rewriting a section of my assignRoles() function so roles actually randomize correctly.

After that, I finished the Javascript for both the guessing screen and the results screen. The biggest friction point was the saboteur button layout. I originally formatted them in a column, but switching to rows made the spacing and logic behave properly.

The longest debugging issue came from something small. I had removed a header from the info popup in my HTML, but forgot to delete the Javascript function that controlled it. This “ghost” function caused a whole section of my script to stop working, and I kept thinking I had broken other functions. Once I finally noticed and removed the unused function, everything went back to normal.

Completed Work: CSS

Once the game was functional, I felt the CSS still looked unpolished. The text inside <main> did not feel like part of the same physical UI system as the buttons and headers. I rebuilt these text blocks into proper card badges so they look like real components instead of raw HTML. I also inverted the text hierarchy for the game header, removed redundant labels, and cleaned up the popup by removing the extra close anchor and header (which caused the Javascript issue mentioned earlier).

I also spent time making sure the design would translate well to mobile. With some research and AI help (which only confirmed formatting issues and did not write code), I updated my layout so everything uses a unified 600px max‑width. This prevents the header from overflowing on smaller screens and makes the whole app feel like a cohesive handheld interface. The button grids now collapse into balanced two‑column stacks on narrow displays.

While doing this, I adjusted a few element styles, reorganized the setup elements into a clean vertical column grid, and grouped Play Again and New Game into a structural wrapper so their spacing is predictable. Overall, making the spacing and alignment more intentional helped the entire interface feel more cohesive.

Next Steps

I am now starting work on Pass n’ Play’s second game: Imposter, based on the “Imposter Who?” party game that was popular earlier this year. I am also still unhappy with how the Game Setup screen looks, so I will probably adjust it soon. Any advice on improving the design would be greatly appreciated. 

Thanks for reading! - 2026/08/06

Devlog #04

I have almost finished the first party game for Play n’ Play the past few days. I completed almost all of the game CSS, did most of the JavaScript and made some additional edits and fixes. For instance, after reviewing the HTML my sleep deprived mind wrote last devlog I realized I had copied the old game layout a bit too closely to my liking; including parts I specifically wanted to improve. With a clearer head the next morning, I redesigned the setup screen. One change I made, for instance, replaced the bulky button grid with compact quantity selectors for choosing the player and saboteur count.

It was at this moment I realized I should go back into my planning doc and finalize my notes on game logic. Some of the mechanics I originally wrote down didn’t match the flow I wanted anymore, so I rewrote those sections and made sure the updated logic was reflected in my JavaScript structure.

This redesign also helped me clarify how players move through the game (especially the setup and guessing phases) which made the later coding steps feel more intentional.

JavaScript Progress

I said in the last devlog that I would update once the JavaScript was finished, but my logged time was approaching the 10‑hour cap, so I wanted to post earlier to be safe. Right now, the JS is fully implemented up to the guessing screen, which puts me at roughly 3/5 of the game logic completed.

My workflow looked like this: I explained my game logic to an AI (ChatGPT) and asked it to describe the functions I would need, just to outline their purpose (it did not write the actual code for me). With those descriptions and my own research, I drafted the most of JS file in commented sections like game setup, discussion, and event listeners. You can even see these comments in the JS screenshot. After that, I wrote the actual functions myself, discovering how each piece worked as I went.

I should also note I used AI for some tedious tasks, like checking the game’s 105 discussion prompts (most of which I derived from the oold game version) for duplicates or adjusting ones that weren’t broad enough for a general audience.

Completing CSS 

Even though I started with JavaScript, I eventually drifted into CSS (partly because I wanted a break, and partly because I wasn’t sure how clean my HTML structure was). I swapped back and forth between working on JS and CSS until I accidentally completed most of the styling.

Implementing the CSS helped me see where I needed more classes or where the markup was missing hooks for interactivity. For instance, writing the CSS made it easy to envision and test how the progression button would look when disabled or enabled (depending on if all the required information on the game setup screen was complete). I’m hoping developing future games for this project will go faster now that I’m more familiar with this workflow.

Additional Reflections

Working on this project has taught me a lot about VSCode shortcuts I didn’t know before; small things that make typing and navigating code much faster.

Learning JavaScript has definitely harder for me than learning HTML and CSS, but I’ve noticed some similarities to C++, which I’ve used for past hardware projects. That familiarity makes the learning curve feel a bit less steep.

As for the website design… something still feels slightly “off.” I can’t pinpoint it yet, but I think the aesthetic could be improved. If you have suggestions, I would greatly appreciate feedback in the comments. 

Next Steps

My plan is to finish the JavaScript completely, then polish everything afterward and commit my updates to GitHub. If all goes well, the next devlog will cover the finished, playable version of Secret Saboteur.

Thanks for reading! — 2026/08/04

Devlog #03

Built the main HTML structure for Secret Saboteur (my first game) today. I was able to speed my planning process up by referencing the layout I had set up in my previous draft, making sure to not directly copy my old code. I may add a few more additional components as I work on the JS and CSS later on. 

I found that writing a big block of HTML at once makes it a lot harder to find typos, which I often made. Another thing I spent a lot of time on was  cleaning my HTML structure so adding JavaScript later won’t turn into a mess. The hardest part was preparing the markup for JavaScript. I’m used to only setting things up for CSS, but after researching JS (and getting debugging hints from AI), I realized I needed to specify waayyy more classes than usual.

Now that the foundation is finally in place, my next step will be making the game actually functionable by bringing it to life with JavaScript.

Thanks for reading! - 2026/08/01

Devlog #02

Added consistent styling to both game instruction pages. I styled the instructions for the first game, Secret Saboteur, on my site and added a new instructions page for another game - Imposter (based on Imposter Who?). I reused the homepage’s layout and visual identity, but the fun part was making the accent colors fully customizable. By turning the accent colors into CSS variables, I could swap themes right from the HTML without touching the stylesheet!

I think this small change made the site feel cohesive while keeping customization effortless. It’s satisfying seeing design consistency emerge from my use of variables and general coding structure.

Thanks for reading! - 2026/07/29-30

Devlog #01

Today, I worked on making and styling the homepage. I also drafted the info page for one of my games, Secret Saboteur, in html. The hardest part today was trying to organize my code so that I could easily add more games in the future. Much time was spent fixing a few syntax errors I made that broke my CSS design.

Pass n’ Play will be a website that hosts multiple party games that can all be played on one device (preferably a phone). It will be great for times when a group of friends want to play a game but have no board or card games handy. It avoids the issue of playing over a poor connection or not everyone having their own device, which many online multiplayer games have.

Project Inspiration

During school at lunch, my friends and I used to play Imposter Who? at lunch. However, we eventually got bored of the categories and didn’t want to pay for the expanded word banks. This made me wonder if I could code my own version of the game that had its own categories - which led me to create a quite scrappy version, heavily influenced with AI and super disorganized (the whole game crammed into a single, 2375 lined, html file). I also started to add a super buggy version of Secret Saboteur, based on a Smosh Games video I had recently watched.

So I decided that I would reattempt making those games from scratch for the Stardance challenge. This time, much more organized and with no AI. The only thing I will be borrowing from the previous version is some word banks I made.

Completed Work

In my previous version, the instructions were cramped onto one screen and honestly were not that clear, so I gave each game a dedicated info screen in the new remake. Additionally, the games did not really have an identity of their own. The CSS was pretty basic (the only other color was cyan). 

The new design draws partial inspiration from Nintendo and heavily from neo‑brutalism web design. A guide I found on Medium I read that really helped me capture the aesthetic. Each game will share the same overall style but have its own emoji and accent color, giving it a distinct identity while keeping the ecosystem cohesive.

Next Steps

The next devlog will probably be when I finish styling the info page for Secret Sabotuer, which will be the first game I will make functional. I’m also compiling a list of party games that work well on one device. So far I’m planning to include Chameleon and my own game, Role Roulette.

If you have any suggestions for fun one‑screen party games, I’d love to hear them!

Thanks for reading! - 2026/07/29