Merge branch 'client'

Author: TheApplePieGod

client/src/app-context.tsx

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

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-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])
 

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

@@ -3,16 +3,21 @@ import { useAppContext } from '../../../app-context'
 import { TournamentGameElement } from './tournament-game'
 import Tournament, { TournamentGame } from '../../../playback/Tournament'
 import { Space } from 'react-zoomable-ui'
-import { useForceUpdate } from '../../../util/react-util'
 
 export const TournamentRenderer: React.FC = () => {
     const appContext = useAppContext()
 
+    const spaceRef = useRef<Space | null>(null)
+
     return (
         <div className="w-full h-screen relative">
-            <Space treatTwoFingerTrackPadGesturesLikeTouch={false}>
-                {appContext.state.tournament ? (
-                    <TournamentTree tournament={appContext.state.tournament} />
+            <Space ref={spaceRef} treatTwoFingerTrackPadGesturesLikeTouch={false}>
+                {appContext.state.tournament && spaceRef.current ? (
+                    <TournamentTree
+                        tournament={appContext.state.tournament}
+                        minRound={appContext.state.tournamentMinRound}
+                        spaceRef={spaceRef.current}
+                    />
                 ) : (
                     <>Missing Tournament</>
                 )}
@@ -23,9 +28,11 @@ export const TournamentRenderer: React.FC = () => {
 
 interface TournamentTreeProps {
     tournament: Tournament
+    minRound: number
+    spaceRef: Space
 }
 
-const TournamentTree: React.FC<TournamentTreeProps> = ({ tournament }) => {
+const TournamentTree: React.FC<TournamentTreeProps> = (props) => {
     // const [leafWidth, setLeafWidth] = useState<number | undefined>(undefined)
     // const leafRef = useRef<HTMLDivElement>(null)
 
@@ -38,18 +45,18 @@ const TournamentTree: React.FC<TournamentTreeProps> = ({ tournament }) => {
     //     resizeObserver.observe(leafRef.current)
     // }, [])
 
-    const brackets: [TournamentGame, string][] = tournament.losersBracketRoot
+    const brackets: [TournamentGame, string][] = props.tournament.losersBracketRoot
         ? [
-              [tournament.winnersBracketRoot, 'Winners Bracket'],
-              [tournament.losersBracketRoot, 'Losers Bracket']
+              [props.tournament.winnersBracketRoot, 'Winners Bracket'],
+              [props.tournament.losersBracketRoot, 'Losers Bracket']
           ]
-        : [[tournament.winnersBracketRoot, '']]
+        : [[props.tournament.winnersBracketRoot, '']]
 
     return (
         <div className="flex flex-row items-center justify-center w-full h-screen">
             {brackets.map(([rootGame, bracketTitle]) => (
                 <div className="flex flex-col justify-center w-max mx-2" key={bracketTitle}>
-                    <TournamentGameWrapper game={rootGame} />
+                    <TournamentGameWrapper game={rootGame} minRound={props.minRound} spaceRef={props.spaceRef} />
                     {bracketTitle && (
                         <div className="text-white pt-2 text-center border-t border-white">{bracketTitle}</div>
                     )}
@@ -59,7 +66,13 @@ const TournamentTree: React.FC<TournamentTreeProps> = ({ tournament }) => {
     )
 }
 
-const TournamentGameWrapper: React.FC<{ game: TournamentGame }> = ({ game }) => {
+interface TournamentGameWrapperProps {
+    game: TournamentGame
+    minRound: number
+    spaceRef: Space
+}
+
+const TournamentGameWrapper: React.FC<TournamentGameWrapperProps> = (props) => {
     const wrapperRef = useRef<HTMLDivElement>(null)
     const childWrapper1Ref = useRef<HTMLDivElement>(null)
     const childWrapper2Ref = useRef<HTMLDivElement>(null)
@@ -71,56 +84,73 @@ const TournamentGameWrapper: React.FC<{ game: TournamentGame }> = ({ game }) =>
     })
 
     useEffect(() => {
-        if (!wrapperRef.current) return
+        setTimeout(() => {
+            if (!wrapperRef.current) return
+
+            const wrapperRect = wrapperRef.current.getBoundingClientRect()
+            const scale = props.spaceRef.viewPort?.zoomFactor ?? 1
+            const startX = wrapperRect.x + wrapperRect.width / 2
+            const startY = wrapperRect.y + wrapperRect.height - 17.45
 
-        const wrapperRect = wrapperRef.current.getBoundingClientRect()
-        const startX = wrapperRect.x + wrapperRect.width / 2
-        const startY = wrapperRect.y + wrapperRect.height - 17.45
+            let left = undefined
+            let right = undefined
+            let down = 0
 
-        let left = undefined
-        let right = undefined
-        let down = 0
+            if (childWrapper1Ref.current) {
+                const childWrapper1Rect = childWrapper1Ref.current.getBoundingClientRect()
+                const child1X = childWrapper1Rect.x + childWrapper1Rect.width / 2
+                const child1Y = childWrapper1Rect.y + 17.45
 
-        if (childWrapper1Ref.current) {
-            const childWrapper1Rect = childWrapper1Ref.current.getBoundingClientRect()
-            const child1X = childWrapper1Rect.x + childWrapper1Rect.width / 2
-            const child1Y = childWrapper1Rect.y + 17.45
+                left = Math.abs(child1X - startX) / scale
+                down = Math.abs(child1Y - startY)
+            }
 
-            left = Math.abs(child1X - startX)
-            down = Math.abs(child1Y - startY)
-        }
+            if (childWrapper2Ref.current) {
+                const childWrapper2Rect = childWrapper2Ref.current.getBoundingClientRect()
+                const child2X = childWrapper2Rect.x + childWrapper2Rect.width / 2
+                const child2Y = childWrapper2Rect.y + 17.45
 
-        if (childWrapper2Ref.current) {
-            const childWrapper2Rect = childWrapper2Ref.current.getBoundingClientRect()
-            const child2X = childWrapper2Rect.x + childWrapper2Rect.width / 2
-            const child2Y = childWrapper2Rect.y + 17.45
+                right = Math.abs(child2X - startX) / scale
+                down = Math.abs(Math.max(down, child2Y - startY))
+            }
 
-            right = Math.abs(child2X - startX)
-            down = Math.abs(Math.max(down, child2Y - startY))
-        }
+            setLines({ left, right, down })
+        }, 2)
+    }, [wrapperRef.current, childWrapper1Ref.current, childWrapper2Ref.current, props.minRound])
 
-        setLines({ left, right, down })
-    }, [wrapperRef.current, childWrapper1Ref.current, childWrapper2Ref.current])
+    if (props.game.round < props.minRound) {
+        props.game.viewed = true
+    }
 
     return (
-        <div className="flex flex-col" key={game.id}>
+        <div className="flex flex-col" key={props.game.id}>
             <div
                 className="flex flex-col flex-grow basis-0 " /*ref={round === 1 && index === 0 ? leafRef : undefined}*/
             >
-                <div className="mx-auto relative" ref={wrapperRef}>
-                    <TournamentGameElement game={game} />
-                    <GameChildrenLines lines={lines} />
-                </div>
+                {props.game.round >= props.minRound && (
+                    <div className="mx-auto relative" ref={wrapperRef}>
+                        <TournamentGameElement game={props.game} />
+                        {props.game.round > props.minRound && <GameChildrenLines lines={lines} />}
+                    </div>
+                )}
             </div>
             <div className="flex flex-row">
-                {game.dependsOn[0] && (
+                {props.game.dependsOn[0] && (
                     <div className="mx-auto" ref={childWrapper1Ref}>
-                        <TournamentGameWrapper game={game.dependsOn[0]} />
+                        <TournamentGameWrapper
+                            game={props.game.dependsOn[0]}
+                            minRound={props.minRound}
+                            spaceRef={props.spaceRef}
+                        />
                     </div>
                 )}
-                {game.dependsOn[1] && (
+                {props.game.dependsOn[1] && (
                     <div className="mx-auto" ref={childWrapper2Ref}>
-                        <TournamentGameWrapper game={game.dependsOn[1]} />
+                        <TournamentGameWrapper
+                            game={props.game.dependsOn[1]}
+                            minRound={props.minRound}
+                            spaceRef={props.spaceRef}
+                        />
                     </div>
                 )}
             </div>

client/src/components/sidebar/game/game.tsx

@@ -62,6 +62,11 @@ export const GamePage: React.FC<Props> = React.memo((props) => {
 
     return (
         <div className="flex flex-col overflow-x-hidden">
+            <div className="w-full pb-3 px-4 text-center">
+                {activeGame && activeGame.currentMatch && (
+                    <div className="border-black border rounded-md font-bold">{activeGame.currentMatch.map.name}</div>
+                )}
+            </div>
             {teamBox(0)}
             <TeamTable teamIdx={0} />
 

client/src/components/sidebar/runner/scaffold.ts

@@ -51,8 +51,18 @@ export function useScaffold(): Scaffold {
 
     async function runMatch(javaPath: string, teamA: string, teamB: string, selectedMaps: Set<string>): Promise<void> {
         if (matchPID.current || !scaffoldPath) return
+        const shouldProfile = false
         try {
-            const newPID = await dispatchMatch(javaPath, teamA, teamB, selectedMaps, nativeAPI!, scaffoldPath!)
+            const newPID = await dispatchMatch(
+                javaPath,
+                teamA,
+                teamB,
+                selectedMaps,
+                nativeAPI!,
+                scaffoldPath!,
+                appContext.state.config.validateMaps,
+                shouldProfile
+            )
             setConsoleLines([])
             matchPID.current = newPID
         } catch (e: any) {
@@ -272,7 +282,9 @@ async function dispatchMatch(
     teamB: string,
     selectedMaps: Set<string>,
     nativeAPI: NativeAPI,
-    scaffoldPath: string
+    scaffoldPath: string,
+    validate: boolean,
+    profile: boolean
 ): Promise<string> {
     const options = [
         `run`,
@@ -282,8 +294,8 @@ async function dispatchMatch(
         `-PteamA=${teamA}`,
         `-PteamB=${teamB}`,
         `-Pmaps=${[...selectedMaps].join(',')}`,
-        `-PvalidateMaps=false`,
-        `-PenableProfiler=${false}`
+        `-PvalidateMaps=${validate}`,
+        `-PenableProfiler=${profile}`
     ]
 
     return nativeAPI.child_process.spawn(scaffoldPath, javaPath, options)