Preliminary React UI

[PepperLola]

Depends on #881

Description

Converts the existing UI to use React. The goal is to have all of the modals, panels, and the Main HUD mocked up but unable to communicate with Synthesis. They might also need some fine-tuning to look good, but that's not the goal of this PR. The page background after building will be purple so that we can do chroma keying (can change the shade later; we'll probably want to automatically ensure that it doesn't conflict with the theme as well).

Objectives

• [X] Components necessary for modal/panel parity with Unity UI system
• [X] System for opening and closing modals, panels, and the main HUD
• [ ] All modals and panels from Unity UI

Testing Done

• Tested interactions with all UI elements
• Tested in dev (yarn dev) and in production after building (with yarn build)

Testing Prerequisites

• Make sure you have Node.js installed
• You can stick to using npm but I would install yarn
  • You can follow the instructions on the yarn website if you want more flexibility with the installation but I would just run npm i -g yarn to install it globally
• Install vite globally using npm i -g vite
• Install all of the dependencies by running npm i or yarn in the react/ directory

Dev Mode Testing

To test in dev mode, you can run npm run dev or yarn dev from the command line while in the react/ directory, then go to the URL that it outputs (probably http://localhost:5173)

Testing with CEF

Only on Mac right now until Brandon gets other OS's working Follow Dev Mode Testing to run the dev server. Navigate to the cef/ directory and run ./build.sh. Then run ./build/Release/synthesis_cef.app/Contents/MacOS/synthesis_cef to start CEF. It should automatically load the dev server. If not, make sure it's hosting at http://localhost:5173.

Production Testing

To test in production, run npm run build or yarn build and then open the dist/index.html file it generates

JIRA Issue

[HunterBarclay]

@PepperLola Congrats! You're the only long term PR to survive. Please either rebase or move the typescript and react to a new branch that doesn't have CEF.

[HunterBarclay]

Moved to new branch