diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 72c05864..809fef49 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -1,7 +1,7 @@
const preact = require('preact');
const range = require('lodash/range');
-const { STATS, eventClasses, getCombatText, genAvatar } = require('../utils');
+const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const GameCryp = require('./game.cryp');
const SkillBtn = require('./skill.btn');
@@ -154,7 +154,7 @@ function GamePanel(props) {
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
-
+ {crypAvatar(cryp.name)}
{combatTextEl}
{cryp.name}
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index 9034bfdc..cf448b1a 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -2,9 +2,8 @@ const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');
-const molecule = require('./molecule');
const actions = require('../actions');
-const { STATS, eventClasses, getCombatText, genAvatar } = require('../utils');
+const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const SkillBtn = require('./skill.btn');
@@ -91,7 +90,7 @@ function GameCryp(props) {
selectSkillTarget(cryp.id)} >
-
+ {crypAvatar(cryp.name)}
{combatTextEl}
{cryp.name}
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 9c5b6b99..d013d88f 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -3,8 +3,7 @@ const preact = require('preact');
const range = require('lodash/range');
const mapValues = require('lodash/mapValues');
-const molecule = require('./molecule');
-const { SPECS, genAvatar } = require('../utils');
+const { SPECS, crypAvatar } = require('../utils');
const actions = require('../actions');
const SkillBtn = require('./skill.btn');
@@ -132,7 +131,7 @@ function Cryp(props) {
>
-
+ {crypAvatar(cryp.name)}
{cryp.name}
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx
index d9c52c00..773b2e93 100644
--- a/client/src/components/menu.component.jsx
+++ b/client/src/components/menu.component.jsx
@@ -3,8 +3,7 @@ const range = require('lodash/range');
const { NULL_UUID } = require('./../utils');
-const { stringSort, genAvatar } = require('./../utils');
-const molecule = require('./molecule');
+const { stringSort, crypAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const InstanceCreateForm = require('./instance.create.form');
@@ -123,7 +122,7 @@ function Menu(args) {
className="menu-cryp"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
-
}.svg`})
+ {crypAvatar(cryp.name)}
{cryp.name}
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 6632c931..7dcf50ca 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -1,3 +1,4 @@
+const preact = require('preact');
const get = require('lodash/get');
const shapes = require('./components/shapes');
@@ -52,6 +53,15 @@ function requestAvatar(name) {
.then(svg => svg);
}
+function crypAvatar(name) {
+ return (
+
event.target.setAttribute('src', '/molecules/726.svg')}
+ />
+ );
+}
+
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
const STATS = {
@@ -306,6 +316,7 @@ module.exports = {
stringSort,
numSort,
genAvatar,
+ crypAvatar,
requestAvatar,
eventClasses,
getCombatSequence,