Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the fts star to the scoreboard #140

Merged
merged 9 commits into from
Jan 31, 2024
+36 −11
Merged

Added the fts star to the scoreboard #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e1fd1b1
started: first to solve in scoreboard
Mond1c Jan 27, 2024
5d10aa8
added: the color of the star matches the color of the problem
Mond1c Jan 27, 2024
aae795f
final version
Mond1c Jan 27, 2024
594a4be
deleted useless change
Mond1c Jan 27, 2024
7757fc0
added first to solve to ioi
Mond1c Jan 28, 2024
fe2d66f
fixed some mistakes
Mond1c Jan 29, 2024
73f1924
safety fix
Mond1c Jan 29, 2024
dc62d8c
deleted position: relative
Mond1c Jan 31, 2024
7f444b0
Changes
Mond1c Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/frontend/overlay/src/assets/icons/scoreboard_star.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 31 additions & 9 deletions src/frontend/overlay/src/components/atoms/ContestLabels.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import styled from "styled-components";
import c from "../../config";
import { isShouldUseDarkColor } from "../../utils/colors";
import { ShrinkingBox } from "./ShrinkingBox";
import star from "../../assets/icons/scoreboard_star.svg";

import {
TeamTaskColor,
TeamTaskSymbol,
Expand Down Expand Up @@ -115,27 +117,47 @@ const TaskResultLabelWrapper2 = styled.div`
color: #fff;
`;

// TODO: fts start
const ICPCTaskResultLabel2 = ({ problemResult: r, ...props }) => {

const StarIcon = styled.div`
width: ${c.STAR_SIZE}px;
height: ${c.STAR_SIZE}px;
mask: url(${star});
background-position: center;
background-color: ${({ color }) => color};
`;

const AttemptsOrScoreLabelWrapper = styled.div`
position: absolute;
`;

const defaultColorForStar = "#F9A80D";

const ICPCTaskResultLabel2 = ({ problemColor, problemResult: r, ...props }) => {
const status = getStatus(r.isFirstToSolve, r.isSolved, r.pendingAttempts, r.wrongAttempts);
const attempts = r.wrongAttempts + r.pendingAttempts;
return <>
{/*{status === TeamTaskStatus.first && <StarIcon/>}*/}
<TaskResultLabelWrapper2 color={TeamTaskColor[status]} {...props}>
{TeamTaskSymbol[status]}
{status !== TeamTaskStatus.untouched && attempts > 0 && attempts}
{ status === TeamTaskStatus.first &&
<StarIcon color={problemColor === undefined ? defaultColorForStar : problemColor}/> }
<AttemptsOrScoreLabelWrapper>
{TeamTaskSymbol[status]}
{status !== TeamTaskStatus.untouched && attempts > 0 && attempts}
</AttemptsOrScoreLabelWrapper>
</TaskResultLabelWrapper2>
</>;
};

const IOITaskResultLabel2 = ({ problemResult: r, minScore, maxScore, ...props }) => {
const IOITaskResultLabel2 = ({ problemColor, problemResult: r, minScore, maxScore, ...props }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it really necessary to rename problemResult to r?

Copy link
Contributor Author

@Mond1c Mond1c Jan 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't do it. That was before I started pr.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then I guess we will refactor it some time in the future.

return <TaskResultLabelWrapper2 color={getTeamTaskColor(r.score, minScore, maxScore)} { ...props}>
{formatScore(r?.score)}
{ r.isFirstBest && <StarIcon color={problemColor === undefined ? defaultColorForStar : problemColor}/>}
<AttemptsOrScoreLabelWrapper>
{formatScore(r?.score)}
</AttemptsOrScoreLabelWrapper>
</TaskResultLabelWrapper2>;
};
export const TaskResultLabel = memo(({ problemResult, minScore, maxScore, ...props }) => {
export const TaskResultLabel = memo(({ problemResult, ...props }) => {
return <>
{problemResult.type === "ICPC" && <ICPCTaskResultLabel2 problemResult={problemResult} {...props}/>}
{problemResult.type === "IOI" && <IOITaskResultLabel2 problemResult={problemResult} minScore={minScore} maxScore={maxScore} {...props}/>}
{problemResult.type === "IOI" && <IOITaskResultLabel2 problemResult={problemResult} {...props}/>}
</>;
});
2 changes: 1 addition & 1 deletion src/frontend/overlay/src/components/organisms/widgets/Scoreboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const ScoreboardRow = ({ teamId, hideTasks, optimismLevel }) => {
formatPenalty(scoreboardData?.penalty)
} />}
{!hideTasks && scoreboardData?.problemResults.map((result, i) =>
<ScoreboardTaskResultLabel problemResult={result} key={i}
<ScoreboardTaskResultLabel problemResult={result} key={i} problemColor={contestData?.problems[i]?.color}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the thing I don't like. Passing too many props from the state in the context that is not suitable. I could understand if this was a specialized component that is extracting data from the store and displaying the data, but when it's used here - I'm not sure how I feel about that.

minScore={contestData?.problems[i]?.minScore} maxScore={contestData?.problems[i]?.maxScore}/>
)}
</ScoreboardRowWrap>;
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/overlay/src/config.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ config.FULL_SCREEN_CLOCK_FONT_SIZE = "400px";
config.FULL_SCREEN_CLOCK_COLOR = "#eeeeee";
config.FULL_SCREEN_CLOCK_FONT_FAMILY = "Helvetica; monospace";

config.STAR_SIZE = 20; // px
config.STAR_SIZE = 33; // px

config.QUEUE_PROBLEM_LABEL_FONT_SIZE = config.GLOBAL_DEFAULT_FONT_SIZE;

Expand Down