kai/lanpartyplayspokemon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add logic

Browse Source
This commit is contained in:
Dominic Zimmer 2022-10-28 18:18:38 +02:00
parent 019ef38145
commit 535cff8612
2 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/TVMode.css
View File

@ -56,4 +56,8 @@ span {
}
.voting {
margin: 15%;
}
pre {
color: white;
}

30
frontend/src/TVMode.tsx
View File

@ -1,23 +1,12 @@
import { CSSProperties, useEffect, useState } from 'react';
import './TVMode.css';
import { useEffect, useMemo, useState } from 'react';
import './Client.css';
import './TVMode.css';
import { ButtonType, buttonTypeList, WGPPState } from './types';
const TVMode = () => {
const [state, setState] = useState<Partial<WGPPState>>({});
const [socket, setSocket] = useState<WebSocket>();
const [endTime, setEndTime] = useState(0);
const [secondsRemaining, setSecondsRemaining] =useState(0);
useEffect(() => {
setEndTime(Date.now() + (state?.timeUntilNextMode??15) * 1000);
const interval = setInterval(() => {
const remaining = Math.round((endTime - Date.now())/1000);
setSecondsRemaining(remaining < 0 ? 0 : remaining);
}, 500);
return () => clearInterval(interval);
}, [endTime, state?.timeUntilNextMode]);
useEffect(() => {
const url = new URL(`api/client`, window.location.href);
@ -37,8 +26,8 @@ const TVMode = () => {
};
}, [])
const totalCount = buttonTypeList.reduce((acc, v) => (state?.votes?.[v]??0) + acc, 0);
const voteList = buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]);
const totalCount = useMemo(() => buttonTypeList.reduce((acc, v) => (state?.votes?.[v] ?? 0) + acc, 0), [state]);
const voteList = useMemo(() => buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]).sort((a, b) => a[1] < b[1] ? -1 : 1), [state]);
return <div className="stream">
{state === undefined ?
@ -50,10 +39,13 @@ const TVMode = () => {
<span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
</div>
<div className="voting">
{voteList.map(([b, numVotes], index) =>
<div className="vote" key={index}>
<span>{b}</span><span> {numVotes ? Math.round(numVotes / totalCount * 100) + "%" : ""} </span>
</div>
{voteList.flatMap(([b, numVotes], index) => numVotes === 0
? []
: [
<div className="vote" key={index}>
<span>{b}</span><span> {Math.round(numVotes / totalCount * 100) + "%"} </span>
</div>
]
)}
</div>
<div>