Upgrade prettier, add some ui elements, add the Register page.

[acrantel]

Adds the register page.
UI elements added / styled (these have all been tested, see the Register.tsx page):

• Button
• FormError
• FormLabel
• Icon
• Input
• SelectMenu

Prettier changes:

• Adds @headlessui/tailwindcss to style headless ui components based on state.
• Adds prettier-plugin-tailwindcss to sort tailwind classes
• Upgrades prettier so that prettier-plugin-tailwindcss works
• Removes prettier precommit hook because it conflicts with having prettier-plugin-tailwindcss listed in prettierrc.json
• Formats the entire project with the new prettier setup (it added a lot of commas lmao)

Before testing, make sure to run npm install to get the updated packages.

[n8kim1]

we need both 24 and 20? would it be worth it to cut down and only need to import one of them?

[j-mao]

(jumping in here as someone who hasn't been paying attention and who has just read some email digests)

I think it's ok to have both, because it makes sense to be able to tailor/change icon-sets for different episodes of Battlecode. But, this is conditioned on:

• The setup being something easily extensible to n episodes of Battlecode for large n.
• I think it's ok if this extensibility means defining a new dict/mapping for each episode, because that's unavoidable when each episode could be different.
• However, it should also be implementable without changing the downstream rendering code, so this looks a bit more dubious. Perhaps it could be a single mapping that maps each episode name to one of these dicts?

Separately, curious how easy it would be to use this framework to add new menu items in the future with new icons? (possibly the answer is "very easy", I didn't read the code at all)

[n8kim1]

(oops, 24/20 px not episode, sorry for the confusion)

[acrantel]

20/24 represents the icon size, not the episode of battlecode. We use smaller icons for buttons / form elements, and bigger icons are used for navigation.
We would use the same icon set across all episodes of battlecode.

Separately, curious how easy it would be to use this framework to add new menu items in the future with new icons? (possibly the answer is "very easy", I didn't read the code at all)

new menu items per episode can be added like this:

{episode === 'bc123' && 
    <SidebarItem
          iconName="whatever_icon_name"
          text="Resources"
          linkTo={`${linkBase}resources`}
    />
}

[n8kim1]

ah, if either size gets used for different purposes, then sounds good
I'm a little wary of the extra overhead here -- if we want to add a new icon, then we'd have to import both sizes, and make sure the correct size gets used. But perhaps this is easier than I think. Most of all though, we could always come back to this later

[j-mao]

ah fair, naming wasn't entirely clear but makes sense now

[lowtorola]

LGTM pending resolution of Jerry & Nathan's comments 🙌

[n8kim1]

Consider showing a user-facing error, even just propagating the backend message up to the frontend is fine. (errors where nothing seems to happen would be annoying to user)

[n8kim1]

and it's not clear to me that the error does show, especially if it's in the login method? If it does feel free to ignore me, I haven't locally tested yet

[acrantel]

I'll do this in a separate PR, as this PR is already pretty big. In that PR I'm also planning on creating a reusable component for displaying these errors.

[n8kim1]

oooo a reusable error comment, niceeee

[acrantel]

Actually for this PR I can make a super simple error message and replace it in the later PR

[n8kim1]

overall looks good, do see comments though!