consolidate construct imgs

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 {

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) {
         </div>
     ));
 
-
     const skills = range(0, 3)
         .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
 
@@ -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 <h3 key={i} style={{ color: highlightColour}} >{`< ${s.skill}`}</h3>
-        });
-
     const anim = (
         <div className="anim-container">
             {animationDivs(combatClass)}

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 (
         <div key={construct.id} className={constructClass} onClick={onClick} >
-            {instanceConstruct(construct.name, construct.id)}
+            <ConstructAvatar name={construct.name} id={construct.id} />
             <h2 className="name" >{construct.name}</h2>
             <div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}

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) {
             <div
                 key={construct.id}
                 className="menu-construct" >
-                <ConstructAvatar name={construct.name} id={construct.id} />
+                <ConstructImg name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );

client/src/components/menu.component.jsx

@@ -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 <div>...</div>;
-
-        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 (
-                <tr key={instance.id}
-                    className="right"
-                    onClick={instanceClick} >
-                    <td>{instance.name}</td>
-                    <td>{instance.players.length} / {instance.max_players}</td>
-                    <td>{scoreText}</td>
-                </tr>
-            );
-        });
-
-        const instanceJoinHidden = !team.every(c => !!c);
-
-        // const mmSet = (
-        //     <button
-        //         className={'menu-instance-btn left'}
-        //         disabled={instanceJoinHidden}
-        //         onClick={() => sendPlayerMmConstructsSet()}>
-        //         Set Matchmaking Team
-        //     </button>
-        // );
-
-        return (
-            <div className="menu-instance-list" >
-                <table>
-                    <thead>
-                        <tr>
-                            <th>instance name</th>
-                            <th>players</th>
-                            <th>status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {instancePanels}
-                        <tr className="right" onClick={() => sendInstanceList()}>
-                            <td colSpan={3} >↺</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <InstanceCreateForm />
-            </div>
-        );
-    }
-
-    function constructList() {
-        if (!constructs) return <div></div>;
-
-        // 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 (
-                <div
-                    key={construct.id}
-                    className="menu-construct-ctr">
-                    <div
-                        className="menu-construct"
-                        style={ { 'border-color': borderColour || 'whitesmoke' } }
-                        onClick={() => selectConstruct(construct.id)} >
-                        {constructAvatar(construct.name)}
-                        <h2>{construct.name}</h2>
-                    </div>
-                </div>
-            );
-        });
-
-        const spawnButtonsNum = constructs.length < 3
-            ? (3 - constructs.length)
-            : 1;
-
-        const spawnButtons = range(spawnButtonsNum)
-            .map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
-
-        return (
-            <div className="menu-constructs">
-                {constructPanels}
-                {spawnButtons}
-            </div>
-        );
-    }
-
-    return (
-        <main className="menu">
-            {instanceList()}
-        </main>
-    );
-}
-
-module.exports = Menu;

client/src/components/menu.container.jsx

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

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}
         </button>

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 <path
+                return <path d={path} />;
-                    style={ { stroke} }
-                    d={path}
-                />;
             }
 
             const path = `
@@ -84,10 +70,7 @@ class TargetSvg extends Component {
 
             `;
 
-            return <path
+            return <path d={path} />;
-                style={ { stroke} }
-                d={path}
-            />;
         }
 
         const arrows = resolution

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)} >
-                <ConstructAvatar name={construct.name} id={construct.id} />
+                <ConstructImg name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );

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 (
-            <div
-                className="avatar"
-                id={this.props.id}
-                style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
-            />
-        );
-    }
-
-    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 (
-        <div
-            className="avatar"
-            id={id}
-            style={{'background-image': `url(/molecules/${genAvatar(name)}.svg)`}}
-        />
-    );
-}
-
 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,