Client refactor

client/src/app-context.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import Game from './playback/Game'
-import Match from './playback/Match'
-import Tournament, { DEFAULT_TOURNAMENT_STATE, TournamentState } from './playback/Tournament'
+import Game from './current-game/Game'
+import Match from './current-game/Match'
 import { ClientConfig, getDefaultConfig } from './client-config'
+import Tournament, { DEFAULT_TOURNAMENT_STATE, TournamentState } from './components/game/tournament-renderer/Tournament'
 
 export interface AppState {
     queue: Game[]
@@ -11,8 +11,6 @@ export interface AppState {
     tournament: Tournament | undefined
     tournamentState: TournamentState
     loadingRemoteContent: string
-    updatesPerSecond: number
-    paused: boolean
     disableHotkeys: boolean
     config: ClientConfig
 }
@@ -24,8 +22,6 @@ const DEFAULT_APP_STATE: AppState = {
     tournament: undefined,
     tournamentState: DEFAULT_TOURNAMENT_STATE,
     loadingRemoteContent: '',
-    updatesPerSecond: 1,
-    paused: true,
     disableHotkeys: false,
     config: getDefaultConfig()
 }

client/src/app-events.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react'
 
 export enum EventType {
-    TURN_PROGRESS = 'turnprogress',
-    TILE_CLICK = 'tileclick',
+    NEW_TURN = 'NEW_TURN',
+    TILE_CLICK = 'TILE_CLICK',
     TILE_DRAG = 'TILE_DRAG',
     CANVAS_RIGHT_CLICK = 'CANVAS_RIGHT_CLICK',
-    RENDER = 'render',
-    INITIAL_RENDER = 'initalrender'
+    RENDER = 'RENDER',
+    MAP_RENDER = 'MAP_RENDER'
 }
 
 export function useListenEvent(
@@ -26,7 +26,7 @@ export function useListenEvent(
     }, deps)
 }
 
-export function publishEvent(eventType: string, eventData: any) {
+export function publishEvent(eventType: string, eventData: any = false) {
     const event = new CustomEvent(eventType as string, { detail: eventData })
     document.dispatchEvent(event)
 }

client/src/components/basic-dialog.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react'
 import { useAppContext } from '../app-context'
-import { useKeyboard } from '../util/keyboard'
+import { Hotkeys, useHotkey, useKeyboard } from '../util/keyboard'
 
 interface Props {
     open: boolean
@@ -20,13 +20,15 @@ export const BasicDialog: React.FC<PropsWithChildren<Props>> = (props) => {
     const context = useAppContext()
     const keyboard = useKeyboard()
 
-    React.useEffect(() => {
-        if (!props.open) return
-
-        if (props.onCancel && keyboard.keyCode === 'Escape') {
-            props.onCancel()
-        }
-    }, [props.open, keyboard.keyCode])
+    useHotkey(
+        context.state,
+        keyboard,
+        Hotkeys.EscapeDialog,
+        () => {
+            if (props.open && props.onCancel) props.onCancel()
+        },
+        [props.onCancel, props.open]
+    )
 
     React.useEffect(() => {
         context.setState((prevState) => ({ ...prevState, disableHotkeys: props.open }))
@@ -41,12 +43,12 @@ export const BasicDialog: React.FC<PropsWithChildren<Props>> = (props) => {
         widthType == 'sm'
             ? 'w-4/6 md:w-3/5 lg:w-6/12'
             : widthType == 'md'
-            ? 'w-5/6 md:w-3/4 lg:w-7/12'
-            : widthType == 'lg'
-            ? 'w-5/6 md:w-4/5 lg:w-9/12'
-            : widthType == 'full'
-            ? 'w-5/6 md:w-5/6 lg:w-11/12'
-            : ''
+              ? 'w-5/6 md:w-3/4 lg:w-7/12'
+              : widthType == 'lg'
+                ? 'w-5/6 md:w-4/5 lg:w-9/12'
+                : widthType == 'full'
+                  ? 'w-5/6 md:w-5/6 lg:w-11/12'
+                  : ''
     return (
         <div className="fixed flex flex-col items-center justify-center w-full h-full top-0 left-0 bg-gray-500 bg-opacity-50 z-50">
             <div

client/src/components/controls-bar/controls-bar-timeline.tsx

@@ -3,10 +3,11 @@ import { useAppContext } from '../../app-context'
 
 const TIMELINE_WIDTH = 350
 interface Props {
-    currentUPS: number
+    liveUPS: number
+    targetUPS: number
 }
 
-export const ControlsBarTimeline: React.FC<Props> = ({ currentUPS }) => {
+export const ControlsBarTimeline: React.FC<Props> = ({ liveUPS, targetUPS }) => {
     const appContext = useAppContext()
 
     let down = useRef(false)
@@ -67,9 +68,9 @@ export const ControlsBarTimeline: React.FC<Props> = ({ currentUPS }) => {
     return (
         <div className="min-h-[30px] bg-bg rounded-md mr-2 relative" style={{ minWidth: TIMELINE_WIDTH }}>
             <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[10px] text-xs select-none whitespace-nowrap">
-                Turn: <b>{turn}</b>/{maxTurn} &nbsp; {appContext.state.updatesPerSecond} UPS (
-                {appContext.state.updatesPerSecond < 0 && '-'}
-                {currentUPS})
+                Turn: <b>{turn}</b>/{maxTurn} &nbsp; {targetUPS} UPS (
+                {targetUPS < 0 && '-'}
+                {liveUPS})
             </p>
             <div className="absolute bg-white/10 left-0 right-0 bottom-0 min-h-[5px] rounded"></div>
             <div