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
commit 01e3384e98
16 changed files with 180 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/cryps.css
View File

@ -153,7 +153,7 @@ header {
}
.header-username {
letter-spacing: 0.25em;
letter-spacing: 0.05em;
font-size: 2em;
display: inline;
}
@ -485,10 +485,7 @@ header {
}
.logs {
padding-left: 2em;
display: flex;
flex-flow: row wrap;
flex: 0 0 20%;
flex: 0 0 100%;
}
.selected-skills {

5
client/src/actions.jsx
View File

@ -13,6 +13,9 @@ export const setInstance = value => ({ type: SET_INSTANCE, value });
export const SET_GAME = 'SET_GAME';
export const setGame = value => ({ type: SET_GAME, value });
export const SET_SHOW_LOG = 'SET_SHOW_LOG';
export const setShowLog = value => ({ type: SET_SHOW_LOG, value });
export const SET_COMBINER = 'SET_COMBINER';
export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });
@ -26,7 +29,7 @@ export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
export const SET_INFO = 'SET_INFO';
export const setInfo = (type, value) => ({ type: SET_INFO, value: type ? { type, value } : null });
export const setInfo = value => ({ type: SET_INFO, value });
export const SET_RECLAIMING = 'SET_RECLAIMING';
export const setReclaiming = value => ({ type: SET_RECLAIMING, value });

39
client/src/components/cryp.list.component.jsx
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">

47
client/src/components/game.component.jsx
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>
);
}

11
client/src/components/game.container.jsx
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 };
}
);

45
client/src/components/info.component.jsx
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>
</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>
<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;

2
client/src/components/instance.component.jsx
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" >

6
client/src/components/instance.container.jsx
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 };

59
client/src/components/spawn.button.jsx Normal file
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;

2
client/src/components/vbox.container.jsx
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]));
}

6
client/src/events.jsx
View File

@ -32,8 +32,8 @@ function registerEvents(store) {
store.dispatch(actions.setActiveSkill(skill));
}
function setInfo(info) {
store.dispatch(actions.setInfo(info));
function clearInfo(info) {
store.dispatch(actions.setInfo([]));
console.log('event clear item');
}
@ -202,7 +202,7 @@ function registerEvents(store) {
setCryps,
setCrypList,
setGame,
setInfo,
clearInfo,
setMenu,
setPlayer,
setInstanceList,

1
client/src/main.jsx
View File

@ -21,6 +21,7 @@ const store = createStore(
combiner: reducers.combinerReducer,
cryps: reducers.crypsReducer,
game: reducers.gameReducer,
showLog: reducers.showLogReducer,
info: reducers.infoReducer,
instance: reducers.instanceReducer,
instances: reducers.instancesReducer,

13
client/src/reducers.jsx
View File

@ -80,6 +80,16 @@ function gameReducer(state = defaultGame, action) {
}
}
const defaultShowLog = false;
function showLogReducer(state = defaultShowLog, action) {
switch (action.type) {
case actions.SET_SHOW_LOG:
return action.value;
default:
return state;
}
}
const defaultReclaiming = false;
function reclaimingReducer(state = defaultReclaiming, action) {
switch (action.type) {
@ -100,7 +110,7 @@ function wsReducer(state = defaultWs, action) {
}
}
const defaultInfo = null;
const defaultInfo = [];
function infoReducer(state = defaultInfo, action) {
switch (action.type) {
case actions.SET_INFO:
@ -116,6 +126,7 @@ module.exports = {
combinerReducer,
crypsReducer,
gameReducer,
showLogReducer,
instanceReducer,
instancesReducer,
reclaimingReducer,

4
client/src/socket.jsx
View File

@ -95,7 +95,7 @@ function createSocket(events) {
function sendVboxUnequip(instanceId, crypId, target) {
send({ method: 'player_vbox_unequip', params: { instance_id: instanceId, cryp_id: crypId, target } });
events.setInfo(null);
events.clearInfo();
}
function sendVboxDiscard(instanceId) {
@ -260,7 +260,7 @@ function createSocket(events) {
// if (!account) events.loginPrompt();
if (process.env.NODE_ENV !== 'production') {
send({ method: 'account_login', params: { name: 'grepking', password: 'grepgrepgrep' } });
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
}
return true;

2
client/src/utils.jsx
View File

@ -61,7 +61,7 @@ const STATS = {
redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
speed: { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
speed: { stat: 'speed', colour: '', svg: shapes.triangle },
};
const SPECS = {

14
server/src/vbox.rs
View File

@ -638,6 +638,20 @@ pub fn vbox_unequip(params: VboxUnequipParams, tx: &mut Transaction, account: &A
None => return Err(err_msg("var has no effect on cryps")),
}
// now the var has been applied
// recalculate the stats of the whole team
let team_colours = player.cryps.iter().fold(Colours::new(), |tc, c| {
Colours {
red: tc.red + c.colours.red,
green: tc.green + c.colours.green,
blue: tc.blue + c.colours.blue
}
});
for cryp in player.cryps.iter_mut() {
cryp.apply_modifiers(&team_colours);
}
player.vbox.bound.push(params.target);
return player_update(tx, player, false);
}