From 43df4ebe484bbe8e235bc10ca39f9460d0e3b543 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 3 Jun 2019 18:57:50 +1000 Subject: [PATCH] consolidate construct imgs --- client/assets/styles/game.css | 4 +- client/src/components/game.construct.jsx | 17 +- client/src/components/instance.constructs.jsx | 5 +- client/src/components/list.jsx | 5 +- client/src/components/menu.component.jsx | 154 ------------------ client/src/components/menu.container.jsx | 60 ------- client/src/components/skill.btn.jsx | 14 -- client/src/components/targeting.arrows.jsx | 21 +-- client/src/components/team.jsx | 5 +- client/src/utils.jsx | 88 ---------- 10 files changed, 14 insertions(+), 359 deletions(-) delete mode 100644 client/src/components/menu.component.jsx delete mode 100644 client/src/components/menu.container.jsx diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 5acd7352..4f5a000e 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -78,10 +78,8 @@ grid-area: target; height: 100%; width: 100%; -} - -.game .targeting-arrows { stroke-width: 2px; + stroke: whitesmoke; } .game-construct .targeting { diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index f62092e6..8c8a6c3e 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -3,18 +3,13 @@ const preact = require('preact'); const range = require('lodash/range'); const actions = require('../actions'); -const { TARGET_COLOURS: COLOURS, STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils'); +const { STATS, eventClasses, getCombatText } = require('../utils'); +const { ConstructAvatar } = require('./construct'); const { animationDivs } = require('../animations'); const shapes = require('./shapes'); const SkillBtn = require('./skill.btn'); -const TARGET_COLOURS = [ - COLOURS.PINK, - COLOURS.LBLUE, - COLOURS.GREEN, -]; - const addState = connect( function receiveState(state) { const { @@ -72,7 +67,6 @@ function GameConstruct(props) { )); - const skills = range(0, 3) .map(j => ); @@ -92,13 +86,6 @@ function GameConstruct(props) { const playerTeam = game.players.find(t => t.id === account.id); const playerTeamIds = playerTeam.constructs.map(c => c.id); - const targeting = game.stack - .filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id) - .map((s, i) => { - const highlightColour = TARGET_COLOURS[playerTeamIds.indexOf(s.source_construct_id)]; - return

{`< ${s.skill}`}

- }); - const anim = (
{animationDivs(combatClass)} diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 3ca26d41..e25aa296 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -3,7 +3,8 @@ const preact = require('preact'); const range = require('lodash/range'); const shapes = require('./shapes'); -const { STATS, instanceConstruct } = require('../utils'); +const { STATS } = require('../utils'); +const { ConstructAvatar } = require('./construct'); const actions = require('../actions'); const addState = connect( @@ -203,7 +204,7 @@ function Construct(props) { return (
- {instanceConstruct(construct.name, construct.id)} +

{construct.name}

hoverInfo(e, 'constructSkills')} > {skills} diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx index d30bff7d..fe708d49 100644 --- a/client/src/components/list.jsx +++ b/client/src/components/list.jsx @@ -1,7 +1,8 @@ const { connect } = require('preact-redux'); const preact = require('preact'); -const { stringSort, NULL_UUID, COLOURS, ConstructAvatar } = require('./../utils'); +const { stringSort, NULL_UUID, COLOURS } = require('./../utils'); +const { ConstructImg } = require('./construct'); const actions = require('./../actions'); const InstanceCreateForm = require('./instance.create.form'); @@ -114,7 +115,7 @@ function List(args) {
- +

{construct.name}

); diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx deleted file mode 100644 index 479e0eff..00000000 --- a/client/src/components/menu.component.jsx +++ /dev/null @@ -1,154 +0,0 @@ -const preact = require('preact'); -const range = require('lodash/range'); - -const { NULL_UUID } = require('./../utils'); - -const { stringSort, constructAvatar } = require('./../utils'); -const SpawnButton = require('./spawn.button'); - -const InstanceCreateForm = require('./instance.create.form'); - -const idSort = stringSort('id'); - -const COLOURS = [ - '#a52a2a', - '#1FF01F', - '#3498db', -]; - -function Menu(args) { - const { - account, - constructs, - team, - setTeam, - sendInstanceState, - sendPlayerMmConstructsSet, - sendInstanceJoin, - sendInstanceList, - sendConstructSpawn, - instances, - } = args; - - function instanceList() { - if (!instances) return
...
; - - const instancePanels = instances.map(instance => { - const player = instance.players.find(p => p.id === account.id); - const scoreText = player - ? `${player.score.wins} : ${player.score.losses}` - : ''; - - function instanceClick() { - if (!player) return sendInstanceJoin(instance); - return sendInstanceState(instance); - } - - return ( - - {instance.name} - {instance.players.length} / {instance.max_players} - {scoreText} - - ); - }); - - const instanceJoinHidden = !team.every(c => !!c); - - // const mmSet = ( - // - // ); - - return ( -
- - - - - - - - - - {instancePanels} - sendInstanceList()}> - - - -
instance nameplayersstatus
↺
- -
- ); - } - - function constructList() { - if (!constructs) return
; - - // redux limitation + suggested workaround - // so much for dumb components - function selectConstruct(id) { - // remove - const i = team.findIndex(sid => sid === id); - if (i > -1) { - team[i] = null; - return setTeam(team); - } - - // window insert - const insert = team.findIndex(j => j === null); - if (insert === -1) return setTeam([id, null, null]); - team[insert] = id; - return setTeam(team); - } - - const constructPanels = constructs.sort(idSort).map(construct => { - const colour = team.indexOf(construct.id); - const selected = colour > -1; - - const borderColour = selected ? COLOURS[colour] : '#000000'; - - return ( -
-
selectConstruct(construct.id)} > - {constructAvatar(construct.name)} -

{construct.name}

-
-
- ); - }); - - const spawnButtonsNum = constructs.length < 3 - ? (3 - constructs.length) - : 1; - - const spawnButtons = range(spawnButtonsNum) - .map(i => sendConstructSpawn(name)} />); - - return ( -
- {constructPanels} - {spawnButtons} -
- ); - } - - return ( -
- {instanceList()} -
- ); -} - -module.exports = Menu; diff --git a/client/src/components/menu.container.jsx b/client/src/components/menu.container.jsx deleted file mode 100644 index c4918b72..00000000 --- a/client/src/components/menu.container.jsx +++ /dev/null @@ -1,60 +0,0 @@ -const { connect } = require('preact-redux'); - -const Menu = require('./menu.component'); -const actions = require('./../actions'); - -const addState = connect( - function receiveState(state) { - const { ws, constructs, team, instances, account } = state; - - function sendInstanceJoin(instance) { - if (team.length) { - return ws.sendInstanceJoin(instance.id, team); - } - return false; - } - - function sendPlayerMmConstructsSet() { - if (team.length) { - return ws.sendPlayerMmConstructsSet(team); - } - return false; - } - - function sendConstructSpawn(name) { - return ws.sendConstructSpawn(name); - } - - function sendInstanceState(instance) { - return ws.sendInstanceState(instance.id); - } - - function sendInstanceList() { - return ws.sendAccountInstances(); - } - - return { - account, - constructs, - team, - sendInstanceJoin, - sendInstanceState, - sendInstanceList, - sendConstructSpawn, - sendPlayerMmConstructsSet, - instances, - }; - }, - - function receiveDispatch(dispatch) { - function setTeam(constructIds) { - dispatch(actions.setTeam(constructIds)); - } - - return { - setTeam, - }; - } -); - -module.exports = addState(Menu); diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index 0655ceb2..a1cbaf18 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -3,15 +3,6 @@ const { connect } = require('preact-redux'); const actions = require('../actions'); -const { TARGET_COLOURS } = require('./../utils'); - -const TC_MAP = [ - TARGET_COLOURS.PINK, - TARGET_COLOURS.LBLUE, - TARGET_COLOURS.GREEN, -]; - - const addState = connect( function receiveState(state) { const { @@ -40,8 +31,6 @@ function Skill(props) { construct, game, i, - j, - mobile, activeSkill, setActiveSkill, } = props; @@ -73,8 +62,6 @@ function Skill(props) { ? activeSkill.constructId === construct.id && activeSkill.skill === s.skill : false; - const highlightColour = TC_MAP[j]; - function onClick(e) { e.stopPropagation(); return setActiveSkill(construct.id, s.skill); @@ -85,7 +72,6 @@ function Skill(props) { disabled={cdText || s.disabled || ko} className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`} type="submit" - style={ targeting ? { color: highlightColour } : false} onClick={onClick}> {s.skill} {cdText} diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index 59bde376..f82c2876 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -8,21 +8,12 @@ const addState = connect( ({ game, account, resolution }) => ({ game, account, resolution }) ); -const { TARGET_COLOURS } = require('./../utils'); - -const TC_MAP = [ - TARGET_COLOURS.PINK, - TARGET_COLOURS.LBLUE, - TARGET_COLOURS.GREEN, -]; - class TargetSvg extends Component { constructor() { super(); this.state = { width: 3000, height: 1000 }; this.onResize = throttle(() => { - console.warn('resize') const svg = document.getElementById('targeting'); const { width, height } = svg.getBoundingClientRect(); this.setState({ width, height }); @@ -46,8 +37,6 @@ class TargetSvg extends Component { ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id) : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id); - const stroke = TC_MAP[source]; - const sourceY = height; const sourceX = (source * width / 3) + width / 6; const targetX = (target * width / 3) + width / 6 + (defensive ? width / 24 : 0); @@ -66,10 +55,7 @@ class TargetSvg extends Component { L${targetX + (width * 0.005)},${height * 0.875} `; - return ; + return ; } const path = ` @@ -84,10 +70,7 @@ class TargetSvg extends Component { `; - return ; + return ; } const arrows = resolution diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx index 08772138..c955f0ea 100644 --- a/client/src/components/team.jsx +++ b/client/src/components/team.jsx @@ -4,8 +4,9 @@ const range = require('lodash/range'); const actions = require('./../actions'); const { COLOURS } = require('./../utils'); -const { stringSort, ConstructAvatar } = require('./../utils'); +const { stringSort } = require('./../utils'); const SpawnButton = require('./spawn.button'); +const { ConstructImg } = require('./construct'); const idSort = stringSort('id'); @@ -86,7 +87,7 @@ function Team(args) { className="menu-construct" style={ { 'border-color': borderColour || 'whitesmoke' } } onClick={() => selectConstruct(construct.id)} > - +

{construct.name}

); diff --git a/client/src/utils.jsx b/client/src/utils.jsx index f5c2e5d8..24da2f4b 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -1,8 +1,5 @@ const preact = require('preact'); -const { Component } = require('preact'); - const get = require('lodash/get'); -const anime = require('animejs').default; const shapes = require('./components/shapes'); @@ -36,86 +33,6 @@ const numSort = (k, desc) => { }; }; -const genAvatar = name => { - let hash = 0; - if (name.length === 0) return hash; - // Probs don't need to hash using the whole string - for (let i = 0; i < name.length; i += 1) { - const chr = name.charCodeAt(i); - hash = ((hash << 5) - hash) + chr; - hash = hash % 10000; - } - return `${hash}`; -}; - -function requestAvatar(name) { - const id = genAvatar(name); - const req = new Request(`/assets/molecules/${id}.svg`); - return fetch(req) - .then(res => res.text()) - .then(svg => svg); -} - -const animations = {}; -function animateConstruct(id) { - if (animations[id]) return false; - animations[id] = true; - const duration = anime.random(2000, 18000); - const target = document.getElementById(id); - return anime({ - targets: target, - translateX: () => anime.random(-20, 20), - translateY: () => anime.random(0, -40), - rotate: () => anime.random(-15, 15), - duration, - direction: 'alternate', - easing: 'linear', - loop: true, - complete: () => animations[id] = false, - }); -} - -function clearAnimation(id) { - animations[id] = false; -} - -class ConstructAvatar extends Component { - render() { - return ( -
- ); - } - - componentDidMount() { - animateConstruct(this.props.id); - } - - componentWillUnmount() { - clearAnimation(this.props.id); - } -} - -function instanceConstruct(name, id) { - // useEffect(() => { - // animateConstruct(id); - // return () => clearAnimation(id); - // }); - - setTimeout(() => animateConstruct(id), 50); - - return ( -
- ); -} - const NULL_UUID = '00000000-0000-0000-0000-000000000000'; const STATS = { @@ -422,14 +339,9 @@ const TARGET_COLOURS = { }; module.exports = { - animateConstruct, stringSort, convertItem, numSort, - genAvatar, - ConstructAvatar, - instanceConstruct, - requestAvatar, eventClasses, getCombatSequence, getCombatText,