- {getting ?
:
}
-
-
-
-
-
- {tournament.sets.pendingSets.map((set) => (
-
- ))}
- {tournament.sets.completedSets.length > 0 && (
- <>
-
setCompletedOpen(!completedOpen)}
- >
-
+
+ {
+ ev.stopPropagation();
+ get();
+ }}
+ size="small"
+ >
+ {getting ? : }
+
+
+
+
+
+ {pendingSetsToShow.map((setWithNames) => (
+
+ ))}
+ {completedSetsToShow.length > 0 && (
+ <>
+ setCompletedOpen(!completedOpen)}
>
- completed
- {completedOpen ? : }
-
-
-
- {tournament.sets.completedSets.map((set) => (
-
- ))}
-
-
- )}
-
-
-
+
+ completed
+ {completedOpen ? (
+
+ ) : (
+
+ )}
+
+
+
+ {completedSetsToShow.map((setWithNames) => (
+
+ ))}
+
+
+ )}
+
+
+ )
);
}
diff --git a/src/renderer/DragAndDrop.tsx b/src/renderer/DragAndDrop.tsx
index 1860ce9..9234b01 100644
--- a/src/renderer/DragAndDrop.tsx
+++ b/src/renderer/DragAndDrop.tsx
@@ -6,18 +6,42 @@ import {
createTheme,
} from '@mui/material';
import { CSSProperties, DragEvent, ReactElement } from 'react';
-import { PlayerOverrides } from '../common/types';
+import { NameWithHighlight, PlayerOverrides } from '../common/types';
+import { highlightColor } from '../common/constants';
+
+function Name({ nameWithHighlight }: { nameWithHighlight: NameWithHighlight }) {
+ if (!nameWithHighlight.highlight) {
+ return nameWithHighlight.name;
+ }
+
+ return (
+ <>
+
+ {nameWithHighlight.name.substring(0, nameWithHighlight.highlight.start)}
+
+
+ {nameWithHighlight.name.substring(
+ nameWithHighlight.highlight.start,
+ nameWithHighlight.highlight.end,
+ )}
+
+
+ {nameWithHighlight.name.substring(nameWithHighlight.highlight.end)}
+
+
+ );
+}
export function DraggableChip({
- displayName,
entrantId,
+ nameWithHighlight,
prefix,
pronouns,
selectedChipData,
setSelectedChipData,
}: {
- displayName: string;
entrantId: number;
+ nameWithHighlight: NameWithHighlight;
prefix: string;
pronouns: string;
selectedChipData: PlayerOverrides;
@@ -45,7 +69,7 @@ export function DraggableChip({
);
};
const selected =
- selectedChipData.displayName === displayName &&
+ selectedChipData.displayName === nameWithHighlight.name &&
selectedChipData.entrantId === entrantId;
return (
@@ -70,7 +94,7 @@ export function DraggableChip({
>
}
sx={{ zIndex: (theme) => theme.zIndex.drawer + 2 }}
variant={selected ? 'filled' : 'outlined'}
/>
diff --git a/src/renderer/ManualView.tsx b/src/renderer/ManualView.tsx
index fe2d22e..8575056 100644
--- a/src/renderer/ManualView.tsx
+++ b/src/renderer/ManualView.tsx
@@ -1,23 +1,40 @@
import { Stack } from '@mui/material';
import { DraggableChip } from './DragAndDrop';
-import { PlayerOverrides } from '../common/types';
+import { NameWithHighlight, PlayerOverrides } from '../common/types';
export default function ManualView({
manualNames,
+ searchSubstr,
selectedChipData,
setSelectedChipData,
}: {
manualNames: string[];
+ searchSubstr: string;
selectedChipData: PlayerOverrides;
setSelectedChipData: (newSelectedChipData: PlayerOverrides) => void;
}) {
+ const namesWithHighlights: NameWithHighlight[] = [];
+ manualNames.forEach((name) => {
+ if (!searchSubstr) {
+ namesWithHighlights.push({ name });
+ return;
+ }
+
+ const start = name.toLowerCase().indexOf(searchSubstr.toLowerCase());
+ if (start >= 0) {
+ namesWithHighlights.push({
+ highlight: { start, end: start + searchSubstr.length },
+ name,
+ });
+ }
+ });
return (
- {manualNames.map((manualName, i) => (
+ {namesWithHighlights.map((nameWithHighlight, i) => (
void;
+ vlerkMode: boolean;
+}) {
+ const searchInputRef = useRef();
+ const [showSearch, setShowSearch] = useState(false);
+ const clearSearch = () => {
+ setSearchSubstr('');
+ setShowSearch(false);
+ };
+ return (
+ <>
+ {(showSearch || (vlerkMode && mode === Mode.STARTGG)) && (
+
+ {
+ setSearchSubstr(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Escape') {
+ clearSearch();
+ }
+ }}
+ inputRef={searchInputRef}
+ size="small"
+ value={searchSubstr}
+ InputProps={{
+ endAdornment: (
+
+
+ {
+ clearSearch();
+ }}
+ >
+
+
+
+
+ ),
+ }}
+ />
+
+ )}
+ {
+ clearSearch();
+ },
+ FIND: () => {
+ setShowSearch(true);
+ searchInputRef.current?.focus();
+ },
+ }}
+ />
+
+ );
+}
diff --git a/src/renderer/SetView.tsx b/src/renderer/SetView.tsx
index 284a27b..e5eb0be 100644
--- a/src/renderer/SetView.tsx
+++ b/src/renderer/SetView.tsx
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
import { Backup, CheckBox, HourglassTop } from '@mui/icons-material';
import { Box, Stack, Tooltip } from '@mui/material';
import { NameWithHighlight } from '../common/types';
+import { highlightColor } from '../common/constants';
-const HIGHLIGHT_COLOR = '#ffee58';
const EntrantNames = styled(Stack)`
flex-grow: 1;
min-width: 0;
@@ -35,7 +35,7 @@ function EntrantName({ entrantName }: { entrantName: NameWithHighlight }) {
return (
{entrantName.name.substring(0, entrantName.highlight.start)}
-
+
{entrantName.name.substring(
entrantName.highlight.start,
entrantName.highlight.end,
diff --git a/src/renderer/StartggView.tsx b/src/renderer/StartggView.tsx
index 619b1a5..d9c47af 100644
--- a/src/renderer/StartggView.tsx
+++ b/src/renderer/StartggView.tsx
@@ -4,21 +4,17 @@ import {
CircularProgress,
Collapse,
IconButton,
- InputAdornment,
ListItemButton,
- TextField,
Tooltip,
Typography,
} from '@mui/material';
import {
- Clear,
KeyboardArrowDown,
KeyboardArrowRight,
KeyboardArrowUp,
Refresh,
} from '@mui/icons-material';
-import { useRef, useState } from 'react';
-import { GlobalHotKeys } from 'react-hotkeys';
+import { useState } from 'react';
import {
Event,
NameWithHighlight,
@@ -29,6 +25,7 @@ import {
Tournament,
} from '../common/types';
import SetViewInner from './SetView';
+import filterSets from './filterSets';
const Block = styled.div`
padding-left: 8px;
@@ -40,12 +37,6 @@ const Name = styled.div`
white-space: nowrap;
`;
-type SetWithNames = {
- set: Set;
- entrant1Names: NameWithHighlight[];
- entrant2Names: NameWithHighlight[];
-};
-
function SetView({
set,
entrant1Names,
@@ -162,59 +153,6 @@ function PhaseGroupView({
setGetting(false);
};
- const filterSets = (sets: Set[], substr: string): SetWithNames[] => {
- const setsToShow: SetWithNames[] = [];
- sets.forEach((set) => {
- if (!substr) {
- setsToShow.push({
- set,
- entrant1Names: set.entrant1Participants.map((participant) => ({
- name: participant.displayName,
- })),
- entrant2Names: set.entrant2Participants.map((participant) => ({
- name: participant.displayName,
- })),
- });
- } else {
- const entrant1Names: NameWithHighlight[] = [];
- const entrant2Names: NameWithHighlight[] = [];
- const includeStr = substr.toLowerCase();
- let toShow = false;
- set.entrant1Participants.forEach((participant) => {
- const start = participant.displayName
- .toLowerCase()
- .indexOf(includeStr);
- if (start < 0) {
- entrant1Names.push({ name: participant.displayName });
- } else {
- toShow = true;
- entrant1Names.push({
- highlight: { start, end: start + includeStr.length },
- name: participant.displayName,
- });
- }
- });
- set.entrant2Participants.forEach((participant) => {
- const start = participant.displayName
- .toLowerCase()
- .indexOf(includeStr);
- if (start < 0) {
- entrant2Names.push({ name: participant.displayName });
- } else {
- toShow = true;
- entrant2Names.push({
- highlight: { start, end: start + includeStr.length },
- name: participant.displayName,
- });
- }
- });
- if (toShow) {
- setsToShow.push({ set, entrant1Names, entrant2Names });
- }
- }
- });
- return setsToShow;
- };
const pendingSetsToShow = filterSets(
phaseGroup.sets.pendingSets,
searchSubstr,
@@ -516,6 +454,7 @@ function EventView({
}
export default function StartggView({
+ searchSubstr,
tournament,
vlerkMode,
getEvent,
@@ -523,6 +462,7 @@ export default function StartggView({
getPhaseGroup,
selectSet,
}: {
+ searchSubstr: string;
tournament: Tournament;
vlerkMode: boolean;
getEvent: (id: number) => Promise;
@@ -543,51 +483,8 @@ export default function StartggView({
eventSlug: string,
) => void;
}) {
- const searchInputRef = useRef(null);
- const [searchSubstr, setSearchSubstr] = useState('');
- const [showSearch, setShowSearch] = useState(false);
- const clearSearch = () => {
- setSearchSubstr('');
- setShowSearch(false);
- };
-
return (
- {(showSearch || vlerkMode) && (
-
- {
- setSearchSubstr(event.target.value);
- }}
- onKeyDown={(event) => {
- if (event.key === 'Escape') {
- clearSearch();
- }
- }}
- inputRef={searchInputRef}
- size="small"
- value={searchSubstr}
- InputProps={{
- endAdornment: (
-
-
- {
- clearSearch();
- }}
- >
-
-
-
-
- ),
- }}
- />
-
- )}
{tournament.events.map((event) => (
))}
- {
- clearSearch();
- },
- FIND: () => {
- setShowSearch(true);
- searchInputRef.current?.focus();
- },
- }}
- />
);
}
diff --git a/src/renderer/filterSets.ts b/src/renderer/filterSets.ts
new file mode 100644
index 0000000..9709603
--- /dev/null
+++ b/src/renderer/filterSets.ts
@@ -0,0 +1,54 @@
+import { NameWithHighlight, Set, SetWithNames } from '../common/types';
+
+export default function filterSets(
+ sets: Set[],
+ substr: string,
+): SetWithNames[] {
+ const setsToShow: SetWithNames[] = [];
+ sets.forEach((set) => {
+ if (!substr) {
+ setsToShow.push({
+ set,
+ entrant1Names: set.entrant1Participants.map((participant) => ({
+ name: participant.displayName,
+ })),
+ entrant2Names: set.entrant2Participants.map((participant) => ({
+ name: participant.displayName,
+ })),
+ });
+ } else {
+ const entrant1Names: NameWithHighlight[] = [];
+ const entrant2Names: NameWithHighlight[] = [];
+ const includeStr = substr.toLowerCase();
+ let toShow = false;
+ set.entrant1Participants.forEach((participant) => {
+ const start = participant.displayName.toLowerCase().indexOf(includeStr);
+ if (start < 0) {
+ entrant1Names.push({ name: participant.displayName });
+ } else {
+ toShow = true;
+ entrant1Names.push({
+ highlight: { start, end: start + includeStr.length },
+ name: participant.displayName,
+ });
+ }
+ });
+ set.entrant2Participants.forEach((participant) => {
+ const start = participant.displayName.toLowerCase().indexOf(includeStr);
+ if (start < 0) {
+ entrant2Names.push({ name: participant.displayName });
+ } else {
+ toShow = true;
+ entrant2Names.push({
+ highlight: { start, end: start + includeStr.length },
+ name: participant.displayName,
+ });
+ }
+ });
+ if (toShow) {
+ setsToShow.push({ set, entrant1Names, entrant2Names });
+ }
+ }
+ });
+ return setsToShow;
+}