in the zone dynamic header fun

frontend-react/src/assets/icons.tsx

@@ -46,6 +46,15 @@ const customIcons = {
     ),
     viewBox: "0 0 128 128",
   },
+  itz: {
+    path: (
+      <g fill="currentColor">
+        <path d="M2 17l-1 9c0 2 0 2 16 2h16v28l1 28 8-10 9-9V28h50l-4 4-22 25-31 34-12 13v15h94v-16h-11l-34-1-22-1 33-36 34-36V11H2v6z" />{" "}
+        <path d="M1 75l1 39v5h17V41H1v34z" />{" "}
+      </g>
+    ),
+    viewBox: "0 0 128 128",
+  },
 }
 
 export default customIcons

frontend-react/src/components/events/EventsPage.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react"
+import PageHeader from "../common/PageHeader"
+import { RouteComponentProps } from "@reach/router"
+import InTheZoneBanner from "./InTheZoneBanner"
+import { Box, Flex, Heading } from "@chakra-ui/core"
+import Button from "../elements/Button"
+
+const EventsPage: React.FC<RouteComponentProps> = () => {
+  const [runningNumber, setRunningNumber] = useState(10)
+  return (
+    <>
+      <Box>
+        <Heading size="lg" textAlign="center">
+          In The Zone
+        </Heading>
+        <Heading
+          size="md"
+          fontWeight="hairline"
+          letterSpacing="0.1em"
+          textAlign="center"
+          mb="1em"
+        >
+          The premier western Splatoon Splat Zones tournament
+        </Heading>
+        <InTheZoneBanner runningNumber={runningNumber} />
+        <Flex mt="2em">
+          <Button onClick={() => setRunningNumber(runningNumber + 1)}>
+            Plus
+          </Button>
+          <Button onClick={() => setRunningNumber(runningNumber - 1)}>
+            Minus
+          </Button>
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+export default EventsPage

frontend-react/src/components/events/InTheZoneBanner.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { Flex, Icon, Box } from "@chakra-ui/core"
+
+//https://stackoverflow.com/a/9083076
+function romanize(num: number) {
+  if (isNaN(num)) return NaN
+  let digits = String(+num).split(""),
+    key = [
+      "",
+      "C",
+      "CC",
+      "CCC",
+      "CD",
+      "D",
+      "DC",
+      "DCC",
+      "DCCC",
+      "CM",
+      "",
+      "X",
+      "XX",
+      "XXX",
+      "XL",
+      "L",
+      "LX",
+      "LXX",
+      "LXXX",
+      "XC",
+      "",
+      "I",
+      "II",
+      "III",
+      "IV",
+      "V",
+      "VI",
+      "VII",
+      "VIII",
+      "IX",
+    ],
+    roman = "",
+    i = 3
+  while (i--) roman = (key[+digits.pop()! + i * 10] || "") + roman
+  return Array(+digits.join("") + 1).join("M") + roman
+}
+
+//https://stackoverflow.com/a/23603772
+function getRandomColor(runningNumber: number) {
+  const color = "hsl(" + random(runningNumber) * 360 + ", 100%, 75%)"
+  return color
+}
+
+//https://stackoverflow.com/a/19303725
+function random(seed: number) {
+  var x = Math.sin(seed++) * 10000
+  return x - Math.floor(x)
+}
+
+interface InTheZoneBannerProps {
+  runningNumber: number
+}
+
+const InTheZoneBanner: React.FC<InTheZoneBannerProps> = ({ runningNumber }) => {
+  return (
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      bg={getRandomColor(runningNumber)}
+      borderRadius="5px"
+      p="40px"
+      color="black"
+    >
+      <Icon size="128px" name={"itz" as any} />
+      <Box fontSize="70px" fontWeight="bolder" ml="0.2em">
+        {runningNumber}
+      </Box>
+    </Flex>
+  )
+}
+
+export default InTheZoneBanner

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

@@ -6,11 +6,11 @@ import MyThemeContext from "../../themeContext"
 
 interface NavItemProps {
   to: string
-  Icon: IconType
+  icon: IconType | string
   title: string
 }
 
-const NavItem: React.FC<NavItemProps> = ({ to, Icon, title }) => {
+const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   const { themeColorWithShade, colorMode, themeColor } = useContext(
     MyThemeContext
   )
@@ -42,7 +42,11 @@ const NavItem: React.FC<NavItemProps> = ({ to, Icon, title }) => {
             _hover: {},
           })}
         >
-          <ListIcon icon={Icon} color={themeColorWithShade} size="1.5em" />{" "}
+          <ListIcon
+            icon={icon as any}
+            color={themeColorWithShade}
+            size="1.5em"
+          />{" "}
           {title}
         </PseudoBox>
       </Link>

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

@@ -12,6 +12,7 @@ const TournamentsPage = lazy(() => import("../tournaments/TournamentsPage"))
 const TournamentsDetailsPage = lazy(() =>
   import("../tournaments/TournamentDetailsPage")
 )
+const EventsPage = lazy(() => import("../events/EventsPage"))
 const MapPlannerPage = lazy(() => import("../plans/MapPlannerPage"))
 const FreeAgentsPage = lazy(() => import("../freeagents/FreeAgentsPage"))
 const TeamPage = lazy(() => import("../team/TeamPage"))
@@ -37,6 +38,7 @@ const Routes: React.FC = () => {
           <CalendarPage path="/calendar" />
           <TournamentsPage path="/tournaments" />
           <TournamentsDetailsPage path="/tournaments/:id" />
+          <EventsPage path="/play" />
           <FreeAgentsPage path="/freeagents" />
           <XSearch path="/xsearch" />
           <About path="/about" />

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

@@ -12,6 +12,7 @@ import {
   MenuItem,
   MenuList,
   Box,
+  Icon,
 } from "@chakra-ui/core"
 import { Link } from "@reach/router"
 import {
@@ -139,18 +140,19 @@ export const SideNavContent: React.FC<SideNavProps> = ({ showLogo = true }) => {
         )}
         <Flex>
           <List mt="2em">
-            <NavItem to="plans" Icon={FaMap} title="Map Planner" />
-            <NavItem to="calendar" Icon={FaCalendarAlt} title="Calendar" />
-            <NavItem to="builds" Icon={FaTshirt} title="Builds" />
-            <NavItem to="freeagents" Icon={FaUserSecret} title="Free Agents" />
+            <NavItem to="plans" icon={FaMap} title="Map Planner" />
+            <NavItem to="calendar" icon={FaCalendarAlt} title="Calendar" />
+            <NavItem to="builds" icon={FaTshirt} title="Builds" />
+            <NavItem to="freeagents" icon={FaUserSecret} title="Free Agents" />
             <NavItem
               to="tournaments"
-              Icon={FaTrophy}
+              icon={FaTrophy}
               title="Tournament Results"
             />
-            <NavItem to="xsearch" Icon={FaListOl} title="Top 500 Browser" />
+            <NavItem to="xsearch" icon={FaListOl} title="Top 500 Browser" />
+            <NavItem to="play" icon="itz" title="In The Zone" />
             {data?.user?.plus?.membership_status && (
-              <NavItem to="plus" Icon={FaPlus} title="Plus Server" />
+              <NavItem to="plus" icon={FaPlus} title="Plus Server" />
             )}
           </List>
         </Flex>