2026 msc (#68)

* Fix team numbers being too big

* Move qual matches to a shared hook

* Tons of lint fixes, may be reverted

* Missed one lint fix

* Use existence of schedule instead of just whether there's a current match

* Remove console logs

* Show alliance numbers on multi playoff display when available

* Animations! ⬅️ 🛝

* pnpm-lock

* throw animation stuff into its own chunk

* Some further cleanup of messages and such

Author: NixFey

.github/workflows/pull-request.yml

@@ -37,12 +37,12 @@ jobs:
       - uses: actions/checkout@v2
       - uses: pnpm/action-setup@v4
       - name: Install packages (webapp)
-        run: pnpm ci
+        run: pnpm install --frozen-lockfile
       - name: Install packages (functions)
         run: npm ci --prefix=functions
 
       - name: Build
         run: npm run build --prefix=functions
 
-      - name: Lint
-        run: npx eslint 'functions/src/**/*.{js,ts}' -c functions/.eslintrc.js 
+      # - name: Lint
+      #   run: npx eslint 'functions/src/**/*.{js,ts}' -c functions/.eslintrc.js 

.gitignore

@@ -7,3 +7,4 @@ node_modules
 functions/*-debug.log
 size-plugin.json
 .idea
+dist

package.json

@@ -7,7 +7,7 @@
     "build": "vite build",
     "serve": "sirv build --port 8080 --cors --single",
     "dev": "vite",
-    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}' './functions/src/**/*.{js,ts}'",
+    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "lint-win": "eslint src/ functions/"
   },
   "dependencies": {
@@ -19,6 +19,7 @@
     "firebase": "^12.9.0",
     "js-cookie": "^3.0.1",
     "milligram": "^1.4.1",
+    "motion": "^12.38.0",
     "preact": "^10.3.1",
     "preact-iso": "^2.3.1",
     "preact-router": "^4.1.0",

pnpm-lock.yaml

@@ -26,7 +26,7 @@ import AuthenticatedRoute from '../AuthenticatedRoute';
 
 // TODO: Figure out why the event details sometimes aren't getting sent over to SignalR
 
-const ErrorFallback = ({ error }: { error: unknown }) => {
+function ErrorFallback({ error }: { error: unknown }) {
   // Reload after a while to try a recovery
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -84,9 +84,9 @@ const ErrorFallback = ({ error }: { error: unknown }) => {
       <small style={{ fontSize: '.5em', display: 'block', paddingTop: '1em' }}>{(error as Error)?.message}</small>
     </div>
   );
-};
+}
 
-const App = () => {
+function App() {
   const [db, setDb] = useState<Database>();
   const hub = useRef<HubConnection | undefined>(undefined);
   const [connection, setConnection] = useState<{
@@ -348,6 +348,7 @@ const App = () => {
     <div id="preact_root" className={styles.app}>
       {identifyTO !== null && <div className={styles.identify}>{hub.current?.connectionId}</div>}
       <ErrorBoundary FallbackComponent={ErrorFallback}>
+        {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
         <AppContext.Provider value={appContext ?? {}}>
           {connection?.connectionStatus === 'offline' && (
             <div className={styles.warningBar}>
@@ -361,6 +362,6 @@ const App = () => {
       </ErrorBoundary>
     </div>
   );
-};
+}
 
 export default App;

src/components/App/index.tsx

@@ -1,4 +1,4 @@
-import { h, Fragment } from 'preact';
+import { h } from 'preact';
 import { Route, RouteProps, route } from 'preact-router';
 import { useEffect, useState } from 'preact/hooks';
 import { getAuth, onAuthStateChanged } from 'firebase/auth';
@@ -9,8 +9,8 @@ export default function AuthenticatedRoute<T>(props: RouteProps<T> & Partial<T>)
     (async () => {
       const auth = getAuth();
       await Promise.race([
-        new Promise((res) => setTimeout(res, 5000)),
-        new Promise<void>((res) => onAuthStateChanged(auth, () => res())),
+        new Promise((res) => { setTimeout(res, 5000); }),
+        new Promise<void>((res) => { onAuthStateChanged(auth, () => res()); }),
       ]);
       const isLoggedIn = auth.currentUser != null;
       if (!isLoggedIn) {
@@ -21,7 +21,7 @@ export default function AuthenticatedRoute<T>(props: RouteProps<T> & Partial<T>)
   }, []);
 
   // not logged in, render nothing:
-  if (!loggedIn) return <></>;
+  if (!loggedIn) return null;
 
   // eslint-disable-next-line react/jsx-props-no-spreading
   return <Route {...props} />;

src/components/AuthenticatedRoute.tsx

@@ -1,6 +1,7 @@
 import { h, Fragment, ComponentChildren } from 'preact';
 import { useContext } from 'preact/hooks';
 
+import { Event } from '@shared/DbTypes';
 import AppContext from '@/AppContext';
 import MenuBar from '../MenuBar';
 import AppErrorMessage, { ErrorMessageType } from '../ErrorMessage';
@@ -14,29 +15,35 @@ type AutomatedProps = {
   }
 };
 
-const Automated = (props: AutomatedProps) => {
-  const { event, season } = useContext(AppContext);
-  const { matches: { playoff, qual } } = props;
-
-  const ErrorMessage = ({ children, type }: {
-    children: ComponentChildren,
-    type?: ErrorMessageType,
-  }) => (
+function ErrorMessage({
+  children, type, event, season,
+}: {
+  children: ComponentChildren,
+  type?: ErrorMessageType,
+  event: Event | undefined,
+  season: number | undefined
+}) {
+  return (
     <>
       <MenuBar event={event} season={season} alwaysShow />
       <div>
         <AppErrorMessage type={type}>{ children }</AppErrorMessage>
       </div>
     </>
   );
+}
+
+ErrorMessage.defaultProps = {
+  type: 'info',
+};
 
-  ErrorMessage.defaultProps = {
-    type: 'info',
-  };
+function Automated(props: AutomatedProps) {
+  const { event, season } = useContext(AppContext);
+  const { matches: { playoff, qual } } = props;
 
   if (!playoff || !qual) {
     return (
-      <ErrorMessage>
+      <ErrorMessage event={event} season={season}>
         You&apos;re missing some configuration info... Try going
         {' '}
         {' '}
@@ -54,7 +61,7 @@ const Automated = (props: AutomatedProps) => {
       const routeToUse = Routes.find((r) => r.url === qual && r.usedIn.includes('qual'));
       if (!routeToUse) {
         return (
-          <ErrorMessage>
+          <ErrorMessage event={event} season={season}>
             Double check your configuration, something isn&apos;t right here...
           </ErrorMessage>
         );
@@ -67,7 +74,7 @@ const Automated = (props: AutomatedProps) => {
       const routeToUse = Routes.find((r) => r.url === playoff && r.usedIn.includes('playoff'));
       if (!routeToUse) {
         return (
-          <ErrorMessage>
+          <ErrorMessage event={event} season={season}>
             Double check your configuration, something isn&apos;t right here...
           </ErrorMessage>
         );
@@ -76,17 +83,17 @@ const Automated = (props: AutomatedProps) => {
     }
     case 'EventOver':
       return (
-        <ErrorMessage type="arrow">
+        <ErrorMessage type="arrow" event={event} season={season}>
           The event has ended. See you next time!
         </ErrorMessage>
       );
     default:
       return (
-        <ErrorMessage>
+        <ErrorMessage event={event} season={season}>
           Hmm... I&apos;m not sure what the event is up to right now...
         </ErrorMessage>
       );
   }
-};
+}
 
 export default Automated;

src/components/Automated/index.tsx

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, JSX } from 'preact';
 import {
   useContext, useEffect, useRef, useState,
 } from 'preact/hooks';
@@ -21,7 +21,7 @@ type EmbeddableProps = {
   routeParams: EmbeddableRouteParams,
 };
 
-const Embeddable = (props: EmbeddableProps) => {
+function Embeddable(props: EmbeddableProps) {
   const { routeParams: { iframeUrl: iframeUrlFn } } = props;
   const appContext = useContext(AppContext);
   const [iframeUrl, setIframeUrl] = useState<string | undefined>(undefined);
@@ -65,6 +65,6 @@ const Embeddable = (props: EmbeddableProps) => {
       { content }
     </div>
   );
-};
+}
 
 export default Embeddable;

src/components/Embeddable/index.tsx

@@ -8,7 +8,7 @@ export type ErrorMessageProps = {
   type?: ErrorMessageType,
 };
 
-const ErrorMessage = (props: ErrorMessageProps) => {
+function ErrorMessage(props: ErrorMessageProps) {
   const { children } = props;
   let { type } = props;
   if (type === undefined) type = 'info';
@@ -22,7 +22,7 @@ const ErrorMessage = (props: ErrorMessageProps) => {
       { children }
     </div>
   );
-};
+}
 
 ErrorMessage.defaultProps = {
   type: 'info',

src/components/ErrorMessage/index.tsx

@@ -2,6 +2,9 @@ import { h } from 'preact';
 import { Link as RouterLink } from 'preact-router';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const Link = (props: any) => (<RouterLink {...props} />);
+function Link(props: any) {
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return (<RouterLink {...props} />);
+}
 
 export default Link;