horizontal queue experiment

icpc · Mar 23, 2024 · 029d982 · 029d982
1 parent a0d13e4
commit 029d982
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 16 deletions.
diff --git a/.run/overlay2-start-local.run.xml b/.run/overlay2-start-local.run.xml
@@ -8,6 +8,7 @@
     <node-interpreter value="project" />
     <envs>
       <env name="VITE_WEBSOCKET_URL" value="ws://localhost:8080/api/overlay" />
+      <env name="VITE_VISUAL_CONFIG_URL" value="http://localhost:8080/api/overlay/visualConfig.json" />
     </envs>
     <method v="2" />
   </configuration>

diff --git a/config/widget_positions.horqueue.json b/config/widget_positions.horqueue.json
@@ -0,0 +1 @@
+{  "queue": {    "positionX": 16,    "positionY": 832,    "sizeX": 1888,    "sizeY": 168  }}

diff --git a/src/backend-api/src/main/kotlin/org/icpclive/api/Settings.kt b/src/backend-api/src/main/kotlin/org/icpclive/api/Settings.kt
@@ -20,7 +20,7 @@ data class TitleSettings(val preset: String, val data: Map<String, String>) : Ob
 data class PictureSettings(val url: String, val name: String) : ObjectSettings
 
 @Serializable
-class QueueSettings : ObjectSettings
+data class QueueSettings(val horizontal: Boolean = false) : ObjectSettings
 
 @Serializable
 data class ScoreboardSettings(

diff --git a/src/frontend/generated/api.ts b/src/frontend/generated/api.ts
@@ -523,6 +523,7 @@ export interface PictureSettings {
 }
 
 export interface QueueSettings {
+  horizontal?: boolean;
 }
 
 export interface ScoreboardSettings {

diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx
@@ -1,5 +1,5 @@
 // import PropTypes from "prop-types";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Transition, TransitionGroup } from "react-transition-group";
 import styled, { css, CSSObject, Keyframes, keyframes } from "styled-components";
 import c from "../../../config";
@@ -13,31 +13,35 @@ import star from "../../../assets/icons/star.svg";
 import star_mask from "../../../assets/icons/star_mask.svg";
 import { formatScore } from "@/services/displayUtils";
 import { useAppSelector } from "@/redux/hooks";
-import { RunInfo } from "@shared/api";
+import { RunInfo, Widget } from "@shared/api";
 import { isFTS } from "@/utils/statusInfo";
 
 // const MAX_QUEUE_ROWS_COUNT = 20;
 
 // Needed just for positioning and transitions. Don't use for anything else
 interface QueueRowAnimatorProps {
     bottom: number,
+    right: number,
+    horizontal?: boolean,
     zIndex: number,
     animation: Keyframes,
     fts: boolean
 }
-const QueueRowAnimator = styled.div.attrs<QueueRowAnimatorProps>(({ bottom, zIndex }) => {
+const QueueRowAnimator = styled.div.attrs<QueueRowAnimatorProps>(({ bottom, right, zIndex }) => {
     return ({
         style: {
             bottom: bottom + "px",
+            right: right + "px",
             zIndex: zIndex,
         }
     });
 })<QueueRowAnimatorProps>`
   overflow: hidden;
-  width: 100%;
+  width: ${({ horizontal }) => horizontal ? (c.QUEUE_ROW_WIDTH + "px") : "100%"};
 
   position: absolute;
-  transition: bottom linear ${({ fts }) => fts ? c.QUEUE_ROW_FTS_TRANSITION_TIME : c.QUEUE_ROW_TRANSITION_TIME}ms;
+  transition-property: ${({ horizontal }) => horizontal ? "right" : "bottom"};
+  transition: linear ${({ fts }) => fts ? c.QUEUE_ROW_FTS_TRANSITION_TIME : c.QUEUE_ROW_TRANSITION_TIME}ms;
   animation: ${({ animation }) => animation} ${c.QUEUE_ROW_APPEAR_TIME}ms linear; /* dissapear is also linear for now. FIXME */
   animation-fill-mode: forwards;
 `;
@@ -115,22 +119,37 @@ interface QueueRow extends RunInfo {
     isEven: boolean,
     zIndex: number,
     bottom: number,
+    right: number,
     isFeatured: boolean,
     isFeaturedRunMediaLoaded: boolean,
     isFts: boolean,
     setIsFeaturedRunMediaLoaded: (state: boolean) => void | null,
 }
 
 const useQueueRowsData = ({
-    // width,
+    width,
     height,
     basicZIndex = c.QUEUE_BASIC_ZINDEX,
+    horizontal = true
 }: {
+    width: number,
     height: number,
-    basicZIndex?: number
+    basicZIndex?: number,
+    horizontal?: boolean,
 }): [QueueRow | null, QueueRow[]] => {
     const shouldShow = useDelayedBoolean(300);
 
+    const bottomPosition = useCallback((index: number) => {
+        const actual = horizontal ? Math.floor(index / c.QUEUE_HORISONTAL_HEIGHT_NUM) : index;
+        return (c.QUEUE_ROW_HEIGHT + c.QUEUE_ROW_PADDING) * actual;
+    }, [horizontal]);
+    const rightPosition = useCallback((index: number) => {
+        return (c.QUEUE_ROW_WIDTH + c.QUEUE_ROW_HORIZONTAL_PADDING) * (horizontal ? (index % c.QUEUE_HORISONTAL_HEIGHT_NUM) : 0);
+    }, [horizontal]);
+    const allowedMaxRows = useMemo(() => {
+        return Math.min((width / c.QUEUE_ROW_WIDTH) * (height / c.QUEUE_ROW_HEIGHT), c.QUEUE_MAX_ROWS);
+    }, [width, height]);
+
     const { queue, totalQueueItems } = useAppSelector(state => state.queue);
 
     const [loadedMediaRun, setLoadedMediaRun] = useState(null);
@@ -144,6 +163,7 @@ const useQueueRowsData = ({
             isEven: (totalQueueItems - runIndex) % 2 === 0,
             zIndex: basicZIndex - runIndex + totalQueueItems,
             bottom: 0,
+            right: 0,
             isFeatured: false,
             isFeaturedRunMediaLoaded: false,
             isFts: isFTS(run),
@@ -171,14 +191,21 @@ const useQueueRowsData = ({
     let regularRowCount = 0;
     rows.forEach((row) => {
         if (row.isFts) {
-            row.bottom = (height - (c.QUEUE_ROW_HEIGHT + c.QUEUE_ROW_PADDING) * (totalFts - ftsRowCount)) + 3;
+            if (horizontal) {
+                row.bottom = height - c.QUEUE_ROW_HEIGHT - 3 - bottomPosition(totalFts - ftsRowCount - 1);
+                row.right = width - c.QUEUE_ROW_WIDTH - rightPosition(totalFts - ftsRowCount - 1);
+            } else {
+                row.bottom = height - bottomPosition(totalFts - ftsRowCount) + 3;
+                row.right = 0;
+            }
             ftsRowCount++;
-        } else {
-            row.bottom = (c.QUEUE_ROW_HEIGHT + c.QUEUE_ROW_PADDING) * regularRowCount;
+        } else  {
+            row.bottom = bottomPosition(regularRowCount);
+            row.right = rightPosition(regularRowCount);
             regularRowCount++;
         }
     });
-    const allowedRegular = c.QUEUE_MAX_ROWS - ftsRowCount;
+    const allowedRegular = allowedMaxRows - ftsRowCount;
     rows = rows.filter((row, index) => {
         return row.isFts || index < allowedRegular;
     });
@@ -293,7 +320,7 @@ const QueueWrap = styled.div`
   background-color: ${c.QUEUE_BACKGROUND_COLOR};
   background-repeat: no-repeat;
   border-radius: ${c.GLOBAL_BORDER_RADIUS};
-  padding: 8px;
+  padding: ${c.QUEUE_ROW_HORIZONTAL_PADDING}px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -365,10 +392,13 @@ export const Featured = ({ runInfo }) => {
     </TransitionGroup>;
 };
 
-export const Queue = () => {
-    // const [width, setWidth] = useState(null);
+type QueueProps = {
+    widgetData: Widget.QueueWidget,
+};
+export const Queue = ({ widgetData: { settings: { horizontal }, location } }): QueueProps => {
     const [height, setHeight] = useState<number>(null);
-    const [featured, queueRows] = useQueueRowsData({ height });
+    const width =location.sizeX - c.QUEUE_ROW_HORIZONTAL_PADDING * 2;
+    const [featured, queueRows] = useQueueRowsData({ height, width, horizontal });
     return <>
         <Featured runInfo={featured}/>
         <QueueWrap>
@@ -394,8 +424,10 @@ export const Queue = () => {
                                 return state !== "exited" && (
                                     <QueueRowAnimator
                                         bottom={row.bottom}
+                                        right={row.right}
                                         zIndex={row.zIndex}
                                         fts={row.isFts}
+                                        horizontal={horizontal}
                                         {...queueRowContractionStates(c.QUEUE_ROW_HEIGHT)[state]}
                                     >
                                         {/*<FeaturedRunRow2*/}

diff --git a/src/frontend/overlay/src/config.ts b/src/frontend/overlay/src/config.ts
@@ -43,6 +43,7 @@ config.STATISTICS_CAPTION = config.CONTEST_CAPTION;
 // Behaviour
 config.TICKER_SCOREBOARD_REPEATS = 1;
 config.QUEUE_MAX_ROWS = 20;
+config.QUEUE_HORISONTAL_HEIGHT_NUM = 5;
 
 // Timings
 config.WIDGET_TRANSITION_TIME = 300; // ms
@@ -112,8 +113,10 @@ config.SCOREBOARD_STANDINGS_NAME = "standings";
 config.QUEUE_ROW_FONT_SIZE = config.GLOBAL_DEFAULT_FONT_SIZE;
 config.QUEUE_ROW_BACKGROUND = "rgba(0, 0, 0, 0.08)";
 config.QUEUE_ROW_HEIGHT = 32; // px
+config.QUEUE_ROW_WIDTH = 368; // px
 config.QUEUE_ROW_PADDING = 1; // px
 config.QUEUE_ROW_FEATURED_RUN_PADDING = 3; // px
+config.QUEUE_ROW_HORIZONTAL_PADDING = 8; // px
 config.QUEUE_OPACITY = 0.95;
 config.QUEUE_FEATURED_RUN_ASPECT = 16 / 9;
 config.QUEUE_BACKGROUND_COLOR = config.CONTEST_COLOR;