From bbcdcce5404e61e86cabb26d527e804599320a2e Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Fri, 13 Oct 2023 19:50:20 +0300 Subject: [PATCH 1/6] FTS star in queue, improve visual config --- .../kotlin/org/icpclive/service/QueueService.kt | 2 +- .../molecules/statistics/StatisticsLegend.tsx | 2 +- .../src/components/organisms/widgets/Queue.jsx | 11 +++++++++-- src/frontend/overlay/src/config.jsx | 17 +++++++++++++---- 4 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/backend/src/main/kotlin/org/icpclive/service/QueueService.kt b/src/backend/src/main/kotlin/org/icpclive/service/QueueService.kt index f866da5d6..e6f65fa71 100644 --- a/src/backend/src/main/kotlin/org/icpclive/service/QueueService.kt +++ b/src/backend/src/main/kotlin/org/icpclive/service/QueueService.kt @@ -179,6 +179,6 @@ class QueueService { private val WAIT_TIME = 1.minutes private val FIRST_TO_SOLVE_WAIT_TIME = 2.minutes private val FEATURED_WAIT_TIME = 1.minutes - private const val MAX_QUEUE_SIZE = 15 + private const val MAX_QUEUE_SIZE = 30 } } diff --git a/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx b/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx index 8d47c1850..cb629ccac 100644 --- a/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx +++ b/src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx @@ -46,7 +46,7 @@ export const StatisticsLegend = ({legend}: StatisticsLegendsProps) => { return ( {legend?.map((l) => ( - + ))} ); diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx index 3b48e4a45..e7499ac61 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx @@ -9,8 +9,9 @@ import { ShrinkingBox } from "../../atoms/ShrinkingBox"; import { RankLabel, RunStatusLabel } from "../../atoms/ContestLabels"; import { ProblemLabel } from "../../atoms/ProblemLabel"; import { ContestantViewHolder } from "../holder/ContestantViewHolder"; -// import { QueueRow } from "../../molecules/queue/QueueRow"; import { useWithTimeoutAfterRender } from "../../../utils/hooks/withTimeoutAfterRender"; +import star from "../../../assets/icons/star_mask.svg"; + import {formatScore} from "../../../services/displayUtils"; @@ -202,6 +203,10 @@ const QueueProblemLabel = styled(ProblemLabel)` width: 28px; font-size: ${c.QUEUE_PROBLEM_LABEL_FONT_SIZE}; flex-shrink: 0; + mask: ${({isFTSRun}) => isFTSRun ? `url(${star}) 50% 50% no-repeat` : null}; + mask-origin: content-box; + mask-clip: border-box; + mask-size: 25px; `; const QueueRightPart = styled.div` height: 100%; @@ -209,10 +214,12 @@ const QueueRightPart = styled.div` display: flex; flex-wrap: nowrap; `; + export const QueueRow = ({ runInfo, flashing }) => { const scoreboardData = useSelector((state) => state.scoreboard[SCOREBOARD_TYPES.normal].ids[runInfo.teamId]); const teamData = useSelector((state) => state.contestInfo.info?.teamsId[runInfo.teamId]); const probData = useSelector((state) => state.contestInfo.info?.problemsId[runInfo.problemId]); + const isFTSRun = runInfo?.result?.type === "ICPC" && runInfo.result.isFirstToSolveRun; return @@ -221,7 +228,7 @@ export const QueueRow = ({ runInfo, flashing }) => { text={scoreboardData === null ? "??" : formatScore(scoreboardData?.totalScore ?? 0.0, 1)} /> - + ; diff --git a/src/frontend/overlay/src/config.jsx b/src/frontend/overlay/src/config.jsx index a31152b4b..86df3bb25 100644 --- a/src/frontend/overlay/src/config.jsx +++ b/src/frontend/overlay/src/config.jsx @@ -7,7 +7,17 @@ const visualConfig = await fetch(VISUAL_CONFIG_URL) .then(r => r.json()) .catch((e) => console.error("failed to load visual config: " + e)) ?? {}; -let config = {}; +let config_ = {}; + +const config = new Proxy(config_, { + get(target, key) { + return visualConfig[key] ?? target[key]; + }, + set(target, key, value) { + target[key] = visualConfig[key] ?? value; + return true; + } +}); config.CONTEST_COLOR = "#4C83C3"; config.CONTEST_CAPTION = "46th"; @@ -184,7 +194,6 @@ config.CIRCLE_PROBLEM_LINE_WIDTH = "3.5px"; config.CELL_INFO_VERDICT_WIDTH= "100px"; // css property // layers (z-indexes) -config.QUEUE_BASIC_ZINDEX=20; -config = { ...config, ...visualConfig }; -export default config; +config.QUEUE_BASIC_ZINDEX = 20; +export default config_; From 6e618d3bbf6902f9f0007240293eb69cc7997549 Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Fri, 13 Oct 2023 23:04:17 +0300 Subject: [PATCH 2/6] Empty default CONTEST_CAPTION, any value in visualConfig.json --- src/backend/src/main/kotlin/org/icpclive/Application.kt | 8 +++++--- src/backend/src/main/kotlin/org/icpclive/data/DataBus.kt | 3 ++- src/frontend/overlay/src/config.jsx | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/backend/src/main/kotlin/org/icpclive/Application.kt b/src/backend/src/main/kotlin/org/icpclive/Application.kt index 5e0a6062b..dfcc74df9 100644 --- a/src/backend/src/main/kotlin/org/icpclive/Application.kt +++ b/src/backend/src/main/kotlin/org/icpclive/Application.kt @@ -20,6 +20,8 @@ import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.SharingStarted import kotlinx.coroutines.flow.stateIn import kotlinx.coroutines.launch +import kotlinx.serialization.json.JsonElement +import kotlinx.serialization.json.JsonObject import org.icpclive.admin.configureAdminApiRouting import org.icpclive.api.tunning.AdvancedProperties import org.icpclive.cds.adapters.* @@ -145,11 +147,11 @@ fun Application.module() { .calculateScoreDifferences() .addFirstToSolves() - + val emptyVisualConfig = JsonObject(emptyMap()) DataBus.visualConfigFlow.completeOrThrow( config.visualConfigFile?.let { - fileJsonContentFlow>(it, logger).stateIn(this, SharingStarted.Eagerly, emptyMap()) - } ?: MutableStateFlow(mutableMapOf("one" to "two")) + fileJsonContentFlow(it, logger).stateIn(this, SharingStarted.Eagerly, emptyVisualConfig) + } ?: MutableStateFlow(emptyVisualConfig) ) launchServices(loader) diff --git a/src/backend/src/main/kotlin/org/icpclive/data/DataBus.kt b/src/backend/src/main/kotlin/org/icpclive/data/DataBus.kt index 7498c451f..e65c7e0f7 100644 --- a/src/backend/src/main/kotlin/org/icpclive/data/DataBus.kt +++ b/src/backend/src/main/kotlin/org/icpclive/data/DataBus.kt @@ -6,6 +6,7 @@ import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.FlowCollector import kotlinx.coroutines.flow.MutableSharedFlow import kotlinx.coroutines.flow.StateFlow +import kotlinx.serialization.json.JsonObject import org.icpclive.api.* import org.icpclive.api.tunning.AdvancedProperties import org.icpclive.scoreboard.ScoreboardAndContestInfo @@ -44,7 +45,7 @@ object DataBus { val teamInterestingScoreRequestFlow = CompletableDeferred>() val teamInterestingFlow = CompletableDeferred>>() val socialEvents = CompletableDeferred>() - val visualConfigFlow = CompletableDeferred>>() + val visualConfigFlow = CompletableDeferred>() fun setScoreboardEvents(level: OptimismLevel, flow: Flow) { scoreboardFlow[level.ordinal].completeOrThrow(flow) } suspend fun getScoreboardEvents(level: OptimismLevel) = scoreboardFlow[level.ordinal].await() diff --git a/src/frontend/overlay/src/config.jsx b/src/frontend/overlay/src/config.jsx index 86df3bb25..de6367f2b 100644 --- a/src/frontend/overlay/src/config.jsx +++ b/src/frontend/overlay/src/config.jsx @@ -20,7 +20,7 @@ const config = new Proxy(config_, { }); config.CONTEST_COLOR = "#4C83C3"; -config.CONTEST_CAPTION = "46th"; +config.CONTEST_CAPTION = ""; config.BASE_URL_WS = (import.meta.env.VITE_WEBSOCKET_URL ?? WS_PROTO + window.location.hostname + ":" + WS_PORT + "/api/overlay"); From 1582e6af029de2bafb91a461f0348b0fa3164ede Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Mon, 16 Oct 2023 22:32:56 +0300 Subject: [PATCH 3/6] FTS star fix --- .../overlay/src/components/molecules/info/ContestantInfo.jsx | 2 +- .../overlay/src/components/organisms/widgets/Queue.jsx | 2 +- src/frontend/overlay/src/config.jsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx index 56f281316..e4cc7d7d3 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx @@ -56,7 +56,7 @@ const ContestantInfoWrap = styled.div` overflow: hidden; gap: 5px; color: white; - font-size: 18px; + font-size: ${c.CONTESTER_FONT_SIZE}; `; const ContestantInfoScoreLabel = styled(ShrinkingBox)` diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx index e7499ac61..ee9795aee 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx @@ -203,7 +203,7 @@ const QueueProblemLabel = styled(ProblemLabel)` width: 28px; font-size: ${c.QUEUE_PROBLEM_LABEL_FONT_SIZE}; flex-shrink: 0; - mask: ${({isFTSRun}) => isFTSRun ? `url(${star}) 50% 50% no-repeat` : null}; + mask: ${({isFts}) => isFts ? `url(${star}) 50% 50% no-repeat` : null}; mask-origin: content-box; mask-clip: border-box; mask-size: 25px; diff --git a/src/frontend/overlay/src/config.jsx b/src/frontend/overlay/src/config.jsx index de6367f2b..e2140e0cc 100644 --- a/src/frontend/overlay/src/config.jsx +++ b/src/frontend/overlay/src/config.jsx @@ -179,7 +179,9 @@ config.MEDAL_COLORS = Object.freeze({ config.LOG_LINES = 300; config.CONTESTER_ROW_OPACITY = 0.95; -config.CONTESTER_BACKGROUND_COLOR = "#4C83C3"; + +config.CONTESTER_FONT_SIZE = "18px"; +config.CONTESTER_BACKGROUND_COLOR = config.CONTEST_COLOR; config.CONTESTER_ROW_BORDER_RADIUS = "16px"; config.CONTESTER_ROW_HEIGHT = "25px"; From db6a2332798343634bec3a3613b919ac5fca78e8 Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Tue, 17 Oct 2023 00:38:50 +0300 Subject: [PATCH 4/6] overlay default widget positions --- config/widget_positions.json.overlay2 | 54 ------------------- .../main/kotlin/org/icpclive/api/Widgets.kt | 28 +++++----- .../overlay/src/assets/icons/star_mask.svg | 3 ++ .../molecules/info/ContestantViewLine.jsx | 4 +- .../src/components/organisms/widgets/PVP.jsx | 22 ++++---- 5 files changed, 31 insertions(+), 80 deletions(-) create mode 100644 src/frontend/overlay/src/assets/icons/star_mask.svg diff --git a/config/widget_positions.json.overlay2 b/config/widget_positions.json.overlay2 index f73b3d519..13eca9a78 100644 --- a/config/widget_positions.json.overlay2 +++ b/config/widget_positions.json.overlay2 @@ -5,64 +5,10 @@ "sizeX": 384, "sizeY": 400 }, - "scoreboard": { - "positionX": 16, - "positionY": 16, - "sizeX": 1488, - "sizeY": 984 - }, - "statistics": { - "positionX": 16, - "positionY": 662, - "sizeX": 1488, - "sizeY": 338 - }, "ticker": { "positionX": 16, "positionY": 1016, "sizeX": 1488, "sizeY": 48 - }, - "teamview.SINGLE_TOP_RIGHT": { - "positionX": 16, - "positionY": 16, - "sizeX": 1488, - "sizeY": 984 - }, - "teamview.PVP_TOP": { - "positionX": 16, - "positionY": 16, - "sizeX": 1488, - "sizeY": 984 - }, - "teamview.PVP_BOTTOM": { - "positionX": 16, - "positionY": 16, - "sizeX": 1488, - "sizeY": 984 - }, - "teamview.TOP_LEFT": { - "positionX": 0, - "positionY": 0, - "sizeX": 960, - "sizeY": 540 - }, - "teamview.TOP_RIGHT": { - "positionX": 960, - "positionY": 0, - "sizeX": 960, - "sizeY": 540 - }, - "teamview.BOTTOM_LEFT": { - "positionX": 0, - "positionY": 540, - "sizeX": 960, - "sizeY": 540 - }, - "teamview.BOTTOM_RIGHT": { - "positionX": 960, - "positionY": 540, - "sizeX": 960, - "sizeY": 540 } } 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 index 10c5d9272..2922b5c27 100644 --- a/src/backend-api/src/main/kotlin/org/icpclive/api/Widgets.kt +++ b/src/backend-api/src/main/kotlin/org/icpclive/api/Widgets.kt @@ -36,7 +36,7 @@ class AdvertisementWidget(val advertisement: AdvertisementSettings) : Widget( ) { companion object { const val WIDGET_ID_PREFIX = "advertisement" - val location = LocationRectangle(0, 860, 1920, 90) + val location = LocationRectangle(16, 16, 1488, 984) } } @@ -48,7 +48,7 @@ class PictureWidget(val picture: PictureSettings) : Widget( ) { companion object { const val WIDGET_ID_PREFIX = "picture" - val location = LocationRectangle(550, 40, 1350, 970) + val location = LocationRectangle(16, 16, 1488, 984) } } @@ -72,7 +72,7 @@ class QueueWidget(val settings: QueueSettings) : Widget( ) { companion object { const val WIDGET_ID = "queue" - val location = LocationRectangle(20, 310, 515, 695) + val location = LocationRectangle(1520, 248, 384, 752) } } @@ -84,7 +84,7 @@ class ScoreboardWidget(val settings: ScoreboardSettings) : Widget( ) { companion object { const val WIDGET_ID = "scoreboard" - val location = LocationRectangle(550, 20, 1350, 985) + val location = LocationRectangle(16, 16, 1488, 984) } } @@ -96,7 +96,7 @@ class StatisticsWidget(val settings: StatisticsSettings) : Widget( ) { companion object { const val WIDGET_ID = "statistics" - val location = LocationRectangle(550, 40, 1350, 970) + val location = LocationRectangle(16, 662, 1488, 338) } } @@ -108,7 +108,7 @@ class TickerWidget(val settings: TickerSettings) : Widget( ) { companion object { const val WIDGET_ID = "ticker" - val location = LocationRectangle(0, 1025, 1920, 50) + val location = LocationRectangle(16, 1016, 1888, 48) } } @@ -128,13 +128,13 @@ class TeamViewWidget( companion object { fun getWidgetId(position: TeamViewPosition) = "teamview." + position.name fun getLocation(position: TeamViewPosition) = when (position) { - TeamViewPosition.SINGLE_TOP_RIGHT -> LocationRectangle(550, 40, 1350, 970) - TeamViewPosition.PVP_TOP -> LocationRectangle(550, 40, 1350, 970 / 2) - TeamViewPosition.PVP_BOTTOM -> LocationRectangle(550, 40 + 970 / 2, 1350, 970 / 2) - TeamViewPosition.TOP_LEFT -> LocationRectangle(550, 40, 672, 378) - TeamViewPosition.TOP_RIGHT -> LocationRectangle(550 + 672, 40, 672, 378) - TeamViewPosition.BOTTOM_LEFT -> LocationRectangle(550, 40 + 378, 672, 378) - TeamViewPosition.BOTTOM_RIGHT -> LocationRectangle(550 + 672, 40 + 378, 672, 378) + 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.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) + TeamViewPosition.BOTTOM_RIGHT -> LocationRectangle(16 + 1488 / 2, 16 + 837 / 2, 1488 / 2, 837 / 2) } } } @@ -147,7 +147,7 @@ class FullScreenClockWidget(val settings: FullScreenClockSettings) : Widget( ) { companion object { const val WIDGET_ID = "fullScreenClock" - val location = LocationRectangle(0, 0, 1920, 1080) + val location = LocationRectangle(16, 16, 1488, 984) } } diff --git a/src/frontend/overlay/src/assets/icons/star_mask.svg b/src/frontend/overlay/src/assets/icons/star_mask.svg new file mode 100644 index 000000000..885c96844 --- /dev/null +++ b/src/frontend/overlay/src/assets/icons/star_mask.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx index bf88c2251..dfb8bf23e 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx @@ -49,7 +49,7 @@ export const ContestantViewLine = ({ teamId, isSmall, className, isTop }) => { const tasks = useSelector(state => state.contestInfo?.info?.problems); const contestData = useSelector((state) => state.contestInfo.info); - const [top, bottom] = isTop ? ["auto", `calc(50% - 0.5 * ${c.PVP_TABLE_ROW_HEIGHT}px)`] : [`calc(50% - 0.5 * ${c.PVP_TABLE_ROW_HEIGHT}px)`, "auto"]; + const [top, bottom] = isTop ? [null, "0"] : ["0", null]; return @@ -70,4 +70,4 @@ export const ContestantViewLine = ({ teamId, isSmall, className, isTop }) => { ; -}; \ No newline at end of file +}; diff --git a/src/frontend/overlay/src/components/organisms/widgets/PVP.jsx b/src/frontend/overlay/src/components/organisms/widgets/PVP.jsx index f16deef66..899574916 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/PVP.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/PVP.jsx @@ -1,10 +1,8 @@ import React, { useLayoutEffect } from "react"; import styled from "styled-components"; import c from "../../../config"; -import { - ContestantViewHolder -} from "../holder/ContestantViewHolder"; -import {ContestantViewLine} from "../../molecules/info/ContestantViewLine"; +import { ContestantViewHolder } from "../holder/ContestantViewHolder"; +import { ContestantViewLine } from "../../molecules/info/ContestantViewLine"; const PVPViewHolder = styled(ContestantViewHolder)` @@ -18,19 +16,23 @@ const PVPViewHolder = styled(ContestantViewHolder)` width: ${props => props.width}; ` +const MEDIAN_OFFSET = c.PVP_TABLE_ROW_HEIGHT * 0.5; + export const PVP = ({ mediaContent, settings, setLoadedComponents, location }) => { + const mediaHeight = location.sizeY - MEDIAN_OFFSET; + return mediaContent.concat(settings.content.filter(e => !e.isMedia)).map((cc, index) => { const onLoadStatus = (v) => setLoadedComponents(m => v ? (m | (1 << index)) : (m & ~(1 << index))); const [positionLeft, positionRight] = index === 0 ? ["0", "auto"] : ["auto", "0"] - const height = index === 0 ? "50%" : "auto" - const width = index === 0 ? location.sizeY / 2 * 16 / 9 + "px" : location.sizeX - location.sizeY / 2 * 16 / 9 + "px" + const height = index === 0 ? "auto" : "auto" + const width = index === 0 ? mediaHeight * 16 / 9 + "px" : location.sizeX - mediaHeight * 16 / 9 + "px" - const top = location.sizeY / 2 + 2.3 * c.PVP_TABLE_ROW_HEIGHT; - console.log(top); + const top = location.sizeY + 2.3 * c.PVP_TABLE_ROW_HEIGHT; const [positionTop, positionBottom] = - settings.position === "PVP_TOP" ? (index === 0 ? ["auto", "50%"] : ["auto", top + "px"]) - : (index === 0 ? ["50%", "auto"] : [top + "px", "auto"]) + settings.position === "PVP_TOP" ? + (index === 0 ? ["0", c.PVP_TABLE_ROW_HEIGHT / 2 + "px"] : [null, 3.0 * c.PVP_TABLE_ROW_HEIGHT + "px"]) : + (index === 0 ? [c.PVP_TABLE_ROW_HEIGHT / 2 + "px", "0"] : [3.0 * c.PVP_TABLE_ROW_HEIGHT + "px", null]) useLayoutEffect(() => onLoadStatus(true), []); From 45c7c97675e836c3833cfef2ae89b94bb2281d82 Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Mon, 23 Oct 2023 14:37:42 +0300 Subject: [PATCH 5/6] extract constants, borders for fts star in queue --- .../overlay/src/assets/icons/star.svg | 19 ++++---- .../overlay/src/assets/icons/star_mask.svg | 11 ++++- .../molecules/info/ContestantInfo.jsx | 5 +-- .../molecules/info/ContestantViewLine.jsx | 3 +- .../molecules/statistics/StackedBars.tsx | 18 ++++++-- .../components/organisms/widgets/Queue.jsx | 43 ++++++++++++++----- .../organisms/widgets/Statistics.tsx | 2 +- .../components/organisms/widgets/TeamView.jsx | 2 +- src/frontend/overlay/src/config.jsx | 7 ++- 9 files changed, 75 insertions(+), 35 deletions(-) diff --git a/src/frontend/overlay/src/assets/icons/star.svg b/src/frontend/overlay/src/assets/icons/star.svg index 83f4c8ea2..d2de2883d 100644 --- a/src/frontend/overlay/src/assets/icons/star.svg +++ b/src/frontend/overlay/src/assets/icons/star.svg @@ -1,11 +1,10 @@ - - - - + + + + + + + + + diff --git a/src/frontend/overlay/src/assets/icons/star_mask.svg b/src/frontend/overlay/src/assets/icons/star_mask.svg index 885c96844..1fa717994 100644 --- a/src/frontend/overlay/src/assets/icons/star_mask.svg +++ b/src/frontend/overlay/src/assets/icons/star_mask.svg @@ -1,3 +1,10 @@ - - + + + + + + + + + diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx index e4cc7d7d3..c57162ec8 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantInfo.jsx @@ -5,8 +5,7 @@ import { SCOREBOARD_TYPES } from "../../../consts"; import c from "../../../config"; import { ShrinkingBox } from "../../atoms/ShrinkingBox"; import { RankLabel } from "../../atoms/ContestLabels"; - -import {formatScore, useFormatPenalty} from "../../../services/displayUtils"; +import { formatScore, useFormatPenalty } from "../../../services/displayUtils"; // const rowFlashing = keyframes` @@ -52,7 +51,7 @@ const ContestantInfoWrap = styled.div` background-color: ${c.CONTESTER_BACKGROUND_COLOR}; display: flex; align-items: center; - border-radius: 16px ${props => props.round ? "16px" : "0px"} 16px 16px ; + border-radius: ${c.GLOBAL_BORDER_RADIUS} ${props => props.round ? c.GLOBAL_BORDER_RADIUS : "0px"} ${c.GLOBAL_BORDER_RADIUS} ${c.GLOBAL_BORDER_RADIUS}; overflow: hidden; gap: 5px; color: white; diff --git a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx index dfb8bf23e..c95e646d4 100644 --- a/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx +++ b/src/frontend/overlay/src/components/molecules/info/ContestantViewLine.jsx @@ -36,8 +36,7 @@ const TaskRow = styled.div` const CornerContestantInfo = styled(ContestantInfo)` grid-row: 2 / 3; - border-radius: 16px 0 0 16px ; - + border-radius: ${c.GLOBAL_BORDER_RADIUS} 0 0 ${c.GLOBAL_BORDER_RADIUS}; `; export const ContestantViewLine = ({ teamId, isSmall, className, isTop }) => { diff --git a/src/frontend/overlay/src/components/molecules/statistics/StackedBars.tsx b/src/frontend/overlay/src/components/molecules/statistics/StackedBars.tsx index cd26c1b23..8b31f68b9 100644 --- a/src/frontend/overlay/src/components/molecules/statistics/StackedBars.tsx +++ b/src/frontend/overlay/src/components/molecules/statistics/StackedBars.tsx @@ -1,4 +1,5 @@ -import {Legend, StackedBarsData} from "./types"; +import {useLayoutEffect, useRef, useState} from "react"; +import { StackedBarsData } from "./types"; import styled from "styled-components"; import c from "../../../config"; import { ProblemLabel } from "../../atoms/ProblemLabel"; @@ -60,12 +61,21 @@ const BarValue = styled.div.attrs(({ value, caption }) => ({ interface StackedBarsProps { data: StackedBarsData; - legend: Legend; } export const StackedBars = ({data}: StackedBarsProps) => { - const rowsCount = data.length + const [rowsCount, setRowsCount] = useState(data.length); + const componentRef = useRef(null); + + useLayoutEffect(() => { + setRowsCount(Math.min( + data.length, + Math.floor(componentRef.current.offsetHeight / + (c.STATISTICS_BAR_HEIGHT_PX + c.STATISTICS_BAR_GAP_PX)) + )); + }, [data.length]); + return ( - + {data.map((b) => { return ( diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx index ee9795aee..47895091d 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Queue.jsx @@ -10,7 +10,8 @@ import { RankLabel, RunStatusLabel } from "../../atoms/ContestLabels"; import { ProblemLabel } from "../../atoms/ProblemLabel"; import { ContestantViewHolder } from "../holder/ContestantViewHolder"; import { useWithTimeoutAfterRender } from "../../../utils/hooks/withTimeoutAfterRender"; -import star from "../../../assets/icons/star_mask.svg"; +import star from "../../../assets/icons/star.svg"; +import star_mask from "../../../assets/icons/star_mask.svg"; import {formatScore} from "../../../services/displayUtils"; @@ -183,14 +184,14 @@ const QueueRunStatusLabel = styled(RunStatusLabel)` const StyledQueueRow = styled.div` width: 100%; - height: 25px; + height: ${c.QUEUE_ROW_HEIGHT2}px; display: flex; align-items: center; - border-radius: 16px; + border-radius: ${c.GLOBAL_BORDER_RADIUS}; overflow: hidden; gap: 5px; color: white; - font-size: 18px; + font-size: ${c.QUEUE_ROW_FONT_SIZE}; background: ${c.QUEUE_ROW_BACKGROUND}; `; @@ -202,11 +203,16 @@ 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; flex-shrink: 0; - mask: ${({isFts}) => isFts ? `url(${star}) 50% 50% no-repeat` : null}; - mask-origin: content-box; - mask-clip: border-box; - mask-size: 25px; + background-image: ${({isFts}) => isFts ? `url(${star})` : null}; + background-repeat: no-repeat; + background-position: 50%; + background-size: contain; + + mask: ${({isFts}) => isFts ? `url(${star_mask}) 50% 50% no-repeat` : null}; + mask-position: 50%; + mask-size: contain; `; const QueueRightPart = styled.div` height: 100%; @@ -214,6 +220,23 @@ const QueueRightPart = styled.div` display: flex; flex-wrap: nowrap; `; +// const QueueFTSStartProblemWrap = styled.div` +// width: 28px; +// height: 100%; +// position: relative; +// background: ${props => "black"}; +// +// display: flex; +// justify-content: center; +// align-items: center; +// +// flex-shrink: 0; +// mask: url(${star}) 50% 50% no-repeat; +// mask-origin: content-box; +// mask-clip: border-box; +// mask-size: 25px; +// padding: 2px; +// `; export const QueueRow = ({ runInfo, flashing }) => { const scoreboardData = useSelector((state) => state.scoreboard[SCOREBOARD_TYPES.normal].ids[runInfo.teamId]); @@ -256,9 +279,9 @@ const RowsContainer = styled.div` `; const QueueHeader = styled.div` - font-size: 32px; + font-size: ${c.QUEUE_HEADER_FONT_SIZE}; font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD}; - line-height: 44px; + line-height: ${c.QUEUE_HEADER_LINE_HEIGHT}; color: white; width: 100%; display: flex; diff --git a/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx b/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx index 076b14064..fcb62d77c 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx +++ b/src/frontend/overlay/src/components/organisms/widgets/Statistics.tsx @@ -53,7 +53,7 @@ export const Statistics = () => { - + {data.data && data.data.length > 0 && } ) }; diff --git a/src/frontend/overlay/src/components/organisms/widgets/TeamView.jsx b/src/frontend/overlay/src/components/organisms/widgets/TeamView.jsx index 9410cb7ce..b5ebfac5d 100644 --- a/src/frontend/overlay/src/components/organisms/widgets/TeamView.jsx +++ b/src/frontend/overlay/src/components/organisms/widgets/TeamView.jsx @@ -42,7 +42,7 @@ const TeamViewPInPWrapper = styled.div` grid-row-start: 2; grid-row-end: 4; position: relative; - border-radius: 16px 16px 16px; + border-radius: ${c.GLOBAL_BORDER_RADIUS}; `; const TeamViewWrapper = styled.div` diff --git a/src/frontend/overlay/src/config.jsx b/src/frontend/overlay/src/config.jsx index e2140e0cc..9867f01ba 100644 --- a/src/frontend/overlay/src/config.jsx +++ b/src/frontend/overlay/src/config.jsx @@ -36,7 +36,7 @@ config.STATISTICS_CAPTION = config.CONTEST_CAPTION; // Behaviour config.TICKER_SCOREBOARD_REPEATS = 1; -config.QUEUE_MAX_ROWS = 12; +config.QUEUE_MAX_ROWS = 20; // Timings config.WIDGET_TRANSITION_TIME = 300; // ms @@ -65,6 +65,7 @@ config.GLOBAL_DEFAULT_FONT = config.GLOBAL_DEFAULT_FONT_SIZE + " " + config.GLOB config.GLOBAL_BACKGROUND_COLOR = "#242425"; config.GLOBAL_TEXT_COLOR = "#FFF"; config.GLOBAL_BORDER_RADIUS = "16px"; + config.VERDICT_OK = "#1b8041"; config.VERDICT_NOK = "#881f1b"; config.VERDICT_UNKNOWN = "#a59e0c"; @@ -97,6 +98,7 @@ config.SCOREBOARD_TABLE_GAP = 3; //px config.SCOREBOARD_TABLE_ROW_GAP = 1; // px +config.QUEUE_ROW_FONT_SIZE = config.GLOBAL_DEFAULT_FONT_SIZE; config.QUEUE_ROW_BACKGROUND = "rgba(0, 0, 0, 0.08)"; config.QUEUE_ROW_HEIGHT = 41; // px config.QUEUE_ROW_HEIGHT2 = 25; // px @@ -104,7 +106,8 @@ config.QUEUE_FTS_PADDING = config.QUEUE_ROW_HEIGHT / 2; // px config.QUEUE_OPACITY = 0.95; config.QUEUE_FEATURED_RUN_ASPECT = 16 / 9; config.QUEUE_BACKGROUND_COLOR = config.CONTEST_COLOR; - +config.QUEUE_HEADER_FONT_SIZE = "32px"; +config.QUEUE_HEADER_LINE_HEIGHT = "44px"; config.SCORE_NONE_TEXT = "."; From 328b491f83a468992bc03c78804eaa11671ad14b Mon Sep 17 00:00:00 2001 From: Kostya Bats Date: Tue, 24 Oct 2023 01:28:41 +0300 Subject: [PATCH 6/6] white border for fts star --- src/frontend/overlay/src/assets/icons/star.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/overlay/src/assets/icons/star.svg b/src/frontend/overlay/src/assets/icons/star.svg index d2de2883d..640e76bc0 100644 --- a/src/frontend/overlay/src/assets/icons/star.svg +++ b/src/frontend/overlay/src/assets/icons/star.svg @@ -1,10 +1,10 @@ - - + + - - + +