wip

client/src/components/game.component.jsx

@@ -1,9 +1,7 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const molecule = require('./molecule');
-
-const { STATS, eventClasses, getCombatText } = require('../utils');
+const { STATS, eventClasses, getCombatText, genAvatar } = require('../utils');
 
 const GameCryp = require('./game.cryp');
 const SkillBtn = require('./skill.btn');
@@ -146,18 +144,21 @@ function GamePanel(props) {
 
         const combatText = getCombatText(cryp, resolution);
 
+        const combatTextEl = combatText
+            ? <div className="combat-text">{combatText}</div>
+            : null;
+
         return (
             <div
                 key={i}
                 className={`cryp-box ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <div className="cryp-box-top">
-                    <figure className="img">
-                        {molecule(combatText)}
-                        <figcaption>{cryp.name}</figcaption>
-                    </figure>
-                </div>
+                <figure className="img">
+                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    <div className="combat-text">attack</div>
+                    <div>{cryp.name}</div>
+                </figure>
                 <div className="stats">
                     {stats}
                 </div>

client/src/components/game.cryp.jsx

@@ -4,7 +4,7 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 const actions = require('../actions');
-const { STATS, eventClasses, getCombatText } = require('../utils');
+const { STATS, eventClasses, getCombatText, genAvatar } = require('../utils');
 
 const SkillBtn = require('./skill.btn');
 
@@ -88,8 +88,8 @@ function GameCryp(props) {
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
-                    {molecule(combatText)}
-                    <figcaption>{cryp.name}</figcaption>
+                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    <div>{cryp.name}</div>
                 </figure>
                 <div className="skills">
                     {skills}

client/src/components/info.component.jsx

@@ -177,7 +177,6 @@ function Info(args) {
     function scoreBoard() {
         const players = instance.players.map((p, i) => {
             const pText = playerText(p);
-            console.log(pText);
             return (
                 <tr key={i}
                     className={p.ready ? 'ready' : ''}>
@@ -209,6 +208,10 @@ function Info(args) {
         ? infoVar(info)
         : null;
 
+    // const beginningHdr = instance.phase === 'Lobby'
+    //     ? <h2>game beginning...</h2>
+    //     : null;
+
     const instanceInfoClass = `instance-info ${!info[0] ? '' : 'hidden'}`;
 
     return (

client/src/components/instance.cryps.jsx

@@ -4,7 +4,7 @@ const range = require('lodash/range');
 const mapValues = require('lodash/mapValues');
 
 const molecule = require('./molecule');
-const { SPECS } = require('../utils');
+const { SPECS, genAvatar } = require('../utils');
 const actions = require('../actions');
 const SkillBtn = require('./skill.btn');
 
@@ -132,7 +132,7 @@ function Cryp(props) {
             >
             <div className="cryp-box-top">
                 <figure className="img" onClick={onClick}>
-                    {molecule()}
+                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
                     <figcaption>{cryp.name}</figcaption>
                 </figure>
                 <div className="skills">

client/src/components/menu.component.jsx

@@ -3,7 +3,7 @@ const range = require('lodash/range');
 
 const { NULL_UUID } = require('./../utils');
 
-const { stringSort } = require('./../utils');
+const { stringSort, genAvatar } = require('./../utils');
 const molecule = require('./molecule');
 const SpawnButton = require('./spawn.button');
 
@@ -123,9 +123,7 @@ function Menu(args) {
                         className="menu-cryp"
                         style={ { 'border-color': borderColour || 'whitesmoke' } }
                         onClick={() => selectCryp(cryp.id)} >
-                        <figure className="img">
-                            {molecule()}
-                        </figure>
+                        <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
                         <h2>{cryp.name}</h2>
                     </div>
                 </div>