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

move abandon btn

Browse Source
This commit is contained in:
ntr 2019-09-22 13:16:59 +10:00
parent 47135836b4
commit 15171f97e2
8 changed files with 148 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/assets/styles/controls.less
View File

@ -22,7 +22,14 @@ aside {
grid-area: controls;
display: grid;
grid-auto-rows: 1fr;
grid-template-areas:
"top"
"p0"
"p1"
"bottom";
grid-template-rows: min-content 3fr 3fr 1fr;
grid-gap: 0.5em 0;
}
@ -107,12 +114,12 @@ aside {
button {
flex: 0;
}
&:first-child {
.ready {
flex: 1;
font-size: 200%;
}
}
}
.abandon:not([disabled]) {

30
client/src/components/game.ctrl.btns.jsx
View File

@ -49,48 +49,24 @@ const addState = connect(
}
);
function InstanceCtrlBtns(args) {
function GameCtrlBtns(args) {
const {
game,
animating,
getInstanceState,
sendAbandon,
sendGameSkillClear,
sendReady,
quit,
} = args;
if (!game) return false;
const finished = game.phase === 'Finish';
const { abandonState } = this.state;
const abandonStateTrue = e => {
e.stopPropagation();
this.setState({ abandonState: true });
setTimeout(() => this.setState({ abandonState: false }), 2000);
};
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
function quitClick() {
getInstanceState();
quit();
}
const readyBtn = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
const quitBtn = <button disabled={animating} onClick={quitClick}>Back</button>;
return (
<div class="instance-ctrl-btns">
{finished ? quitBtn : readyBtn}
<button>Chat</button>
<button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
<button class={abandonClasses} disabled={animating || finished} onClick={abandonAction}>Abandon</button>
<button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
</div>
);
}
module.exports = addState(InstanceCtrlBtns);
module.exports = addState(GameCtrlBtns);

64
client/src/components/game.ctrl.btns.top.jsx Normal file
View File

@ -0,0 +1,64 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const {
ws,
game,
} = state;
function sendAbandon() {
return ws.sendInstanceAbandon(game.instance);
}
return {
game,
sendAbandon,
};
},
function receiveDispatch(dispatch) {
function leave() {
dispatch(actions.setNav('play'));
dispatch(actions.setGame(null));
dispatch(actions.setInstance(null));
}
return { leave };
}
);
function GameCtrlTopBtns(args) {
const {
game,
leave,
sendAbandon,
} = args;
const finished = game && game.phase === 'Finished';
const { abandonState } = this.state;
const abandonStateTrue = e => {
e.stopPropagation();
this.setState({ abandonState: true });
setTimeout(() => this.setState({ abandonState: false }), 2000);
};
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>;
const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
return (
<div class="instance-ctrl-btns">
{finished ? leaveBtn : abandonBtn}
</div>
);
}
module.exports = addState(GameCtrlTopBtns);

2
client/src/components/game.ctrl.jsx
View File

@ -5,6 +5,7 @@ const actions = require('../actions');
const PlayerBox = require('./player.box');
const GameCtrlButtons = require('./game.ctrl.btns');
const GameCtrlTopButtons = require('./game.ctrl.btns.top');
const addState = connect(
function receiveState(state) {
@ -61,6 +62,7 @@ function Controls(args) {
<aside>
{timer}
<div class="controls instance-ctrl">
<GameCtrlTopButtons />
<PlayerBox player={opponent}/>
<PlayerBox player={player} isPlayer={true} />
<GameCtrlButtons />

30
client/src/components/instance.ctrl.btns.jsx
View File

@ -26,16 +26,6 @@ const addState = connect(
sendReady,
};
},
function receiveDispatch(dispatch) {
function leave() {
dispatch(actions.setNav('play'));
dispatch(actions.setGame(null));
dispatch(actions.setInstance(null));
}
return { leave };
}
);
function InstanceCtrlBtns(args) {
@ -44,30 +34,12 @@ function InstanceCtrlBtns(args) {
sendAbandon,
sendReady,
leave,
} = args;
const finished = instance && instance.phase === 'Finished';
const { abandonState } = this.state;
const abandonStateTrue = e => {
e.stopPropagation();
this.setState({ abandonState: true });
setTimeout(() => this.setState({ abandonState: false }), 2000);
};
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
const ready = !finished
? <button class="ready" onClick={() => sendReady()}>Ready</button>
: <button class="ready" onClick={leave}>Leave</button>;
return (
<div class="instance-ctrl-btns">
{ready}
<button>Chat</button>
<button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>
<button class="ready" onClick={() => sendReady()}>Ready</button>
</div>
);
}

2
client/src/components/instance.ctrl.jsx
View File

@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
const actions = require('../actions');
const PlayerBox = require('./player.box');
const InstanceCtrlBtns = require('./instance.ctrl.btns');
const InstanceCtrlTopBtns = require('./instance.ctrl.top.btns');
const addState = connect(
function receiveState(state) {
@ -61,6 +62,7 @@ function Controls(args) {
<aside>
{timer}
<div class="controls instance-ctrl">
<InstanceCtrlTopBtns />
<PlayerBox player={opponent} />
<PlayerBox player={player} isPlayer={true} />
<InstanceCtrlBtns />

64
client/src/components/instance.ctrl.top.btns.jsx Normal file
View File

@ -0,0 +1,64 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const {
ws,
instance,
} = state;
function sendAbandon() {
return ws.sendInstanceAbandon(instance.id);
}
return {
instance,
sendAbandon,
};
},
function receiveDispatch(dispatch) {
function leave() {
dispatch(actions.setNav('play'));
dispatch(actions.setGame(null));
dispatch(actions.setInstance(null));
}
return { leave };
}
);
function InstanceTopBtns(args) {
const {
instance,
leave,
sendAbandon,
} = args;
const finished = instance && instance.phase === 'Finished';
const { abandonState } = this.state;
const abandonStateTrue = e => {
e.stopPropagation();
this.setState({ abandonState: true });
setTimeout(() => this.setState({ abandonState: false }), 2000);
};
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>;
const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
return (
<div class="instance-ctrl-btns">
{finished ? leaveBtn : abandonBtn}
</div>
);
}
module.exports = addState(InstanceTopBtns);

9
client/src/components/player.box.jsx
View File

@ -3,10 +3,7 @@ const preact = require('preact');
function Scoreboard(args) {
const {
isPlayer,
ready,
player,
leave,
} = args;
const scoreText = () => {
@ -32,13 +29,11 @@ function Scoreboard(args) {
if (!isPlayer) {
return (
<div class={`player-box top ${player.ready ? 'ready' : ''}`}>
<div class="ctrl">&nbsp;</div>
<div class="score">{scoreText()}</div>
<div class="name">{player.name}</div>
<div class="img avatar"
id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
style={{ 'background-image': `url(/imgs/c170c913-7bd1-4196-97d0-97f404cfbbe9.svg)` }}>
&nbsp;
</div>
<div class="msg">glhf</div>
</div>
@ -53,10 +48,6 @@ function Scoreboard(args) {
<div class="img avatar"
id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
style={{ 'background-image': `url(/imgs/a9edadda-2b44-4270-b9a7-d7bf30ae35a7.svg)` }}>
&nbsp;
</div>
<div class="ctrl">
{leave ? <button onClick={leave}>Leave</button> : null}
</div>
</div>
);