wip team select back in
This commit is contained in:
parent
a3a2cf9852
commit
61fa990a15
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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');
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)} >❌</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>
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user