side-order-palette-planner
ohhh Range B when i get you >:(
overview
- Name: side-order-palette-planner
- Length: 50+ hours
- Start Date: April 2024
- Technologies: TypeScript, React, HTML, CSS
links
in short
side-order-palette-planner is a tool for creating, playing, and sharing Side Order palettes!
It was built from the ground up for people interested in doing particular kinds of runs of Side Order, like Palette Art or Music Palettes. It contains a whole bunch of features designed to make these runs far more convenient to play, as we'll talk about below.
how it works
The Side Order Palette Planner is built around three things: Creating, Playing, and Sharing.
Creating Palettes
The most fundamental thing you can do is draw and erase on the palette like a mini-drawing program.
Draw Mode will place down whatever your selected Color Chip or Tone is on the left sidebar, and Erase Mode will remove them.
There are a lot of utility features to make palette building easy, and to account for the kinds of use cases you might have.
Sound Mode lets you click on the color chips to hear what they play in-game. This allows you to build palettes that can play music, as long as you can manage to get the right tones (it's harder than you might think...). There's also an option to turn off sounds if you don't want to hear them while placing and removing chips.
You can use Labels to help with identifying which chips are what. The tones especially can be difficult to distinguish, they don't have all that much contrast with each other, so labels are really helpful when you need to tell them apart.
I added quick functions for things like Resetting the palette, Randomizing it, Randomizing Tones (a very useful feature when you make a base palette with flat single tones, then can use this to add some texture), Flipping the palette, and Shuffling everything around.
If you're using Eight's Palette, you'll also see a dropdown to set the number of Hacks your palette should use, to restrict the corresponding number of slots!
The tools available make it very easy to quickly whip up a palette if you have something in mind!
Playing Palettes
Drawing a palette in theory is one thing, but what about actually playing them?
Before you start playing a palette, I imagine one of the first things you'd want to know is, is the palette actually possible?
Chip Logic will verify the palettes you make and check for a variety of conditions to be sure you can complete it in-game! What can make a palette impossible to complete?
- Placing too many of a given Color Chip or Tone down
- Having a Color Chip that's exclusive to other palettes
- Using too many Drone Chips leading to more Drone Abilities than you're allowed to have
- Needing hacks to complete your palette when using Eight's Palette
Chip Logic attempts to help with all of these as much as it can (with one exception).
Of course, this isn't just limited to Color Chips, this applies when using Tones as well, and even when mixing the two together! (That was a really complicated thing to figure out how to do properly!!!!)
As a side note: the last one is technically not checked, getting the precise hack count of a palette, especially with tones in the mix, is actually pretty annoying to do. However, the Minimum Hacks Display can help you identify which hacks are relevant so that you can double check whether or not it will work!
Play Mode is what you'll be using when you're actually ready to go! It places a marker on the palette which you can use to keep track of the current / next Color Chip or Tone that you need to get.
The right sidebar will then contain detailed information about that Color Chip or Tone to help with the kinds of runs you may be doing. This includes information about what palettes a chip is compatible with, the Color Chips that correspond to a given Tone, and the Tones with Sound Types that are similar to that chip.
For Music Palette runs, this information is essential as you need to be precise about the kinds of chips you collect, so the more information the better!
Sharing Palettes
Finally, what if you want to share what you've made with a friend, or keep it for later?
Share Codes allow you to save and share your palettes with people! Each code consists of 36 characters which each correspond to one color chip placed on the palette.
You can copy the code from the entry box, or press the copy button then paste it elsewhere to share it!
To import someone else's palette, just paste it into the box!
Alternatively, the Share Code is also embedded within the URL of the page, along with the specific palette you're using and whether you have Chip Logic enabled, so you could share that instead!
I did my best to think of basically all the features someone could hope for, though even now I still have a couple more ideas. We'll see if I ever come back to add to this again later...
the story
I love Side Order.
I've spent a long time figuring out every possible interesting way to play it.
Palette Art runs like Sus%, Loss%, Shit%, Pearlina%, FF%.
Completing Sus% on Eight's Palette (a pain!).
Drone Only runs with all hacks, then few hacks (one of my favorites), and maybe some day no hacks at all...?
Playing with certain subs only, even attempting to find a way to make a splash wall complete stages (not happening lol).
Early on, I was hoping someone would have made something to help with making palettes. I saw people drawing scrappy paint palettes especially around when it just came out and we wanted to do funny runs of the game. Eventually, Sus% (where you make an among us crewmate on the palette), became popularized and from there the concepts were all over the place.
In April 2024, driven by my own passion doing silly runs, I started making a tool that I called the Side Order Palette Planner. My goal was to make something that would cover helping to plan and prepare for all of the kinds of runs I had done before.
The initial concept had many of the ideas of what would eventually be made: clicking and dragging on slots to draw on the palette, a logic mode that would check if your palette was valid, some mechanism to share it with other people, and sound playback for music palettes.
I eventually incorporated new ideas that popped up as I built it like labels for the color chips because they were sometimes hard to tell apart, flipping and shuffling the palette, making the above-palette bar which responds to the most prevalent chips you've placed, and the right sidebar to give detailed chip information.
It took over a year to make with on and off progress. Making a tool like this can be difficult. There are a lot of complex components that all work together, and since I had a pretty clear vision on what I wanted out of it, finding the places to compromise so that I would have something I could call "finished" was a challenge.
I really enjoyed building the UI components to mimick how they are in-game, I feel like one of the defining traits of my websites has become detailed style mimickry. (Hell, that's literally what dungeon-mystery) even is).
Of course, it's not just copying, it's understanding why the style works at all. Then, figuring out how to expand and recontextualize it in a new way.
This project was a pretty big deal for me, it's one that I really could feel the weight of finishing. I'm glad people like it, and I hope to keep making stuff just as ambitious in the future.