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 {
|
||||
&.blue {
|
||||
border-color: @blue;
|
||||
|
||||
@ -438,9 +438,35 @@
|
||||
|
||||
.faceoff-text {
|
||||
grid-area: text;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
height: auto;
|
||||
font-size: 200%;
|
||||
text-transform: uppercase;
|
||||
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*/
|
||||
|
||||
@ -81,26 +81,19 @@ function Faceoff(props) {
|
||||
}
|
||||
function faceoffText() {
|
||||
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 (
|
||||
<div class="faceoff-text">
|
||||
<h1> {otherTeam.name} </h1>
|
||||
<h1> vs </h1>
|
||||
<h1> {playerTeam.name} </h1>
|
||||
{fight}
|
||||
<div class="faceoff-text">
|
||||
<div class="opponent-text"> {otherTeam.name} </div>
|
||||
<div class="vs"> vs </div>
|
||||
<div class="player-text"> {playerTeam.name} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const winner = instance.winner === playerTeam.id ? playerTeam.name : otherTeam.name;
|
||||
const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
|
||||
return (
|
||||
<div class="faceoff-text">
|
||||
<h1> {winner} wins</h1>
|
||||
<div class="faceoff-text winner">
|
||||
<div> {winner.name} </div>
|
||||
<div> win </div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@ -62,9 +62,9 @@ class Instance extends Component {
|
||||
|
||||
if (!instance) return false;
|
||||
|
||||
if (instance.phase !== 'InProgress') {
|
||||
// if (instance.phase !== 'InProgress') {
|
||||
return <Faceoff />;
|
||||
}
|
||||
// }
|
||||
|
||||
function instanceClick(e) {
|
||||
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