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!