remove instance list
This commit is contained in:
ntr
@@ -1,46 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
const { Component } = require('preact');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, team, account } = state;
|
||||
|
||||
function sendInstanceNew(sConstructs, pve) {
|
||||
if (sConstructs.length) {
|
||||
return ws.sendInstanceNew(sConstructs, account.name, pve);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
sendInstanceNew,
|
||||
team,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
function CreateButtons(args) {
|
||||
const { team, sendInstanceNew } = args;
|
||||
const disabled = !team.every(c => c);
|
||||
|
||||
const classes = `create-form ${disabled ? 'disabled' : ''}`;
|
||||
return (
|
||||
<div class={classes}>
|
||||
<button
|
||||
onClick={() => sendInstanceNew(team, true)}
|
||||
disabled={disabled}
|
||||
type="submit">
|
||||
Practice vs CPU
|
||||
</button>
|
||||
<button
|
||||
onClick={() => sendInstanceNew(team, false)}
|
||||
disabled={disabled}
|
||||
type="submit">
|
||||
PVP
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(CreateButtons);
|
||||
@@ -1,91 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
const { Component } = require('preact');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, team } = state;
|
||||
|
||||
function sendInstanceNew(sConstructs, name, pve) {
|
||||
if (sConstructs.length) {
|
||||
return ws.sendInstanceNew(sConstructs, name, pve);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
sendInstanceNew,
|
||||
team,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
class InstanceCreateForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = { pve: false, name: '' };
|
||||
|
||||
const { sendInstanceNew } = props;
|
||||
|
||||
this.sendInstanceNew = sendInstanceNew.bind(this);
|
||||
|
||||
this.nameInput = this.nameInput.bind(this);
|
||||
this.pveChange = this.pveChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
pveChange() {
|
||||
this.setState({ pve: !this.state.pve });
|
||||
}
|
||||
|
||||
nameInput(event) {
|
||||
this.setState({ name: event.target.value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.sendInstanceNew(this.props.team, this.state.name, this.state.pve);
|
||||
this.setState({ name: '', pve: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
const disabled = !this.props.team.every(c => c);
|
||||
|
||||
const classes = `create-form ${disabled ? 'disabled' : ''}`;
|
||||
return (
|
||||
<div class={classes}>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>New Instance</legend>
|
||||
<label>Instance Name</label>
|
||||
<input
|
||||
class="login-input"
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
value={this.state.name}
|
||||
placeholder="game name"
|
||||
onInput={this.nameInput}
|
||||
/>
|
||||
<label htmlFor="pveSelect">Practice Mode - vs CPU, no Time Control</label>
|
||||
<input id="pveSelect"
|
||||
type="checkbox"
|
||||
disabled={disabled}
|
||||
checked={this.state.pve}
|
||||
onChange={this.pveChange}
|
||||
>
|
||||
</input>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button
|
||||
onClick={this.handleSubmit}
|
||||
disabled={disabled}
|
||||
type="submit">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(InstanceCreateForm);
|
||||
@@ -0,0 +1,46 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws } = state;
|
||||
|
||||
function sendInstancePractice() {
|
||||
ws.sendInstancePractice();
|
||||
}
|
||||
|
||||
function sendInstanceQueue() {
|
||||
ws.sendInstanceQueue();
|
||||
}
|
||||
|
||||
return {
|
||||
sendInstanceQueue,
|
||||
sendInstancePractice,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
function CreateButtons(args) {
|
||||
const {
|
||||
sendInstanceQueue,
|
||||
sendInstancePractice,
|
||||
} = args;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Join Game</h1>
|
||||
<button
|
||||
onClick={() => sendInstancePractice()}
|
||||
type="submit">
|
||||
Practice vs CPU
|
||||
</button>
|
||||
<button
|
||||
onClick={() => sendInstanceQueue()}
|
||||
type="submit">
|
||||
PVP
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(CreateButtons);
|
||||
@@ -4,7 +4,7 @@ const preact = require('preact');
|
||||
const { stringSort } = require('./../utils');
|
||||
const { ConstructAvatar } = require('./construct');
|
||||
const actions = require('./../actions');
|
||||
const InstanceCreateForm = require('./instance.create.buttons');
|
||||
const JoinButtons = require('./join.buttons');
|
||||
const Inventory = require('./inventory');
|
||||
|
||||
const idSort = stringSort('id');
|
||||
@@ -16,19 +16,11 @@ const addState = connect(
|
||||
constructs,
|
||||
constructRename,
|
||||
team,
|
||||
instanceList,
|
||||
mtxActive,
|
||||
} = state;
|
||||
|
||||
function sendInstanceJoin(instance) {
|
||||
if (team.length) {
|
||||
return ws.sendInstanceJoin(instance.id, team);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function sendInstanceList() {
|
||||
return ws.sendInstanceList();
|
||||
function sendInstancePractice() {
|
||||
return ws.sendInstancePractice();
|
||||
}
|
||||
|
||||
function sendConstructAvatarReroll(id) {
|
||||
@@ -42,13 +34,11 @@ const addState = connect(
|
||||
|
||||
return {
|
||||
constructs,
|
||||
instanceList,
|
||||
mtxActive,
|
||||
constructRename,
|
||||
team,
|
||||
sendConstructRename,
|
||||
sendInstanceJoin,
|
||||
sendInstanceList,
|
||||
sendInstancePractice,
|
||||
sendConstructAvatarReroll,
|
||||
};
|
||||
},
|
||||
@@ -79,51 +69,10 @@ function List(args) {
|
||||
clearMtxRename,
|
||||
setConstructRename,
|
||||
sendConstructRename,
|
||||
sendInstanceJoin,
|
||||
sendInstanceList,
|
||||
instanceList,
|
||||
mtxActive,
|
||||
sendConstructAvatarReroll,
|
||||
} = args;
|
||||
|
||||
function listElements() {
|
||||
if (!instanceList) return <div>...</div>;
|
||||
|
||||
const instancePanels = instanceList.map(instance => {
|
||||
function instanceClick() {
|
||||
return sendInstanceJoin(instance);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr key={instance.id}
|
||||
class="right"
|
||||
onClick={instanceClick} >
|
||||
<td>{instance.name}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="menu-instance-list" >
|
||||
<h1>Join Game</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>opponent name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{instancePanels}
|
||||
<tr class="right" onClick={() => sendInstanceList()}>
|
||||
<td colSpan={3} >↺</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<InstanceCreateForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const constructPanels = constructs
|
||||
.filter(c => team.includes(c.id))
|
||||
.sort(idSort)
|
||||
@@ -167,7 +116,7 @@ function List(args) {
|
||||
{constructPanels}
|
||||
</div>
|
||||
<Inventory />
|
||||
{listElements()}
|
||||
<JoinButtons />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,10 +20,6 @@ const addState = connect(
|
||||
return ws.sendInstanceState(instance.id);
|
||||
}
|
||||
|
||||
function sendInstanceList() {
|
||||
return ws.sendInstanceList();
|
||||
}
|
||||
|
||||
return {
|
||||
account,
|
||||
instances,
|
||||
@@ -31,18 +27,9 @@ const addState = connect(
|
||||
game,
|
||||
ping,
|
||||
sendInstanceState,
|
||||
sendInstanceList,
|
||||
};
|
||||
},
|
||||
function receiveDispatch(dispatch) {
|
||||
function setTestGame(id) {
|
||||
return dispatch(actions.setGame(testGame(id)));
|
||||
}
|
||||
|
||||
function setTestInstance(id) {
|
||||
return dispatch(actions.setInstance(testInstance(id)));
|
||||
}
|
||||
|
||||
function setNav(place) {
|
||||
dispatch(actions.setGame(null));
|
||||
dispatch(actions.setInstance(null));
|
||||
@@ -63,8 +50,6 @@ const addState = connect(
|
||||
}
|
||||
|
||||
return {
|
||||
setTestGame,
|
||||
setTestInstance,
|
||||
setNav,
|
||||
hideNav,
|
||||
};
|
||||
@@ -79,18 +64,12 @@ function Nav(args) {
|
||||
team,
|
||||
|
||||
sendInstanceState,
|
||||
sendInstanceList,
|
||||
|
||||
setTestGame,
|
||||
setTestInstance,
|
||||
setNav,
|
||||
hideNav,
|
||||
} = args;
|
||||
|
||||
function navTo(p) {
|
||||
if (p === 'list') {
|
||||
sendInstanceList();
|
||||
}
|
||||
return setNav(p);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user