diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 945e0ea4..5e4dbaad 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -1,9 +1,15 @@ aside { grid-area: ctrl; display: grid; + grid-template-rows: 1fr 1fr 1fr; + grid-gap: 0.5em 0; padding: 1em; + div { + text-align: right; + } + button { width: 100%; font-size: 150%; diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 67d17fd0..40038876 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -119,7 +119,6 @@ .vbox-hdr { display: flex; - align-items: flex-end; } .vbox-hdr h3 { @@ -398,14 +397,10 @@ text-align: center; overflow: hidden; display: grid; - grid-template-rows: min-content 1fr 1.5fr min-content min-content; + grid-template-rows: 1fr 1.5fr; grid-template-areas: - "oppname" "opponent" - "player" - "playername" - "ready"; - + "player"; h1 { text-align: center; diff --git a/client/src/components/controls.jsx b/client/src/components/controls.jsx index 2c642ed8..b61dd7e0 100644 --- a/client/src/components/controls.jsx +++ b/client/src/components/controls.jsx @@ -1,8 +1,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const InstanceCtrl = require('./instance.ctrl'); -const GameCtrl = require('./game.ctrl'); +const PlayerCtrl = require('./player.ctrl'); const PlayCtrl = require('./play.ctrl'); const addState = connect( @@ -30,8 +29,7 @@ function Controls(args) { sendGameReady, } = args; - if (game) return ; - if (instance) return ; + if (game || instance) return ; if (nav === 'play' || !nav) return return false; diff --git a/client/src/components/faceoff.jsx b/client/src/components/faceoff.jsx index a2a1b5a9..f7634366 100644 --- a/client/src/components/faceoff.jsx +++ b/client/src/components/faceoff.jsx @@ -78,10 +78,8 @@ function Faceoff(props) { return (
-

{otherTeam.name}

{OpponentTeam(otherTeam)} {PlayerTeam(playerTeam)} -

{playerTeam.name}

); } diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx deleted file mode 100644 index 7b9e2bfd..00000000 --- a/client/src/components/game.ctrl.jsx +++ /dev/null @@ -1,39 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); - -const addState = connect( - function receiveState(state) { - const { - ws, - animating, - game, - } = state; - - function sendGameReady() { - document.activeElement.blur() - return ws.sendGameReady(game.id); - } - - return { - game, - animating, - sendGameReady, - }; - }, -); - -function Controls(args) { - const { - game, - animating, - sendGameReady - } = args; - - return ( - - ); -} - -module.exports = addState(Controls); diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx index 10954d87..eddde654 100644 --- a/client/src/components/game.jsx +++ b/client/src/components/game.jsx @@ -5,7 +5,6 @@ const actions = require('../actions'); const GameConstruct = require('./game.construct'); const Targeting = require('./targeting.arrows'); -const Controls = require('./controls'); const addState = connect( function receiveState(state) { diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index ec023e3f..31fc35c6 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -5,14 +5,11 @@ const { INFO } = require('./../constants'); const { convertItem } = require('../utils'); const shapes = require('./shapes'); -const ScoreBoard = require('./scoreboard'); - function InfoComponent(args) { const { itemInfo, combiner, player, - instance, info, } = args; @@ -166,13 +163,8 @@ function InfoComponent(args) { ); } - const scoreboard = instance.phase === 'Lobby' || info - ? null - : ; - return (
- {scoreboard}
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 03c626ea..12f78532 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -5,7 +5,6 @@ const Vbox = require('./vbox.component'); const InfoContainer = require('./info.container'); const InstanceConstructsContainer = require('./instance.constructs'); // const EquipmentContainer = require('./instance.equip'); -const ScoreBoard = require('./scoreboard'); const Faceoff = require('./faceoff'); const actions = require('../actions'); diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx deleted file mode 100644 index 9d7c3329..00000000 --- a/client/src/components/instance.ctrl.jsx +++ /dev/null @@ -1,33 +0,0 @@ -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 ( - - ); -} - -module.exports = addState(Controls); diff --git a/client/src/components/player.ctrl.jsx b/client/src/components/player.ctrl.jsx new file mode 100644 index 00000000..d8b72cdb --- /dev/null +++ b/client/src/components/player.ctrl.jsx @@ -0,0 +1,86 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); + +// dunno if this is a good idea +// bashing together instance and game to save having two panels + +const addState = connect( + function receiveState(state) { + const { + ws, + instance, + game, + account, + animating, + } = state; + + function sendReady() { + document.activeElement.blur() + if (game) return ws.sendGameReady(game.id); + if (instance) return ws.sendInstanceReady(instance.id); + return false; + } + + const gameObject = game || instance; + + return { + gameObject, + sendReady, + account, + animating, + }; + }, +); + +function scoreboard(gameObject, player, isOpponent) { + const text = gameObject.phase === 'Finished' + ? player.wins > gameObject.rounds / 2 && 'Winner' + : ''; + + const classes =`scoreboard ${player.ready ? 'ready' : ''}`; + + const body = isOpponent + ? ( + + {player.name} + {player.wins} / {player.losses} + {player.ready ? 'ready' : ''} + + ) : ( + + {player.ready ? 'ready' : ''} + {player.wins} / {player.losses} + {player.name} + + ); + + return ( + + {body} +
+ ); +} + +function Controls(args) { + const { + account, + gameObject, + animating, + sendReady, + } = args; + + if (!gameObject) return false; + + const opponent = gameObject.players.find(t => t.id !== account.id); + const player = gameObject.players.find(t => t.id === account.id); + + return ( + + ); +} + +module.exports = addState(Controls); diff --git a/client/src/events.jsx b/client/src/events.jsx index 07c96437..da487ef8 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -15,7 +15,7 @@ function registerEvents(store) { function setTeam(team) { store.dispatch(actions.setTeam(team)); - setNav('list'); + setNav('play'); } function setConstructList(constructs) {