Basic match control layout

front-end/src/apps/scorekeeper/hooks/use-match-control.ts

@@ -0,0 +1,152 @@
+import { MatchState } from '@toa-lib/models';
+import { useRecoilState } from 'recoil';
+import { matchStateAtom } from 'src/stores/recoil';
+
+interface MatchControlState {
+  canPrestart: boolean;
+  canCancelPrestart: boolean;
+  canSetDisplays: boolean;
+  canPrepField: boolean;
+  canStartMatch: boolean;
+  canAbortMatch: boolean;
+  canResetField: boolean;
+  canCommitScores: boolean;
+  canPostResults: boolean;
+  setState: (state: MatchState) => void;
+}
+
+export const useMatchControl = (): MatchControlState => {
+  const [matchState, setState] = useRecoilState(matchStateAtom);
+  switch (matchState) {
+    case MatchState.MATCH_NOT_SELECTED:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.PRESTART_READY:
+      return {
+        canPrestart: true,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.PRESTART_COMPLETE:
+      return {
+        canPrestart: false,
+        canCancelPrestart: true,
+        canSetDisplays: true,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.AUDIENCE_READY:
+      return {
+        canPrestart: false,
+        canCancelPrestart: true,
+        canSetDisplays: true,
+        canPrepField: true,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.FIELD_READY:
+      return {
+        canPrestart: false,
+        canCancelPrestart: true,
+        canSetDisplays: true,
+        canPrepField: true,
+        canStartMatch: true,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.MATCH_IN_PROGRESS:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: true,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.MATCH_COMPLETE:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: true,
+        canCommitScores: true,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.RESULTS_READY:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: true,
+        canCommitScores: true,
+        canPostResults: false,
+        setState
+      };
+    case MatchState.RESULTS_COMMITTED:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: true,
+        setState
+      };
+    default:
+      return {
+        canPrestart: false,
+        canCancelPrestart: false,
+        canSetDisplays: false,
+        canPrepField: false,
+        canStartMatch: false,
+        canAbortMatch: false,
+        canResetField: false,
+        canCommitScores: false,
+        canPostResults: false,
+        setState
+      };
+  }
+};

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

@@ -0,0 +1,31 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
+
+export const CommitScoresButton: FC = () => {
+  const { canResetField, canCommitScores, setState } = useMatchControl();
+  const resetField = () => setState(MatchState.RESULTS_READY);
+  const commitScores = () => setState(MatchState.RESULTS_COMMITTED);
+  return canCommitScores ? (
+    <Button
+      fullWidth
+      color='success'
+      variant='contained'
+      onClick={commitScores}
+      disabled={!canCommitScores}
+    >
+      Commit Scores
+    </Button>
+  ) : (
+    <Button
+      fullWidth
+      color='success'
+      variant='contained'
+      onClick={resetField}
+      disabled={!canResetField}
+    >
+      All Clear
+    </Button>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
+
+export const DisplaysButton: FC = () => {
+  const { canSetDisplays, setState } = useMatchControl();
+  const setDisplays = () => setState(MatchState.AUDIENCE_READY);
+  return (
+    <Button
+      fullWidth
+      color='info'
+      variant='contained'
+      onClick={setDisplays}
+      disabled={!canSetDisplays}
+    >
+      Set Displays
+    </Button>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
+
+export const FieldPrepButton: FC = () => {
+  const { canPrepField, setState } = useMatchControl();
+  const prepareField = () => setState(MatchState.FIELD_READY);
+  return (
+    <Button
+      fullWidth
+      color='success'
+      variant='contained'
+      onClick={prepareField}
+      disabled={!canPrepField}
+    >
+      Prep Field
+    </Button>
+  );
+};

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

@@ -1,6 +1,11 @@
 import { Grid } from '@mui/material';
 import { FC } from 'react';
 import { PrestartButton } from './prestart-button';
+import { DisplaysButton } from './displays-button';
+import { FieldPrepButton } from './field-prep-button';
+import { StartMatchButton } from './start-match-button';
+import { CommitScoresButton } from './commit-scores-button';
+import { PostResultsButton } from './post-results-button';
 
 export const MatchControl: FC = () => {
   return (
@@ -9,19 +14,19 @@ export const MatchControl: FC = () => {
         <PrestartButton />
       </Grid>
       <Grid item xs={12} sm={6} md={4} lg={2}>
-        AudienceDisplayButton
+        <DisplaysButton />
       </Grid>
       <Grid item xs={12} sm={6} md={4} lg={2}>
-        FieldPrepButton
+        <FieldPrepButton />
       </Grid>
       <Grid item xs={12} sm={6} md={4} lg={2}>
-        StartMatchButton
+        <StartMatchButton />
       </Grid>
       <Grid item xs={12} sm={6} md={4} lg={2}>
-        CommitScoresButton
+        <CommitScoresButton />
       </Grid>
       <Grid item xs={12} sm={6} md={4} lg={2}>
-        PostResultsButton
+        <PostResultsButton />
       </Grid>
     </Grid>
   );

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

@@ -0,0 +1,20 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
+
+export const PostResultsButton: FC = () => {
+  const { canPostResults, setState } = useMatchControl();
+  const postResults = () => setState(MatchState.RESULTS_POSTED);
+  return (
+    <Button
+      fullWidth
+      color='success'
+      variant='contained'
+      onClick={postResults}
+      disabled={!canPostResults}
+    >
+      Post Results
+    </Button>
+  );
+};

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

@@ -1,12 +1,20 @@
 import { Button } from '@mui/material';
-import { FC, useState } from 'react';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
 
 export const PrestartButton: FC = () => {
-  const [canPrestart, setCanPrestart] = useState(true);
-  const prestart = () => setCanPrestart(false);
-  const cancelPrestart = () => setCanPrestart(true);
+  const { canPrestart, canCancelPrestart, setState } = useMatchControl();
+  const prestart = () => setState(MatchState.PRESTART_COMPLETE);
+  const cancelPrestart = () => setState(MatchState.PRESTART_READY);
   return canPrestart ? (
-    <Button fullWidth color='warning' variant='contained' onClick={prestart}>
+    <Button
+      fullWidth
+      color='warning'
+      variant='contained'
+      onClick={prestart}
+      disabled={!canPrestart}
+    >
       Prestart
     </Button>
   ) : (
@@ -15,6 +23,7 @@ export const PrestartButton: FC = () => {
       color='error'
       variant='contained'
       onClick={cancelPrestart}
+      disabled={!canCancelPrestart}
     >
       Cancel Prestart
     </Button>

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

@@ -0,0 +1,31 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { useMatchControl } from '../hooks/use-match-control';
+import { MatchState } from '@toa-lib/models';
+
+export const StartMatchButton: FC = () => {
+  const { canStartMatch, canAbortMatch, setState } = useMatchControl();
+  const startMatch = () => setState(MatchState.MATCH_IN_PROGRESS);
+  const abortMatch = () => setState(MatchState.PRESTART_READY);
+  return canStartMatch ? (
+    <Button
+      fullWidth
+      color='error'
+      variant='contained'
+      onClick={startMatch}
+      disabled={!canStartMatch}
+    >
+      Start Match
+    </Button>
+  ) : (
+    <Button
+      fullWidth
+      color='error'
+      variant='contained'
+      onClick={abortMatch}
+      disabled={!canAbortMatch}
+    >
+      Abort Match
+    </Button>
+  );
+};