Trying to Modernize

UWStout · Dec 1, 2023 · 2ee22df · 2ee22df
1 parent cfca5c3
commit 2ee22df
Show file tree

Hide file tree

Showing 18 changed files with 4,903 additions and 2,301 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "fontsource"
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,29 +19,32 @@
   "author": "Seth Berrier",
   "license": "MIT",
   "dependencies": {
-    "@octokit/rest": "^18.12.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
+    "@octokit/rest": "^20.0.2",
     "atob": "^2.1.2",
-    "axios": "^0.24.0",
-    "dotenv": "^10.0.0",
-    "esbuild": "^0.13.9",
+    "axios": "^1.6.2",
+    "dotenv": "^16.3.1",
+    "esbuild": "^0.19.8",
     "highlight.js": "^11.3.1",
-    "jimp": "^0.16.1",
+    "jimp": "^0.22.10",
     "markdown-to-jsx": "^7.1.3",
-    "query-string": "^7.0.1",
-    "react-cookie": "^4.1.1",
+    "query-string": "^8.1.0",
+    "react-cookie": "^6.1.1",
     "react-lazylog": "^4.5.3"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.3",
+    "eslint": "^8.55.0",
+    "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/shared/GameInfo.js b/shared/GameInfo.js
@@ -1,3 +1,5 @@
+import { PropTypes } from '@mui/material'
+
 import { RepoInfo, SocialLink, toCamelCaseString, PlatformEnum } from './GameUtils.js'
 
 export default class GameInfo {
@@ -17,6 +19,20 @@ export default class GameInfo {
     this.socialLinks = social || GameInfo.DEFAULT_SOCIAL_LINKS
     this.repo = repo || GameInfo.DEFAULT_REPO_INFO
   }
+
+  static shape () {
+    return {
+      key: PropTypes.string.isRequired,
+      courseID: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      descriptionMDURI: PropTypes.string,
+      requirementsMDURI: PropTypes.string,
+      instructionsMDURI: PropTypes.string,
+      buildPlatforms: PlatformEnum.shape(),
+      socialLinks: SocialLink.shape(),
+      repo: RepoInfo.shape()
+    }
+  }
 }
 
 // Static default values

diff --git a/shared/GameUtils.js b/shared/GameUtils.js
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types'
+
 export const RepoTypeEnum = {
   UNKNOWN: 0,
   GIT: 1,
@@ -20,6 +22,9 @@ export const RepoTypeEnum = {
       if (match > -1) { return i }
     }
     return RepoTypeEnum.UNKNOWN
+  },
+  shape: function () {
+    return PropTypes.oneOf(Object.values(RepoTypeEnum.props).map(v => v.name))
   }
 }
 
@@ -53,6 +58,9 @@ export const PlatformEnum = {
       if (match > -1) { return i }
     }
     return PlatformEnum.UNKNOWN
+  },
+  shape: function () {
+    return PropTypes.oneOf(Object.values(PlatformEnum.props).map(v => v.name))
   }
 }
 
@@ -61,6 +69,13 @@ export class SocialLink {
     this.type = type
     this.URI = URI
   }
+
+  static shape () {
+    return {
+      type: PropTypes.string.isRequired,
+      URI: PropTypes.string.isRequired
+    }
+  }
 }
 
 /**
@@ -101,6 +116,15 @@ export class RepoInfo {
       this._evolutionVideo = value
     }
   }
+
+  static shape () {
+    return {
+      type: RepoTypeEnum.shape(),
+      view: PropTypes.string,
+      clone: PropTypes.string,
+      evolutionVideo: PropTypes.string
+    }
+  }
 }
 
 // Regular expression to separate a string into words based on non-letter chars and capitalization

diff --git a/src/Components/AboutBox.jsx b/src/Components/AboutBox.jsx
@@ -1,24 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { makeStyles } from '@material-ui/core/styles'
-
-import Typography from '@material-ui/core/Typography'
-import Paper from '@material-ui/core/Paper'
-
-const useStyles = makeStyles(theme => ({
-  aboutBox: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.grey[200]
-  }
-}))
+import { Typography, Paper } from '@mui/material'
 
 export default function AboutBox (props) {
-  const classes = useStyles()
+  const { title, children } = props
   return (
-    <Paper elevation={0} className={classes.aboutBox}>
-      <Typography variant="h6" gutterBottom>{props.title}</Typography>
-      <Typography>{props.children}</Typography>
+    <Paper elevation={0} sx={{ padding: 2, backgroundColor: theme => theme.palette.grey[200] }}>
+      <Typography variant="h6" gutterBottom>{title}</Typography>
+      <Typography>{children}</Typography>
     </Paper>
   )
 }
@@ -27,3 +17,8 @@ AboutBox.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string
 }
+
+AboutBox.defaultProps = {
+  children: null,
+  title: 'About this page'
+}
diff --git a/src/Components/Copyright.jsx b/src/Components/Copyright.jsx
@@ -1,17 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Typography from '@material-ui/core/Typography'
-import Link from '@material-ui/core/Link'
+import { Typography, Link } from '@mui/material'
 
 export default function Copyright (props) {
+  const { siteText, siteHref, copyrightYear } = props
   return (
     <Typography variant="body2" color="textSecondary" align="center" rel="noreferrer" target="_blank">
       {'Web Site Content Copyright © '}
-      <Link color="inherit" href={props.siteHref}>
-        {props.siteText}
-      </Link>{' '}
-      {(props.copyrightYear || new Date().getFullYear())}
+      <Link color="inherit" href={siteHref}>
+        {siteText}
+      </Link>
+      {' '}
+      {(copyrightYear || new Date().getFullYear())}
       {'.'}
     </Typography>
   )
@@ -22,3 +23,7 @@ Copyright.propTypes = {
   siteHref: PropTypes.string.isRequired,
   siteText: PropTypes.string.isRequired
 }
+
+Copyright.defaultProps = {
+  copyrightYear: 2023
+}
diff --git a/src/Components/DevBuildButton.jsx b/src/Components/DevBuildButton.jsx
@@ -1,44 +1,45 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Box, ButtonGroup, Button, Grow, Paper, Popper, MenuItem, Divider, MenuList } from '@material-ui/core'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import MenuIcon from '@material-ui/icons/Menu'
+import { Box, ButtonGroup, Button, Grow, Paper, Popper, MenuItem, Divider, MenuList, ClickAwayListener } from '@mui/material'
+import { Menu as MenuIcon } from '@mui/icons-material'
 
 import { downloadFile } from './remoteDataHelpers'
 
 const options = ['Download previous build', '#', 'View currrent build log', 'View previous build log']
 
 export default function DevBuildButton (props) {
+  const { linkCurrent, linkPrevious, logsCurrent, logsPrevious, logOpenCallback, buildTitle, icon, text } = props
+
   const anchorRef = React.useRef(null)
   const [open, setOpen] = React.useState(false)
 
   const linkStates = [
-    props.linkPrevious !== undefined,
+    linkPrevious !== undefined,
     false,
-    props.logsCurrent !== undefined,
-    props.logsPrevious !== undefined
+    logsCurrent !== undefined,
+    logsPrevious !== undefined
   ]
 
   const handleClick = () => {
-    downloadFile(props.linkCurrent)
+    downloadFile(linkCurrent)
   }
 
   const handleMenuItemClick = (event, index) => {
     switch (index) {
       case 0:
-        downloadFile(props.linkPrevious)
+        downloadFile(linkPrevious)
         break
 
       case 2:
-        if (props.logOpenCallback) {
-          props.logOpenCallback(props.logsCurrent, 'Current build Logs for ' + props.buildTitle)
+        if (logOpenCallback) {
+          logOpenCallback(logsCurrent, 'Current build Logs for ' + buildTitle)
         }
         break
 
       case 3:
-        if (props.logOpenCallback) {
-          props.logOpenCallback(props.logsPrevious, 'Previous build Logs for ' + props.buildTitle)
+        if (logOpenCallback) {
+          logOpenCallback(logsPrevious, 'Previous build Logs for ' + buildTitle)
         }
         break
     }
@@ -61,8 +62,11 @@ export default function DevBuildButton (props) {
     <Box display="flex">
       <Box m="auto">
         <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split button">
-          <Button disabled={!props.linkCurrent} onClick={handleClick} endIcon={props.icon}>{props.text}</Button>
-          <Button size="small" onClick={handleToggle} aria-haspopup="menu"
+          <Button disabled={!linkCurrent} onClick={handleClick} endIcon={icon}>{text}</Button>
+          <Button
+            size="small"
+            onClick={handleToggle}
+            aria-haspopup="menu"
             aria-controls={open ? 'split-button-menu' : undefined}
             aria-expanded={open ? 'true' : undefined}
             aria-label="download other builds or view logs"
@@ -74,9 +78,7 @@ export default function DevBuildButton (props) {
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}
-              style={{
-                transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
-              }}
+              sx={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
             >
               <Paper>
                 <ClickAwayListener onClickAway={handleClose}>
@@ -86,8 +88,11 @@ export default function DevBuildButton (props) {
                         return (<Divider key={`${option}-${index}`} />)
                       } else {
                         return (
-                          <MenuItem disabled={!linkStates[index]} key={option}
-                            onClick={event => handleMenuItemClick(event, index)}>
+                          <MenuItem
+                            disabled={!linkStates[index]}
+                            key={option}
+                            onClick={event => handleMenuItemClick(event, index)}
+                          >
                             {option}
                           </MenuItem>
                         )
@@ -114,3 +119,13 @@ DevBuildButton.propTypes = {
   icon: PropTypes.node,
   logOpenCallback: PropTypes.func
 }
+
+DevBuildButton.defaultProps = {
+  buildTitle: 'Current Build',
+  icon: undefined,
+  linkCurrent: undefined,
+  linkPrevious: undefined,
+  logOpenCallback: undefined,
+  logsCurrent: undefined,
+  logsPrevious: undefined
+}
diff --git a/src/Components/EngineIcons.jsx b/src/Components/EngineIcons.jsx