bold winner text

This commit is contained in:
ntr 2019-10-23 13:09:56 +11:00
parent 0aed7cfe73
commit 9b1cb34e7b
4 changed files with 17 additions and 13 deletions

View File

@ -419,14 +419,9 @@
margin-top: 1em; margin-top: 1em;
} }
.opponent-name { .winner {
margin-bottom: 1em; color: @yellow;
grid-area: oppname; font-weight: bold;
}
.player-name {
margin-top: 1em;
grid-area: playername;
} }
.team { .team {
@ -441,12 +436,12 @@
font-size: 200%; font-size: 200%;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1em; letter-spacing: 1em;
font-weight: bold;
color: @black; color: @black;
animation: faceoff 4s linear 0s 2 alternate; animation: faceoff 4s linear 0s 2 alternate;
&.winner { &.winner {
color: @yellow;
animation: win 2s linear 0s 1; animation: win 2s linear 0s 1;
} }
} }

View File

@ -46,6 +46,11 @@
grid-area: msg; grid-area: msg;
color: @white; color: @white;
} }
&.winner {
color: @yellow;
font-weight: bold;
}
} }
.chat { .chat {

View File

@ -58,7 +58,8 @@ function Faceoff(props) {
const constructs = team.constructs.map((c, i) => const constructs = team.constructs.map((c, i) =>
<FaceoffConstruct key={c.id} construct={c}/>); <FaceoffConstruct key={c.id} construct={c}/>);
const classes = `team player ${team.ready ? 'ready' : ''}` const winner = instance.winner === team.id;
const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
return ( return (
<div class={classes}> <div class={classes}>
{constructs} {constructs}
@ -71,7 +72,8 @@ function Faceoff(props) {
const constructs = team.constructs.map((c, i) => const constructs = team.constructs.map((c, i) =>
<FaceoffConstruct key={c.id} construct={c}/>); <FaceoffConstruct key={c.id} construct={c}/>);
const classes = `team opponent ${team.ready ? 'ready' : ''}` const winner = instance.winner === team.id;
const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
return ( return (
<div class={classes}> <div class={classes}>

View File

@ -67,9 +67,11 @@ function Scoreboard(args) {
return ''; return '';
}; };
const winner = player.score === 'Win';
if (!isPlayer) { if (!isPlayer) {
return ( return (
<div class={`player-box top ${player.ready ? 'ready' : ''}`}> <div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
<div></div> <div></div>
<div class="score">{scoreText()}</div> <div class="score">{scoreText()}</div>
<div class="name">{player.name}</div> <div class="name">{player.name}</div>
@ -80,7 +82,7 @@ function Scoreboard(args) {
} }
return ( return (
<div class={`player-box bottom ${player.ready ? 'ready' : ''}`}> <div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
<div class="msg">{chat || '\u00A0'}</div> <div class="msg">{chat || '\u00A0'}</div>
<div class="score">{scoreText()}</div> <div class="score">{scoreText()}</div>
<div class="name">{player.name}</div> <div class="name">{player.name}</div>