diff --git a/client/cryps.css b/client/cryps.css index acefcd0a..3d2b7fde 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -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 { diff --git a/client/src/actions.jsx b/client/src/actions.jsx index d952ba54..0c17da7d 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -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 }); diff --git a/client/src/components/cryp.list.component.jsx b/client/src/components/cryp.list.component.jsx index fb15834c..867912b8 100644 --- a/client/src/components/cryp.list.component.jsx +++ b/client/src/components/cryp.list.component.jsx @@ -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 ( -
-
this.toggle(!this.enabled)} > -

+

- spawnName = e.target.value} - /> - -
-
- ); - } -} - function CrypList(args) { const { cryps, @@ -79,6 +45,7 @@ function CrypList(args) { const instanceJoin = ( @@ -113,7 +80,7 @@ function CrypList(args) { : 1; const spawnButtons = range(spawnButtonsNum) - .map(() => sendCrypSpawn(name)} />); + .map(i => sendCrypSpawn(name)} />); return (
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index cb9bc886..c8b8175d 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -16,11 +16,43 @@ function GamePanel(props) { setActiveSkill, selectSkillTarget, account, + showLog, + toggleLog, quit, } = props; if (!game) return
...
; + const header = ( +
+ +
+
 
+
+ +
+ ); + + if (showLog) { + const logs = game.log.map((l, i) => (
{l}
)).reverse(); + return ( +
+ {header} +
+ {logs} +
+
+ ); + } + 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) => (
{l}
)).reverse(); return (
-
- -
-
 
-
-
+ {header} {PlayerTeam(playerTeam, setActiveSkill)}
{selectedSkills} @@ -187,9 +209,6 @@ function GamePanel(props) {
{otherTeams.map(OpponentTeam)}
-
- {logs} -
); } diff --git a/client/src/components/game.container.jsx b/client/src/components/game.container.jsx index 2691043c..6fc2f45e 100644 --- a/client/src/components/game.container.jsx +++ b/client/src/components/game.container.jsx @@ -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 }; } ); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 0674b523..390f0dbd 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -6,9 +6,10 @@ function Info(args) { info, sendUnequip, } = args; - if (!info) return (
 
); + if (!info.length) return (
 
); - if (info.type === 'item') { + const [type, value] = info; + if (type === 'item') { return (
{info.value} - what does it do? @@ -16,34 +17,34 @@ function Info(args) { ); } - if (info.type === 'skill') { + if (type === 'skill') { return (
-
{info.value.skill}
-
{SKILLS[info.value.skill].description}
-
- + +
); } - if (info.type === 'spec') { + if (type === 'spec') { return (
-
{info.value.spec}
-
{SPECS[info.value.spec].description}
+
{value.spec}
+
{SPECS[value.spec].description}
-
); } - 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) => ( -
{s.disp}: {info.value[s.stat].base} -> {info.value[s.stat].max}
+
{s.disp}: {value[s.stat].base} - {value[s.stat].max}
)); + const cryp = value; + const skills = cryp.skills.map((s, i) => ); + + const specs = cryp.specs.map((s, i) => ); + return (
-
{info.value.name}
- {stats} +
{cryp.name}
+
+ {stats} +
+
+ {skills} +
+
+ {specs} +
); } - } module.exports = Info; diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 92a6a666..927b3f64 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -71,7 +71,7 @@ function InstanceComponent(args) { if (!instance) return
...
; - const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo)); + const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo)); return (
diff --git a/client/src/components/instance.container.jsx b/client/src/components/instance.container.jsx index 4ae4e971..1802b1fc 100644 --- a/client/src/components/instance.container.jsx +++ b/client/src/components/instance.container.jsx @@ -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 }; diff --git a/client/src/components/spawn.button.jsx b/client/src/components/spawn.button.jsx new file mode 100644 index 00000000..b81b2e45 --- /dev/null +++ b/client/src/components/spawn.button.jsx @@ -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 ( +
+
this.enable()} > +

+

+ + +
+
+ ); + } +} + +module.exports = SpawnButton; \ No newline at end of file diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx index cbd9a473..943db4f6 100644 --- a/client/src/components/vbox.container.jsx +++ b/client/src/components/vbox.container.jsx @@ -45,7 +45,7 @@ const addState = connect( } function setInfo(type, info) { - return dispatch(actions.setInfo(type, info)); + return dispatch(actions.setInfo([type, info])); } diff --git a/client/src/events.jsx b/client/src/events.jsx index cbc3a632..e7601def 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -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, diff --git a/client/src/main.jsx b/client/src/main.jsx index 73eb97ad..23c7f507 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -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, diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index e54c41a1..d48b18ad 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -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, diff --git a/client/src/socket.jsx b/client/src/socket.jsx index bd9583a0..f5fd90d5 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -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; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 2360be49..c535a00e 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -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 = { diff --git a/server/src/vbox.rs b/server/src/vbox.rs index 26b8e18b..21a9de06 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -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); }