Skip to content

Commit

Permalink
overlay2: ticker
Browse files Browse the repository at this point in the history
  • Loading branch information
Kostya Bats committed Aug 22, 2023
1 parent 0dd9ad3 commit 7514a0a
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 32 deletions.
6 changes: 6 additions & 0 deletions config/widget_positions.json.overlay2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@
"sizeX": 1488,
"sizeY": 984
},
"ticker": {
"positionX": 16,
"positionY": 1016,
"sizeX": 1488,
"sizeY": 48
},
"teamview.SINGLE_TOP_RIGHT": {
"positionX": 16,
"positionY": 16,
Expand Down
7 changes: 7 additions & 0 deletions src/frontend/overlay/src/assets/icons/live.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions src/frontend/overlay/src/components/organisms/tickers/Text.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { TICKER_FONT_FAMILY, TICKER_TEXT_FONT_SIZE, TICKER_TEXT_MARGIN_LEFT } from "../../../config";
import { TextShrinkingCell } from "../../atoms/ContestCells";
import { ShrinkingBox } from "../../atoms/ShrinkingBox";

export const TextWrap = styled.div`
width: 100%;
Expand All @@ -14,11 +14,12 @@ export const TextWrap = styled.div`

export const Text = ({ tickerSettings, part }) => {
return <TextWrap part={part}>
<TextShrinkingCell
<ShrinkingBox
text={tickerSettings.text}
background={""}
font={TICKER_TEXT_FONT_SIZE + " " + TICKER_FONT_FAMILY}
align={part === "long" ? "left" : "center"}/>
fontSize={TICKER_TEXT_FONT_SIZE}
fontFamily={TICKER_FONT_FAMILY}
align={part === "long" ? "left" : "center"}
/>
</TextWrap>;
};

Expand Down
82 changes: 60 additions & 22 deletions src/frontend/overlay/src/components/organisms/widgets/Ticker.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import PropTypes from "prop-types";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Transition, TransitionGroup } from "react-transition-group";
import styled, { keyframes } from "styled-components";
import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {Transition, TransitionGroup} from "react-transition-group";
import styled, {keyframes} from "styled-components";
import {
TICKER_BACKGROUND,
GLOBAL_BORDER_RADIUS,
SCOREBOARD_BACKGROUND_COLOR,
TICKER_FONT_COLOR,
TICKER_FONT_FAMILY,
TICKER_OPACITY,
TICKER_FONT_FAMILY, TICKER_LIVE_ICON_SIZE,
TICKER_SCROLL_TRANSITION_TIME,
TICKER_SMALL_BACKGROUND,
TICKER_SMALL_SIZE
} from "../../../config";
import { pushLog } from "../../../redux/debug";
import { startScrolling, stopScrolling } from "../../../redux/ticker";
import {pushLog} from "../../../redux/debug";
import {startScrolling, stopScrolling} from "../../../redux/ticker";
import live from "../../../assets/icons/live.svg";
import Clock from "../tickers/Clock";
import Scoreboard from "../tickers/Scoreboard";
import Text from "../tickers/Text";
Expand Down Expand Up @@ -56,16 +57,20 @@ const TickerRowContainer = styled.div`
font-family: ${TICKER_FONT_FAMILY};
`;

const TickerRow = ({ children, state }) => {
return <TickerRowContainer animation={transitionProps[state]}>
{children}
</TickerRowContainer>;
const TickerRow = ({children, state}) => {
return (
<TickerRowContainer animation={transitionProps[state]}>
{children}
</TickerRowContainer>
);
};


const SingleTickerWrap = styled.div`
position: relative;
height: 100%;
width: 100%;
border-radius: ${GLOBAL_BORDER_RADIUS};
background-color: ${props => props.color};
display: flex;
justify-content: ${props => props.justify};
Expand All @@ -79,17 +84,17 @@ const widgetTypes = Object.freeze({
scoreboard: Scoreboard
});

const DefaultTicker = ({ tickerSettings }) => {
return <div style={{ backgroundColor: "red", wordBreak: "break-all" }}>
const DefaultTicker = ({tickerSettings}) => {
return <div style={{backgroundColor: "red", wordBreak: "break-all"}}>
{JSON.stringify(tickerSettings)}
</div>;
};

export const SingleTicker = ({ part, color }) => {
export const SingleTickerRows = ({part}) => {
const dispatch = useDispatch();
const curMessage = useSelector((state) => state.ticker.tickers[part].curDisplaying);
const isFirst = useSelector((state) => state.ticker.tickers[part].isFirst);
return <SingleTickerWrap color={color}>
return (
<TransitionGroup component={null}>
{curMessage &&
<Transition key={curMessage?.id} timeout={TICKER_SCROLL_TRANSITION_TIME}>
Expand All @@ -99,14 +104,48 @@ export const SingleTicker = ({ part, color }) => {
dispatch(pushLog(`ERROR: Unknown ticker type: ${curMessage.type}`));
}
const sanitizedState = isFirst && state === "entering" ? "entered" : state; // ignore first entering render
return state !== "exited" && <TickerRow state={sanitizedState}>
return state !== "exited" && <TickerRow state={sanitizedState} part={part}>
<TickerComponent tickerSettings={curMessage.settings} state={sanitizedState} part={part}/>
</TickerRow>;
}}
</Transition>
}
</TransitionGroup>
</SingleTickerWrap>;
);
};


const ShortTickerGrid = styled.div`
width: 100%;
display: grid;
margin: 0 8px;
grid-template-columns: ${TICKER_LIVE_ICON_SIZE} auto;
column-gap: 8px;
`

const LiveIcon = styled.img`
height: ${TICKER_LIVE_ICON_SIZE};
padding: 8px 0;
`

export const SingleTicker = ({part, color}) => {
if (part === "short") {
return (
<SingleTickerWrap color={color}>
<ShortTickerGrid>
<LiveIcon src={live}/>
<SingleTickerWrap>
<SingleTickerRows part={part}/>
</SingleTickerWrap>
</ShortTickerGrid>
</SingleTickerWrap>
);
}
return (
<SingleTickerWrap color={color}>
<SingleTickerRows part={part}/>
</SingleTickerWrap>
);
};

SingleTicker.propTypes = {
Expand All @@ -119,11 +158,10 @@ const TickerWrap = styled.div`
height: 100%;
position: absolute;
z-index: 2147000000;
background-color: ${TICKER_BACKGROUND};
opacity: ${TICKER_OPACITY};
color: ${TICKER_FONT_COLOR};
display: grid;
grid-template-columns: ${TICKER_SMALL_SIZE} auto;
column-gap: 9px;
`;

export const Ticker = () => {
Expand All @@ -140,7 +178,7 @@ export const Ticker = () => {
{isLoaded &&
<>
<SingleTicker part={"short"} color={TICKER_SMALL_BACKGROUND}/>
<SingleTicker part={"long"}/>
<SingleTicker part={"long"} color={SCOREBOARD_BACKGROUND_COLOR}/>
</>
}
</TickerWrap>;
Expand Down
13 changes: 8 additions & 5 deletions src/frontend/overlay/src/config.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,17 +105,18 @@ export const CELL_QUEUE_TASK_WIDTH = "50px"; // css property
export const CELL_NAME_LEFT_PADDING = "5px"; // css property
export const CELL_NAME_RIGHT_PADDING = CELL_NAME_LEFT_PADDING; // css property

export const TICKER_SMALL_SIZE = "10%"; // css property
export const TICKER_SMALL_SIZE = "12%"; // css property
export const TICKER_SMALL_BACKGROUND = VERDICT_NOK;
export const TICKER_BACKGROUND = CELL_BG_COLOR;
export const TICKER_OPACITY = 0.95;
export const TICKER_FONT_COLOR = "#FFFFFF";
export const TICKER_FONT_FAMILY = "Helvetica, serif";
export const TICKER_TEXT_FONT_SIZE = "34px"; // css property
export const TICKER_TEXT_MARGIN_LEFT = "10px"; // css property
export const TICKER_CLOCK_FONT_SIZE = "34px"; // css property
export const TICKER_TEXT_FONT_SIZE = "32px"; // css property
export const TICKER_TEXT_MARGIN_LEFT = "16px"; // css property
export const TICKER_CLOCK_FONT_SIZE = "32px"; // css property
export const TICKER_CLOCK_MARGIN_LEFT = "10px"; // css property
export const TICKER_SCOREBOARD_RANK_WIDTH = "50px"; // css property
export const TICKER_LIVE_ICON_SIZE = "32px";


export const TEAMVIEW_SMALL_FACTOR = "50%"; // css property
Expand All @@ -138,7 +139,9 @@ export const MEDAL_COLORS = Object.freeze({
// Debug Behaviour
export const LOG_LINES = 300;

export const SCOREBOARD_BACKGROUND_COLOR = "#242425";
export const GLOBAL_BACKGROUND_COLOR = "#242425";

export const SCOREBOARD_BACKGROUND_COLOR = GLOBAL_BACKGROUND_COLOR;

export const CONTESTER_ROW_OPACITY = 1;
export const CONTESTER_ROW_BORDER_RADIUS = "16px";
Expand Down

0 comments on commit 7514a0a

Please sign in to comment.