setup files and systems

src/components/match-card.tsx

@@ -5,6 +5,8 @@ import Card from '@/components/card'
 import { css } from 'linaria'
 import { memo } from '@/utils/memo'
 import clsx from 'clsx'
+import IconButton from './icon-button'
+import { mdiPencil } from '@mdi/js'
 
 interface MatchCardProps {
   match: {
@@ -17,6 +19,7 @@ interface MatchCardProps {
   eventKey: string
   link?: boolean
   class?: string
+  isAdmin?: boolean
 }
 
 const matchCardStyle = css`
@@ -83,7 +86,7 @@ const blueStyle = css`
 `
 
 export const MatchDetailsCard = memo(
-  ({ match, eventKey, link, class: className }: MatchCardProps) => {
+  ({ match, eventKey, link, class: className, isAdmin }: MatchCardProps) => {
     const matchName = formatMatchKey(match.key)
 
     const createTeamLinks = (teams: string[]) =>
@@ -110,6 +113,12 @@ export const MatchDetailsCard = memo(
           {matchName.num && (
             <div class={matchNumStyle}>{`Match ${matchName.num}`}</div>
           )}
+          {isAdmin && (
+            <IconButton
+              icon={mdiPencil}
+              href={`/events/${eventKey}/match-editor`}
+            />
+          )}
         </div>
         {match.time && (
           <time dateTime={match.time.toISOString()}>

src/routes.ts

@@ -19,6 +19,14 @@ const routes = [
     path: '/events/:eventKey/matches/:matchKey/scout',
     component: () => import('./routes/scout'),
   },
+  {
+    path: '/events/:eventKey/match-creator',
+    component: () => import('./routes/match-creator'),
+  },
+  {
+    path: '/events/:eventKey/match-editor',
+    component: () => import('./routes/match-editor'),
+  },
   {
     path: '/events/:eventKey/teams/:teamNum',
     component: () => import('./routes/event-team'),

src/routes/event.tsx

@@ -9,6 +9,7 @@ import { Heading } from '@/components/heading'
 import { EventMatches } from '@/components/event-matches'
 import Loader from '@/components/loader'
 import { useEventMatches } from '@/cache/event-matches/use'
+import { useJWT } from '@/jwt'
 
 interface Props {
   eventKey: string
@@ -52,6 +53,9 @@ const Event = ({ eventKey }: Props) => {
   const matches = useEventMatches(eventKey)
   const eventInfo = useEventInfo(eventKey)
   const newestIncompleteMatch = matches && nextIncompleteMatch(matches)
+  const { jwt } = useJWT()
+  const isAdmin =
+    jwt && (jwt.peregrineRoles.isAdmin || jwt.peregrineRoles.isSuperAdmin)
 
   return (
     <Page
@@ -65,6 +69,11 @@ const Event = ({ eventKey }: Props) => {
         </Heading>
         {eventInfo && <EventInfoCard event={eventInfo} />}
         <Button href={`/events/${eventKey}/analysis`}>Analysis</Button>
+        {isAdmin && (
+          <Button href={`/events/${eventKey}/match-creator`}>
+            Create New Match
+          </Button>
+        )}
       </div>
 
       <div class={sectionStyle}>
@@ -77,6 +86,7 @@ const Event = ({ eventKey }: Props) => {
             match={newestIncompleteMatch}
             eventKey={eventKey}
             link
+            isAdmin
           />
         )}
         {matches ? (

src/routes/match-creator.tsx

@@ -0,0 +1,9 @@
+import Page from '@/components/page'
+
+interface Props {
+  eventKey: string
+}
+
+export const MatchCreator = ({ eventKey }: Props) => {
+  return <Page />
+}

src/routes/match-editor.tsx

@@ -0,0 +1,9 @@
+import Page from '@/components/page'
+
+interface Props {
+  eventKey: string
+}
+
+export const MatchEditor = ({ eventKey }: Props) => {
+  return <Page />
+}