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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/assets/styles/controls.less Normal file
View File

@ -0,0 +1,35 @@
aside {
grid-area: ctrl;
display: grid;
padding: 1em;
button {
width: 100%;
font-size: 150%;
}
button.ready {
&:hover {
color: forestgreen;
border-color: forestgreen;
}
&:active, &:focus {
background: forestgreen;
color: black;
border-color: forestgreen;
}
}
}
.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
color: forestgreen;
}
.ready {
color: forestgreen;
transition-property: color, background;
transition-duration: 0.5s;
transition-timing-function: ease;
}

21
client/assets/styles/game.less
View File

@ -4,20 +4,11 @@
overflow: hidden;
display: grid;
grid-template-rows: 1fr 0.5fr 1.5fr;
grid-template-columns: 1fr 0.15fr;
grid-template-columns: 1fr;
grid-template-areas:
"opponent controls"
"target controls"
"player controls";
.controls {
margin: 1em 1em 0 0;
grid-area: controls;
button {
width: 100%;
}
}
"opponent"
"target "
"player ";
}
.game .team {
@ -430,10 +421,6 @@
grid-template-rows: 1fr 0.2fr 1.5fr;
grid-template-columns: 1fr;
.controls {
display: none;
}
}
.game .stats div {

44
client/assets/styles/instance.less
View File

@ -35,41 +35,26 @@
}
.scoreboard {
display: flex;
flex-flow: column;
align-items: center;
table {
flex: 1;
}
button {
flex: 1;
margin-bottom: 1em;
width: 75%;
font-size: 150%;
line-height: 3em;
}
}
.instance .info {
/*font-size: 75%;*/
margin-left: 1em;
margin: 3em 0 0 1em;
grid-area: info;
display: flex;
flex-flow: column;
justify-content: center;
white-space: pre-wrap;
// white-space: pre-wrap;
> *:first-child {
margin-bottom: 1em;
}
}
.instance .info h2 {
text-transform: uppercase;
}
.instance .info .combos {
margin-top: 1.5em;
}
.instance .constructs {
grid-area: constructs;
}
@ -371,8 +356,7 @@
.thresholds {
display: flex;
flex-flow: column;
text-align: center;
flex-flow: row;
}
.thresholds svg {
@ -383,13 +367,21 @@
margin: 1em 0;
}
.colour-reqs {
.spec-goal {
margin-top: 0.5em;
div {
display: flex;
flex-flow: row;
justify-content: space-around;
margin: 0 1em 1em 0;
}
.bonus {
justify-content: flex-end;
}
}
.thresholds figure svg {
margin-right: 0.25em;
height: 1.5em;
}

46
client/assets/styles/styles.less
View File

@ -77,12 +77,12 @@ figure {
#mnml {
display: grid;
grid-template-columns: minmax(min-content, 1fr) 8fr;
grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
grid-template-rows: min-content 1fr min-content;
grid-template-areas:
"hd hd"
"nav main"
"nav main";
"hd hd ctrl"
"nav main ctrl"
"nav main ctrl";
}
nav {
@ -453,6 +453,9 @@ header {
.inventory {
margin-right: 2em;
grid-area: inventory;
display: grid;
grid-template-columns: 1fr 1fr;
}
.inventory .list {
@ -476,11 +479,11 @@ header {
display: grid;
grid-template-rows: minmax(min-content, 2fr) 1fr;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"team team"
"inventory join";
"team"
"inventory";
.join {
grid-area: join;
@ -587,35 +590,6 @@ main .top button {
width: 100%;
}
.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
color: forestgreen;
}
.ready {
color: forestgreen;
transition-property: color, background;
transition-duration: 0.5s;
transition-timing-function: ease;
}
button.ready {
width: 75%;
font-size: 150%;
line-height: 3em;
&:hover {
color: forestgreen;
border-color: forestgreen;
}
&:active, &:focus {
background: forestgreen;
color: black;
border-color: forestgreen;
}
}
.timer-container {
display: flex;
flex: 1 1 100%;

4
client/assets/styles/styles.mobile.css
View File

@ -21,6 +21,10 @@
display: none;
}
aside {
display: none;
}
footer {
display: flex;
}

5
client/index.js
View File

@ -1,9 +1,10 @@
require('./assets/styles/styles.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');
require('./assets/styles/instance.mobile.css');
require('./assets/styles/game.less');
require('./assets/styles/controls.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.mobile.css');
// kick it off
require('./src/app');

33
client/src/components/controls.jsx
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);

2
client/src/components/faceoff.jsx
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>
);
}

38
client/src/components/game.ctrl.jsx Normal file
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);

1
client/src/components/game.jsx
View File

@ -101,7 +101,6 @@ function Game(props) {
{otherTeams.map(OpponentTeam)}
<Targeting />
{PlayerTeam(playerTeam, setActiveSkill)}
<Controls />
</main>
);
}

40
client/src/components/info.component.jsx
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>
);

33
client/src/components/instance.ctrl.jsx Normal file
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);

4
client/src/components/inventory.jsx
View File

@ -62,15 +62,19 @@ function Inventory(args) {
return (
<div class="inventory">
<div>
<h1>¤ {account.balance}</h1>
<div class='list'>
{shop.owned.map(useMtx)}
</div>
</div>
<div>
<h1>Shop</h1>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
</div>
</div>
);
}

3
client/src/components/main.jsx
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 (

2
client/src/components/mnml.jsx
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>;

19
client/src/components/join.jsx → client/src/components/play.ctrl.jsx
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>
<aside>
<button
class='pvp'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
</div>
</div>
<button
class='practice'
onClick={() => sendInstancePractice()}
type="submit">
Practice
</button>
</aside>
);
}

2
client/src/components/play.jsx
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>
);
}

12
client/src/components/scoreboard.jsx
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>
<table class="scoreboard">
<tbody>
{players}
</tbody>
</table>
</div>
);
}

172
client/src/components/vertical.thresholds.js Normal file
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;

2
client/src/socket.jsx
View File

@ -177,7 +177,7 @@ function createSocket(events) {
let pongTimeout;
function onPong() {
events.setPing(Date.now() - ping);
pongTimeout = setTimeout(sendPing, 1000);
// pongTimeout = setTimeout(sendPing, 1000);
}
// -------------