starting on the new scorekeeper app

front-end/src/AppRoutes.tsx

@@ -30,14 +30,19 @@ const TournamentEditor = lazy(() =>
   import('./apps/tournaments').then((m) => ({ default: m.TournamentEditor }))
 );
 
+// Schedule Routes
 const ScheduleManager = lazy(() =>
   import('./apps/schedules').then((m) => ({ default: m.ScheduleManager }))
 );
 
+// Scorekeeper Routes
+const ScorekeeperApp = lazy(() =>
+  import('./apps/scorekeeper').then((m) => ({ default: m.ScorekeeperApp }))
+);
+
 const SettingsApp = lazy(() => import('./apps/Settings'));
 const GlobalSettingsApp = lazy(() => import('./apps/Settings/GlobalSettings'));
 
-const ScoringApp = lazy(() => import('./apps/Scoring'));
 const AudienceDisplay = lazy(() => import('./apps/AudienceDisplay'));
 const RefereeApp = lazy(() => import('./apps/Referee/Referee'));
 const RedReferee = lazy(() => import('./apps/Referee/RedReferee'));
@@ -145,10 +150,10 @@ const AppRoutes: AppRoute[] = [
     element: ScheduleManager
   },
   {
-    name: 'Scoring App',
-    path: '/:eventKey/scoring',
+    name: 'Scorekeeper App',
+    path: '/:eventKey/scorekeeper',
     group: 0,
-    element: ScoringApp
+    element: ScorekeeperApp
   },
   {
     name: 'Settings',

front-end/src/apps/scorekeeper/index.ts

@@ -0,0 +1,3 @@
+import { ScorekeeperApp } from './scorekeeper-app';
+
+export { ScorekeeperApp };

front-end/src/apps/scorekeeper/match-control/alliance-card.tsx

@@ -0,0 +1,60 @@
+import { Grid, Paper, Typography } from '@mui/material';
+import { Alliance, BLUE_STATION, MatchParticipant } from '@toa-lib/models';
+import { FC } from 'react';
+
+interface Props {
+  alliance: Alliance;
+  participants?: MatchParticipant[];
+}
+
+export const AllianceCard: FC<Props> = ({ alliance, participants }) => {
+  const allianceParticipants = participants
+    ? participants.filter((p) =>
+        alliance === 'red'
+          ? p.station < BLUE_STATION
+          : p.station >= BLUE_STATION
+      )
+    : [];
+  return (
+    <Paper
+      className={alliance === 'red' ? 'red-bg-imp' : 'blue-bg-imp'}
+      sx={{ paddingBottom: (theme) => theme.spacing(1) }}
+    >
+      <Grid container spacing={3}>
+        <Grid item md={4} sx={{ paddingTop: '4px !important' }}>
+          <Typography variant='body1' align='center'>
+            Team
+          </Typography>
+        </Grid>
+        <Grid item md={4} sx={{ paddingTop: '4px !important' }}>
+          <Typography variant='body1' align='center'>
+            Card Status
+          </Typography>
+        </Grid>
+        <Grid item md={2} sx={{ paddingTop: '4px !important' }}>
+          <Typography variant='body1' align='center'>
+            No Show
+          </Typography>
+        </Grid>
+        <Grid item md={2} sx={{ paddingTop: '4px !important' }}>
+          <Typography variant='body1' align='center'>
+            DQ
+          </Typography>
+        </Grid>
+      </Grid>
+      {allianceParticipants.map((p) => (
+        <Grid key={`${p.teamKey}-${p.station}`} container spacing={3}>
+          <Grid item md={8}>
+            {/* <TeamStatusRow key={p.teamKey} station={p.station} /> */}
+          </Grid>
+          <Grid item md={2}>
+            {/* <NoShowStatus key={`no-show-${p.teamKey}`} station={p.station} /> */}
+          </Grid>
+          <Grid item md={2}>
+            {/* <DisqualifiedStatus key={`dq-${p.teamKey}`} station={p.station} /> */}
+          </Grid>
+        </Grid>
+      ))}
+    </Paper>
+  );
+};

front-end/src/apps/scorekeeper/match-control/match-control-header.tsx

@@ -0,0 +1,28 @@
+import { Grid } from '@mui/material';
+import { FC } from 'react';
+import { PrestartButton } from './prestart-button';
+
+export const MatchControlHeader: FC = () => {
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        <PrestartButton />
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        AudienceDisplayButton
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        FieldPrepButton
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        StartMatchButton
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        CommitScoresButton
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        PostResultsButton
+      </Grid>
+    </Grid>
+  );
+};

front-end/src/apps/scorekeeper/match-control/match-status.tsx

@@ -0,0 +1,35 @@
+import { Box, Chip, Divider, Paper, Typography } from '@mui/material';
+import { FC } from 'react';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+
+export const MatchStatus: FC = () => {
+  return (
+    <Paper sx={{ height: '100%' }}>
+      <Box
+        sx={{
+          padding: (theme) => theme.spacing(2),
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center'
+        }}
+      >
+        <Typography align='center'>Match Status</Typography>
+        <Chip
+          icon={<CheckCircleOutlineIcon />}
+          label='Match Started'
+          color='primary'
+          variant='outlined'
+        />
+      </Box>
+      <Divider />
+      <Box sx={{ padding: (theme) => theme.spacing(2) }}>
+        <Typography gutterBottom align='center' variant='body1'>
+          Match Status
+        </Typography>
+        <Typography align='center' variant='h4'>
+          Match Countdown
+        </Typography>
+      </Box>
+    </Paper>
+  );
+};

front-end/src/apps/scorekeeper/match-control/prestart-button.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@mui/material';
+import { FC, useState } from 'react';
+
+export const PrestartButton: FC = () => {
+  const [canPrestart, setCanPrestart] = useState(true);
+  const prestart = () => setCanPrestart(false);
+  const cancelPrestart = () => setCanPrestart(true);
+  return canPrestart ? (
+    <Button fullWidth color='warning' variant='contained' onClick={prestart}>
+      Prestart
+    </Button>
+  ) : (
+    <Button
+      fullWidth
+      color='error'
+      variant='contained'
+      onClick={cancelPrestart}
+    >
+      Cancel Prestart
+    </Button>
+  );
+};

front-end/src/apps/scorekeeper/scorekeeper-app.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { useCurrentEvent } from 'src/api/use-event-data';
+import DefaultLayout from 'src/layouts/DefaultLayout';
+import { MatchControlHeader } from './match-control/match-control-header';
+import { Grid } from '@mui/material';
+import { AllianceCard } from './match-control/alliance-card';
+
+export const ScorekeeperApp: FC = () => {
+  const { data: event } = useCurrentEvent();
+  return (
+    <DefaultLayout
+      containerWidth='xl'
+      title={`${event?.eventName} | Scorekeeper App`}
+      titleLink={`/${event?.eventKey}`}
+    >
+      <Grid
+        container
+        spacing={3}
+        sx={{ marginTop: (theme) => theme.spacing(2) }}
+      >
+        <Grid item xs={12} sm={6} md={6}>
+          <AllianceCard alliance='red' />
+        </Grid>
+        <Grid item xs={12} sm={6} md={6}>
+          <AllianceCard alliance='blue' />
+        </Grid>
+      </Grid>
+      <MatchControlHeader />
+    </DefaultLayout>
+  );
+};

lib/models/src/base/Match.ts

@@ -23,6 +23,9 @@ export const RESULT_GAME_SPECIFIC = 3;
 
 export type Alliance = 'red' | 'blue';
 
+export const RED_STATION = 10;
+export const BLUE_STATION = 20;
+
 export enum MatchState {
   MATCH_NOT_SELECTED = 0,
   PRESTART_READY = 1,