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

Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

Browse Source
This commit is contained in:
Mashy 2019-04-03 14:54:36 +10:00
commit 91040c6176
10 changed files with 158 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
client/cryps.css
View File

@ -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
*/
@ -96,7 +96,15 @@ button.left:hover, button.left:focus {
flex-flow: column;
}
.cryps input {
border-color: #444;
background-color: #333;
border-radius: 0;
}
.cryps input:focus {
border-color: whitesmoke;
}
/*
MENU
@ -158,6 +166,35 @@ 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;
}
.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 +224,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;
}
/*

67
client/src/components/cryp.list.component.jsx
View File

@ -1,4 +1,6 @@
const preact = require('preact');
const { Component } = require('preact');
const range = require('lodash/range');
const { stringSort } = require('./../utils');
const molecule = require('./molecule');
@ -11,8 +13,50 @@ 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({ spawn }, { enabled }) {
let spawnName = null;
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}
onClick={() => spawn(spawnName)}
type="submit">
spawn
</button>
</div>
</div>
);
}
}
function CrypList(args) {
const {
cryps,
selectedCryps,
setSelectedCryps,
sendInstanceJoin,
sendCrypSpawn
} = args;
if (!cryps) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
@ -31,6 +75,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 +108,18 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
);
});
const spawnButtonsNum = cryps.length < 3
? (3 - cryps.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(() => <SpawnButton key={Date.now()} spawn={name => sendCrypSpawn(name)} />);
return (
<div className="menu-cryps">
{instanceJoin}
{crypPanels}
{spawnButtons}
</div>
);
}

14
client/src/components/cryp.list.container.jsx
View File

@ -6,7 +6,19 @@ 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;
}
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
}
return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn };
},
function receiveDispatch(dispatch) {

23
client/src/components/info.component.jsx
View File

@ -6,9 +6,9 @@ function Info(args) {
info,
sendUnequip,
} = args;
let itemDetails = null; let cryp = null;
if (!info) return (<div className="instance-info">&nbsp;</div>);
let itemDetails = null;
if (info) {
if (info.item) {
if (SKILLS[info.item]) {
itemDetails = SKILLS[info.item];
@ -18,13 +18,8 @@ function Info(args) {
itemDetails = COLOURS[info.item];
}
}
if (info.cryp) {
({ cryp } = info);
}
}
const crypHeader = cryp ? <div> {cryp.name} </div> : null;
const stats = cryp ? [
const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
const stats = info.cryp ? [
{ stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
{ stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
{ stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
@ -33,13 +28,17 @@ function Info(args) {
{ stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
{ stat: 'speed', disp: 'Speed', colour: '#FFD123' },
].map((s, i) => (
<div key={i}>{s.disp}: {cryp[s.stat].max}</div>
<div key={i}>{s.disp}: {info.cryp[s.stat].max}</div>
)) : null;
const itemInfo = itemDetails ? <div>{info.item} - {itemDetails.description}</div> : null;
const itemInfo = itemDetails
? <div>{info.item} - {itemDetails.description}</div>
: null;
const unequip = (itemDetails && info.cryp)
? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
: null;
const unequip = (itemDetails && cryp) ? <button onClick={() => sendUnequip(cryp.id, info.item)}> unequip </button> : null;
return (
<div className="instance-info">

1
client/src/components/instance.component.jsx
View File

@ -12,7 +12,6 @@ function Cryp(cryp, sendVboxApply, setInfo) {
const s = cryp.skills[i]
? cryp.skills[i].skill
: (<span>&nbsp;</span>);
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
});

21
client/src/components/instance.list.component.jsx
View File

@ -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>
);

2
client/src/components/login.container.jsx
View File

@ -9,7 +9,7 @@ const addState = connect(
return ws.sendAccountLogin(name, password);
}
function submitRegister(name, password) {
return ws.sendAccountRegister(name, password);
return ws.sendAccountCreate(name, password);
}
function submitDemo() {
return ws.sendAccountDemo();

9
client/src/components/vbox.component.jsx
View File

@ -53,12 +53,9 @@ function Vbox(args) {
const cells = row.map((c, j) => (
<td
key={j}
onClick={() => {
if (c) {
sendVboxAccept(j, i);
setInfo(c, null);
}
}} >
onClick={() => { if (c) return setInfo(c, null) }}
onDblClick={() => sendVboxAccept(j, i) }
>
{convertVar(c)}
</td>
));

2
client/src/socket.jsx
View File

@ -260,7 +260,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: 'grepking', password: 'grepgrepgrep' } });
}
return true;

1
server/WORKLOG.md
View File

@ -67,6 +67,7 @@ $$$
# Db maintenance
# Art Styles
* illusions
* Aztec
* youkai
* Pixel