small overlay ui fixes for ioi contests

icpc · Nov 30, 2023 · 7c45cce · 7c45cce
1 parent 693c81d
commit 7c45cce
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 22 deletions.
diff --git a/src/frontend/overlay/src/components/atoms/ContestLabels.jsx b/src/frontend/overlay/src/components/atoms/ContestLabels.jsx
@@ -1,4 +1,4 @@
-import React, {memo} from "react";
+import React, { memo } from "react";
 import styled from "styled-components";
 import c from "../../config";
 import { isShouldUseDarkColor } from "../../utils/colors";
@@ -10,7 +10,7 @@ import {
     getStatus,
     getTeamTaskColor,
 } from "../../utils/statusInfo";
-import {formatScore} from "../../services/displayUtils";
+import { formatScore } from "../../services/displayUtils";
 
 const VerdictLabel = styled(ShrinkingBox)`
   background-color: ${({ color }) => color};
@@ -36,18 +36,19 @@ const getIOIScoreText = (difference) => {
     return ["=", c.VERDICT_UNKNOWN];
 };
 
-const IOIVerdictLabel = ({ runResult: { wrongVerdict, difference }}) => {
+const IOIVerdictLabel = ({ runResult: { wrongVerdict, difference }, ...props }) => {
     const [diffText, diffColor] = getIOIScoreText(difference);
     return <>
-        {wrongVerdict !== undefined && <ShrinkingBox text={wrongVerdict ?? "??"} color={c.VERDICT_NOK}/>}
-        {wrongVerdict === undefined && <ShrinkingBox text={diffText ?? "??"} color={diffColor}/>}
+        {wrongVerdict !== undefined && <VerdictLabel text={wrongVerdict ?? "??"} color={c.VERDICT_NOK} align="center" {...props}/>}
+        {wrongVerdict === undefined && <VerdictLabel text={diffText ?? "??"} color={diffColor} align="center" {...props}/>}
     </>;
 };
 
 const VerdictLabel2 = ({ runResult, ...props }) => {
     return <>
         {runResult.type === "ICPC" && <ICPCVerdictLabel runResult={runResult} {...props}/>}
         {runResult.type === "IOI" && <IOIVerdictLabel runResult={runResult} {...props}/>}
+        {/*{runResult.type === "IOI" && <VerdictLabel text={"AA" ?? "??"} color="red" align="center" {...props}/>}*/}
     </>;
 };
 

diff --git a/src/frontend/overlay/src/components/organisms/holder/ContestantViewHolder.jsx b/src/frontend/overlay/src/components/organisms/holder/ContestantViewHolder.jsx
@@ -1,9 +1,9 @@
-import React, {useEffect, useLayoutEffect, useRef} from "react";
+import React, { useEffect, useLayoutEffect, useRef } from "react";
 import { ContestantViewCorner } from "../../molecules/info/ContestantViewCorner";
 import styled from "styled-components";
-import {useDispatch} from "react-redux";
-import {pushLog} from "../../../redux/debug";
-import {GrabberPlayerClient} from "../../../utils/grabber/grabber_player";
+import { useDispatch } from "react-redux";
+import { pushLog } from "../../../redux/debug";
+import { GrabberPlayerClient } from "../../../utils/grabber/grabber_player";
 
 export const TeamImageWrapper = styled.img`
   border-radius: ${({ borderRadius }) => borderRadius};
@@ -132,7 +132,6 @@ const teamViewComponentRender = {
     TaskStatus: ({ onLoadStatus, hasPInP, ...props }) => {
         useLayoutEffect(() => onLoadStatus(true),
             []);
-        console.log(props.teamId);
         return <ContestantViewHolderCorner hasPInP={hasPInP} {...props}/>;
     },
     Photo: ({ onLoadStatus, url, className }) => {
@@ -180,8 +179,7 @@ export const AchievementWrapper = styled.div`
   height: 100%;
 `;
 
-export const Achievement = ({src, onLoadStatus, className}) => {
-    console.log(src)
+export const Achievement = ({ src, onLoadStatus, className }) => {
     return <AchievementWrapper className={className}>
         <TeamImageWrapper src={src} onLoad={() => onLoadStatus(true)}/>
     </AchievementWrapper>;
@@ -195,7 +193,7 @@ export const ContestantViewHolder = ({ onLoadStatus, media, isSmall, hasPInP, cl
         return null;
     }
     if (!media.isMedia && media.type === "Photo") {
-        return <Achievement src={media.url} onLoadStatus={onLoadStatus} className={className}/>
+        return <Achievement src={media.url} onLoadStatus={onLoadStatus} className={className}/>;
     }
     return <Component onLoadStatus={onLoadStatus} isSmall={isSmall} hasPInP={hasPInP} {...media} className={className}/>;
 };
diff --git a/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.jsx b/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.jsx
@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 import styled from "styled-components";
 import c from "../../../config";
 import { ProblemLabel } from "../../atoms/ProblemLabel";
-// import { extractScoreboardRows, useScroller } from "./Scoreboard";
 import { TaskResultLabel, RankLabel } from "../../atoms/ContestLabels";
 import { ShrinkingBox } from "../../atoms/ShrinkingBox";
 
@@ -67,7 +66,7 @@ const ScoreboardTableRowWrap = styled.div`
           ${c.SCOREBOARD_CELL_PLACE_SIZE}
           ${c.SCOREBOARD_CELL_TEAMNAME_SIZE} 
           ${c.SCOREBOARD_CELL_POINTS_SIZE} 
-          ${c.SCOREBOARD_CELL_PENALTY_SIZE} 
+          ${({ needPenalty }) => needPenalty ? c.SCOREBOARD_CELL_PENALTY_SIZE : ""} 
           repeat(${props => props.nProblems}, 1fr);
 `;
 
@@ -111,7 +110,7 @@ export const ScoreboardRow = ({ teamId, hideTasks, optimismLevel }) => {
     const teamData = useSelector((state) => state.contestInfo.info?.teamsId[teamId]);
     const needPenalty = useNeedPenalty();
     const formatPenalty = useFormatPenalty();
-    return <ScoreboardRowWrap medal={scoreboardData?.medalType} nProblems={contestData?.problems?.length ?? 1}>
+    return <ScoreboardRowWrap medal={scoreboardData?.medalType} nProblems={contestData?.problems?.length ?? 1} needPenalty={needPenalty}>
         <ScoreboardRankLabel rank={scoreboardData?.rank} medal={scoreboardData?.medalType}/>
         <ScoreboardRowName align={c.SCOREBOARD_CELL_TEAMNANE_ALIGN} text={teamData?.shortName ?? "??"}/>
         <ShrinkingBox align={c.SCOREBOARD_CELL_POINTS_ALIGN}
@@ -231,7 +230,7 @@ const ScoreboardProblemLabel = styled(ProblemLabel)`
 const ScoreboardTableHeader = () => {
     const problems = useSelector((state) => state.contestInfo.info?.problems);
     const needPenalty = useNeedPenalty();
-    return <ScoreboardTableHeaderWrap nProblems={problems?.length ?? 1}>
+    return <ScoreboardTableHeaderWrap nProblems={problems?.length ?? 1} needPenalty={needPenalty}>
         <ScoreboardTableHeaderCell>#</ScoreboardTableHeaderCell>
         <ScoreboardTableHeaderNameCell>Name</ScoreboardTableHeaderNameCell>
         <ScoreboardTableHeaderCell>Σ</ScoreboardTableHeaderCell>

diff --git a/src/frontend/overlay/src/services/displayUtils.js b/src/frontend/overlay/src/services/displayUtils.js
@@ -1,6 +1,6 @@
 import c from "../config";
-import {useSelector} from "react-redux";
-import {useCallback} from "react";
+import { useSelector } from "react-redux";
+import { useCallback } from "react";
 
 export const formatScore = (score, digits = 2) => {
     if (score === undefined) {
@@ -23,7 +23,7 @@ export const useFormatPenalty = () => {
             return Math.floor(penalty / 60);
         }
     }, [mode]);
-}
+};
 export const useNeedPenalty = () => {
     return usePenaltyRoundingMode() !== "zero";
-};
+};
diff --git a/src/frontend/overlay/src/utils/statusInfo.jsx b/src/frontend/overlay/src/utils/statusInfo.jsx
@@ -40,7 +40,7 @@ export const TeamTaskColor = Object.freeze({
 
 export const getTeamTaskColor = (score, minScore, maxScore) => {
     if (score === undefined) {
-        return c.CELL_BG_COLOR;
+        return undefined;
     }
     if (minScore !== undefined && maxScore !== undefined) {
         const [minRed, minGreen, minBlue] = [203, 46, 40];