diff --git a/schemas/visual-config.schema.json b/schemas/visual-config.schema.json index d0a5eebd8..0e047fdf4 100644 --- a/schemas/visual-config.schema.json +++ b/schemas/visual-config.schema.json @@ -23,12 +23,24 @@ "ADVERTISEMENT_BACKGROUND": { "type": "string" }, + "ADVERTISEMENT_BORDER_RADIUS": { + "type": "string" + }, "ADVERTISEMENT_COLOR": { "type": "string" }, "ADVERTISEMENT_FONT_FAMILY": { "type": "string" }, + "ADVERTISEMENT_FONT_SIZE": { + "type": "string" + }, + "ADVERTISEMENT_HORIZONTAL_PADDING": { + "type": "string" + }, + "ADVERTISEMENT_VERTICAL_PADDING": { + "type": "string" + }, "BASE_URL_WS": { "type": "string" }, @@ -101,12 +113,24 @@ "CONTESTER_FONT_SIZE": { "type": "string" }, + "CONTESTER_INFO_GAP": { + "type": "string" + }, + "CONTESTER_INFO_LEFT_PADDING": { + "type": "string" + }, "CONTESTER_INFO_RANK_WIDTH": { "type": "string" }, + "CONTESTER_INFO_SCORE_RIGHT_PADDING": { + "type": "string" + }, "CONTESTER_INFO_SCORE_WIDTH": { "type": "string" }, + "CONTESTER_INFO_WIDTH": { + "type": "string" + }, "CONTESTER_NAME_WIDTH": { "type": "string" }, @@ -167,6 +191,9 @@ "GLOBAL_TEXT_COLOR": { "type": "string" }, + "IMAGE_TICKER_HORIZONTAL_PADDING": { + "type": "string" + }, "KEYLOG_ANIMATION_DURATION": { "type": "number" }, @@ -203,9 +230,39 @@ "KEYLOG_Z_INDEX": { "type": "number" }, + "LEGEND_HORIZONTAL_MARGIN": { + "type": "string" + }, + "LEGEND_VERTICAL_MARGIN": { + "type": "string" + }, + "LOCATOR_ANIMATION_DELAY": { + "type": "number" + }, + "LOCATOR_ANIMATION_DURATION": { + "type": "number" + }, + "LOCATOR_BOTTOM_OFFSET": { + "type": "number" + }, + "LOCATOR_LINE_STROKE_COLOR": { + "type": "string" + }, + "LOCATOR_LINE_STROKE_WIDTH": { + "type": "number" + }, "LOCATOR_MAGIC_CONSTANT": { "type": "number" }, + "LOCATOR_MAX_WIDTH": { + "type": "number" + }, + "LOCATOR_TOP_OFFSET": { + "type": "number" + }, + "LOCATOR_TOP_THRESHOLD": { + "type": "number" + }, "LOG_LINES": { "type": "number" }, @@ -244,15 +301,39 @@ "PICTURE_NAME_FONT_SIZE": { "type": "string" }, + "PROBLEM_LABEL_WIDTH": { + "type": "string" + }, + "PVP_ACHIEVEMENT_BOTTOM_OFFSET": { + "type": "string" + }, + "PVP_ACHIEVEMENT_WIDTH": { + "type": "string" + }, "PVP_APPEAR_TIME": { "type": "number" }, + "PVP_ASPECT_RATIO_HEIGHT": { + "type": "number" + }, + "PVP_ASPECT_RATIO_WIDTH": { + "type": "number" + }, "PVP_BACKGROUND": { "type": "string" }, + "PVP_SECONDARY_DIVISOR": { + "type": "number" + }, "PVP_TABLE_ROW_HEIGHT": { "type": "number" }, + "PVP_TABLE_ROW_HEIGHT_MULTIPLIER": { + "type": "number" + }, + "PVP_TABLE_ROW_HEIGHT_OFFSET_MULTIPLIER": { + "type": "number" + }, "PVP_TEAM_STATUS_TASK_WIDTH": { "type": "number" }, @@ -268,6 +349,36 @@ "QUEUE_FEATURED_RUN_ASPECT": { "type": "number" }, + "QUEUE_FEATURED_RUN_BORDER_RADIUS_BOTTOM_LEFT": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_PADDING_BOTTOM": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_PADDING_LEFT": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_PADDING_RIGHT": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_PADDING_TOP": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_RIGHT_OFFSET": { + "type": "string" + }, + "QUEUE_FEATURED_RUN_WIDTH": { + "type": "string" + }, + "QUEUE_FTS_BOTTOM_OFFSET": { + "type": "number" + }, + "QUEUE_GAP": { + "type": "string" + }, "QUEUE_HEADER_FONT_SIZE": { "type": "string" }, @@ -277,6 +388,15 @@ "QUEUE_HORIZONTAL_BACKGROUND_COLOR": { "type": "string" }, + "QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT": { + "type": "string" + }, + "QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_RIGHT": { + "type": "string" + }, + "QUEUE_HORIZONTAL_FEATURED_RUN_WIDTH": { + "type": "string" + }, "QUEUE_HORIZONTAL_HEIGHT_NUM": { "type": "number" }, @@ -295,6 +415,12 @@ "QUEUE_PROBLEM_LABEL_FONT_SIZE": { "type": "string" }, + "QUEUE_RANK_LABEL_PADDING_LEFT": { + "type": "string" + }, + "QUEUE_RANK_LABEL_WIDTH": { + "type": "string" + }, "QUEUE_ROW_APPEAR_TIME": { "type": "number" }, @@ -316,12 +442,18 @@ "QUEUE_ROW_FTS_TRANSITION_TIME": { "type": "number" }, + "QUEUE_ROW_GAP": { + "type": "string" + }, "QUEUE_ROW_HEIGHT": { "type": "number" }, "QUEUE_ROW_PROBLEM_LABEL_WIDTH": { "type": "number" }, + "QUEUE_ROW_STATUS_LABEL_WIDTH": { + "type": "string" + }, "QUEUE_ROW_TRANSITION_TIME": { "type": "number" }, @@ -331,6 +463,9 @@ "QUEUE_ROW_Y_PADDING": { "type": "number" }, + "QUEUE_SCORE_LABEL_WIDTH": { + "type": "string" + }, "QUEUE_TITLE": { "type": "string" }, @@ -352,6 +487,9 @@ "SCOREBOARD_CAPTION_FONT_SIZE": { "type": "string" }, + "SCOREBOARD_CELL_PADDING": { + "type": "string" + }, "SCOREBOARD_CELL_PENALTY_ALIGN": { "type": "string" }, @@ -373,9 +511,18 @@ "SCOREBOARD_CELL_TEAMNANE_ALIGN": { "type": "string" }, + "SCOREBOARD_GAP": { + "type": "string" + }, "SCOREBOARD_HEADER_BACKGROUND_COLOR": { "type": "string" }, + "SCOREBOARD_HEADER_BORDER_RADIUS_TOP_LEFT": { + "type": "string" + }, + "SCOREBOARD_HEADER_BORDER_RADIUS_TOP_RIGHT": { + "type": "string" + }, "SCOREBOARD_HEADER_DIVIDER_COLOR": { "type": "string" }, @@ -388,12 +535,24 @@ "SCOREBOARD_HEADER_HEIGHT": { "type": "number" }, + "SCOREBOARD_HEADER_PADDING_TOP": { + "type": "string" + }, "SCOREBOARD_NORMAL_NAME": { "type": "string" }, "SCOREBOARD_OPTIMISTIC_NAME": { "type": "string" }, + "SCOREBOARD_PADDING_LEFT": { + "type": "string" + }, + "SCOREBOARD_PADDING_RIGHT": { + "type": "string" + }, + "SCOREBOARD_PADDING_TOP": { + "type": "string" + }, "SCOREBOARD_PESSIMISTIC_NAME": { "type": "string" }, @@ -433,6 +592,9 @@ "SPLITSCREEN_SECONDARY_FACTOR": { "type": "number" }, + "STAR_DEFAULT_COLOR": { + "type": "string" + }, "STAR_SIZE": { "type": "number" }, @@ -457,9 +619,27 @@ "STATISTICS_CELL_MORPH_TIME": { "type": "number" }, + "STATISTICS_CONTENT_GAP": { + "type": "string" + }, + "STATISTICS_HEADER_FONT_SIZE": { + "type": "string" + }, + "STATISTICS_HEADER_GAP": { + "type": "string" + }, + "STATISTICS_HEADER_LINE_HEIGHT": { + "type": "string" + }, "STATISTICS_OPACITY": { "type": "number" }, + "STATISTICS_PADDING_HORIZONTAL": { + "type": "string" + }, + "STATISTICS_PADDING_VERTICAL": { + "type": "string" + }, "STATISTICS_STATS_VALUE_COLOR": { "type": "string" }, @@ -478,6 +658,9 @@ "STATISTICS_TITLE_FONT_SIZE": { "type": "string" }, + "SUBMISSION_ROW_TASK_RESULT_LABEL_WIDTH": { + "type": "string" + }, "SVG_APPEAR_TIME": { "type": "number" }, @@ -508,12 +691,27 @@ "TICKER_FONT_FAMILY": { "type": "string" }, + "TICKER_LIVE_ICON_MARGIN": { + "type": "string" + }, + "TICKER_LIVE_ICON_PADDING": { + "type": "string" + }, "TICKER_LIVE_ICON_SIZE": { "type": "string" }, + "TICKER_LONG_COLUMN_GAP": { + "type": "string" + }, "TICKER_OPACITY": { "type": "number" }, + "TICKER_SCOREBOARD_CONTESTANT_INFO_HEIGHT": { + "type": "string" + }, + "TICKER_SCOREBOARD_GAP": { + "type": "string" + }, "TICKER_SCOREBOARD_RANK_WIDTH": { "type": "string" }, @@ -526,6 +724,9 @@ "TICKER_SCROLL_TRANSITION_TIME": { "type": "number" }, + "TICKER_SHORT_COLUMN_GAP": { + "type": "string" + }, "TICKER_SMALL_BACKGROUND": { "type": "string" }, @@ -535,9 +736,15 @@ "TICKER_TEXT_FONT_SIZE": { "type": "string" }, + "TICKER_TEXT_HORIZONTAL_PADDING": { + "type": "string" + }, "TICKER_TEXT_MARGIN_LEFT": { "type": "string" }, + "TICKER_ZINDEX": { + "type": "number" + }, "TIMELINE_ANIMATION_TIME": { "type": "number" }, @@ -550,6 +757,9 @@ "TIMELINE_ELEMENT_DIAMETER_PVP": { "type": "number" }, + "TIMELINE_END_CIRCLE_RADIUS": { + "type": "number" + }, "TIMELINE_LEFT_TIME_PADDING": { "type": "number" }, @@ -571,12 +781,30 @@ "TIMELINE_TIMEBORDER_COLOR": { "type": "string" }, + "TIMELINE_TIME_BORDER_WIDTH": { + "type": "number" + }, "TIMELINE_WRAP_HEIGHT": { "type": "number" }, "TIMELINE_WRAP_HEIGHT_PVP": { "type": "number" }, + "TIME_CELL_FLEX_BASIS": { + "type": "string" + }, + "TIME_CELL_WIDTH": { + "type": "string" + }, + "VERDICT_CELL_BRODER_RADIUS": { + "type": "string" + }, + "VERDICT_CELL_TRANSITION_TIME": { + "type": "number" + }, + "VERDICT_LABEL_FONT_SIZE": { + "type": "string" + }, "VERDICT_NOK": { "type": "string" }, diff --git a/src/frontend/overlay/src/components/atoms/ContestLabels.jsx b/src/frontend/overlay/src/components/atoms/ContestLabels.jsx index 8730fcb90..20337b2b4 100644 --- a/src/frontend/overlay/src/components/atoms/ContestLabels.jsx +++ b/src/frontend/overlay/src/components/atoms/ContestLabels.jsx @@ -19,7 +19,7 @@ const VerdictLabel = styled(ShrinkingBox)` align-items: center; justify-content: center; - font-size: 14px; + font-size: ${c.VERDICT_LABEL_FONT_SIZE}; font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD}; background-color: ${({ color }) => color}; @@ -80,7 +80,7 @@ const VerdictCellProgressBar2 = styled.div.attrs(({ width }) => ({ }))` height: 100%; background-color: ${c.VERDICT_UNKNOWN}; - transition: width 250ms linear; + transition: width ${c.VERDICT_CELL_TRANSITION_TIME} linear; `; @@ -93,7 +93,7 @@ const VerdictCellInProgressWrap2 = styled.div` height: 100%; border: 3px solid ${c.VERDICT_UNKNOWN}; - border-radius: 0 16px 16px 0; + border-radius: 0 ${c.VERDICT_CELL_BRODER_RADIUS} ${c.VERDICT_CELL_BRODER_RADIUS} 0; `; const VerdictCellInProgress2 = ({ percentage, className }) => { @@ -129,15 +129,13 @@ 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 && - } + } {TeamTaskSymbol[status]} {status !== TeamTaskStatus.untouched && attempts > 0 && attempts} @@ -148,7 +146,7 @@ const ICPCTaskResultLabel2 = ({ problemColor, problemResult: r, ...props }) => { const IOITaskResultLabel2 = ({ problemColor, problemResult: r, minScore, maxScore, ...props }) => { return - { r.isFirstBest && } + { r.isFirstBest && } {formatScore(r?.score)} diff --git a/src/frontend/overlay/src/components/atoms/ProblemLabel.tsx b/src/frontend/overlay/src/components/atoms/ProblemLabel.tsx index 743360086..0c5dc0eca 100644 --- a/src/frontend/overlay/src/components/atoms/ProblemLabel.tsx +++ b/src/frontend/overlay/src/components/atoms/ProblemLabel.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { isShouldUseDarkColor } from "../../utils/colors"; +import c from "../../config"; const StyledProblemLabel = styled.div<{ backgroundColor: string; @@ -12,7 +13,7 @@ const StyledProblemLabel = styled.div<{ align-items: center; justify-content: center; - width: 28px; + width: ${c.PROBLEM_LABEL_WIDTH}; height: 100%; color: ${({ darkText }) => darkText ? "#000" : "#FFF"}; diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.tsx b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.tsx index b187371dc..816ecf741 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.tsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.tsx @@ -13,7 +13,7 @@ const ContestantInfoLabel = styled(RankLabel)` flex-shrink: 0; align-self: stretch; width: ${c.CONTESTER_INFO_RANK_WIDTH}; - padding-left: 4px; + padding-left: ${c.CONTESTER_INFO_LEFT_PADDING}; `; const ContestantInfoTeamNameLabel = styled(ShrinkingBox)` @@ -25,7 +25,7 @@ const ContestantInfoTeamNameLabel = styled(ShrinkingBox)` const ContestantInfoWrap = styled.div<{round: boolean, bg_color: string, color: string}>` overflow: hidden; display: flex; - gap: 5px; + gap: ${c.CONTESTER_INFO_GAP}; align-items: center; width: 100%; @@ -42,7 +42,7 @@ const ContestantInfoScoreLabel = styled(ShrinkingBox)` flex-shrink: 0; box-sizing: content-box; width: ${c.CONTESTER_INFO_SCORE_WIDTH}; - padding-right: 20px; + padding-right: ${c.CONTESTER_INFO_SCORE_RIGHT_PADDING}; `; diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.tsx b/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.tsx index 61edfb919..aecdfe0e3 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.tsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantViewCorner.tsx @@ -11,7 +11,7 @@ import { isShouldUseDarkColor } from "@/utils/colors"; const ContestantViewCornerWrap = styled.div<{isSmall: boolean}>` display: grid; grid-template-rows: 1fr ${c.QUEUE_ROW_HEIGHT}px; - grid-template-columns: auto 150px; + grid-template-columns: auto ${c.CONTESTER_INFO_WIDTH}; width: auto; /*transform: ${props => props.isSmall ? `scale(${c.TEAMVIEW_SMALL_FACTOR})` : ""};*/ @@ -44,7 +44,7 @@ const TasksContainer = styled.div` const TaskRow = styled.div` display: flex; - width: 150px; + width: ${c.CONTESTER_INFO_WIDTH}; flex: 0 0 ${c.QUEUE_ROW_HEIGHT}px; /* css trick for perfect TaskRow overflowing: arrange the columns from bottom to top from right to left */ transform: scale(-1); diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.tsx b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.tsx index e3aa3b3ba..c7950f7cd 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.tsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.tsx @@ -61,25 +61,21 @@ interface ContestantViewLineProps { isTop?: boolean } -// TODO: DELETE! -function aboba(x?: T[]) { - return x ? x : x; -} export const ContestantViewLine = ({ teamId, tasksContainerY, className, isTop }: ContestantViewLineProps) => { const scoreboardData = useAppSelector((state) => state.scoreboard[OptimismLevel.normal]?.ids && state.scoreboard[OptimismLevel.normal].ids[teamId]); - const tasks = aboba(useAppSelector(state => state.contestInfo?.info?.problems)); + const tasks = useAppSelector(state => state.contestInfo?.info?.problems); const contestData = useAppSelector((state) => state.contestInfo?.info); const teamData = useAppSelector((state) => state.contestInfo.info?.teamsId[teamId]); const [top, bottom] = isTop ? [null, "0"] : ["0", null]; - const taskWidth = tasksContainerY ? Math.max(c.PVP_TEAM_STATUS_TASK_WIDTH, tasksContainerY / aboba(tasks)?.length) : c.PVP_TEAM_STATUS_TASK_WIDTH; + const taskWidth = tasksContainerY ? Math.max(c.PVP_TEAM_STATUS_TASK_WIDTH, tasksContainerY / tasks?.length) : c.PVP_TEAM_STATUS_TASK_WIDTH; return ( - + - {aboba(scoreboardData?.problemResults)?.map((result, i) => + {scoreboardData?.problemResults?.map((result, i) => ` const SubmissionRowTaskResultLabel = styled(ScoreboardTaskResultLabel)` flex-shrink: 0; - width: 40px; + width: ${c.SUBMISSION_ROW_TASK_RESULT_LABEL_WIDTH}; height: 100%; text-align: center; `; diff --git a/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx b/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx index 54fde5f59..f1d95a078 100644 --- a/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx +++ b/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx @@ -23,7 +23,7 @@ const LegendCardWrapper = styled.div` `; const LegendWrapper = styled.div` - margin: 8px 16px; + margin: ${c.LEGEND_VERTICAL_MARGIN} ${c.LEGEND_HORIZONTAL_MARGIN}; font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; font-size: ${c.GLOBAL_DEFAULT_FONT_SIZE}; diff --git a/src/frontend/overlay/src/components/organisms/holder/TimeLine.tsx b/src/frontend/overlay/src/components/organisms/holder/TimeLine.tsx index 6e40a8b14..0f91addaa 100644 --- a/src/frontend/overlay/src/components/organisms/holder/TimeLine.tsx +++ b/src/frontend/overlay/src/components/organisms/holder/TimeLine.tsx @@ -100,8 +100,8 @@ const CircleAtEnd = styled.div.attrs(({ lineWidth, leftPadding left: `calc(${lineWidth}% + ${leftPadding}px)`, }, }))` - width: 10px; - height: 10px; + width: ${c.TIMELINE_END_CIRCLE_RADIUS}px; + height: ${c.TIMELINE_END_CIRCLE_RADIUS}px; border-radius: 50%; position: absolute; top: 50%; @@ -159,7 +159,7 @@ const StaticText = styled.div` const TimeBorder = styled.div` height: ${props => props.isPvp ? c.TIMELINE_WRAP_HEIGHT_PVP : c.TIMELINE_WRAP_HEIGHT}px; background-color: ${props => isShouldUseDarkColor(props.color) ? "#000" : "#fff"}; - width: 2px; + width: ${c.TIMELINE_TIME_BORDER_WIDTH}px; position: absolute; left: ${props => props.left}; `; diff --git a/src/frontend/overlay/src/components/organisms/tickers/Image.tsx b/src/frontend/overlay/src/components/organisms/tickers/Image.tsx index bb92e6524..67824d14e 100644 --- a/src/frontend/overlay/src/components/organisms/tickers/Image.tsx +++ b/src/frontend/overlay/src/components/organisms/tickers/Image.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { image } from "@shared/api"; +import c from "@/config"; export const ImageWrap = styled.div<{path: string}>` @@ -9,7 +10,7 @@ export const ImageWrap = styled.div<{path: string}>` max-height: 100%; max-width: 100%; display: flex; - padding: 0 16px; + padding: 0 ${c.IMAGE_TICKER_HORIZONTAL_PADDING}; box-sizing: border-box; background: center / contain no-repeat url(${(props) => props.path}); `; diff --git a/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.tsx b/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.tsx index 2f5f1f7f2..08dc03285 100644 --- a/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.tsx +++ b/src/frontend/overlay/src/components/organisms/tickers/Scoreboard.tsx @@ -18,7 +18,7 @@ const ScoreboardWrap = styled.div.attrs(({ top }) => ( display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(${props => props.nrows}, 1fr); - gap: 2px; + gap: ${c.TICKER_SCOREBOARD_GAP}; width: 100%; height: 100%; @@ -29,8 +29,7 @@ const ScoreboardWrap = styled.div.attrs(({ top }) => ( `; const TickerScoreboardContestantInfo = styled(ContestantInfo)` - height: 48px; - + height: ${c.TICKER_SCOREBOARD_CONTESTANT_INFO_HEIGHT}; `; export const Scoreboard = ({ tickerSettings, state }) => { diff --git a/src/frontend/overlay/src/components/organisms/tickers/Text.tsx b/src/frontend/overlay/src/components/organisms/tickers/Text.tsx index 8f26250e9..e91925c85 100644 --- a/src/frontend/overlay/src/components/organisms/tickers/Text.tsx +++ b/src/frontend/overlay/src/components/organisms/tickers/Text.tsx @@ -8,10 +8,10 @@ export const TextWrap = styled.div<{part: TickerPart}>` display: flex; justify-content: ${props => props.part === "long" ? "flex-start" : "center"}; - box-sizing: border-box; + box-sizing: border-box; width: 100%; block-size: fit-content; - padding: 0 16px; + padding: 0 ${c.TICKER_TEXT_HORIZONTAL_PADDING}; font-size: ${c.TICKER_TEXT_FONT_SIZE}; `; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Advertisement.tsx b/src/frontend/overlay/src/components/organisms/widgets/Advertisement.tsx index 9eb3ff11b..9c9d0c8f1 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Advertisement.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Advertisement.tsx @@ -13,15 +13,15 @@ const AdvertisementContainer = styled.div` // TODO: move this to constants.js const AdvertisementWrap = styled.div` - padding: 13px 20px; + padding: ${c.ADVERTISEMENT_VERTICAL_PADDING} ${c.ADVERTISEMENT_HORIZONTAL_PADDING}; font-family: ${c.ADVERTISEMENT_FONT_FAMILY}, serif; - font-size: 24pt; + font-size: ${c.ADVERTISEMENT_FONT_SIZE}; font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD}; color: ${c.ADVERTISEMENT_COLOR}; background-color: ${c.ADVERTISEMENT_BACKGROUND}; - border-radius: 12px; + border-radius: ${c.ADVERTISEMENT_BORDER_RADIUS}; text-align: center; `; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Locator.jsx b/src/frontend/overlay/src/components/organisms/widgets/Locator.jsx index f8e4f3042..832b69592 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Locator.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Locator.jsx @@ -69,18 +69,18 @@ export const Locator = ({ widgetData, transitionState }) => { {circles.map((circle, index) => { let left = circle.x - c.LOCATOR_MAGIC_CONSTANT / 2; let top; - if (circle.y - circle.radius - 50 > 10) { - top = circle.y - circle.radius - 50; + if (circle.y - circle.radius - c.LOCATOR_TOP_OFFSET > c.LOCATOR_TOP_THRESHOLD) { + top = circle.y - circle.radius - c.LOCATOR_TOP_OFFSET; } else { - top = circle.y + circle.radius + 16; + top = circle.y + circle.radius + c.LOCATOR_BOTTOM_OFFSET; } if (left < 0) { left = 0; - } else if (left + c.LOCATOR_MAGIC_CONSTANT > 1920) { - left = 1920 - c.LOCATOR_MAGIC_CONSTANT; + } else if (left + c.LOCATOR_MAGIC_CONSTANT > c.LOCATOR_MAX_WIDTH) { + left = c.LOCATOR_MAX_WIDTH - c.LOCATOR_MAGIC_CONSTANT; } const len = Math.sqrt((left + c.LOCATOR_MAGIC_CONSTANT / 2 - circle.x) * (left + c.LOCATOR_MAGIC_CONSTANT / 2 - circle.x) + - (top + 10 - circle.y) * (top + 10 - circle.y)); + (top + c.LOCATOR_TOP_THRESHOLD - circle.y) * (top + c.LOCATOR_TOP_THRESHOLD - circle.y)); return
{ left={left} animation={transitionState === "exiting" ? slideOut : slideIn} animationStyle={transitionState === "exiting" ? "ease-in" : "ease-out"} - duration={(index + 1) * 1500}> + duration={(index + 1) * c.LOCATOR_ANIMATION_DURATION}> {/* FIXME: This needs readdressing for overlay2 */} {/**/} @@ -97,10 +97,10 @@ export const Locator = ({ widgetData, transitionState }) => { - + duration={(index + 1) * c.LOCATOR_ANIMATION_DURATION - c.LOCATOR_ANIMATION_DELAY}> + + d={`M ${circle.x + (left + c.LOCATOR_MAGIC_CONSTANT / 2 - circle.x) / len * circle.radius} ${circle.y + (top + c.LOCATOR_TOP_THRESHOLD - circle.y) / len * circle.radius} L ${left + c.LOCATOR_MAGIC_CONSTANT / 2} ${top + c.LOCATOR_TOP_THRESHOLD}`}/>
; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx index 64ea54c29..6ce6c8679 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx @@ -184,9 +184,9 @@ const useVerticalQueueRowsData = ({ let regularRowCount = 0; rows.forEach((row) => { if (row.isFts) { - row.bottom = height - bottomPosition(totalFts - ftsRowCount) + 3; + row.bottom = height - bottomPosition(totalFts - ftsRowCount) + c.QUEUE_FTS_BOTTOM_OFFSET; ftsRowCount++; - } else { + } else { row.bottom = bottomPosition(regularRowCount); regularRowCount++; } @@ -357,9 +357,9 @@ const useHorizontalQueueRowsData = ({ }; const QueueRankLabel = styled(RankLabel)` - width: 32px; + width: ${c.QUEUE_RANK_LABEL_WIDTH}; align-self: stretch; - padding-left: 12px; + padding-left: ${c.QUEUE_RANK_LABEL_PADDING_LEFT}; flex-shrink: 0; `; @@ -367,7 +367,7 @@ const QueueTeamNameLabel = styled(ShrinkingBox)` flex-grow: 1; `; const QueueRunStatusLabel = styled(RunStatusLabel)` - width: 46px; + width: ${c.QUEUE_ROW_STATUS_LABEL_WIDTH}; flex-shrink: 0; `; @@ -378,14 +378,14 @@ const StyledQueueRow = styled.div` align-items: center; border-radius: ${c.GLOBAL_BORDER_RADIUS}; overflow: hidden; - gap: 5px; + gap: ${c.QUEUE_ROW_GAP}; color: white; font-size: ${c.QUEUE_ROW_FONT_SIZE}; background: ${c.QUEUE_ROW_BACKGROUND}; `; const QueueScoreLabel = styled(ShrinkingBox)` - width: 51px; + width: ${c.QUEUE_SCORE_LABEL_WIDTH}; flex-shrink: 0; flex-direction: row-reverse; `; @@ -450,7 +450,7 @@ const QueueWrap = styled.div<{ hasFeatured: boolean; variant: "vertical" | "hori box-sizing: border-box; display: flex; flex-direction: column; - gap: 7px; + gap: ${c.QUEUE_GAP}; `; const RowsContainer = styled.div` @@ -485,14 +485,14 @@ const Caption = styled.div` `; const StyledFeatured = styled.div<{additional: CSSObject}>` - width: 334px; + width: ${c.QUEUE_FEATURED_RUN_WIDTH}; position: absolute; - right: calc(100% - 16px); /* this with padding is a hack to hide the rounded corner of the widget */ - padding: 3px 16px 3px 3px; + right: calc(100% - ${c.QUEUE_FEATURED_RUN_RIGHT_OFFSET}); /* this with padding is a hack to hide the rounded corner of the widget */ + padding: ${c.QUEUE_FEATURED_RUN_PADDING_TOP} ${c.QUEUE_FEATURED_RUN_PADDING_RIGHT} ${c.QUEUE_FEATURED_RUN_PADDING_BOTTOM} ${c.QUEUE_FEATURED_RUN_PADDING_LEFT}; background-color: ${c.QUEUE_BACKGROUND_COLOR}; - border-radius: 16px 0 0 16px; + border-radius: ${c.QUEUE_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT} 0 0 ${c.QUEUE_FEATURED_RUN_BORDER_RADIUS_BOTTOM_LEFT}; overflow: hidden; display: flex; flex-direction: column; @@ -530,7 +530,7 @@ export const Featured = ({ runInfo }: { runInfo: QueueRowInfo }) => { const StyledHorizontalFeatured = styled.div<{additional: CSSObject}>` - width: 334px; + width: ${c.QUEUE_HORIZONTAL_FEATURED_RUN_WIDTH}; position: absolute; right: 0; @@ -538,7 +538,7 @@ const StyledHorizontalFeatured = styled.div<{additional: CSSObject}>` padding: ${c.QUEUE_WRAP_PADDING}px; background-color: ${c.QUEUE_BACKGROUND_COLOR}; - border-radius: 16px 16px 0 0; + border-radius: ${c.QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT} ${c.QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_RIGHT} 0 0; overflow: hidden; display: flex; flex-direction: column; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.tsx b/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.tsx index dd15420f4..61ea2f01f 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Scoreboard.tsx @@ -16,12 +16,12 @@ const ScoreboardWrap = styled.div` overflow: hidden; display: flex; flex-direction: column; - gap: 14px; + gap: ${c.SCOREBOARD_GAP}; box-sizing: border-box; width: 100%; height: 100%; - padding: 7px 16px 0 16px; + padding: ${c.SCOREBOARD_PADDING_TOP} ${c.SCOREBOARD_PADDING_RIGHT} 0 ${c.SCOREBOARD_PADDING_LEFT}; color: ${c.SCOREBOARD_TEXT_COLOR}; @@ -34,7 +34,7 @@ const ScoreboardHeader = styled.div` flex-direction: row; width: 100%; - padding-top: 0.3em; + padding-top: ${c.SCOREBOARD_HEADER_PADDING_TOP}; font-size: ${c.SCOREBOARD_CAPTION_FONT_SIZE}; font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD}; @@ -95,7 +95,7 @@ const ScoreboardRowWrap = styled(ScoreboardTableRowWrap)` `; const ScoreboardRowName = styled(ShrinkingBox)` - padding: 0 8px; + padding: 0 ${c.SCOREBOARD_CELL_PADDING}; /* font-weight: 700; */ `; @@ -285,13 +285,13 @@ const ScoreboardTableHeaderWrap = styled(ScoreboardTableRowWrap)` font-style: normal; line-height: ${c.SCOREBOARD_HEADER_HEIGHT}px; - border-radius: 16px 16px 0 0; + border-radius: ${c.SCOREBOARD_HEADER_BORDER_RADIUS_TOP_LEFT} ${c.SCOREBOARD_HEADER_BORDER_RADIUS_TOP_RIGHT} 0 0; `; const ScoreboardTableHeaderCell = styled.div` - padding: 0 8px; + padding: 0 ${c.SCOREBOARD_CELL_PADDING}; text-align: center; - font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; + font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; background-color: ${c.SCOREBOARD_HEADER_BACKGROUND_COLOR}; `; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx b/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx index fc3698766..8086cd05e 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx @@ -12,12 +12,12 @@ const StatisticsWrap = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: ${c.STATISTICS_CONTENT_GAP}; box-sizing: border-box; width: 100%; height: 100%; - padding: 8px 16px; + padding: ${c.STATISTICS_PADDING_VERTICAL} ${c.STATISTICS_PADDING_HORIZONTAL}; background-color: ${c.CONTEST_COLOR}; background-repeat: no-repeat; @@ -27,12 +27,12 @@ const StatisticsWrap = styled.div` const Header = styled.div` display: flex; flex-flow: row; - gap: 16px; + gap: ${c.STATISTICS_HEADER_GAP}; width: 100%; - font-size: 32px; - line-height: 44px; + font-size: ${c.STATISTICS_HEADER_FONT_SIZE}; + line-height: ${c.STATISTICS_HEADER_LINE_HEIGHT}; color: white; `; const Title = styled.div` @@ -63,7 +63,7 @@ export const Statistics = () => { - {data.data && data.data.length > 0 && } + {data.data && data.data.length > 0 && } ); }; diff --git a/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx b/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx index e0a680667..c2e9b6bee 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx @@ -175,10 +175,10 @@ const PVPGrid = styled.div<{ $primaryY: number; $secondaryY: number} & PVPWrappe width: 100%; height: 100%; display: grid; - grid-template-columns: ${props => props.$primaryY / 9 * 16}px ${props => props.$secondaryY / 9 * 16}px; + grid-template-columns: ${props => props.$primaryY / c.PVP_ASPECT_RATIO_HEIGHT * c.PVP_ASPECT_RATIO_WIDTH}px ${props => props.$secondaryY / c.PVP_ASPECT_RATIO_HEIGHT * c.PVP_ASPECT_RATIO_WIDTH}px; grid-template-rows: ${props => props.$isTop - ? `${props.$secondaryY}px 1fr ${c.PVP_TABLE_ROW_HEIGHT * 2.5}px ${c.PVP_TABLE_ROW_HEIGHT * 0.5}px` - : `${c.PVP_TABLE_ROW_HEIGHT * 0.5}px ${c.PVP_TABLE_ROW_HEIGHT * 2.5}px 1fr ${props.$secondaryY}px`}; + ? `${props.$secondaryY}px 1fr ${c.PVP_TABLE_ROW_HEIGHT * c.PVP_TABLE_ROW_HEIGHT_MULTIPLIER}px ${c.PVP_TABLE_ROW_HEIGHT * c.PVP_TABLE_ROW_HEIGHT_OFFSET_MULTIPLIER}px` + : `${c.PVP_TABLE_ROW_HEIGHT * c.PVP_TABLE_ROW_HEIGHT_OFFSET_MULTIPLIER}px ${c.PVP_TABLE_ROW_HEIGHT * c.PVP_TABLE_ROW_HEIGHT_MULTIPLIER}px 1fr ${props.$secondaryY}px`}; z-index: 1; border-radius: ${c.GLOBAL_BORDER_RADIUS}; overflow: hidden; @@ -223,8 +223,8 @@ const PVPTackStatusBackWrapper = styled.div` const PVPAchievementInnerWrapper = styled.div` position: absolute; - width: 676px; - bottom: -4px; + width: ${c.PVP_ACHIEVEMENT_WIDTH}; + bottom: ${c.PVP_ACHIEVEMENT_BOTTOM_OFFSET}; z-index: 4; object { @@ -284,8 +284,8 @@ const SplitScreenGrid = styled.div<{ $secondaryY: number }>` width: 100%; height: 100%; display: grid; - grid-template-columns: 1fr ${props => props.$secondaryY / 9 * 16}px; - grid-template-rows: 1fr ${props => props.$secondaryY / 2}px ${props => props.$secondaryY / 2}px; + grid-template-columns: 1fr ${props => props.$secondaryY / c.PVP_ASPECT_RATIO_HEIGHT * c.PVP_ASPECT_RATIO_WIDTH}px; + grid-template-rows: 1fr ${props => props.$secondaryY / c.PVP_SECONDARY_DIVISOR}px ${props => props.$secondaryY / c.PVP_SECONDARY_DIVISOR}px; z-index: 3; border-radius: ${c.GLOBAL_BORDER_RADIUS}; `; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Ticker.tsx b/src/frontend/overlay/src/components/organisms/widgets/Ticker.tsx index 53f877b73..8f70065ee 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Ticker.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Ticker.tsx @@ -129,15 +129,15 @@ export const SingleTickerRows = ({ part }) => { const ShortTickerGrid = styled.div` display: grid; grid-template-columns: ${c.TICKER_LIVE_ICON_SIZE} auto; - column-gap: 8px; + column-gap: ${c.TICKER_SHORT_COLUMN_GAP}; width: 100%; - margin: 0 8px; + margin: ${c.TICKER_LIVE_ICON_MARGIN}; `; const LiveIcon = styled.img` height: ${c.TICKER_LIVE_ICON_SIZE}; - padding: 8px 0; + padding: ${c.TICKER_LIVE_ICON_PADDING}; `; interface SingleTickerProps { @@ -171,11 +171,11 @@ export const SingleTicker: React.FC = ({ part, color }) => { const TickerWrap = styled.div` position: absolute; - z-index: 2147000000; + z-index: ${c.TICKER_ZINDEX}; display: grid; grid-template-columns: ${c.TICKER_SMALL_SIZE} auto; - column-gap: 9px; + column-gap: ${c.TICKER_LONG_COLUMN_GAP}; width: 100%; height: 100%; diff --git a/src/frontend/overlay/src/config.interface.ts b/src/frontend/overlay/src/config.interface.ts index c8aa23fd8..e9cfbd06d 100644 --- a/src/frontend/overlay/src/config.interface.ts +++ b/src/frontend/overlay/src/config.interface.ts @@ -58,6 +58,10 @@ export interface OverlayConfig { VERDICT_NOK: string; VERDICT_UNKNOWN: string; + VERDICT_LABEL_FONT_SIZE: string; + VERDICT_CELL_TRANSITION_TIME: number; + VERDICT_CELL_BRODER_RADIUS: string; + // Styles > Scoreboard SCOREBOARD_BACKGROUND_COLOR: string; SCOREBOARD_BORDER_RADIUS: string; @@ -89,6 +93,15 @@ export interface OverlayConfig { SCOREBOARD_UNDEFINED_NAME: string; SCOREBOARD_STANDINGS_NAME: string; + SCOREBOARD_GAP: string; + SCOREBOARD_PADDING_TOP: string; + SCOREBOARD_PADDING_RIGHT: string; + SCOREBOARD_PADDING_LEFT: string; + SCOREBOARD_HEADER_PADDING_TOP: string; + SCOREBOARD_CELL_PADDING: string; + SCOREBOARD_HEADER_BORDER_RADIUS_TOP_LEFT: string; + SCOREBOARD_HEADER_BORDER_RADIUS_TOP_RIGHT: string; + // Queue QUEUE_ROW_FONT_SIZE: string; QUEUE_ROW_BACKGROUND: string; @@ -106,6 +119,31 @@ export interface OverlayConfig { QUEUE_ROW_PROBLEM_LABEL_WIDTH: number; // px QUEUE_HEADER_FONT_SIZE: string; QUEUE_HEADER_LINE_HEIGHT: string; + QUEUE_RANK_LABEL_WIDTH: string; + QUEUE_RANK_LABEL_PADDING_LEFT: string; + QUEUE_ROW_GAP: string; + QUEUE_SCORE_LABEL_WIDTH: string; + QUEUE_GAP: string; + QUEUE_FEATURED_RUN_WIDTH: string; + QUEUE_FEATURED_RUN_PADDING_TOP: string; + QUEUE_FEATURED_RUN_PADDING_RIGHT: string; + QUEUE_FEATURED_RUN_PADDING_BOTTOM: string; + QUEUE_FEATURED_RUN_PADDING_LEFT: string; + QUEUE_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT: string; + QUEUE_FEATURED_RUN_BORDER_RADIUS_BOTTOM_LEFT: string; + QUEUE_HORIZONTAL_FEATURED_RUN_WIDTH: string; + QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT: string; + QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_RIGHT: string; + QUEUE_FTS_BOTTOM_OFFSET: number; // px + QUEUE_ROW_STATUS_LABEL_WIDTH: string; + QUEUE_FEATURED_RUN_RIGHT_OFFSET: string; + + PROBLEM_LABEL_WIDTH: string; + + TIME_CELL_FLEX_BASIS: string; + TIME_CELL_WIDTH: string; + + SUBMISSION_ROW_TASK_RESULT_LABEL_WIDTH: string; SCORE_NONE_TEXT: string; @@ -121,6 +159,15 @@ export interface OverlayConfig { STATISTICS_BAR_HEIGHT: string; STATISTICS_BAR_GAP_PX: number; STATISTICS_BAR_GAP: string; + STATISTICS_PADDING_VERTICAL: string; + STATISTICS_PADDING_HORIZONTAL: string; + STATISTICS_HEADER_GAP: string; + STATISTICS_HEADER_FONT_SIZE: string; + STATISTICS_HEADER_LINE_HEIGHT: string; + STATISTICS_CONTENT_GAP: string; + + LEGEND_VERTICAL_MARGIN: string; + LEGEND_HORIZONTAL_MARGIN: string; // Cells (legacy TODO: remove) CELL_FONT_FAMILY: string; @@ -152,11 +199,18 @@ export interface OverlayConfig { TICKER_FONT_COLOR: string; TICKER_FONT_FAMILY: string; TICKER_TEXT_FONT_SIZE: string; // css property + TICKER_TEXT_HORIZONTAL_PADDING: string; TICKER_TEXT_MARGIN_LEFT: string; // css property TICKER_CLOCK_FONT_SIZE: string; // css property TICKER_CLOCK_MARGIN_LEFT: string; // css property TICKER_SCOREBOARD_RANK_WIDTH: string; // css property TICKER_LIVE_ICON_SIZE: string; + TICKER_SCOREBOARD_GAP: string; + TICKER_SCOREBOARD_CONTESTANT_INFO_HEIGHT: string; + TICKER_SHORT_COLUMN_GAP: string; + TICKER_LONG_COLUMN_GAP: string; + TICKER_LIVE_ICON_PADDING: string; + TICKER_LIVE_ICON_MARGIN: string; // Picture name PICTURE_NAME_BACKGROUND_COLOR: string; @@ -177,8 +231,13 @@ export interface OverlayConfig { ADVERTISEMENT_BACKGROUND: string; // hex value. ADVERTISEMENT_COLOR: string; ADVERTISEMENT_FONT_FAMILY: string; + ADVERTISEMENT_FONT_SIZE: string; + ADVERTISEMENT_VERTICAL_PADDING: string; + ADVERTISEMENT_HORIZONTAL_PADDING: string; + ADVERTISEMENT_BORDER_RADIUS: string; STAR_SIZE: number; // px + STAR_DEFAULT_COLOR: string; // hex QUEUE_PROBLEM_LABEL_FONT_SIZE: string; @@ -204,6 +263,11 @@ export interface OverlayConfig { CONTESTER_INFO_SCORE_WIDTH: string; CONTESTER_INFO_RANK_WIDTH: string; + CONTESTER_INFO_LEFT_PADDING: string; + CONTESTER_INFO_GAP: string; + CONTESTER_INFO_SCORE_RIGHT_PADDING: string; + CONTESTER_INFO_WIDTH: string; + // Timeline TIMELINE_ELEMENT_DIAMETER: number; TIMELINE_BORDER_RADIUS: string; @@ -220,6 +284,9 @@ export interface OverlayConfig { TIMELINE_PADDING_PVP: number; TIMELINE_REAL_WIDTH_PVP: number; + TIMELINE_END_CIRCLE_RADIUS: number; + TIMELINE_TIME_BORDER_WIDTH: number; + // Keylog KEYLOG_MAXIMUM_FOR_NORMALIZATION: number; // max value for normalization KEYLOG_TOP_PADDING: number; // px @@ -237,6 +304,9 @@ export interface OverlayConfig { KEYLOG_FILL_LIGHT: string; KEYLOG_GLOW_BLUR: number; + // Image ticker + IMAGE_TICKER_HORIZONTAL_PADDING: string; + // Layout factors TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR: number; SPLITSCREEN_SECONDARY_FACTOR: number; @@ -244,7 +314,14 @@ export interface OverlayConfig { // PVP / Teamview PVP_BACKGROUND: string; PVP_TABLE_ROW_HEIGHT: number; + PVP_TABLE_ROW_HEIGHT_MULTIPLIER: number; + PVP_TABLE_ROW_HEIGHT_OFFSET_MULTIPLIER: number; PVP_TEAM_STATUS_TASK_WIDTH: number; + PVP_ACHIEVEMENT_WIDTH: string; + PVP_ACHIEVEMENT_BOTTOM_OFFSET: string; + PVP_SECONDARY_DIVISOR: number; + PVP_ASPECT_RATIO_WIDTH: number; + PVP_ASPECT_RATIO_HEIGHT: number; CIRCLE_PROBLEM_SIZE: string; CIRCLE_PROBLEM_LINE_WIDTH: string; @@ -253,8 +330,17 @@ export interface OverlayConfig { // layers (z-indexes) QUEUE_BASIC_ZINDEX: number; + TICKER_ZINDEX: number; LOCATOR_MAGIC_CONSTANT: number; + LOCATOR_TOP_OFFSET: number; + LOCATOR_TOP_THRESHOLD: number; + LOCATOR_BOTTOM_OFFSET: number; + LOCATOR_MAX_WIDTH: number; + LOCATOR_ANIMATION_DURATION: number; // ms + LOCATOR_ANIMATION_DELAY: number; // ms + LOCATOR_LINE_STROKE_COLOR: string; + LOCATOR_LINE_STROKE_WIDTH: number; // Computed websocket urls WEBSOCKETS: { diff --git a/src/frontend/overlay/src/config.ts b/src/frontend/overlay/src/config.ts index 61b0d6ba9..d1fd67f2c 100644 --- a/src/frontend/overlay/src/config.ts +++ b/src/frontend/overlay/src/config.ts @@ -79,6 +79,7 @@ function getDefaultConfig(): EvaluatableTo { QUEUE_MAX_ROWS: 20, QUEUE_HORIZONTAL_HEIGHT_NUM: 5, + // Timings WIDGET_TRANSITION_TIME: 300, // ms QUEUE_ROW_TRANSITION_TIME: 700, // ms @@ -115,6 +116,10 @@ function getDefaultConfig(): EvaluatableTo { VERDICT_NOK: "#CB2E28", VERDICT_UNKNOWN: "#F3BE4B", + VERDICT_LABEL_FONT_SIZE: "14px", + VERDICT_CELL_TRANSITION_TIME: 250, // ms + VERDICT_CELL_BRODER_RADIUS: (cfg: OverlayConfig) => cfg.GLOBAL_BORDER_RADIUS, + // Styles > Scoreboard SCOREBOARD_BACKGROUND_COLOR: (cfg: OverlayConfig) => cfg.GLOBAL_BACKGROUND_COLOR, SCOREBOARD_BORDER_RADIUS: (cfg: OverlayConfig) => cfg.GLOBAL_BORDER_RADIUS, @@ -146,6 +151,15 @@ function getDefaultConfig(): EvaluatableTo { SCOREBOARD_UNDEFINED_NAME: "??", SCOREBOARD_STANDINGS_NAME: "standings", + SCOREBOARD_GAP: "14px", + SCOREBOARD_PADDING_TOP: "7px", + SCOREBOARD_PADDING_RIGHT: "16px", + SCOREBOARD_PADDING_LEFT: "16px", + SCOREBOARD_HEADER_PADDING_TOP: "0.3em", + SCOREBOARD_CELL_PADDING: "8px", + SCOREBOARD_HEADER_BORDER_RADIUS_TOP_LEFT: "16px", + SCOREBOARD_HEADER_BORDER_RADIUS_TOP_RIGHT: "16px", + QUEUE_ROW_FONT_SIZE: (cfg: OverlayConfig) => cfg.GLOBAL_DEFAULT_FONT_SIZE, QUEUE_ROW_BACKGROUND: "rgba(0, 0, 0, 0.08)", @@ -163,6 +177,31 @@ function getDefaultConfig(): EvaluatableTo { QUEUE_ROW_PROBLEM_LABEL_WIDTH: 28, // px QUEUE_HEADER_FONT_SIZE: "32px", QUEUE_HEADER_LINE_HEIGHT: "44px", + QUEUE_RANK_LABEL_WIDTH: "32px", + QUEUE_RANK_LABEL_PADDING_LEFT: "12px", + QUEUE_ROW_GAP: "5px", + QUEUE_SCORE_LABEL_WIDTH: "51px", + QUEUE_GAP: "7px", + QUEUE_FEATURED_RUN_WIDTH: "334px", + QUEUE_FEATURED_RUN_PADDING_TOP: "3px", + QUEUE_FEATURED_RUN_PADDING_RIGHT: "16px", + QUEUE_FEATURED_RUN_PADDING_BOTTOM: "3px", + QUEUE_FEATURED_RUN_PADDING_LEFT: "3px", + QUEUE_FEATURED_RUN_BORDER_RADIUS_BOTTOM_LEFT: "16px", + QUEUE_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT: "16px", + QUEUE_HORIZONTAL_FEATURED_RUN_WIDTH: (cfg: OverlayConfig) => cfg.QUEUE_FEATURED_RUN_WIDTH, + QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_LEFT: "16px", + QUEUE_HORIZONTAL_FEATURED_RUN_BORDER_RADIUS_TOP_RIGHT: "16px", + QUEUE_FTS_BOTTOM_OFFSET: 3, // px + QUEUE_ROW_STATUS_LABEL_WIDTH: "46px", + QUEUE_FEATURED_RUN_RIGHT_OFFSET: "16px", + + PROBLEM_LABEL_WIDTH: "28px", + + TIME_CELL_FLEX_BASIS: "70%", + TIME_CELL_WIDTH: "50px", + + SUBMISSION_ROW_TASK_RESULT_LABEL_WIDTH: "40px", SCORE_NONE_TEXT: ".", @@ -177,7 +216,15 @@ function getDefaultConfig(): EvaluatableTo { STATISTICS_BAR_HEIGHT: (cfg: OverlayConfig) => `${cfg.STATISTICS_BAR_HEIGHT_PX}px`, STATISTICS_BAR_GAP_PX: 9, STATISTICS_BAR_GAP: (cfg: OverlayConfig) => `${cfg.STATISTICS_BAR_GAP_PX}px`, + STATISTICS_PADDING_VERTICAL: "8px", + STATISTICS_PADDING_HORIZONTAL: "16px", + STATISTICS_HEADER_GAP: "16px", + STATISTICS_HEADER_FONT_SIZE: "32px", + STATISTICS_HEADER_LINE_HEIGHT: "44px", + STATISTICS_CONTENT_GAP: "8px", + LEGEND_VERTICAL_MARGIN: "8px", + LEGEND_HORIZONTAL_MARGIN: "16px", // TODO: remove CELL_FONT_FAMILY: (cfg: OverlayConfig) => cfg.GLOBAL_DEFAULT_FONT_FAMILY, @@ -208,11 +255,18 @@ function getDefaultConfig(): EvaluatableTo { TICKER_FONT_COLOR: "#FFFFFF", TICKER_FONT_FAMILY: (cfg: OverlayConfig) => cfg.GLOBAL_DEFAULT_FONT_FAMILY, TICKER_TEXT_FONT_SIZE: "32px", // css property + TICKER_TEXT_HORIZONTAL_PADDING: "16px", TICKER_TEXT_MARGIN_LEFT: "16px", // css property TICKER_CLOCK_FONT_SIZE: "32px", // css property TICKER_CLOCK_MARGIN_LEFT: "10px", // css property TICKER_SCOREBOARD_RANK_WIDTH: "50px", // css property TICKER_LIVE_ICON_SIZE: "32px", + TICKER_SCOREBOARD_GAP: "2px", + TICKER_SCOREBOARD_CONTESTANT_INFO_HEIGHT: "48px", + TICKER_SHORT_COLUMN_GAP: "8px", + TICKER_LONG_COLUMN_GAP: "9px", + TICKER_LIVE_ICON_PADDING: "8px 0", + TICKER_LIVE_ICON_MARGIN: "0 8px", PICTURE_NAME_BACKGROUND_COLOR: (cfg: OverlayConfig) => cfg.CONTEST_COLOR, PICTURE_NAME_FONT_COLOR: "#FFFFFF", @@ -233,8 +287,13 @@ function getDefaultConfig(): EvaluatableTo { ADVERTISEMENT_BACKGROUND: "#FFFFFF", // hex value. ADVERTISEMENT_COLOR: (cfg: OverlayConfig) => isShouldUseDarkColor(cfg.ADVERTISEMENT_BACKGROUND) ? "black" : "white", ADVERTISEMENT_FONT_FAMILY: (cfg: OverlayConfig) => cfg.GLOBAL_DEFAULT_FONT_FAMILY, + ADVERTISEMENT_FONT_SIZE: "24pt", + ADVERTISEMENT_VERTICAL_PADDING: "13px", + ADVERTISEMENT_HORIZONTAL_PADDING: "20px", + ADVERTISEMENT_BORDER_RADIUS: "12px", STAR_SIZE: 33, // px + STAR_DEFAULT_COLOR: "#F9A80D", // hex QUEUE_PROBLEM_LABEL_FONT_SIZE: (cfg: OverlayConfig) => cfg.GLOBAL_DEFAULT_FONT_SIZE, @@ -259,6 +318,11 @@ function getDefaultConfig(): EvaluatableTo { CONTESTER_INFO_SCORE_WIDTH: "51px", CONTESTER_INFO_RANK_WIDTH: "32px", + CONTESTER_INFO_LEFT_PADDING: "4px", + CONTESTER_INFO_GAP: "5px", + CONTESTER_INFO_SCORE_RIGHT_PADDING: "20px", + CONTESTER_INFO_WIDTH: "150px", + TIMELINE_ELEMENT_DIAMETER: 25, TIMELINE_BORDER_RADIUS: (cfg: OverlayConfig) => cfg.GLOBAL_BORDER_RADIUS, TIMELINE_LINE_HEIGHT: 4, @@ -274,6 +338,9 @@ function getDefaultConfig(): EvaluatableTo { TIMELINE_PADDING_PVP: 5, TIMELINE_REAL_WIDTH_PVP: 0.93, + TIMELINE_END_CIRCLE_RADIUS: 10, + TIMELINE_TIME_BORDER_WIDTH: 2, + KEYLOG_MAXIMUM_FOR_NORMALIZATION: 500, // max value for normalization KEYLOG_TOP_PADDING: 6, // px @@ -291,6 +358,9 @@ function getDefaultConfig(): EvaluatableTo { KEYLOG_FILL_LIGHT: "#FFFFFF29", KEYLOG_GLOW_BLUR: 0, + // Image ticker + IMAGE_TICKER_HORIZONTAL_PADDING: "16px", + TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR: 0.39, SPLITSCREEN_SECONDARY_FACTOR: (cfg: OverlayConfig) => cfg.TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR, @@ -299,7 +369,14 @@ function getDefaultConfig(): EvaluatableTo { // TEAM_VIEW_OPACITY: 0.95, PVP_BACKGROUND: (cfg: OverlayConfig) => cfg.CONTESTER_BACKGROUND_COLOR, PVP_TABLE_ROW_HEIGHT: 32, + PVP_TABLE_ROW_HEIGHT_MULTIPLIER: 2.5, + PVP_TABLE_ROW_HEIGHT_OFFSET_MULTIPLIER: 0.5, PVP_TEAM_STATUS_TASK_WIDTH: 50, + PVP_ACHIEVEMENT_WIDTH: "676px", + PVP_ACHIEVEMENT_BOTTOM_OFFSET: "-4px", + PVP_SECONDARY_DIVISOR: 2, + PVP_ASPECT_RATIO_WIDTH: 16, + PVP_ASPECT_RATIO_HEIGHT: 9, CIRCLE_PROBLEM_SIZE: "28px", CIRCLE_PROBLEM_LINE_WIDTH: "3.5px", @@ -308,8 +385,17 @@ function getDefaultConfig(): EvaluatableTo { // layers (z-indexes) QUEUE_BASIC_ZINDEX: 20, + TICKER_ZINDEX: 2147000000, LOCATOR_MAGIC_CONSTANT: 343, + LOCATOR_TOP_OFFSET: 50, + LOCATOR_TOP_THRESHOLD: 10, + LOCATOR_BOTTOM_OFFSET: 16, + LOCATOR_MAX_WIDTH: 1920, + LOCATOR_ANIMATION_DURATION: 1500, // ms + LOCATOR_ANIMATION_DELAY: 500, // ms + LOCATOR_LINE_STROKE_COLOR: "white", + LOCATOR_LINE_STROKE_WIDTH: 5, WEBSOCKETS: (cfg: OverlayConfig) => ({ mainScreen: `${cfg.BASE_URL_WS}/mainScreen`,