remove old scoreboard and fadein faceoff text
This commit is contained in:
ntr
parent
088098daa4
commit
0aed7cfe73
@ -131,6 +131,15 @@ svg {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes co-text {
|
||||||
|
from {
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
color: @gray-exists;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&.blue {
|
&.blue {
|
||||||
border-color: @blue;
|
border-color: @blue;
|
||||||
|
|||||||
@ -438,9 +438,35 @@
|
|||||||
|
|
||||||
.faceoff-text {
|
.faceoff-text {
|
||||||
grid-area: text;
|
grid-area: text;
|
||||||
text-align: center;
|
font-size: 200%;
|
||||||
align-self: center;
|
text-transform: uppercase;
|
||||||
height: auto;
|
letter-spacing: 1em;
|
||||||
|
|
||||||
|
color: @black;
|
||||||
|
animation: faceoff 4s linear 0s 2 alternate;
|
||||||
|
|
||||||
|
&.winner {
|
||||||
|
color: @yellow;
|
||||||
|
animation: win 2s linear 0s 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes faceoff {
|
||||||
|
from {
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes win {
|
||||||
|
from {
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
color: @yellow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile Nav*/
|
/* Mobile Nav*/
|
||||||
|
|||||||
@ -81,26 +81,19 @@ function Faceoff(props) {
|
|||||||
}
|
}
|
||||||
function faceoffText() {
|
function faceoffText() {
|
||||||
if (!instance.winner) {
|
if (!instance.winner) {
|
||||||
const zero = Date.parse(instance.phase_start);
|
|
||||||
const now = Date.now();
|
|
||||||
const end = Date.parse(instance.phase_end);
|
|
||||||
const timerPct = instance.phase_end
|
|
||||||
? ((now - zero) / (end - zero) * 100)
|
|
||||||
: 100;
|
|
||||||
const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
|
|
||||||
return (
|
return (
|
||||||
<div class="faceoff-text">
|
<div class="faceoff-text">
|
||||||
<h1> {otherTeam.name} </h1>
|
<div class="opponent-text"> {otherTeam.name} </div>
|
||||||
<h1> vs </h1>
|
<div class="vs"> vs </div>
|
||||||
<h1> {playerTeam.name} </h1>
|
<div class="player-text"> {playerTeam.name} </div>
|
||||||
{fight}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const winner = instance.winner === playerTeam.id ? playerTeam.name : otherTeam.name;
|
const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
|
||||||
return (
|
return (
|
||||||
<div class="faceoff-text">
|
<div class="faceoff-text winner">
|
||||||
<h1> {winner} wins</h1>
|
<div> {winner.name} </div>
|
||||||
|
<div> win </div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -62,9 +62,9 @@ class Instance extends Component {
|
|||||||
|
|
||||||
if (!instance) return false;
|
if (!instance) return false;
|
||||||
|
|
||||||
if (instance.phase !== 'InProgress') {
|
// if (instance.phase !== 'InProgress') {
|
||||||
return <Faceoff />;
|
return <Faceoff />;
|
||||||
}
|
// }
|
||||||
|
|
||||||
function instanceClick(e) {
|
function instanceClick(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const {
|
|
||||||
ws,
|
|
||||||
instance
|
|
||||||
} = state;
|
|
||||||
|
|
||||||
return { instance };
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
function ScoreBoard(args) {
|
|
||||||
const {
|
|
||||||
instance,
|
|
||||||
} = args;
|
|
||||||
|
|
||||||
const players = instance.players.map((p, i) => {
|
|
||||||
if (instance.phase === 'Finished') {
|
|
||||||
const winner = p.wins > instance.max_rounds / 2;
|
|
||||||
return <tr key={i}
|
|
||||||
class={p.winner ? 'ready' : ''}>
|
|
||||||
<td>{p.name}</td>
|
|
||||||
<td>{p.wins} / {p.losses}</td>
|
|
||||||
<td>{winner ? 'winner' : ''}</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
|
|
||||||
const text = instance.phase === 'Finished'
|
|
||||||
? p.wins > instance.rounds / 2 && 'Winner'
|
|
||||||
: '';
|
|
||||||
|
|
||||||
return <tr key={i}
|
|
||||||
class={p.ready ? 'ready' : ''}>
|
|
||||||
<td>{p.name}</td>
|
|
||||||
<td>{p.wins} / {p.losses}</td>
|
|
||||||
<td>{p.ready ? 'ready' : ''}</td>
|
|
||||||
</tr>
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<table class="scoreboard">
|
|
||||||
<tbody>
|
|
||||||
{players}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = addState(ScoreBoard);
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const range = require('lodash/range');
|
|
||||||
|
|
||||||
const { INFO } = require('./../constants');
|
|
||||||
const { convertItem } = require('../utils');
|
|
||||||
const shapes = require('./shapes');
|
|
||||||
|
|
||||||
const ScoreBoard = require('./scoreboard');
|
|
||||||
|
|
||||||
function InfoComponent(args) {
|
|
||||||
const {
|
|
||||||
itemInfo,
|
|
||||||
combiner,
|
|
||||||
player,
|
|
||||||
instance,
|
|
||||||
} = args;
|
|
||||||
|
|
||||||
args.info = 'PowerRG';
|
|
||||||
const { info } = args;
|
|
||||||
|
|
||||||
function Info() {
|
|
||||||
if (!info) return false;
|
|
||||||
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
|
|
||||||
if (!fullInfo) return false;
|
|
||||||
const isSkill = fullInfo.skill;
|
|
||||||
const isSpec = fullInfo.spec;
|
|
||||||
|
|
||||||
if (isSkill) {
|
|
||||||
return (
|
|
||||||
<div class="info-skill">
|
|
||||||
<h2>{fullInfo.item}</h2>
|
|
||||||
<div>{fullInfo.description}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isSpec) {
|
|
||||||
let red = 0;
|
|
||||||
let blue = 0;
|
|
||||||
let green = 0;
|
|
||||||
player.constructs.forEach(construct => {
|
|
||||||
red += construct.colours.red;
|
|
||||||
blue += construct.colours.blue;
|
|
||||||
green += construct.colours.green;
|
|
||||||
});
|
|
||||||
const teamColours = { red, blue, green };
|
|
||||||
|
|
||||||
const colourReqs = fullInfo.values.bonuses || [];
|
|
||||||
|
|
||||||
const thresholds = colourReqs.map((bonus, i) => {
|
|
||||||
const colours = ['red', 'green', 'blue'];
|
|
||||||
const colourGoals = colours.map(c => {
|
|
||||||
const colourReq = bonus.req[c];
|
|
||||||
if (colourReqs === 0) return false;
|
|
||||||
|
|
||||||
const start = i === 0
|
|
||||||
? 0
|
|
||||||
: colourReqs[i - 1].req[c];
|
|
||||||
|
|
||||||
const dots = range(start, colourReq).map(j => {
|
|
||||||
const unmet = teamColours[c] < j + 1;
|
|
||||||
|
|
||||||
const reqClass = unmet
|
|
||||||
? 'unmet'
|
|
||||||
: '';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<figure key={j} alt={c.colour} class={reqClass} >
|
|
||||||
{shapes.square([c])}
|
|
||||||
</figure>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={c}>
|
|
||||||
{dots}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
|
|
||||||
|
|
||||||
const reqClass = reqsMet
|
|
||||||
? ''
|
|
||||||
: 'unmet';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={i} class="spec-goal">
|
|
||||||
<div class="colour-reqs">
|
|
||||||
{colourGoals}
|
|
||||||
</div>
|
|
||||||
<div class={reqClass}>
|
|
||||||
+ {bonus.bonus}
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="info-spec">
|
|
||||||
<h2>{info}</h2>
|
|
||||||
<div>{fullInfo.description}</div>
|
|
||||||
<div class="thresholds">
|
|
||||||
{thresholds}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="info-item">
|
|
||||||
<h2>{fullInfo.item}</h2>
|
|
||||||
<div>{fullInfo.description}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Combos() {
|
|
||||||
if (!player) return false;
|
|
||||||
|
|
||||||
// show recipe for what's in combiner
|
|
||||||
if (combiner.some(u => u !== null)) {
|
|
||||||
const filteredCombos = itemInfo.combos
|
|
||||||
.filter(combo => combiner.every(u => u === null
|
|
||||||
|| combo.components.includes(player.vbox.bound[u])));
|
|
||||||
if (filteredCombos.length > 6) return false;
|
|
||||||
return (
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
{filteredCombos.map((c, i) =>
|
|
||||||
<tr key={i} >
|
|
||||||
<td class="highlight" >{convertItem(c.item)}</td>
|
|
||||||
{c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!info) return false;
|
|
||||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
|
|
||||||
if (vboxCombos.length > 6) return false;
|
|
||||||
return (
|
|
||||||
<table class="combos">
|
|
||||||
<tbody>
|
|
||||||
{vboxCombos.map((c, i) =>
|
|
||||||
<tr key={i} >
|
|
||||||
<td class="highlight" >{convertItem(c.item)}</td>
|
|
||||||
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const scoreboard = instance.phase === 'Lobby' || info
|
|
||||||
? null
|
|
||||||
: <ScoreBoard />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class='info' >
|
|
||||||
{scoreboard}
|
|
||||||
<Info />
|
|
||||||
<Combos />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = InfoComponent;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user