projects

Projects are my lifeblood. I love chasing exciting ideas that I can dream up, even if they might end up taking way longer than I first anticipated!

My main technologies are TypeScript and React with knowledge of nodecg, Next.js, Vue.js, and Impact (thanks CrossCode). In terms of games, I'm most familiar with Unreal Engine through modding A Hat in Time for 6 years and know too much about the obsolete Unrealscript language in UDK, but I've also touched Unity and godot a bit. In the past, I've also used C++ professionally.

I'll go into more detail on some of my work below!

chishoals-layouts

This is a set of nodecg broadcast graphics that I created for my local Splatoon event organization SquidWest (which, if you're in the Midwest, you should check them out!!). If you're not familiar with nodecg, it's a toolset for developing broadcast graphics which are quite literally just webpages! I make mine with TypeScript and React. This includes graphics (the layouts you actually see on a stream), dashboards (ways to control the graphics you see on stream), and extensions (server-side code, helpful for things like integrating with OBS and other applications).

Starting Soon screen for chishoals-layouts

I've been attending the Chicago events hosted by SquidWest since July 2023! In February 2024, I reached out to the organizers regarding potentially volunteering to improve the stream by making them stream layouts. I hadn't worked with nodecg up until that point, but I was generally familiar with it from my experiences volunteering for speedrunning events like Games Done Quick and Frame Fatales. Since then, I've been working on developing improvements to the layouts every month to progressively add more features and improve functionality!

nodecg Dashboard for chishoals-layouts

Currently, the layouts include a Starting Soon screen, an Intermission screen, and a custom Credits roll all designed and developed by me with direction from the event organizer.

splat-title-quiz

This is a smaller website/game I developed in March 2024 with TypeScript and React. It is a fun but pretty absurd concept which tests your knowledge of Splatoon 3's titles (of which there are over two thousand!!), which is a customization feature you can collect and display to others within the game. You try to enter as many titles as you can, and can use provided hint and reveal features to get help with figuring them out!

PC Interface for splat-title-quiz while playing

This website was an experiment of making a website with exclusively TypeScript and React without additional frameworks. I've enjoyed messing around with not using any as a means to better understand all the dynamics of why they exist and the limits of what you can do without them.

Mobile Interface for splat-title-quiz

It was also a great learning opportunity for mobile-friendly design. I found that it was very difficult to properly test and prepare for how mobile devices would interact, even when using tools like Firefox's Responsive Design Mode. When it was finally ready, I pulled out my phone and found out that there's a strange text issue with the input boxes, and that the performance was quite slow! It's challenging to appropriately design for these platforms especially when making game-like interactive websites and tools, which I tend to make. The process of tweaking everything and having people test the app across various devices was a very interesting and eye-opening experience.

dungeon-mystery

My favorite and most ambitious project, dungeon-mystery was a 2-month project back in November 2022 where I developed a recreation of the dungeon algorithm from Pokémon Mystery Dungeon: Explorers of Sky in TypeScript.

context

Pokémon Mystery Dungeon: Explorers of Sky or just PMD EoS for short, was a game in a side series to the Pokémon games, released for the Nintendo DS in 2009 (though it was actually an enhanced version of its two sister games Explorers of Time and Explorers of Darkness in 2007). It featured roguelite dungeon-crawling gameplay through procedurally generated floors called mystery dungeons in which you battled and explored to adventure your way to the stairs (the exit).

Explorers of Sky Gameplay

Growing up, this was one of my absolute favorite games. I always found myself fascinated by how it could create these intricately designed dungeons that always felt different and were built in a way that seemed distinctly PMD-esque. Of course, at the time I didn't really know much about its prior history and origins within Dragon Quest and the Shiren the Wanderer series.

I picked up PMD EoS as one of my speedgames October 2021, interested in the fast-paced Randomizer 10 Blitz category that had been developing. This involved playing quickly through 10 completely random dungeons (in an already inherently random game) and was typically done in a race setting. Eventually, I was accepted to run the category for AGDQ 2023 and became very interested in how the dungeon algorithm actually worked. Since the whole category is a randomizer, I figured having a deeper understanding of how the whole process actually worked might give me an edge in quickly reading and playing random layouts.

There's even more to this story and process, but I already made a post about this years ago which you can read here if you're interested!

development

dungeon-mystery Finished Generation example

dungeon-mystery is a TypeScript library available on npm containing a fully working recreation of the dungeon algorithm from Pokémon Mystery Dungeon: Explorers of Sky. All functions are documented with references to their corresponding addresses. I made this entirely from scratch with help from pmdsky-debug, a reverse engineering repository with debug information and documentation for PMD EoS which I've made contributions to. There's also dungeon-eos, which was a similar project but done in Python, which I used as a cross-reference while researching the reverse engineered assembly and C code in Ghidra.

dungeon-mystery code example

Part of my motivation involved improving the readability and accessibility of the algorithm, as I found that the Python implementation was difficult to parse and didn't explain itself much. I also wanted it to be entirely functional that way you could experiment with how the algorithm works and how the countless generation settings interact with each other. Of course, this was also made in tandem with the web application below called Pokémon Dungeoneer, which adds a front-end to the algorithm so that you can visualize and explore everything easily!

Pokémon Dungeoneer

A sister project to dungeon-mystery, Pokémon Dungeoneer is a web application made with TypeScript, React, and Next.js. It serves as the front-end to the library provided by dungeon-mystery and is inspired by a tool for Pokémon speedrunners made by Corvimae called Pokémon Ranger (not to be confused with the side series of games with the same name).

Pokémon Dungeoneer generation steps

Features include every single parameter of the dungeon algorithm fully customizable each with explanations and details on how they're used and what they control. In my opinion the coolest feature is the ability to step through the dungeon algorithm's process. You can walk through each step which has been individually labelled to see just how the algorithm got to generating the floor you see!

This was a very ambitious project for me to attempt as I had never even done web development prior to it, so to immediately make this was quite the jump! There are a lot of aspects that I wish to improve such as the challenges of making the layout mobile-friendly, and I hope to come back to this eventually now that I have much more experience.

links