feat: added header and new home page #4

Swackles · Jan 10, 2024 · e228680 · e228680
1 parent 126e3ea
commit e228680
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 60 deletions.
diff --git a/fonts/ExtraCondensed-ExtraBoldItalic.ttf b/fonts/ExtraCondensed-ExtraBoldItalic.ttf
diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import {Button, FormControl, FormHelperText, Stack, Typography, useTheme} from "@mui/joy";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import {useGameStatsStore} from "@common/stores/gameStatsStore";
+import {ChangeEvent, useCallback, useState} from "react";
+
+export default function Header() {
+  const theme = useTheme()
+  const { setJson } = useGameStatsStore()
+
+  const [fileError, setFileError] = useState<string>()
+
+  const onFileInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const reader = new FileReader();
+    setFileError(undefined)
+
+    reader.readAsText(e.target.files![0], "UTF-8");
+    reader.onload = event => {
+      try {
+        setJson(JSON.parse(event.target!.result as string))
+      } catch (e) {
+        setFileError((e as Error).message)
+      }
+    }
+    reader.onerror = event => {
+      console.error(event)
+      setFileError("Error occured when parsing the file")
+    }
+  }, [setJson, setFileError])
+
+  return (
+    <Sheet
+      sx={{
+        position: 'fixed',
+        top: 0,
+        height: 'var(--Header-height)',
+        zIndex: 9995,
+        gap: 1,
+        width: "100vw",
+        backgroundColor: theme.vars.palette.primary[600]
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent={{ xs: "flex-end", md: "space-between" }}
+        alignItems="center"
+        spacing={0}
+        sx={{ p: 7,}}
+      >
+        <Typography level="h1"
+                    sx={{
+                      color: "#FFF",
+                      display: {
+                        xs: "none",
+                        md: "block"
+                      }
+                    }}>
+          THE FINALS TRACKER
+        </Typography>
+        <Stack
+          direction="row"
+          justifyContent="flex-end"
+          alignItems="center"
+          spacing={4}
+        >
+          <Button size="lg" component="a" target="_blank" href="https://the-finals-leaderboard.leonlarsson.com/" color="neutral">
+            Leaderboard
+          </Button>
+          <FormControl error={!!fileError} sx={{ width: "100%" }} >
+            <Button size="lg" color="neutral" component="label">
+              Upload JSON
+              <input type="file"
+                     accept="application/json"
+                     hidden
+                     onChange={onFileInput} />
+            </Button>
+            {fileError && <FormHelperText><InfoOutlined/> {fileError}</FormHelperText>}
+          </FormControl>
+          <a href="https://github.com/Swackles/the-finals-tracker" target="_blank">
+            <img style={{ width: 35, height: 35}} src={"/github-mark-white.svg"}/>
+          </a>
+        </Stack>
+      </Stack>
+    </Sheet>
+  );
+}
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@font-face {
+  font-family: Finals;
+  src: url(/fonts/ExtraCondensed-ExtraBoldItalic.ttf);
+}
+
+.finals-title {
+  font-family: Finals !important;
+}
diff --git a/src/pages/homePage/HomePage.tsx b/src/pages/homePage/HomePage.tsx
@@ -1,68 +1,31 @@
-import {Button, FormControl, FormHelperText, Stack, Typography} from "@mui/joy";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import {Stack, Typography, useTheme} from "@mui/joy";
 import {Box} from "@mui/material";
-import {ChangeEvent, useCallback, useState} from "react";
-import {useGameStatsStore} from "@common/stores/gameStatsStore";
+import Header from "@common/components/Header";
 
 export const HomePage = () => {
-  const { setJson } = useGameStatsStore()
-
-  const [fileError, setFileError] = useState<string>()
-
-  const onFileInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    const reader = new FileReader();
-    setFileError(undefined)
-
-    reader.readAsText(e.target.files![0], "UTF-8");
-    reader.onload = event => {
-      try {
-        setJson(JSON.parse(event.target!.result as string))
-      } catch (e) {
-        setFileError((e as Error).message)
-      }
-    }
-    reader.onerror = event => {
-      console.error(event)
-      setFileError("Error occured when parsing the file")
-    }
-  }, [setJson, setFileError])
+  const theme = useTheme()
 
   return (
-    <Box style={{backgroundColor: "#d31f3c", height: "100vh"}}>
-      <Stack
-        direction="column"
-        justifyContent="space-between"
-        alignItems="center"
-        spacing={1} sx={{height: "100%"}}>
-        <Typography sx={{ display: "none" }} level="h1">The Finals Stats Tracker</Typography>
-        <Stack
-          direction="column"
-          justifyContent="center"
-          alignItems="center"
-          spacing={1} sx={{height: "100%"}}>
-          <FormControl error={!!fileError} sx={{ width: "100%" }} >
-            <Button color="neutral" component="label">
-              Upload JSON
-              <input type="file"
-                     accept="application/json"
-                     hidden
-                     onChange={onFileInput} />
-            </Button>
-            {fileError && <FormHelperText><InfoOutlined/> {fileError}</FormHelperText>}
-          </FormControl>
-          <Button component="a"
-                  sx={{ "&:hover": {backgroundColor: "transparent"}, color: "white" }}
-                  target="_blank"
-                  href="https://github.com/Swackles/the-finals-tracker?tab=readme-ov-file#how-to-get-json"
-                  color="neutral"
-                  variant="plain" >
-            How do get JSON?
-          </Button>
-
-        </Stack>
-        <a style={{ marginBottom: 20 }} href="https://github.com/Swackles/the-finals-tracker" target="_blank">
-          <img style={{ width: 50, height: 50}} src={"/github-mark-white.svg"}/>
-        </a>
+    <Box style={{backgroundColor: theme.vars.palette.primary[600], height: "100vh"}}>
+      <Header />
+      <Stack direction="column"
+             justifyContent="center"
+             alignItems="center"
+             spacing={1}
+             sx={{
+               height: "100%",
+               marginLeft: "10vw"
+             }}>
+        <Typography className="finals-title"
+                    sx={{
+                      wordSpacing: "100vw",
+                      fontSize: "214px",
+                      lineHeight: "80%",
+                      color: "#FFF",
+                      display: { xs: "none", sm: "block" }
+                    }}>
+          THE FINALS TRACKER
+        </Typography>
       </Stack>
     </Box>
   )