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

Update frontend

Browse Source
This commit is contained in:
Dominic Zimmer 2022-10-29 16:20:58 +02:00
parent cb5a143623
commit cb9494c89a
2 changed files with 102 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/TVMode.css
View File

@ -2,12 +2,13 @@ span {
color: white; color: white;
} }
.stream > div { .stream > div {
width: 300px; width: 290px;
height: 1080px; height: 1070px;
background-color: black; background-color: black;
padding: 5px; padding: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around;
} }
.heading { .heading {
display: flex; display: flex;
@ -81,7 +82,7 @@ span {
border-radius: 20px; border-radius: 20px;
padding: 4px; padding: 4px;
gap: 2px; gap: 2px;
margin: 15%; width: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -89,4 +90,66 @@ span {
pre { pre {
color: white; color: white;
}
.info {
height: 35%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.info .heading {
display: block;
font-weight: bold;
color: #e8ff37;
font-size: 30pt;
text-align: center;
}
.info .link {
display: block;
font-weight: bold;
color: #49ff4f;
font-size: 24pt;
text-align: center;
}
.info .text {
display: block;
font-weight: bold;
font-size: 24pt;
text-align: center;
}
.info hr {
width: 100%;
}
.scoreboard {
display: flex;
flex-direction: column;
align-items: center;
}
.pokeball {
height: 200px;
width: 200px;
position: relative;
}
.pokeball :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: red;
clip-path: polygon(0% 0%, 0% 50%, 100% 50%, 100% 0%);
border-radius: 50%;
}
.pokeball :last-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: white;
clip-path: polygon(0% 50%, 0% 100%, 100% 100%, 100% 50%);
border-radius: 50%;
} }

61
frontend/src/TVMode.tsx
View File

@ -36,33 +36,44 @@ const TVMode = () => {
{state === undefined ? {state === undefined ?
<span>Loading...</span> : <span>Loading...</span> :
<div> <div>
<span className={`mode mode-${state.mode}`}>{state.mode}</span> <div className="info">
<div className="row"> <span className="heading">
<div> LAN-Party Plays Pokemon
<span> </span>
next:&nbsp; <span className="text">
</span> Join with your phone on
<span className={`subtitle mode-${state.nextMode}`}>{state.nextMode}</span> </span>
<span className="link">
http://pokemon.lan/
</span>
<span className="text">
and become the very best!
</span>
<hr />
</div>
<div className="scoreboard">
<span className={`mode mode-${state.mode}`}>{state.mode}</span>
<div className="row">
<div>
<span>
next:&nbsp;
</span>
<span className={`subtitle mode-${state.nextMode}`}>{state.nextMode}</span>
</div>
<span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
</div>
<div className="voting">
{voteList.flatMap(([b, numVotes], index) => {
const percentage = numVotes === 0 ? 0 : Math.round(numVotes / totalCount * 100);
return <div className="vote" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} key={index}>
<div className="bar-wrap">
<div className="bar" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} >{b}</div>
</div>
<span className="percentage">{percentage === 0 ? "" : `${percentage}%`}</span>
</div>;
})}
</div> </div>
<span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
</div> </div>
<div className="voting">
{voteList.flatMap(([b, numVotes], index) => {
const percentage = numVotes === 0 ? 0 : Math.round(numVotes / totalCount * 100);
return <div className="vote" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} key={index}>
<div className="bar-wrap">
<div className="bar" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} >{b}</div>
</div>
<span className="percentage">{percentage === 0 ? "" : `${percentage}%`}</span>
</div>;
})}
</div>
<div>
Current state: <pre>
{JSON.stringify(state, null, 4)}
</pre>
</div>
</div> </div>
} }
</div>; </div>;