spawn buttons
This commit is contained in:
ntr
parent
d61691d9df
commit
43c0af4ded
@ -4,7 +4,6 @@
|
||||
|
||||
html, body, .cryps {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
background-color: #000000;
|
||||
@ -14,15 +13,14 @@ html, body, .cryps {
|
||||
user-select: none;
|
||||
|
||||
/* this is the sweet nectar to keep it full page*/
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
height: 99%;
|
||||
max-height: 99%;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
@ -35,7 +33,6 @@ html {
|
||||
padding: 0 2em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -48,7 +45,6 @@ main {
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
|
||||
button, input {
|
||||
@ -86,6 +82,10 @@ button.left:hover, button.left:focus {
|
||||
box-shadow: inset 0.5em 0 0 0 whitesmoke;
|
||||
}
|
||||
|
||||
button.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
LOGIN
|
||||
*/
|
||||
@ -158,6 +158,36 @@ header {
|
||||
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spawn-btn .menu-cryp {
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.spawn-btn .menu-cryp h2 {
|
||||
font-size: 3em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spawn-btn input {
|
||||
flex: 1 1 100%;
|
||||
margin: 1em;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.spawn-btn button {
|
||||
flex: 1;
|
||||
margin: 0.5em 2em;
|
||||
border-color: #333
|
||||
}
|
||||
|
||||
.spawn-btn input[disabled], .spawn-btn button[disabled] {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.menu-cryp {
|
||||
@ -187,12 +217,12 @@ header {
|
||||
|
||||
.menu-instance-btn {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 100%;
|
||||
flex: 1 1 100%;
|
||||
font-size: 150%;
|
||||
/*min-width: 20%;*/
|
||||
border-width: 2px;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
|
||||
const { stringSort } = require('./../utils');
|
||||
const molecule = require('./molecule');
|
||||
@ -11,8 +12,40 @@ const COLOURS = [
|
||||
'#3498db',
|
||||
];
|
||||
|
||||
function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
|
||||
if (!cryps) return <div>not ready</div>;
|
||||
class SpawnButton extends Component {
|
||||
toggle(e) {
|
||||
this.setState({ enabled: e });
|
||||
}
|
||||
|
||||
render({ }, { enabled }) {
|
||||
return (
|
||||
<div
|
||||
className="menu-cryp-ctr spawn-btn">
|
||||
<div
|
||||
className="menu-cryp"
|
||||
onClick={() => this.toggle(!this.enabled)} >
|
||||
<h2>+</h2>
|
||||
<input
|
||||
className="login-input"
|
||||
type="text"
|
||||
disabled={!enabled}
|
||||
placeholder="name"
|
||||
// onChange={e => spawnName = e.target.value}
|
||||
/>
|
||||
<button
|
||||
className="login-btn"
|
||||
disabled={!enabled}
|
||||
type="submit">
|
||||
spawn
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) {
|
||||
if (!cryps) return <div></div>;
|
||||
|
||||
// redux limitation + suggested workaround
|
||||
// so much for dumb components
|
||||
@ -31,6 +64,16 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
|
||||
return setSelectedCryps(selectedCryps);
|
||||
}
|
||||
|
||||
const instanceJoinHidden = !selectedCryps.every(c => !!c);
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
const crypPanels = cryps.sort(idSort).map(cryp => {
|
||||
const colour = selectedCryps.indexOf(cryp.id);
|
||||
const selected = colour > -1;
|
||||
@ -54,9 +97,12 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div className="menu-cryps">
|
||||
{instanceJoin}
|
||||
{crypPanels}
|
||||
<SpawnButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,7 +6,15 @@ const actions = require('./../actions');
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, cryps, selectedCryps } = state;
|
||||
return { cryps, selectedCryps };
|
||||
|
||||
function sendInstanceJoin() {
|
||||
if (selectedCryps.length) {
|
||||
return ws.sendInstanceJoin(selectedCryps);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return { cryps, selectedCryps, sendInstanceJoin };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
|
||||
@ -6,7 +6,8 @@ function Info(args) {
|
||||
info,
|
||||
} = args;
|
||||
let desc = null;
|
||||
if (info) {
|
||||
if (!info) return (<div className="instance-info"> </div>);
|
||||
|
||||
if (info.type === 'item') {
|
||||
if (SKILLS[info.info]) {
|
||||
desc = SKILLS[info.info];
|
||||
@ -16,12 +17,21 @@ function Info(args) {
|
||||
desc = COLOURS[info.info];
|
||||
}
|
||||
}
|
||||
|
||||
if (info.type === 'cryp') {
|
||||
const cryp = info.info;
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<h5>{cryp.name}</h5>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<div> {JSON.stringify(info)} </div>
|
||||
<div> {JSON.stringify(desc)} </div>
|
||||
<h5>{info.info}</h5>
|
||||
<div>{desc.description}</div>
|
||||
<div>{desc.upgrades}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
|
||||
? cryp.skills[i].skill
|
||||
: (<span> </span>);
|
||||
|
||||
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
|
||||
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', s)}>{s}</button>;
|
||||
});
|
||||
|
||||
// needed for ondrop to fire
|
||||
@ -48,6 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
|
||||
<div
|
||||
key={cryp.id}
|
||||
className="cryp-box"
|
||||
onClick={() => setInfo('cryp', cryp)}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
|
||||
@ -6,35 +6,32 @@ const { NULL_UUID } = require('./../utils');
|
||||
function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
|
||||
if (!instances) return <div>...</div>;
|
||||
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className="menu-instance-btn full right"
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
// const instanceJoin = (
|
||||
// <button
|
||||
// className="menu-instance-btn full right"
|
||||
// onClick={() => sendInstanceJoin()}>
|
||||
// Join New Instance
|
||||
// </button>
|
||||
// );
|
||||
|
||||
const instancePanels = instances.map(instance => {
|
||||
const globalInstance = instance.instance === NULL_UUID;
|
||||
const name = globalInstance
|
||||
? 'Global Matchmaking'
|
||||
: `${instance.instance.substring(0, 5)}`;
|
||||
: `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
|
||||
key={instance.id}
|
||||
onClick={() => setActiveInstance(instance)}>
|
||||
{name} | {instance.score.wins} : {instance.score.losses}
|
||||
{name}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
// <h2>Instances</h2>
|
||||
|
||||
return (
|
||||
<section className="menu-instance-list" >
|
||||
{instanceJoin}
|
||||
{instancePanels}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -53,12 +53,9 @@ function Vbox(args) {
|
||||
const cells = row.map((c, j) => (
|
||||
<td
|
||||
key={j}
|
||||
onClick={() => {
|
||||
if (c) {
|
||||
sendVboxAccept(j, i);
|
||||
setInfo('item', c);
|
||||
}
|
||||
}} >
|
||||
onClick={() => { if (c) return setInfo('item', c) }}
|
||||
onDblClick={() => sendVboxAccept(j, i) }
|
||||
>
|
||||
{convertVar(c)}
|
||||
</td>
|
||||
));
|
||||
|
||||
@ -259,7 +259,7 @@ function createSocket(events) {
|
||||
|
||||
// if (!account) events.loginPrompt();
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
||||
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user