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