rework config.jsx, change basic font size

icpc · Oct 25, 2023 · affe2d9 · affe2d9
1 parent 09430d7
commit affe2d9
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 111 deletions.
diff --git a/src/backend-api/src/main/kotlin/org/icpclive/api/Widgets.kt b/src/backend-api/src/main/kotlin/org/icpclive/api/Widgets.kt
@@ -129,8 +129,8 @@ class TeamViewWidget(
         fun getWidgetId(position: TeamViewPosition) = "teamview." + position.name
         fun getLocation(position: TeamViewPosition) = when (position) {
             TeamViewPosition.SINGLE_TOP_RIGHT -> LocationRectangle(16, 16, 1488, 984)
-            TeamViewPosition.PVP_TOP -> LocationRectangle(16, 16, 1488, 984 / 2 + 12)
-            TeamViewPosition.PVP_BOTTOM -> LocationRectangle(16, 16 + 984 / 2 - 13, 1488, 984 / 2 + 13)
+            TeamViewPosition.PVP_TOP -> LocationRectangle(16, 16, 1488, 984 / 2 + 16)
+            TeamViewPosition.PVP_BOTTOM -> LocationRectangle(16, 16 + 984 / 2 - 16, 1488, 984 / 2 + 16)
             TeamViewPosition.TOP_LEFT -> LocationRectangle(16, 16, 1488 / 2, 837 / 2)
             TeamViewPosition.TOP_RIGHT -> LocationRectangle(16 + 1488 / 2, 16, 1488 / 2, 837 / 2)
             TeamViewPosition.BOTTOM_LEFT -> LocationRectangle(16, 16 + 837 / 2, 1488 / 2, 837 / 2)

diff --git a/src/frontend/overlay/src/components/atoms/ContestLabels.jsx b/src/frontend/overlay/src/components/atoms/ContestLabels.jsx
@@ -22,24 +22,24 @@ const VerdictLabel = styled(ShrinkingBox)`
 `;
 
 const ICPCVerdictLabel = ({ runResult, className }) => {
-    const color = runResult?.verdict.isAccepted ? c.VERDICT_OK2 : c.VERDICT_NOK2;
+    const color = runResult?.verdict.isAccepted ? c.VERDICT_OK : c.VERDICT_NOK;
     return <VerdictLabel text={runResult?.verdict.shortName ?? "??"} color={color} align="center" className={className}/>;
 };
 
 const getIOIScoreText = (difference) => {
     if (difference > 0) {
-        return [`+${formatScore(difference, 1)}`, c.VERDICT_OK2];
+        return [`+${formatScore(difference, 1)}`, c.VERDICT_OK];
     }
     if (difference < 0) {
-        return [`-${formatScore(-difference, 1)}`, c.VERDICT_NOK2];
+        return [`-${formatScore(-difference, 1)}`, c.VERDICT_NOK];
     }
-    return ["=", c.VERDICT_UNKNOWN2];
+    return ["=", c.VERDICT_UNKNOWN];
 };
 
 const IOIVerdictLabel = ({ runResult: { wrongVerdict, difference }}) => {
     const [diffText, diffColor] = getIOIScoreText(difference);
     return <>
-        {wrongVerdict !== undefined && <ShrinkingBox text={wrongVerdict ?? "??"} color={c.VERDICT_NOK2}/>}
+        {wrongVerdict !== undefined && <ShrinkingBox text={wrongVerdict ?? "??"} color={c.VERDICT_NOK}/>}
         {wrongVerdict === undefined && <ShrinkingBox text={diffText ?? "??"} color={diffColor}/>}
     </>;
 };
@@ -60,7 +60,7 @@ const formatRank = (rank) => {
     return rank.toString();
 };
 
-const RankLabelWrap = styled.div`
+const RankLabelWrap = styled(ShrinkingBox)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,9 +71,7 @@ const RankLabelWrap = styled.div`
 export const RankLabel = memo(({ rank, medal, className }) => {
     const color = c.MEDAL_COLORS[medal];
     const dark = isShouldUseDarkColor(color);
-    return <RankLabelWrap color={color} className={className} dark={dark}>
-        {formatRank(rank)}
-    </RankLabelWrap>;
+    return <RankLabelWrap color={color} className={className} dark={dark} text={formatRank(rank)} />;
 });
 
 const VerdictCellProgressBar2 = styled.div.attrs(({ width }) => ({
@@ -83,7 +81,7 @@ const VerdictCellProgressBar2 = styled.div.attrs(({ width }) => ({
 }))`
   height: 100%;
   transition: width 250ms linear;
-  background-color: ${c.VERDICT_UNKNOWN2};
+  background-color: ${c.VERDICT_UNKNOWN};
 `;
 
 
@@ -93,7 +91,7 @@ const VerdictCellInProgressWrap2 = styled.div`
   height: 100%;
   align-content: center;
   border-radius: 0 16px 16px 0;
-  border: 3px solid ${c.VERDICT_UNKNOWN2};
+  border: 3px solid ${c.VERDICT_UNKNOWN};
   box-sizing: border-box;
 `;
 

diff --git a/src/frontend/overlay/src/components/atoms/ProblemLabel.jsx b/src/frontend/overlay/src/components/atoms/ProblemLabel.jsx
@@ -7,7 +7,6 @@ const StyledProblemLabel = styled.div`
   height: 100%;
   position: relative;
   color: ${({darkText}) => darkText ? "#000" : "#FFF"};
-  font-weight: bold;
   background: ${props => props.backgroundColor};
   
   display: flex;

diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.jsx b/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.jsx
@@ -11,7 +11,7 @@ const ContestantViewCornerWrap = styled.div`
   display: grid;
   
   grid-template-columns: auto minmax(100px, 150px);
-  grid-auto-rows: ${c.QUEUE_ROW_HEIGHT2}px;
+  grid-auto-rows: ${c.QUEUE_ROW_HEIGHT}px;
   
   width: auto;
   //transform-origin: bottom left;

diff --git a/src/frontend/overlay/src/components/molecules/info/SubmissionRow.jsx b/src/frontend/overlay/src/components/molecules/info/SubmissionRow.jsx
@@ -29,7 +29,7 @@ const SubmissionRowWrap = styled.div`
   border-top-right-radius: ${props => props.roundB ? "16px" : "0px"};
   overflow: hidden;
   color: white;
-  font-size: 18px;
+  font-size: ${c.CONTESTER_FONT_SIZE};
 `;
 
 const SubmissionColumnWrap = styled.div`
@@ -46,7 +46,7 @@ const SubmissionColumnWrap = styled.div`
 
   grid-auto-flow: row;
   color: white;
-  font-size: 18px;
+  font-size: ${c.CONTESTER_FONT_SIZE};
 `;
 
 const SubmissionRowTaskResultLabel = styled(ScoreboardTaskResultLabel)`

diff --git a/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.jsx b/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.jsx
@@ -12,7 +12,7 @@ const ScoreboardWrap = styled.div.attrs(({ top }) => (
   display: grid;
   //align-items: center;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(${props => props.nrows}, calc(50% - 1px));
+  grid-template-rows: repeat(${props => props.nrows}, 1fr);
   height: 100%;
   width: 100%;
   gap: 2px;
@@ -21,14 +21,14 @@ const ScoreboardWrap = styled.div.attrs(({ top }) => (
 `;
 
 const TickerScoreboardContestantInfo = styled(ContestantInfo)`
-    height: unset;  
+    height: 48px;
 `;
 
 export const Scoreboard = ({ tickerSettings, state }) => {
     const { from, to, periodMs } = tickerSettings;
     const [row, setRow] = useState(0);
     const rows = useSelector((state) => state.scoreboard[SCOREBOARD_TYPES.normal].rows.slice(from-1, to));
-    const nrows = Math.ceil(rows.length / 8);
+    const nrows = Math.ceil(rows.length / 4);
     useEffect(() => {
         if(state !== "entering" && rows.length > 0) {
             const interval = setInterval(() => {
@@ -41,15 +41,15 @@ export const Scoreboard = ({ tickerSettings, state }) => {
             return () => clearInterval(interval);
         }
     }, [nrows, periodMs, state, rows.length]);
-    return <ScoreboardWrap
-        nrows={nrows*2}
-        top={`calc(${-row * 100 }% - ${row * 2}px)`} // This fugliness is needed to scroll the scoreboard
-    >
-        {rows.map((row) => <TickerScoreboardContestantInfo
-            key={row.teamId}
-            teamId={row.teamId}
-        />)}
-    </ScoreboardWrap>;
+
+    // This fugliness is needed to scroll the scoreboard
+    return (
+        <ScoreboardWrap nrows={nrows*2} top={`calc(${-row * 100 }% - ${row * 2}px)`}>
+            {rows.map((row) => (
+                <TickerScoreboardContestantInfo key={row.teamId} teamId={row.teamId}/>
+            ))}
+        </ScoreboardWrap>
+    );
 };
 
 export default Scoreboard;

diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx
@@ -150,12 +150,12 @@ const useQueueRowsData = ({
     let regularRowCount = 0;
     rows.forEach((row) => {
         if (row.isFts) {
-            row.bottom = (height - (c.QUEUE_ROW_HEIGHT2 + 3) * (totalFts - ftsRowCount)) + 3;
+            row.bottom = (height - (c.QUEUE_ROW_HEIGHT + c.QUEUE_ROW_PADDING) * (totalFts - ftsRowCount)) + 3;
             // console.log(row.bottom);
             // console.log(height);
             ftsRowCount++;
         } else {
-            row.bottom = (c.QUEUE_ROW_HEIGHT2 + 3) * regularRowCount;
+            row.bottom = (c.QUEUE_ROW_HEIGHT + c.QUEUE_ROW_PADDING) * regularRowCount;
             regularRowCount++;
         }
     });
@@ -169,7 +169,7 @@ const useQueueRowsData = ({
 const QueueRankLabel = styled(RankLabel)`
   width: 32px;
   align-self: stretch;
-  padding-left: 4px;
+  padding-left: 12px;
   flex-shrink: 0;
 `;
 
@@ -184,7 +184,7 @@ const QueueRunStatusLabel = styled(RunStatusLabel)`
 
 const StyledQueueRow = styled.div`
   width: 100%;
-  height: ${c.QUEUE_ROW_HEIGHT2}px;
+  height: ${c.QUEUE_ROW_HEIGHT}px;
   display: flex;
   align-items: center;
   border-radius: ${c.GLOBAL_BORDER_RADIUS};
@@ -203,7 +203,7 @@ const QueueScoreLabel = styled(ShrinkingBox)`
 const QueueProblemLabel = styled(ProblemLabel)`
   width: 28px;
   font-size: ${c.QUEUE_PROBLEM_LABEL_FONT_SIZE};
-  line-height: ${c.QUEUE_ROW_HEIGHT2}px;
+  line-height: ${c.QUEUE_ROW_HEIGHT}px;
   flex-shrink: 0;
   background-image: ${({isFts}) => isFts ? `url(${star})` : null};
   background-repeat: no-repeat;
@@ -306,7 +306,7 @@ const StyledFeatured = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: ${c.QUEUE_ROW_FEATURED_RUN_PADDING}px;
 
   ${({ additional }) => additional}
 `;
@@ -368,7 +368,7 @@ export const Queue = () => {
                                         bottom={row.bottom}
                                         zIndex={row.zIndex}
                                         fts={row.isFts}
-                                        {...queueRowContractionStates(c.QUEUE_ROW_HEIGHT2)[state]}
+                                        {...queueRowContractionStates(c.QUEUE_ROW_HEIGHT)[state]}
                                     >
                                         {/*<FeaturedRunRow2*/}
                                         {/*    isFeatured={row.isFeatured}*/}

diff --git a/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.jsx b/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.jsx
@@ -47,7 +47,7 @@ const ScoreboardContent = styled.div`
   flex: 1 0 0;
   display: flex;
   flex-direction: column;
-  gap: ${c.SCOREBOARD_TABLE_GAP}px;
+  gap: ${c.SCOREBOARD_BETWIN_HEADER_PADDING}px;
 `;
 
 
@@ -58,26 +58,26 @@ export const nameTable = {
 };
 
 const ScoreboardTableRowWrap = styled.div`
-  gap: ${c.SCOREBOARD_TABLE_GAP}px;
+  gap: ${c.SCOREBOARD_BETWIN_HEADER_PADDING}px;
   box-sizing: border-box;
   background-color: ${c.SCOREBOARD_BACKGROUND_COLOR};
   display: grid;
   grid-template-columns:
-          ${c.SCOREBOARD_TABLE_CELL_PLACE_SIZE}
-          ${c.SCOREBOARD_TABLE_CELL_TEAMNAME_SIZE} 
-          ${c.SCOREBOARD_TABLE_CELL_POINTS_SIZE} 
-          ${c.SCOREBOARD_TABLE_CELL_PENALTY_SIZE} 
+          ${c.SCOREBOARD_CELL_PLACE_SIZE}
+          ${c.SCOREBOARD_CELL_TEAMNAME_SIZE} 
+          ${c.SCOREBOARD_CELL_POINTS_SIZE} 
+          ${c.SCOREBOARD_CELL_PENALTY_SIZE} 
           repeat(${props => props.nProblems}, 1fr);
 `;
 
 const ScoreboardRowWrap = styled(ScoreboardTableRowWrap)`
-  height: ${c.SCOREBOARD_TABLE_ROW_HEIGHT}px;
+  height: ${c.SCOREBOARD_ROW_HEIGHT}px;
   overflow: hidden;
   box-sizing: content-box;
-  border-top: ${c.SCOREBOARD_TABLE_ROWS_DIVIDER_COLOR} solid 1px;
-  border-bottom: ${c.SCOREBOARD_TABLE_ROWS_DIVIDER_COLOR} solid 1px;
+  border-top: ${c.SCOREBOARD_ROWS_DIVIDER_COLOR} solid 1px;
+  border-bottom: ${c.SCOREBOARD_ROWS_DIVIDER_COLOR} solid 1px;
   
-  font-size: ${c.SCOREBOARD_TABLE_ROW_FONT_SIZE};
+  font-size: ${c.SCOREBOARD_ROW_FONT_SIZE};
   font-style: normal;
   font-weight: ${c.SCOREBOARD_TABLE_ROW_FONT_WEIGHT};
 
@@ -112,10 +112,10 @@ export const ScoreboardRow = ({ teamId, hideTasks, optimismLevel }) => {
     const formatPenalty = useFormatPenalty();
     return <ScoreboardRowWrap medal={scoreboardData?.medalType} nProblems={contestData?.problems?.length ?? 1}>
         <ScoreboardRankLabel rank={scoreboardData?.rank} medal={scoreboardData?.medalType}/>
-        <ScoreboardRowName align={c.SCOREBOARD_TABLE_CELL_TEAMNANE_ALIGN} text={teamData?.shortName ?? "??"}/>
-        <ShrinkingBox align={c.SCOREBOARD_TABLE_CELL_POINTS_ALIGN}
+        <ScoreboardRowName align={c.SCOREBOARD_CELL_TEAMNANE_ALIGN} text={teamData?.shortName ?? "??"}/>
+        <ShrinkingBox align={c.SCOREBOARD_CELL_POINTS_ALIGN}
             text={scoreboardData === null ? "??" : formatScore(scoreboardData?.totalScore ?? 0.0, 1)}/>
-        {needPenalty && <ShrinkingBox align={c.SCOREBOARD_TABLE_CELL_PENALTY_ALIGN} text={
+        {needPenalty && <ShrinkingBox align={c.SCOREBOARD_CELL_PENALTY_ALIGN} text={
             formatPenalty(scoreboardData?.penalty)
         } />}
         {!hideTasks && scoreboardData?.problemResults.map((result, i) =>
@@ -135,7 +135,7 @@ const PositionedScoreboardRow = styled.div.attrs(({ zIndex, pos }) => ({
         top: pos + "px",
     }
 }))`
-  height: ${c.SCOREBOARD_TABLE_ROW_HEIGHT}px;
+  height: ${c.SCOREBOARD_ROW_HEIGHT}px;
   transition: top ${c.SCOREBOARD_ROW_TRANSITION_TIME}ms ease-in-out;
   left: 0;
   right: 0;
@@ -188,11 +188,11 @@ export const ScoreboardRows = ({ settings }) => {
         useSelector((state) => state.scoreboard[settings.optimismLevel]),
         settings.group);
     const teams = _(rows).toPairs().sortBy("[1].teamId").value();
-    const rowHeight = c.SCOREBOARD_TABLE_ROW_HEIGHT;
+    const rowHeight = c.SCOREBOARD_ROW_HEIGHT;
     const scrollPos = useScroller(rows.length, settings.teamsOnPage, c.SCOREBOARD_SCROLL_INTERVAL, settings.startFromRow - 1, settings.numRows);
     return <ScoreboardRowsWrap>
         {teams.map(([index, teamData]) =>
-            <PositionedScoreboardRow key={teamData.teamId} zIndex={rows.length-index} pos={(index - scrollPos) * (rowHeight + c.SCOREBOARD_TABLE_ROW_GAP) - c.SCOREBOARD_TABLE_ROW_GAP}>
+            <PositionedScoreboardRow key={teamData.teamId} zIndex={rows.length-index} pos={(index - scrollPos) * (rowHeight + c.SCOREBOARD_ROW_PADDING) - c.SCOREBOARD_ROW_PADDING}>
                 <ScoreboardRow teamId={teamData.teamId} optimismLevel={settings.optimismLevel}/>
             </PositionedScoreboardRow>
         )}
@@ -202,17 +202,17 @@ export const ScoreboardRows = ({ settings }) => {
 const ScoreboardTableHeaderWrap = styled(ScoreboardTableRowWrap)`
   border-radius: 16px 16px 0 0;
   overflow: hidden;
-  height: ${c.SCOREBOARD_TABLE_HEADER_HEIGHT};
+  height: ${c.SCOREBOARD_HEADER_HEIGHT};
 
-  font-size: ${c.SCOREBOARD_TABLE_HEADER_FONT_SIZE}px;
+  font-size: ${c.SCOREBOARD_HEADER_FONT_SIZE};
   font-style: normal;
-  font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD};
-  line-height: ${c.SCOREBOARD_TABLE_HEADER_HEIGHT};
+  font-weight: ${c.SCOREBOARD_HEADER_FONT_WEIGHT};
+  line-height: ${c.SCOREBOARD_HEADER_HEIGHT};
 `;
 
 const ScoreboardTableHeaderCell = styled.div`
   text-align: center;
-  background-color: ${c.SCOREBOARD_TABLE_HEADER_BACKGROUND_COLOR};
+  background-color: ${c.SCOREBOARD_HEADER_BACKGROUND_COLOR};
   padding: 0 8px;
 `;
 
@@ -229,9 +229,9 @@ const ScoreboardTableHeader = () => {
     const problems = useSelector((state) => state.contestInfo.info?.problems);
     const needPenalty = useNeedPenalty();
     return <ScoreboardTableHeaderWrap nProblems={problems?.length ?? 1}>
-        <ScoreboardTableHeaderCell>Place</ScoreboardTableHeaderCell>
-        <ScoreboardTableHeaderNameCell>Team name</ScoreboardTableHeaderNameCell>
-        <ScoreboardTableHeaderCell>Points</ScoreboardTableHeaderCell>
+        <ScoreboardTableHeaderCell>#</ScoreboardTableHeaderCell>
+        <ScoreboardTableHeaderNameCell>Name</ScoreboardTableHeaderNameCell>
+        <ScoreboardTableHeaderCell>Σ</ScoreboardTableHeaderCell>
         {needPenalty && <ScoreboardTableHeaderCell>Penalty</ScoreboardTableHeaderCell>}
         {problems && problems.map((probData) => <ScoreboardProblemLabel key={probData.name} letter={probData.letter}
             problemColor={probData.color}/>