wip

client/cryps.css

@@ -123,6 +123,14 @@ svg {
     stroke-width: 0;
 }
 
+img {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+}
+
 /*
     COLOURS
 */
@@ -597,6 +605,7 @@ table td svg {
     box-sizing: border-box;
     display: flex;
     flex-flow: column;
+    justify-content: flex-end;
 }
 
 .cryp-box .stats {
@@ -671,9 +680,10 @@ table td svg {
     filter: blur(5px);
 }
 
-text.combat-text {
+.combat-text {
+    position: fixed;
+    top: 50%;
     fill: whitesmoke;
-    font-size: 5em;
     font-family: 'Jura';
 }
 

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>

client/src/socket.jsx

@@ -220,13 +220,11 @@ function createSocket(events) {
         const [structName, i] = response;
         clearTimeout(instanceStateTimeout);
         instanceStateTimeout = setTimeout(() => sendInstanceState(i.id), 1000);
-        console.log(instanceStateTimeout);
         events.setInstance(i);
         return true;
     }
 
     function clearInstanceStateTimeout() {
-        console.log('instance state timeout cleared');
         clearTimeout(instanceStateTimeout);
     }
 

client/src/utils.jsx

@@ -39,9 +39,9 @@ const genAvatar = name => {
     for (let i = 0; i < name.length; i += 1) {
         const chr = name.charCodeAt(i);
         hash = ((hash << 5) - hash) + chr;
-        hash = hash & 10000; // We have avatars named 0-19
+        hash = hash % 10000;
     }
-    return `sprite${hash}`;
+    return `${hash}`;
 };
 
 function requestAvatar(name) {