wip team select back in

This commit is contained in:
Mashy 2019-07-26 14:00:01 +10:00
parent a3a2cf9852
commit 61fa990a15
7 changed files with 30 additions and 41 deletions

View File

@ -426,6 +426,10 @@ header {
justify-content: center; justify-content: center;
} }
.spawn-btn.menu-construct.selected {
color: whitesmoke;
}
.spawn-btn.menu-construct:hover { .spawn-btn.menu-construct:hover {
border: 1px solid whitesmoke; border: 1px solid whitesmoke;
} }
@ -437,7 +441,7 @@ header {
} }
.spawn-btn button { .spawn-btn button {
flex: 1; flex: 1 1 100%;
margin: 0.5em 1em; margin: 0.5em 1em;
padding: 0 0.5em; padding: 0 0.5em;
} }

View File

@ -4,6 +4,7 @@ const { Elements, injectStripe } = require('react-stripe-elements');
const { saw } = require('./shapes'); const { saw } = require('./shapes');
const { postData } = require('./../utils'); const { postData } = require('./../utils');
const actions = require('../actions');
function pingColour(ping) { function pingColour(ping) {
if (ping < 100) return 'forestgreen'; if (ping < 100) return 'forestgreen';
@ -67,6 +68,7 @@ const addState = connect(
ping, ping,
} = state; } = state;
function logout() { function logout() {
postData('/logout').then(() => window.location.reload(true)); postData('/logout').then(() => window.location.reload(true));
} }
@ -77,6 +79,14 @@ const addState = connect(
logout, logout,
}; };
}, },
function receiveDispatch(dispatch) {
function selectConstructs() {
return dispatch(actions.setNav('team'));
}
return {
selectConstructs,
};
}
); );
@ -85,6 +95,7 @@ function AccountStatus(args) {
account, account,
ping, ping,
logout, logout,
selectConstructs,
} = args; } = args;
if (!account) return null; if (!account) return null;
@ -100,6 +111,7 @@ function AccountStatus(args) {
<Elements> <Elements>
<StripeBitsBtn account={account} /> <StripeBitsBtn account={account} />
</Elements> </Elements>
<button onClick={() => selectConstructs()}>Constructs </button>
<button onClick={() => logout()}>Logout</button> <button onClick={() => logout()}>Logout</button>
</div> </div>
); );

View File

@ -4,7 +4,7 @@ const { connect } = require('preact-redux');
const Vbox = require('./vbox.component'); const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container'); const InfoContainer = require('./info.container');
const InstanceConstructsContainer = require('./instance.constructs'); const InstanceConstructsContainer = require('./instance.constructs');
const EquipmentContainer = require('./instance.equip'); // const EquipmentContainer = require('./instance.equip');
const ScoreBoard = require('./scoreboard'); const ScoreBoard = require('./scoreboard');
const actions = require('../actions'); const actions = require('../actions');

View File

@ -24,24 +24,18 @@ class SpawnButton extends Component {
} }
enable() { enable() {
this.setState({ enabled: true }); this.setState({ enabled: !this.state.enabled });
} }
render() { render() {
const selected = this.state.enabled ? 'selected' : '';
return ( return (
<div <div
key={this.props.i} key={this.props.i}
class="menu-construct spawn-btn" class={`menu-construct spawn-btn ${selected}`}
onClick={() => this.enable()} > onClick={() => this.enable()} >
<h2>+</h2> <h1>+</h1>
<input <br />
class="login-input"
type="text"
disabled={!this.state.enabled}
value={this.state.value}
placeholder="name"
onInput={this.handleInput}
/>
<button <button
class="login-btn" class="login-btn"
disabled={!this.state.enabled} disabled={!this.state.enabled}
@ -49,6 +43,7 @@ class SpawnButton extends Component {
type="submit"> type="submit">
spawn spawn
</button> </button>
<h1>¤50</h1>
</div> </div>
); );
} }

View File

@ -12,22 +12,16 @@ const idSort = stringSort('id');
const addState = connect( const addState = connect(
function receiveState(state) { function receiveState(state) {
const { ws, constructs, team, constructDeleteId } = state; const { ws, constructs, team } = state;
function sendConstructSpawn(name) { function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name); return ws.sendConstructSpawn(name);
} }
function sendConstructDelete(id) {
return ws.sendConstructDelete(id);
}
return { return {
constructs, constructs,
constructDeleteId,
team, team,
sendConstructSpawn, sendConstructSpawn,
sendConstructDelete,
}; };
}, },
@ -37,13 +31,8 @@ const addState = connect(
dispatch(actions.setTeam(constructIds)); dispatch(actions.setTeam(constructIds));
} }
function setDeleteId(id) {
dispatch(actions.setConstructDeleteId(id));
}
return { return {
setTeam, setTeam,
setDeleteId,
}; };
} }
); );
@ -52,13 +41,8 @@ function Team(args) {
const { const {
constructs, constructs,
team, team,
constructDeleteId,
setTeam, setTeam,
sendConstructSpawn, sendConstructSpawn,
sendConstructDelete,
setDeleteId,
} = args; } = args;
if (!constructs) return <div></div>; if (!constructs) return <div></div>;
@ -86,11 +70,6 @@ function Team(args) {
const borderColour = selected ? COLOURS[colour] : '#000000'; const borderColour = selected ? COLOURS[colour] : '#000000';
function deleteClick(e) {
e.stopPropagation();
if (constructDeleteId === construct.id) return sendConstructDelete(construct.id);
return setDeleteId(construct.id);
}
// <button disabled={true} ></button> // <button disabled={true} ></button>
return ( return (
@ -101,9 +80,8 @@ function Team(args) {
onClick={() => selectConstruct(construct.id)} > onClick={() => selectConstruct(construct.id)} >
<div class="controls"> <div class="controls">
<h2> <h2>
{constructDeleteId === construct.id ? 'Confirm delete...' : construct.name} {construct.name}
</h2> </h2>
<button onClick={e => deleteClick(e)} >&#10060;</button>
</div> </div>
<ConstructAvatar construct={construct} /> <ConstructAvatar construct={construct} />
</div> </div>
@ -113,10 +91,10 @@ function Team(args) {
const spawnButtonsNum = (3 - constructs.length % 3); const spawnButtonsNum = (3 - constructs.length % 3);
const spawnButtons = range(spawnButtonsNum) const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />); .map(i => <SpawnButton key={constructs.length + i} spawn={() => sendConstructSpawn()} />);
return ( return (
<main class="team" onClick={() => setDeleteId(null)}> <main class="team">
{constructPanels} {constructPanels}
{spawnButtons} {spawnButtons}
</main> </main>

View File

@ -242,7 +242,7 @@ function Vbox(args) {
class='vbox-btn' class='vbox-btn'
onMouseOver={e => hoverInfo(e, 'refill')} onMouseOver={e => hoverInfo(e, 'refill')}
onClick={() => sendVboxDiscard()}> onClick={() => sendVboxDiscard()}>
refill - 5b refill - 2b
</button> </button>
</div> </div>
); );

View File

@ -12,7 +12,7 @@ use vbox::{Vbox};
use item::{Item, ItemEffect}; use item::{Item, ItemEffect};
use effect::{Effect}; use effect::{Effect};
const DISCARD_COST: u16 = 5; const DISCARD_COST: u16 = 2;
#[derive(Debug,Clone,Serialize,Deserialize)] #[derive(Debug,Clone,Serialize,Deserialize)]
pub struct Player { pub struct Player {