Case Study

For EmblemCon 2025, my streaming partner Ducessa and I wanted to upgrade our interface for our annual Wheel of Fortune panel. In the past, we weren't able to show the wheel on screen due to limitations. As I grew as a developer, I felt confident that I'd be able to build something that could solve this problem.

Thanks to Wheel of Names and their easy-to-implement code for websites, I began building the board which was fairly simple. I just needed to open up a reference and code areas that appeared similar to the standard Wheel of Fortune layout using plain ol' HTML and CSS.

The challenge laid with the functionality. I needed to figure out a way to put the pieces on the board and change their colours to match the source material's appearance.

The way I solved it may not be the cleanest code, but it's simple yet efficient and I managed to code all of the puzzles in the matter of an hour or two thanks to it. Since the board tiles are constant and will never change, all I needed to do was give them an ID with a unique number, and then create an array template for each puzzle. In the template, there would be members that would relate to each board piece (eg, #piece-1 on the board would relate to piece1 in the array), and I would fill in that member with the content if it was applicable.

Using Javascript, I created a variable that's always a number. The code would run through each piece and check the corresponding member of the array equal to the variable. If that member had content in it, (aka a letter), it would create a div, style the board piece, append the letter and the div, and apply an event listener to the div and move onto the next number. If there was no content in the array member, it would skip to the next number without doing anything.

The reason why it needed an event listener is to match functionality from the show. Clicking on a letter in the letter bank would turn the div blue, and then on a click, the div would disappear so that the white tile and the letter will show.

Coding this project was truly a lot of fun, since it had me dissect the functionality for the Wheel of Fortune show and think about how I can rebuild it using the skills I had. This project inspired me to build another site for another panel Ducessa and I were hosting, Fire Emblem Jeopardy