not found

frontend-react/src/assets/imageImports.ts

@@ -39,6 +39,14 @@ import firstPlace from "./first_place.png"
 import secondPlace from "./second_place.png"
 import thirdPlace from "./third_place.png"
 
+import alfonsino from "./Splatoon1Maps/alfonsino.png"
+import bluefin from "./Splatoon1Maps/bluefin.png"
+import bridge from "./Splatoon1Maps/bridge.png"
+import flounder from "./Splatoon1Maps/flounder.png"
+import resort from "./Splatoon1Maps/resort.png"
+import rig from "./Splatoon1Maps/rig.png"
+import underpass from "./Splatoon1Maps/underpass.png"
+
 //https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack
 export const wpnSmall: object = importAll(require.context("./wpnSmall", false))
 export const wpnMedium: object = importAll(
@@ -103,3 +111,34 @@ export const footerOcto = {
 }
 
 export const medalEmoji = [null, firstPlace, secondPlace, thirdPlace] as const
+
+export const Splatoon1Maps = [
+  {
+    image: alfonsino,
+    name: "Museum D'Alfonsino",
+  },
+  {
+    image: bluefin,
+    name: "Bluefin Depot",
+  },
+  {
+    image: bridge,
+    name: "Hammerhead Bridge",
+  },
+  {
+    image: flounder,
+    name: "Flounder Heights",
+  },
+  {
+    image: resort,
+    name: "Mahi-Mahi Resort",
+  },
+  {
+    image: rig,
+    name: "Saltspray Rig",
+  },
+  {
+    image: underpass,
+    name: "Urchin Underpass",
+  },
+]

frontend-react/src/components/common/Loading.tsx

@@ -1,11 +1,19 @@
-import React, { useContext } from "react"
+import React, { useState, useEffect, useContext } from "react"
 import { Spinner, Box } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
 
-interface LoadingProps {}
-
-const Loading: React.FC<LoadingProps> = () => {
+const Loading: React.FC = () => {
   const { themeColorWithShade } = useContext(MyThemeContext)
+  const [showSpinner, setShowSpinner] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSpinner(true), 1000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  if (!showSpinner) return null
+
   return (
     <Box textAlign="center" pt="2em">
       <Spinner

frontend-react/src/components/root/NotFound.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from "react"
+import { RouteComponentProps } from "@reach/router"
+import { Splatoon1Maps } from "../../assets/imageImports"
+import { choose } from "../../utils/helperFunctions"
+import { Image, Flex, Heading, Box } from "@chakra-ui/core"
+import MyThemeContext from "../../themeContext"
+
+const NotFound: React.FC<RouteComponentProps> = () => {
+  const { grayWithShade } = useContext(MyThemeContext)
+  const mapObject = choose(Splatoon1Maps)
+  return (
+    <Flex flexDirection="column" justifyContent="center" alignItems="center">
+      <Image src={mapObject.image} borderRadius="5px" w="500px" h="auto" />
+      <Heading mt="1em">404 - Not Found</Heading>
+      <Box color={grayWithShade}>
+        ...just like {mapObject.name} can't be found in Splatoon 2
+      </Box>
+    </Flex>
+  )
+}
+
+export default NotFound

frontend-react/src/components/root/Routes.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense, lazy } from "react"
 import { Router } from "@reach/router"
 import Loading from "../common/Loading"
+import NotFound from "./NotFound"
 
 const HomePage = lazy(() => import("../home/HomePage"))
 const UserPage = lazy(() => import("../user/UserPage"))
@@ -21,7 +22,7 @@ const Routes: React.FC = () => {
         <MapPlannerPage path="/plans" />
         <CalendarPage path="/calendar" />
         <FreeAgentsPage path="/freeagents" />
-        <HomePage default />
+        <NotFound default />
       </Router>
     </Suspense>
   )

frontend-react/src/components/team/LogoHeader.tsx

@@ -3,9 +3,7 @@ import UserAvatar from "../common/UserAvatar"
 import Box from "../elements/Box"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
-import { Icon } from "@chakra-ui/core"
 import { FaTwitter, FaTrophy, FaDiscord } from "react-icons/fa"
-import { Link } from "@reach/router"
 import { months } from "../../utils/lists"
 
 interface LogoHeaderProps {

frontend-react/src/utils/helperFunctions.ts

@@ -1,4 +1,4 @@
-export function choose(choices) {
+export function choose(choices: any[]) {
   var index = Math.floor(Math.random() * choices.length)
   return choices[index]
 }