Remove rl-loadout-lib and replace Material-UI with the updated library

rl-loadout-lib is mostly useless right now and is just bloat with its dependencies. The material-ui library is also renamed to @mui and is in a new location. Requires some minor changes to imports and refactoring of some components. Seems to work okay though there are some visual issues with the new library in /docs.

Author: Sciguymjm

docs/package-lock.json

@@ -16,7 +16,6 @@
   "license": "MIT",
   "devDependencies": {
     "@types/react-dom": "^17.0.14",
-    "awesome-typescript-loader": "^5.2.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "typescript": "^4.6.3",

docs/package.json

@@ -1,5 +1,5 @@
-import Tab from "@material-ui/core/Tab"
-import Tabs from "@material-ui/core/Tabs"
+import Tab from "@mui/material/Tab"
+import Tabs from "@mui/material/Tabs"
 import React, { Component } from "react"
 
 import Main from "./components/Main"

docs/src/App.tsx

@@ -1,4 +1,4 @@
-import Grid from "@material-ui/core/Grid"
+import Grid from "@mui/material/Grid"
 import React, { Component } from "react"
 
 import {

docs/src/components/CompactViewer.tsx

@@ -1,8 +1,8 @@
-import Grid from "@material-ui/core/Grid"
-import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"
+import Grid from "@mui/material/Grid"
 import React, { Component } from "react"
 
 import {
+  DrawingControls,
   FieldCameraControls,
   GameBuilderOptions,
   GameManager,
@@ -11,26 +11,24 @@ import {
   PlayerCameraControls,
   ReplayViewer,
   Slider,
-  DrawingControls
 } from "../../../src"
 
-interface Props extends WithStyles {
+interface Props {
   options: GameBuilderOptions
 }
 
 interface State {
   gameManager?: GameManager
 }
 
-class Viewer extends Component<Props, State> {
+export default class Viewer extends Component<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {}
   }
 
   renderContent() {
     const { gameManager } = this.state
-    const { root } = this.props.classes
 
     if (!gameManager) {
       return "Food machine broke..."
@@ -39,7 +37,11 @@ class Viewer extends Component<Props, State> {
     return (
       <Grid
         container
-        className={root}
+        sx={{
+          "&& > div:nth-child(even)": {
+            backgroundColor: "rgba(0, 0, 0, 0.05)",
+          },
+        }}
         direction="column"
         justifyContent="center"
         spacing={3}
@@ -86,10 +88,3 @@ class Viewer extends Component<Props, State> {
   }
 }
 
-export default withStyles({
-  root: {
-    "&& > div:nth-child(even)": {
-      backgroundColor: "rgba(0, 0, 0, 0.05)",
-    },
-  },
-})(Viewer)