Initial site files commit

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "standard",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "react-hooks"
+    ],
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "dataurl",
+        "outfile"
+    ]
+}

client/Components/MainApp.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import { Typography, CssBaseline, Container, Tabs, Tab, Box, Paper } from '@mui/material'
+import MapTabPanel from './MapTabPanel'
+import MapImage from './MapImage'
+
+// Generate the ally props for a tab element
+function tabA11yProps (index) {
+  return {
+    id: `map-tab-${index}`,
+    'aria-controls': `map-tabpanel-${index}`
+  }
+}
+
+export default function MainApp (props) {
+  // Track state of the selected tab
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const handleChange = (event, newIndex) => {
+    setSelectedIndex(newIndex)
+  }
+
+  return (
+    <Container>
+      <CssBaseline />
+      <Typography variant="h3" gutterBottom sx={{ marginTop: 1, borderBottom: '1px solid lightgrey' }}>
+        SGX Map
+      </Typography>
+      <Typography variant="body">
+        Click on a tab below to view a map of the event and locate different games to play!
+      </Typography>
+      <Paper elevation={3} sx={{ marginTop: 3, width: '100%', minWidth: '800px' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs value={selectedIndex} onChange={handleChange} aria-label="basic tabs example">
+            <Tab label="MSC Great Hall" {...tabA11yProps(0)} />
+            <Tab label="MSC Ballrooms" {...tabA11yProps(1)} />
+            {/* <Tab label="Fireside Cafe / Terrace" {...tabA11yProps(2)} /> */}
+          </Tabs>
+        </Box>
+
+        <Box sx={{ position: 'relative' }}>
+          {/* Tab panel 0: Great Hall Map */}
+          <MapTabPanel selectedIndex={selectedIndex} index={0}>
+            <MapImage
+              imgSrc="media/GreatHallMap-SGXDec23.jpg"
+              alt="Map of the MSC Great Hall showing locations of the capstone game prototypes, the sophomore games, and the MFA in Design and indie games."
+              imgSX={{ p: 3 }}
+            />
+          </MapTabPanel>
+
+          {/* Tab panel 1: Ballrooms Map */}
+          <MapTabPanel selectedIndex={selectedIndex} index={1}>
+            <MapImage
+              imgSrc="media/BallroomMap-SGXDec23.jpg"
+              alt="Map of the MSC Ballrooms showing locations of the junior level games, the first-year games, and the game art in engines showcases."
+              imgSX={{ p: 3 }}
+            />
+          </MapTabPanel>
+
+          {/* Tab panel 2: Fireside Cafe / Terrace Map */}
+          {/* <MapTabPanel selectedIndex={selectedIndex} index={2}>
+            <Typography variant="h5" gutterBottom>Fireside Cafe / Terrace</Typography>
+          </MapTabPanel> */}
+        </Box>
+      </Paper>
+    </Container>
+  )
+}

client/Components/MapImage.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Box } from '@mui/material'
+
+export default function MapImage (props) {
+  const { imgSrc, imgSX, alt, ...other } = props
+  return (
+    <Box
+      component="img"
+      sx={{ width: '100%', height: 'auto', ...imgSX }}
+      alt={alt}
+      src={imgSrc}
+      {...other}
+    />
+  )
+}
+
+MapImage.propTypes = {
+  imgSrc: PropTypes.string.isRequired,
+  imgSX: PropTypes.object,
+  alt: PropTypes.string
+}
+
+MapImage.defaultProps = {
+  imgSX: {},
+  alt: 'Map for use at SGX'
+}

client/Components/MapTabPanel.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Box, Fade } from '@mui/material'
+
+export default function MapTabPanel (props) {
+  const { children, selectedIndex, index, ...other } = props
+
+  return (
+    <Fade
+      role="tabpanel"
+      in={selectedIndex === index}
+      id={`map-tabpanel-${index}`}
+      aria-labelledby={`map-tab-${index}`}
+      sx={{ position: 'relative' }}
+      unmountOnExit
+      {...other}
+    >
+      <Box sx={{ p: 3 }}>{children}</Box>
+    </Fade>
+  )
+}
+
+MapTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  selectedIndex: PropTypes.number.isRequired
+}

client/app.jsx

@@ -0,0 +1,13 @@
+// Import and use main fonts
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+
+import React from 'react'
+import { createRoot } from 'react-dom'
+
+import MainApp from './Components/MainApp.jsx'
+
+const root = document.getElementById('root')
+createRoot(root).render(<MainApp />)