Skip to content

Commit 7c130f9

Browse files
TheApplePieGodTheApplePieGod
committed
Merge branch 'master' into release-config
2 parents 7ecc8ea + 732f392 commit 7c130f9

27 files changed

+253
-56
lines changed

‎client/src/app-context.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
22
import Game from './playback/Game'
33
import Match from './playback/Match'
4-
import Tournament from './playback/Tournament'
4+
import Tournament, { DEFAULT_TOURNAMENT_STATE, TournamentState } from './playback/Tournament'
55
import { ClientConfig, getDefaultConfig } from './client-config'
66

77
export interface AppState {
88
queue: Game[]
99
activeGame: Game | undefined
1010
activeMatch: Match | undefined
1111
tournament: Tournament | undefined
12-
tournamentMinRound: number // Minimum round to display
12+
tournamentState: TournamentState
1313
loadingRemoteContent: string
1414
updatesPerSecond: number
1515
paused: boolean
@@ -22,7 +22,7 @@ const DEFAULT_APP_STATE: AppState = {
2222
activeGame: undefined,
2323
activeMatch: undefined,
2424
tournament: undefined,
25-
tournamentMinRound: 1,
25+
tournamentState: DEFAULT_TOURNAMENT_STATE,
2626
loadingRemoteContent: '',
2727
updatesPerSecond: 1,
2828
paused: true,

‎client/src/components/forms.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ interface NumInputProps {
3737
min: number
3838
max: number
3939
className?: string
40+
disabled?: boolean
4041
value: number
4142
changeValue: (newValue: number) => void
4243
}
@@ -82,7 +83,12 @@ export const NumInput: React.FC<NumInputProps> = (props) => {
8283

8384
return (
8485
<input
85-
className={'border border-black py-0.5 px-1 rounded-md w-12 ' + (props.className ?? '')}
86+
className={
87+
'border border-black py-0.5 px-1 rounded-md w-12 ' +
88+
(props.disabled ? 'opacity-50 ' : '') +
89+
(props.className ?? '')
90+
}
91+
disabled={props.disabled}
8692
type="number"
8793
value={tempValue ?? props.value}
8894
onBlur={handleInputBlur}

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

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import React, { useEffect, useRef, useState } from 'react'
22
import { useAppContext } from '../../../app-context'
33
import { TournamentGameElement } from './tournament-game'
4-
import Tournament, { TournamentGame } from '../../../playback/Tournament'
4+
import Tournament, { TournamentGame, TournamentState } from '../../../playback/Tournament'
55
import { Space } from 'react-zoomable-ui'
66

77
export const TournamentRenderer: React.FC = () => {
88
const appContext = useAppContext()
99

1010
const spaceRef = useRef<Space | null>(null)
1111

12+
const tournament = appContext.state.tournament
13+
const tournamentState = appContext.state.tournamentState
14+
1215
return (
1316
<div className="w-full h-screen relative">
1417
<Space ref={spaceRef} treatTwoFingerTrackPadGesturesLikeTouch={false}>
15-
{appContext.state.tournament && spaceRef.current ? (
18+
{tournament && spaceRef.current ? (
1619
<TournamentTree
17-
tournament={appContext.state.tournament}
18-
minRound={appContext.state.tournamentMinRound}
20+
tournament={tournament}
21+
tournamentState={tournamentState}
1922
spaceRef={spaceRef.current}
2023
/>
2124
) : (
@@ -28,7 +31,7 @@ export const TournamentRenderer: React.FC = () => {
2831

2932
interface TournamentTreeProps {
3033
tournament: Tournament
31-
minRound: number
34+
tournamentState: TournamentState
3235
spaceRef: Space
3336
}
3437

@@ -45,18 +48,21 @@ const TournamentTree: React.FC<TournamentTreeProps> = (props) => {
4548
// resizeObserver.observe(leafRef.current)
4649
// }, [])
4750

48-
const brackets: [TournamentGame, string][] = props.tournament.losersBracketRoot
49-
? [
50-
[props.tournament.winnersBracketRoot, 'Winners Bracket'],
51-
[props.tournament.losersBracketRoot, 'Losers Bracket']
52-
]
53-
: [[props.tournament.winnersBracketRoot, '']]
51+
const brackets: [TournamentGame, string][] = [
52+
[props.tournament.winnersBracketRoot, props.tournament.losersBracketRoot ? 'Winners Bracket' : '']
53+
]
54+
if (props.tournament.losersBracketRoot && props.tournamentState.showLosers)
55+
brackets.push([props.tournament.losersBracketRoot, 'Losers Bracket'])
5456

5557
return (
56-
<div className="flex flex-row items-center justify-center w-full h-screen">
58+
<div className="flex flex-row gap-10 items-center justify-center w-full h-screen">
5759
{brackets.map(([rootGame, bracketTitle]) => (
5860
<div className="flex flex-col justify-center w-max mx-2" key={bracketTitle}>
59-
<TournamentGameWrapper game={rootGame} minRound={props.minRound} spaceRef={props.spaceRef} />
61+
<TournamentGameWrapper
62+
game={rootGame}
63+
tournamentState={props.tournamentState}
64+
spaceRef={props.spaceRef}
65+
/>
6066
{bracketTitle && (
6167
<div className="text-white pt-2 text-center border-t border-white">{bracketTitle}</div>
6268
)}
@@ -68,7 +74,7 @@ const TournamentTree: React.FC<TournamentTreeProps> = (props) => {
6874

6975
interface TournamentGameWrapperProps {
7076
game: TournamentGame
71-
minRound: number
77+
tournamentState: TournamentState
7278
spaceRef: Space
7379
}
7480

@@ -116,9 +122,17 @@ const TournamentGameWrapper: React.FC<TournamentGameWrapperProps> = (props) => {
116122

117123
setLines({ left, right, down })
118124
}, 2)
119-
}, [wrapperRef.current, childWrapper1Ref.current, childWrapper2Ref.current, props.minRound])
120-
121-
if (props.game.round < props.minRound) {
125+
}, [wrapperRef.current, childWrapper1Ref.current, childWrapper2Ref.current, props.tournamentState])
126+
127+
const [dependA, dependB] = props.game.dependsOn
128+
let round = Math.abs(props.game.round)
129+
let minRound = props.tournamentState.minRoundWinners
130+
let maxRound = props.tournamentState.maxRoundWinners
131+
if (Math.sign(props.game.round) < 0) {
132+
minRound = props.tournamentState.minRoundLosers
133+
maxRound = props.tournamentState.maxRoundLosers
134+
}
135+
if (round < minRound) {
122136
props.game.viewed = true
123137
}
124138

@@ -127,28 +141,28 @@ const TournamentGameWrapper: React.FC<TournamentGameWrapperProps> = (props) => {
127141
<div
128142
className="flex flex-col flex-grow basis-0 " /*ref={round === 1 && index === 0 ? leafRef : undefined}*/
129143
>
130-
{props.game.round >= props.minRound && (
144+
{round >= minRound && round <= maxRound && (
131145
<div className="mx-auto relative" ref={wrapperRef}>
132146
<TournamentGameElement game={props.game} />
133-
{props.game.round > props.minRound && <GameChildrenLines lines={lines} />}
147+
{round > minRound && <GameChildrenLines lines={lines} />}
134148
</div>
135149
)}
136150
</div>
137151
<div className="flex flex-row">
138-
{props.game.dependsOn[0] && (
152+
{dependA && Math.sign(dependA.round) == Math.sign(props.game.round) && (
139153
<div className="mx-auto" ref={childWrapper1Ref}>
140154
<TournamentGameWrapper
141-
game={props.game.dependsOn[0]}
142-
minRound={props.minRound}
155+
game={dependA}
156+
tournamentState={props.tournamentState}
143157
spaceRef={props.spaceRef}
144158
/>
145159
</div>
146160
)}
147-
{props.game.dependsOn[1] && (
161+
{dependB && Math.sign(dependB.round) == Math.sign(props.game.round) && (
148162
<div className="mx-auto" ref={childWrapper2Ref}>
149163
<TournamentGameWrapper
150-
game={props.game.dependsOn[1]}
151-
minRound={props.minRound}
164+
game={dependB}
165+
tournamentState={props.tournamentState}
152166
spaceRef={props.spaceRef}
153167
/>
154168
</div>
@@ -188,7 +202,7 @@ const GameChildrenLines: React.FC<{ lines: { left: number | undefined; right: nu
188202
<div
189203
className={commonClasses}
190204
style={{
191-
left: '50%',
205+
left: `calc(50% - ${lineWidthValue / 2}px)`,
192206
background: lineColor,
193207
width: lineWidth,
194208
height: `${lines.down / 2}px`,
@@ -201,7 +215,7 @@ const GameChildrenLines: React.FC<{ lines: { left: number | undefined; right: nu
201215
className={commonClasses}
202216
style={{
203217
flexDirection: 'row-reverse',
204-
left: `calc(50% - ${lines.left}px)`,
218+
left: `calc(50% - ${lines.left}px + ${lineWidthValue / 2}px)`,
205219
top: `calc(100% - ${lines.down * 0.5}px)`,
206220
width: `${lines.left}px`,
207221
height: lines.down
@@ -215,7 +229,7 @@ const GameChildrenLines: React.FC<{ lines: { left: number | undefined; right: nu
215229
<div
216230
className={commonClasses}
217231
style={{
218-
left: '50%',
232+
left: `calc(50% - ${lineWidthValue / 2}px)`,
219233
top: `calc(100% - ${lines.down * 0.5}px)`,
220234
width: `${lines.right}px`,
221235
height: lines.down

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,11 @@ export const GamePage: React.FC<Props> = React.memo((props) => {
3636
let stopCounting = false
3737
const isWinner = (match: Match) => {
3838
if (context.state.tournament && stopCounting) return 0
39-
if (match == activeGame.currentMatch) stopCounting = true
39+
if (match == activeGame.currentMatch) {
40+
stopCounting = true
41+
// Dont include this match if we aren't at the end yet
42+
if (context.state.tournament && !match.currentTurn.isEnd()) return 0
43+
}
4044
return match.winner?.id === team.id ? 1 : 0
4145
}
4246
return activeGame.matches.reduce((val, match) => val + isWinner(match), 0)
@@ -47,29 +51,30 @@ export const GamePage: React.FC<Props> = React.memo((props) => {
4751
const isEndOfMatch = context.state.activeMatch && context.state.activeMatch.currentTurn.isEnd()
4852

4953
let showMatchWinner = !context.state.tournament || isEndOfMatch
50-
showMatchWinner = showMatchWinner && activeGame && activeGame.currentMatch?.winner === activeGame.teams[teamIdx]
54+
showMatchWinner =
55+
showMatchWinner && !!activeGame && activeGame.currentMatch?.winner === activeGame.teams[teamIdx]
5156
let showGameWinner = !context.state.tournament || (showMatchWinner && winCount >= 3)
52-
showGameWinner = showGameWinner && activeGame && activeGame.winner === activeGame.teams[teamIdx]
57+
showGameWinner = showGameWinner && !!activeGame && activeGame.winner === activeGame.teams[teamIdx]
5358

5459
return (
5560
<div className={'relative w-full py-2 px-3 text-center ' + (teamIdx == 0 ? 'bg-team0' : 'bg-team1')}>
5661
<div>{activeGame?.teams[teamIdx].name ?? NO_GAME_TEAM_NAME}</div>
5762
<div className="absolute top-2 left-3">
58-
{showMatchWinner && (
59-
<div className="relative flex items-center w-[24px] h-[24px]">
63+
<div className="relative flex items-center w-[24px] h-[24px]">
64+
{showMatchWinner && (
6065
<div className="absolute">
6166
<Tooltip text={'Current match winner'} location={'right'}>
6267
<BiMedal opacity={0.5} fontSize={'24px'} width={'20px'} color={'yellow'} />
6368
</Tooltip>
6469
</div>
65-
<div
66-
className="absolute w-full text-sm pointer-events-none z-5"
67-
style={{ textShadow: 'white 0px 0px 4px' }}
68-
>
69-
{winCount > 0 && winCount}
70-
</div>
70+
)}
71+
<div
72+
className="absolute w-full text-sm pointer-events-none z-5"
73+
style={{ textShadow: 'white 0px 0px 4px' }}
74+
>
75+
{winCount > 0 && winCount}
7176
</div>
72-
)}
77+
</div>
7378
</div>
7479
<div className="absolute top-3 right-3">
7580
{showGameWinner && (

0 commit comments

Comments
 (0)