Overlay2 fts

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
   }
 }

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)
     }
 }
 

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<Map<String, String>>(it, logger).stateIn(this, SharingStarted.Eagerly, emptyMap())
-            } ?: MutableStateFlow(mutableMapOf("one" to "two"))
+                fileJsonContentFlow<JsonObject>(it, logger).stateIn(this, SharingStarted.Eagerly, emptyVisualConfig)
+            } ?: MutableStateFlow(emptyVisualConfig)
         )
 
         launchServices(loader)

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<Flow<AddTeamScoreRequest>>()
     val teamInterestingFlow = CompletableDeferred<Flow<List<CurrentTeamState>>>()
     val socialEvents = CompletableDeferred<Flow<SocialEvent>>()
-    val visualConfigFlow = CompletableDeferred<StateFlow<Map<String, String>>>()
+    val visualConfigFlow = CompletableDeferred<StateFlow<JsonObject>>()
 
     fun setScoreboardEvents(level: OptimismLevel, flow: Flow<ScoreboardAndContestInfo>) { scoreboardFlow[level.ordinal].completeOrThrow(flow) }
     suspend fun getScoreboardEvents(level: OptimismLevel) = scoreboardFlow[level.ordinal].await()

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
     }
 }

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,11 +51,11 @@ 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;
-  font-size: 18px;
+  font-size: ${c.CONTESTER_FONT_SIZE};
 `;
 
 const ContestantInfoScoreLabel = styled(ShrinkingBox)`

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 }) => {
@@ -49,7 +48,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 <ContestantViewVerticalWrap isSmall={isSmall} className={className} tasks={scoreboardData?.problemResults.length} top={top} bottom={bottom}>
         <CornerContestantInfo teamId={teamId} />
@@ -70,4 +69,4 @@ export const ContestantViewLine = ({ teamId, isSmall, className, isTop }) => {
 
     </ContestantViewVerticalWrap>;
 
-};
+};

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 (
-        <BarsWrapper rowsCount={rowsCount}>
+        <BarsWrapper rowsCount={rowsCount} ref={componentRef}>
             {data.map((b) => {
                 return (
                     <BarWrapper key={b.name}>

src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.tsx

@@ -46,7 +46,7 @@ export const StatisticsLegend = ({legend}: StatisticsLegendsProps) => {
     return (
         <LegendsWrapper>
             {legend?.map((l) => (
-                <LegendCard caption={l.caption} color={l.color}></LegendCard>
+                <LegendCard key={l.caption} caption={l.caption} color={l.color}></LegendCard>
             ))}
         </LegendsWrapper>
     );

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), []);