ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix info

Browse Source
This commit is contained in:
ntr
2019-08-09 14:34:54 +10:00
parent 11ac600300
commit 64101786cf
20 changed files with 400 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/controls.jsx
+20 -13
View File
@@ -1,33 +1,40 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const InstanceCtrl = require('./instance.ctrl');
const GameCtrl = require('./game.ctrl');
const PlayCtrl = require('./play.ctrl');
const addState = connect(
function receiveState(state) {
const {
ws,
game
game,
instance,
nav,
} = state;
function sendGameReady() {
document.activeElement.blur()
return ws.sendGameReady(game.id);
}
return { game, sendGameReady };
return {
game,
instance,
nav,
};
},
);
function Controls(args) {
const {
game,
sendGameReady
instance,
nav,
sendGameReady,
} = args;
return (
<div class="controls">
<button class="ready" onClick={() => sendGameReady()}>Ready</button>
</div>
);
if (instance) return <InstanceCtrl />;
if (game) return <GameCtrl />;
if (nav === 'play' || !nav) return <PlayCtrl />
return false;
}
module.exports = addState(Controls);
client/src/components/faceoff.jsx
+1 -1
View File
@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
const actions = require('../actions');
const { ConstructAvatar } = require('./construct');
const Controls = require('./controls');
const addState = connect(
function receiveState(state) {
@@ -81,7 +82,6 @@ function Faceoff(props) {
{OpponentTeam(otherTeam)}
{PlayerTeam(playerTeam)}
<h1 class={`player-name ${playerTeam.ready ? 'ready' : ''}`}>{playerTeam.name}</h1>
<button class="ready" onClick={() => sendInstanceReady()} >Ready</button>
</main>
);
}
client/src/components/game.ctrl.jsx
+38
View File
@@ -0,0 +1,38 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const InstanceCtrl = require('./instance.ctrl');
const addState = connect(
function receiveState(state) {
const {
ws,
game,
} = state;
function sendGameReady() {
document.activeElement.blur()
return ws.sendGameReady(game.id);
}
return {
game,
sendGameReady,
};
},
);
function Controls(args) {
const {
game,
sendGameReady
} = args;
return (
<aside class="controls">
<button class="ready" onClick={() => sendGameReady()}>Ready</button>
</aside>
);
}
module.exports = addState(Controls);
client/src/components/game.jsx
-1
View File
@@ -101,7 +101,6 @@ function Game(props) {
{otherTeams.map(OpponentTeam)}
<Targeting />
{PlayerTeam(playerTeam, setActiveSkill)}
<Controls />
</main>
);
}
client/src/components/info.component.jsx
+26 -14
View File
@@ -9,13 +9,16 @@ const ScoreBoard = require('./scoreboard');
function InfoComponent(args) {
const {
info,
itemInfo,
combiner,
player,
instance,
info,
} = args;
// args.info = 'Life';
// const { info } = args;
function Info() {
if (!info) return false;
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
@@ -47,7 +50,12 @@ function InfoComponent(args) {
const thresholds = colourReqs.map((bonus, i) => {
const colours = ['red', 'green', 'blue'];
const colourGoals = colours.map(c => {
const colourGoals = {
red: [],
green: [],
blue: [],
};
colours.forEach(c => {
const colourReq = bonus.req[c];
if (colourReqs === 0) return false;
@@ -62,18 +70,16 @@ function InfoComponent(args) {
? 'unmet'
: '';
return (
colourGoals[c].push(
<figure key={j} alt={c.colour} class={reqClass} >
{shapes.square([c])}
{shapes.vboxColour(c)}
</figure>
);
return true;
});
return (
<div key={c}>
{dots}
</div>
);
return dots;
});
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
@@ -82,14 +88,20 @@ function InfoComponent(args) {
? ''
: 'unmet';
const goals = colours.map((c, j) => {
if (colourGoals[c].length) {
return (
<div key={j}>{colourGoals[c]}</div>
);
}
return false;
});
return (
<div key={i} class="spec-goal">
<div class="colour-reqs">
{colourGoals}
</div>
<div class={reqClass}>
{goals}
<div class={`${reqClass} bonus`} >
+ {bonus.bonus}
<hr />
</div>
</div>
);
client/src/components/instance.ctrl.jsx
+33
View File
@@ -0,0 +1,33 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const addState = connect(
function receiveState(state) {
const {
ws,
instance
} = state;
function sendInstanceReady() {
document.activeElement.blur()
return ws.sendInstanceReady(instance.id);
}
return { instance, sendInstanceReady };
},
);
function Controls(args) {
const {
instance,
sendInstanceReady
} = args;
return (
<aside class="controls">
<button class="ready" onClick={() => sendInstanceReady()}>Ready</button>
</aside>
);
}
module.exports = addState(Controls);
client/src/components/inventory.jsx
+10 -6
View File
@@ -62,13 +62,17 @@ function Inventory(args) {
return (
<div class="inventory">
<h1>¤ {account.balance}</h1>
<div class='list'>
{shop.owned.map(useMtx)}
<div>
<h1>¤ {account.balance}</h1>
<div class='list'>
{shop.owned.map(useMtx)}
</div>
</div>
<h1>Shop</h1>
<div class='list'>
{shop.available.map(availableMtx)}
<div>
<h1>Shop</h1>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
</div>
</div>
);
client/src/components/main.jsx
+1 -2
View File
@@ -27,8 +27,6 @@ function Main(props) {
return <Login />;
}
if (nav === 'play') return <Play />;
if (game) {
return <Game />;
}
@@ -37,6 +35,7 @@ function Main(props) {
return <Instance />;
}
if (nav === 'play') return <Play />;
if (nav === 'team') return <Team />;
return (
client/src/components/mnml.jsx
+2
View File
@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
// const Header = require('./header');
const Main = require('./main');
const Nav = require('./nav');
const Controls = require('./controls');
const Footer = require('./footer');
const addState = connect(
@@ -14,6 +15,7 @@ const Mnml = ({ showNav }) =>
<div id="mnml" class={showNav ? 'nav-visible' : ''}>
<Nav />
<Main />
<Controls />
<Footer />
</div>;
client/src/components/join.jsx → client/src/components/play.ctrl.jsx
+14 -17
View File
@@ -27,23 +27,20 @@ function JoinButtons(args) {
} = args;
return (
<div class="join">
<h1>Join Game</h1>
<div class="buttons">
<button
class='practice'
onClick={() => sendInstancePractice()}
type="submit">
Practice vs CPU
</button>
<button
class='pvp'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
</div>
</div>
<aside>
<button
class='pvp'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
<button
class='practice'
onClick={() => sendInstancePractice()}
type="submit">
Practice
</button>
</aside>
);
}
client/src/components/play.jsx
-2
View File
@@ -4,7 +4,6 @@ const preact = require('preact');
const { stringSort } = require('./../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('./../actions');
const Join = require('./join');
const Inventory = require('./inventory');
const idSort = stringSort('id');
@@ -113,7 +112,6 @@ function Play(args) {
{constructPanels}
</div>
<Inventory />
<Join />
</main>
);
}
client/src/components/scoreboard.jsx
+6 -14
View File
@@ -8,18 +8,13 @@ const addState = connect(
instance
} = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
}
return { instance, sendInstanceReady };
return { instance };
},
);
function ScoreBoard(args) {
const {
instance,
sendInstanceReady
} = args;
const players = instance.players.map((p, i) => {
@@ -46,14 +41,11 @@ function ScoreBoard(args) {
});
return (
<div class="scoreboard">
<button class="ready" onClick={() => sendInstanceReady()}>Ready</button>
<table>
<tbody>
{players}
</tbody>
</table>
</div>
<table class="scoreboard">
<tbody>
{players}
</tbody>
</table>
);
}
client/src/components/vertical.thresholds.js
+172
View File
@@ -0,0 +1,172 @@
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;