Merge branch 'master' into release-config

Author: TheApplePieGod

client/src/app-context.tsx

@@ -9,7 +9,8 @@ export interface AppState {
     activeGame: Game | undefined
     activeMatch: Match | undefined
     tournament: Tournament | undefined
-    loadingRemoteContent: boolean
+    tournamentMinRound: number // Minimum round to display
+    loadingRemoteContent: string
     updatesPerSecond: number
     paused: boolean
     disableHotkeys: boolean
@@ -21,7 +22,8 @@ const DEFAULT_APP_STATE: AppState = {
     activeGame: undefined,
     activeMatch: undefined,
     tournament: undefined,
-    loadingRemoteContent: false,
+    tournamentMinRound: 1,
+    loadingRemoteContent: '',
     updatesPerSecond: 1,
     paused: true,
     disableHotkeys: false,

client/src/client-config.tsx

@@ -14,7 +14,8 @@ const DEFAULT_CONFIG = {
     showHealthBars: false,
     showMapXY: true,
     showFlagCarryIndicator: true,
-    streamRunnerGames: false
+    streamRunnerGames: false,
+    validateMaps: false
 }
 
 const configDescription: { [key: string]: string } = {
@@ -23,7 +24,8 @@ const configDescription: { [key: string]: string } = {
     showHealthBars: 'Show health bars below all robots',
     showMapXY: 'Show X,Y when hovering a tile',
     showFlagCarryIndicator: 'Show an obvious indicator over flag carriers',
-    streamRunnerGames: 'Stream each round from the runner live as the game is being played'
+    streamRunnerGames: 'Stream each round from the runner live as the game is being played',
+    validateMaps: 'Validate maps before running a game'
 }
 
 export function getDefaultConfig(): ClientConfig {

client/src/components/forms.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react'
+import { useAppContext } from '../app-context'
 
 interface SelectProps {
     value?: string | number
@@ -40,11 +41,14 @@ interface NumInputProps {
     changeValue: (newValue: number) => void
 }
 export const NumInput: React.FC<NumInputProps> = (props) => {
+    const context = useAppContext()
+
+    const [focused, setFocused] = React.useState(false)
     const [tempValue, setTempValue] = React.useState<string | undefined>()
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (val: string) => {
         // Direct change from arrows
-        const value = parseInt(e.target.value)
+        const value = parseInt(val)
         if (!isNaN(value) && value >= props.min && value <= props.max) {
             props.changeValue(value)
         }
@@ -53,16 +57,28 @@ export const NumInput: React.FC<NumInputProps> = (props) => {
     const handleInputBlur = () => {
         // Reset temp value after user loses focus
         setTempValue(undefined)
+        setFocused(false)
     }
 
+    const handleClick = () => {
+        setTempValue(undefined)
+        handleInputChange(tempValue || '')
+    }
+
+    React.useEffect(() => {
+        context.setState((prevState) => ({ ...prevState, disableHotkeys: focused }))
+    }, [focused])
+
     return (
         <input
             className={'border border-black py-0.5 px-1 rounded-md w-12 ' + (props.className ?? '')}
             type="number"
             value={tempValue ?? props.value}
             onBlur={handleInputBlur}
-            onInput={handleInputChange}
+            onFocus={() => setFocused(true)}
+            onInput={(e) => handleInputChange(e.currentTarget.value)}
             onChange={(e) => setTempValue(e.target.value)}
+            onClick={handleClick}
         />
     )
 }

client/src/components/game/game-area.tsx

@@ -1,13 +1,22 @@
 import React from 'react'
 import { GameRenderer } from './game-renderer'
-import { useAppContext } from '../../app-context';
-import { TournamentRenderer } from './tournament-renderer/tournament-renderer';
+import { useAppContext } from '../../app-context'
+import { TournamentRenderer } from './tournament-renderer/tournament-renderer'
 
 export const GameArea: React.FC = () => {
     const appContext = useAppContext()
 
-    if (!appContext.state.activeGame && appContext.state.tournament)
+    if (appContext.state.loadingRemoteContent) {
+        return (
+            <div className="relative w-full h-screen flex items-center justify-center">
+                <p className="text-white text-center">{`Loading remote ${appContext.state.loadingRemoteContent}...`}</p>
+            </div>
+        )
+    }
+
+    if (!appContext.state.activeGame && appContext.state.tournament) {
         return <TournamentRenderer />
+    }
 
     return <GameRenderer />
 }

client/src/components/game/game-renderer.tsx

@@ -73,6 +73,9 @@ export const GameRenderer: React.FC = () => {
         updateCanvasDimensions(dynamicCanvas.current, { x: width, y: height })
         updateCanvasDimensions(overlayCanvas.current, { x: width, y: height })
         setSelectedSquare(undefined)
+        setSelectedBodyID(undefined)
+        setHoveredTile(undefined)
+        setHoveredBodyID(undefined)
         publishEvent(EventType.INITIAL_RENDER, {})
     }, [appContext.state.activeMatch, backgroundCanvas.current, dynamicCanvas.current, overlayCanvas.current])
 
@@ -135,11 +138,7 @@ export const GameRenderer: React.FC = () => {
             ref={wrapperRef}
         >
             {!activeMatch ? (
-                appContext.state.loadingRemoteContent ? (
-                    <p className="text-white text-center">Loading remote game...</p>
-                ) : (
-                    <p className="text-white text-center">Select a game from the queue</p>
-                )
+                <p className="text-white text-center">Select a game from the queue</p>
             ) : (
                 <>
                     <canvas

client/src/components/game/tournament-renderer/tournament-game.tsx

@@ -31,6 +31,11 @@ export const TournamentGameElement: React.FC<Props> = ({ lines, game }) => {
                     return
                 }
                 const loadedGame = Game.loadFullGameRaw(buffer)
+
+                // select the first match
+                const selectedMatch = loadedGame.matches[0]
+                loadedGame.currentMatch = selectedMatch
+
                 appContext.setState((prevState) => ({
                     ...prevState,
                     activeGame: loadedGame,
@@ -47,7 +52,7 @@ export const TournamentGameElement: React.FC<Props> = ({ lines, game }) => {
     return (
         <Pressable
             className={
-                'pt-4 px-2 pb-2 mx-2 my-4 rounded d-flex flex-col relative border-2 border-white min-w-[80px] max-w-[120px] ' +
+                'pt-4 px-2 pb-2 mx-2 my-4 rounded d-flex flex-col relative border-2 border-white min-w-[80px] max-w-[140px] ' +
                 (loadingGame ? 'opacity-50' : '') +
                 ' ' +
                 (game.gameFile