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

Added Specs to cryp Instance box

Browse Source
This commit is contained in:
Mashy
2019-04-03 23:29:12 +10:00
parent ab78b41047 fc97a89ff6
commit 01e3384e98
16 changed files with 180 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/cryp.list.component.jsx
+3 -36
View File
@@ -1,9 +1,9 @@
const preact = require('preact');
const { Component } = require('preact');
const range = require('lodash/range');
const { stringSort } = require('./../utils');
const molecule = require('./molecule');
const SpawnButton = require('./spawn.button');
const idSort = stringSort('id');
@@ -13,40 +13,6 @@ const COLOURS = [
'#3498db',
];
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,
@@ -79,6 +45,7 @@ function CrypList(args) {
const instanceJoin = (
<button
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
disabled={instanceJoinHidden}
onClick={() => sendInstanceJoin()}>
Join New Instance
</button>
@@ -113,7 +80,7 @@ function CrypList(args) {
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(() => <SpawnButton key={Date.now()} spawn={name => sendCrypSpawn(name)} />);
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
return (
<div className="menu-cryps">
client/src/components/game.component.jsx
+33 -14
View File
@@ -16,11 +16,43 @@ function GamePanel(props) {
setActiveSkill,
selectSkillTarget,
account,
showLog,
toggleLog,
quit,
} = props;
if (!game) return <div>...</div>;
const header = (
<div className="instance-hdr">
<button
className="game-back-btn instance-btn instance-ui-btn left"
onClick={quit}>
Back
</button>
<div className="spacer">
<div>&nbsp;</div>
</div>
<button
className="game-back-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}>
{showLog ? 'Game' : 'Log'}
</button>
</div>
);
if (showLog) {
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return (
<main>
{header}
<div className="logs">
{logs}
</div>
</main>
);
}
function findCryp(id) {
const team = game.teams.find(t => t.cryps.find(c => c.id === id));
if (team) return team.cryps.find(c => c.id === id);
@@ -166,20 +198,10 @@ function GamePanel(props) {
const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return (
<main>
<div className="instance-hdr">
<button
className="game-back-btn instance-btn instance-ui-btn left"
onClick={quit}>
Back
</button>
<div className="spacer">
<div>&nbsp;</div>
</div>
</div>
{header}
{PlayerTeam(playerTeam, setActiveSkill)}
<div className="selected-skills">
{selectedSkills}
@@ -187,9 +209,6 @@ function GamePanel(props) {
<div className="team-opponent">
{otherTeams.map(OpponentTeam)}
</div>
<div className="logs">
{logs}
</div>
</main>
);
}
client/src/components/game.container.jsx
+8 -3
View File
@@ -11,7 +11,7 @@ const particlesJS = window.particlesJS;
const addState = connect(
function receiveState(state) {
const { ws, game, account, activeSkill, activeIncoming } = state;
const { ws, game, account, showLog, activeSkill, activeIncoming } = state;
function selectSkillTarget(targetCrypId) {
if (activeSkill) {
@@ -32,7 +32,7 @@ const addState = connect(
return false;
}
return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
return { game, showLog, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
},
function receiveDispatch(dispatch) {
@@ -49,7 +49,12 @@ const addState = connect(
dispatch(actions.setGame(null));
}
return { setActiveSkill, setActiveIncoming, quit };
function toggleLog(v) {
dispatch(actions.setShowLog(v));
}
return { setActiveSkill, setActiveIncoming, quit, toggleLog };
}
);
client/src/components/info.component.jsx
+32 -17
View File
@@ -6,9 +6,10 @@ function Info(args) {
info,
sendUnequip,
} = args;
if (!info) return (<div className="instance-info">&nbsp;</div>);
if (!info.length) return (<div className="instance-info">&nbsp;</div>);
if (info.type === 'item') {
const [type, value] = info;
if (type === 'item') {
return (
<div className="instance-info">
{info.value} - what does it do?
@@ -16,34 +17,34 @@ function Info(args) {
);
}
if (info.type === 'skill') {
if (type === 'skill') {
return (
<div className="instance-info">
<div>
<div> {info.value.skill} </div>
<div> {SKILLS[info.value.skill].description} </div>
</div>
<button onClick={() => sendUnequip(info.value.cryp.id, info.value.skill)}>
<div> {value.skill} </div>
<div> {SKILLS[value.skill].description} </div>
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
unequip
</button>
</button>
</div>
</div>
);
}
if (info.type === 'spec') {
if (type === 'spec') {
return (
<div className="instance-info">
<div>
<div> {info.value.spec} </div>
<div> {SPECS[info.value.spec].description} </div>
<div> {value.spec} </div>
<div> {SPECS[value.spec].description} </div>
</div>
<button onClick={() => sendUnequip(info.value.cryp.id, info.value.spec)}>
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
unequip
</button>
</div>
);
}
if (info.type === 'cryp') {
if (type === 'cryp') {
const stats = [
{ stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
{ stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
@@ -53,16 +54,30 @@ 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}: {info.value[s.stat].base} -> {info.value[s.stat].max}</div>
<div key={i}>{s.disp}: {value[s.stat].base} - {value[s.stat].max}</div>
));
const cryp = value;
const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);
const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);
return (
<div className="instance-info">
<h5> {info.value.name} </h5>
{stats}
<h5>{cryp.name}</h5>
<div className="info-stats">
{stats}
</div>
<div className="info-skills">
{skills}
</div>
<div className="info-specs">
{specs}
</div>
</div>
);
}
}
module.exports = Info;
client/src/components/instance.component.jsx
+1 -1
View File
@@ -71,7 +71,7 @@ function InstanceComponent(args) {
if (!instance) return <div>...</div>;
const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo));
return (
<main className="instance" >
client/src/components/instance.container.jsx
+4 -2
View File
@@ -16,6 +16,8 @@ const addState = connect(
return ws.sendVboxApply(instance.instance, crypId, i);
}
console.log(instance, 'instaince')
return { instance, account, sendInstanceReady, sendVboxApply };
},
@@ -24,8 +26,8 @@ const addState = connect(
dispatch(actions.setInstance(null));
}
function setInfo(item, cryp) {
dispatch(actions.setInfo(item, cryp));
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
}
return { quit, setInfo };
client/src/components/spawn.button.jsx
+59
View File
@@ -0,0 +1,59 @@
const preact = require('preact');
const { Component } = require('preact');
class SpawnButton extends Component {
constructor(props) {
super(props);
this.state = { value: null, enabled: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.enable = this.enable.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
this.props.spawn(this.state.value);
this.setState({ value: null, enabled: false });
}
enable() {
this.setState({ enabled: true });
}
render() {
return (
<div
key={this.props.i}
className="menu-cryp-ctr spawn-btn">
<div
className="menu-cryp"
onClick={() => this.enable()} >
<h2>+</h2>
<input
className="login-input"
type="text"
disabled={!this.state.enabled}
value={this.state.value}
placeholder="name"
onChange={this.handleChange}
/>
<button
className="login-btn"
disabled={!this.state.enabled}
onClick={this.handleSubmit}
type="submit">
spawn
</button>
</div>
</div>
);
}
}
module.exports = SpawnButton;
client/src/components/vbox.container.jsx
+1 -1
View File
@@ -45,7 +45,7 @@ const addState = connect(
}
function setInfo(type, info) {
return dispatch(actions.setInfo(type, info));
return dispatch(actions.setInfo([type, info]));
}