Drill Utils (for Marching Band)

Added support for multiple movements! I, in particular, added movement 2 of my show. You can now select which movement to use and it'll automatically update the people around you as well.

Add a light theme!

Sometimes you only want to see your own dot, so there is now a way to do that. Super simple feature, perhaps useful to some people (like me, who gets super easily distracted when there is a lot of stuff on screen)

In marching band, theres this concept as a plus or minus set which is essentially the next or previous set. This is super useful to have visualized so that you know what angle you are going at / approaching. Some people prefer to have more minus sets, some prefer to have more plus, so I added a feature to display a configurable amount of plus/minus sets.

Custom views! essentially, you can now hide and un-hide specific performers that you don't want to see on the field. For instance, I can make a view that shows me clarinets only. Or, I can make a view that removes all guard off the field. Super simple to use, super easy to switch around.

The previous update/devlog was super cool cus it allowed me to get the dots of all of the marchers. Here's what I did with that. Basically, I made a hash function for each instrument so every section had a color. Then, I threw all of the marchers on the same field, which lets u see the overall formation (super helpful as well!).

Next update, I'm adding some kind of way to only view marchers you want to

I added a dialog so that users can see all of their sets and then select a set from there. This is especially helpful for when you want to skip forward a bunch of sets, as previously you had to use the cumbersome scroller or spam click the arrows.

I discovered this super useful tool called 'tabula' that essentially makes extracting data from pdfs super duper easy. Previously, I was just manually copy pasting and transforming the data but tabula lets me export as a csv super easily. I did a little demo in the devlog video.

What this also means is that EVERY SINGLE PART of the band is in!!! This allows me to do some super cool stuff such as visualizing other parts!! (future update!?)

Since this is the first devlog after the previous ship, i might as well add some more context as to what this is. Essentially, in marching band, drill is just a bunch of positions on the field that you're supposed to go to. The purpose of this website is to help visualize that and let you learn it faster. Anyway, here's the update:

Added a bunch of alto saxes this update, as they checked out this and felt it was cool for them as well!! This is now gradually getting used by more and more people in the band...

Alright, this is my final update before the project goes for shipping... I've added a README w a good quantity of images, and also updated the site's icon and some various metadata (title & description stuff). It's been deployed but you can visit it at https://drill25.alaninnovates.com

Hope ya'll enjoy this. Feel free to comment here or DM me if you want me to add your school's drill.

Heavily optimize the dot management page so that it didn't take forever to actually update dots. Also, fixed the issue where inputs became un-focused after typing in them. The vid below might not look like a lot but it is so much faster than before.

The reason for these was all because I was abusing zustand (the state management library im using) and requesting the full state, instead of just what state was needed. This led to huge performance issues cus it was re-rendering the page with the full dotbook 🤦

A few changes have been made this time around:
- Fix the orientation of the yard line numbers (they used to be flipped around)
- Show move/hold for the counts
- Fix midset display so it only shows on midsets and not on top of the dot
My school's actual marching show is coming along super well, we already finished movement 1 (out of 3) and this app is being used by several members already!

In preparation for the second day of 7 hour practice (wow, 9-4???) I made a lot of needed changes, this includes:
- Add built-in dots for my whole section (the clarinets!) so that they could all use it without having to manually enter their dots
- Add midsets (the white dot), which were super helpful today
Anyway, I did use this app in real life for a whole day today, so I do have a few things that I want to change. Namely, adding music capabilities to the app and also adding notes capabilities (adding notes to a particular set, such as for specific choreo or info)
Expect these changes soon!

A few major updates, as today was the first day that my marching band did drill!
- Show a bunch more details about sets, such as count structure and set #. Midsets are coming soon.
- Add buttons to switch drill page
- Added an import page that lets you also change/add dots
These were all honestly rushed in the hour before my rehearsal today, so more updates are coming later as I polish things up.

Things are getting suuuuper specific here, but I've placed the yard numbers in the correct locations! That is, the bottom being 11.4 steps from the sidelines and the top being 14.4. And they're flipped around the right way too!

Implemented a few very cool things!! You can now scroll through all of your dots using a slider, and then see the actual dot at the top left corner of the page! Oh, I also added a way to animate through your path so you can better visualize it.

This app is aiming to be optimized for phone (because that's all you can use while marching) so a lot of the UI is going to be very large and easily-visible for smaller screens.

A few exciting things happening! First off, I finally got dots on the field! These are based on some json that I get to define (I'll attach an example later). Also, I have optimized the field so that it only shows the little grid lines (for each step) when you're fully zoomed in. This helps a lot when panning around the field and zoomed out.

As promised, here's an example of one of the pages (dots):
{
set: '1',
side: 1,
sideToSide: {
yardline: 40,
stepOffset: 3.5,
stepOffsetDirection: 'Inside',
},
frontToBack: {
line: 'Front Hash (HS)',
stepOffset: 2.5,
stepOffsetDirection: 'In Front Of',
},
}

Created a (in my opinion) pretty nice marching band field. it's intended to replicate my high school field, so not an actual field. The dimensions are a bit different - 28 steps from front sideline to the front hash and so on. However, it works really nicely!!