Skip to content

Commit

Permalink
ctrl-f search for challonge/manual as well
Browse files Browse the repository at this point in the history 
#55
  • Loading branch information
@jmlee337
jmlee337 committed Jul 16, 2024
1 parent a57af75 commit 62f0180
Show file tree
Hide file tree
Showing 10 changed files with 332 additions and 221 deletions.
1 change: 1 addition & 0 deletions src/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,3 +139,4 @@ export const startggStageIds = new Map(
);

export const frameMsDivisor = 0.05994;
export const highlightColor = '#ffee58';
6 changes: 6 additions & 0 deletions src/common/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,3 +234,9 @@ export type NameWithHighlight = {
};
name: string;
};

export type SetWithNames = {
set: Set;
entrant1Names: NameWithHighlight[];
entrant2Names: NameWithHighlight[];
};
39 changes: 27 additions & 12 deletions src/renderer/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import {
import ManualView from './ManualView';
import ManualBar from './ManualBar';
import ChallongeView from './ChallongeView';
import SearchBox from './SearchBox';

const Bottom = styled(Paper)`
height: 147px;
Expand Down Expand Up @@ -457,6 +458,7 @@ function Hello() {

const [slugDialogOpen, setSlugDialogOpen] = useState(false);
const [gettingTournament, setGettingTournament] = useState(false);
const [searchSubstr, setSearchSubstr] = useState('');

// Challonge tournament view
const [challongeTournaments, setChallongeTournaments] = useState(
Expand Down Expand Up @@ -1692,8 +1694,15 @@ function Hello() {
<div ref={copyControlsRef} />
</TopColumn>
<TopColumn width="300px">
<SearchBox
mode={mode}
searchSubstr={searchSubstr}
setSearchSubstr={setSearchSubstr}
vlerkMode={vlerkMode}
/>
{mode === Mode.STARTGG && (
<StartggView
searchSubstr={searchSubstr}
tournament={tournament}
vlerkMode={vlerkMode}
getEvent={(id: number) => getEvent(id, true)}
Expand All @@ -1711,6 +1720,7 @@ function Hello() {
(challongeTournament) => (
<ChallongeView
key={challongeTournament.slug}
searchSubstr={searchSubstr}
tournament={challongeTournament}
getChallongeTournament={async () =>
getChallongeTournament(challongeTournament.slug)
Expand All @@ -1724,6 +1734,7 @@ function Hello() {
{mode === Mode.MANUAL && (
<ManualView
manualNames={manualNames}
searchSubstr={searchSubstr}
selectedChipData={selectedChipData}
setSelectedChipData={setSelectedChipData}
/>
Expand Down Expand Up @@ -1807,10 +1818,11 @@ function Hello() {
<Stack direction="row" gap="8px">
<Stack gap="8px" width="50%">
<DraggableChip
displayName={
selectedSet.entrant1Participants[0].displayName
}
entrantId={selectedSet.entrant1Id}
nameWithHighlight={{
name: selectedSet.entrant1Participants[0]
.displayName,
}}
prefix={selectedSet.entrant1Participants[0].prefix}
pronouns={
selectedSet.entrant1Participants[0].pronouns
Expand All @@ -1820,10 +1832,11 @@ function Hello() {
/>
{selectedSet.entrant1Participants.length > 1 && (
<DraggableChip
displayName={
selectedSet.entrant1Participants[1].displayName
}
entrantId={selectedSet.entrant1Id}
nameWithHighlight={{
name: selectedSet.entrant1Participants[1]
.displayName,
}}
prefix={selectedSet.entrant1Participants[1].prefix}
pronouns={
selectedSet.entrant1Participants[1].pronouns
Expand All @@ -1835,10 +1848,11 @@ function Hello() {
</Stack>
<Stack gap="8px" width="50%">
<DraggableChip
displayName={
selectedSet.entrant2Participants[0].displayName
}
entrantId={selectedSet.entrant2Id}
nameWithHighlight={{
name: selectedSet.entrant2Participants[0]
.displayName,
}}
prefix={selectedSet.entrant2Participants[0].prefix}
pronouns={
selectedSet.entrant2Participants[0].pronouns
Expand All @@ -1848,10 +1862,11 @@ function Hello() {
/>
{selectedSet.entrant2Participants.length > 1 && (
<DraggableChip
displayName={
selectedSet.entrant2Participants[1].displayName
}
entrantId={selectedSet.entrant2Id}
nameWithHighlight={{
name: selectedSet.entrant2Participants[1]
.displayName,
}}
prefix={selectedSet.entrant2Participants[1].prefix}
pronouns={
selectedSet.entrant2Participants[1].pronouns
Expand Down
171 changes: 97 additions & 74 deletions src/renderer/ChallongeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,48 +14,47 @@ import {
Refresh,
} from '@mui/icons-material';
import { useState } from 'react';
import { ChallongeTournament, Set, State } from '../common/types';
import { ChallongeTournament, Set, SetWithNames, State } from '../common/types';
import SetViewInner from './SetView';
import filterSets from './filterSets';

function SetView({
set,
setWithNames,
selectSet,
}: {
set: Set;
setWithNames: SetWithNames;
selectSet: (set: Set) => void;
}) {
return (
<ListItemButton
dense
disableGutters
onClick={() => {
selectSet(set);
selectSet(setWithNames.set);
}}
>
<SetViewInner
entrant1Names={set.entrant1Participants.map((participant) => ({
name: participant.displayName,
}))}
entrant1Score={set.entrant1Score}
entrant1Win={set.entrant1Id === set.winnerId}
entrant2Names={set.entrant2Participants.map((participant) => ({
name: participant.displayName,
}))}
entrant2Score={set.entrant2Score}
fullRoundText={set.fullRoundText}
state={set.state}
showScores={set.state === State.COMPLETED}
entrant1Names={setWithNames.entrant1Names}
entrant1Score={setWithNames.set.entrant1Score}
entrant1Win={setWithNames.set.entrant1Id === setWithNames.set.winnerId}
entrant2Names={setWithNames.entrant2Names}
entrant2Score={setWithNames.set.entrant2Score}
fullRoundText={setWithNames.set.fullRoundText}
state={setWithNames.set.state}
showScores={setWithNames.set.state === State.COMPLETED}
wasReported={false}
/>
</ListItemButton>
);
}

export default function ChallongeView({
searchSubstr,
tournament,
getChallongeTournament,
selectSet,
}: {
searchSubstr: string;
tournament: ChallongeTournament;
getChallongeTournament: () => Promise<void>;
selectSet: (set: Set) => void;
Expand All @@ -68,69 +67,93 @@ export default function ChallongeView({
await getChallongeTournament();
setGetting(false);
};
const pendingSetsToShow = filterSets(
tournament.sets.pendingSets,
searchSubstr,
);
const completedSetsToShow = filterSets(
tournament.sets.completedSets,
searchSubstr,
);
return (
<Box>
<ListItemButton
dense
disableGutters
onClick={() => {
setOpen(!open);
}}
sx={{ typography: 'caption' }}
>
{open ? <KeyboardArrowDown /> : <KeyboardArrowRight />}
<div
style={{
overflowX: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
(!searchSubstr ||
pendingSetsToShow.length > 0 ||
completedSetsToShow.length > 0) && (
<Box>
<ListItemButton
dense
disableGutters
onClick={() => {
setOpen(!open);
}}
sx={{ typography: 'caption' }}
>
{tournament.name}
</div>
<Tooltip arrow title="Refresh tournament">
<IconButton
onClick={(ev) => {
ev.stopPropagation();
get();
{open ? <KeyboardArrowDown /> : <KeyboardArrowRight />}
<div
style={{
overflowX: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
size="small"
>
{getting ? <CircularProgress size="24px" /> : <Refresh />}
</IconButton>
</Tooltip>
</ListItemButton>
<Collapse in={open}>
<div style={{ paddingLeft: '8px' }}>
{tournament.sets.pendingSets.map((set) => (
<SetView key={set.id} set={set} selectSet={selectSet} />
))}
{tournament.sets.completedSets.length > 0 && (
<>
<ListItemButton
dense
onClick={() => setCompletedOpen(!completedOpen)}
>
<Typography
alignItems="center"
display="flex"
justifyContent="right"
variant="subtitle2"
width="100%"
{tournament.name}
</div>
<Tooltip arrow title="Refresh tournament">
<IconButton
onClick={(ev) => {
ev.stopPropagation();
get();
}}
size="small"
>
{getting ? <CircularProgress size="24px" /> : <Refresh />}
</IconButton>
</Tooltip>
</ListItemButton>
<Collapse in={open}>
<div style={{ paddingLeft: '8px' }}>
{pendingSetsToShow.map((setWithNames) => (
<SetView
key={setWithNames.set.id}
setWithNames={setWithNames}
selectSet={selectSet}
/>
))}
{completedSetsToShow.length > 0 && (
<>
<ListItemButton
dense
onClick={() => setCompletedOpen(!completedOpen)}
>
completed
{completedOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Typography>
</ListItemButton>
<Collapse in={completedOpen}>
{tournament.sets.completedSets.map((set) => (
<SetView key={set.id} set={set} selectSet={selectSet} />
))}
</Collapse>
</>
)}
</div>
</Collapse>
</Box>
<Typography
alignItems="center"
display="flex"
justifyContent="right"
variant="subtitle2"
width="100%"
>
completed
{completedOpen ? (
<KeyboardArrowUp />
) : (
<KeyboardArrowDown />
)}
</Typography>
</ListItemButton>
<Collapse in={completedOpen}>
{completedSetsToShow.map((setWithNames) => (
<SetView
key={setWithNames.set.id}
setWithNames={setWithNames}
selectSet={selectSet}
/>
))}
</Collapse>
</>
)}
</div>
</Collapse>
</Box>
)
);
}
Loading

0 comments on commit 62f0180

Please sign in to comment.