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