From 07ca704ea99d890232a46aa9887c5fa1679c19fb Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 1 May 2019 21:26:58 +1000
Subject: [PATCH] default img

---
 client/src/components/game.component.jsx |  4 ++--
 client/src/components/game.cryp.jsx      |  5 ++---
 client/src/components/instance.cryps.jsx |  5 ++---
 client/src/components/menu.component.jsx |  5 ++---
 client/src/utils.jsx                     | 11 +++++++++++
 5 files changed, 19 insertions(+), 11 deletions(-)

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)} >
                 <figure className="img">
-                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    {crypAvatar(cryp.name)}
                     {combatTextEl}
                     <div>{cryp.name}</div>
                 </figure>
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) {
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
-                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    {crypAvatar(cryp.name)}
                     {combatTextEl}
                     <div>{cryp.name}</div>
                 </figure>
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) {
             >
             <div className="cryp-box-top">
                 <figure className="img" onClick={onClick}>
-                    <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>
                 <div className="skills">
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)} >
-                        <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                        {crypAvatar(cryp.name)}
                         <h2>{cryp.name}</h2>
                     </div>
                 </div>
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 (
+        <img
+            src={`/molecules/${genAvatar(name)}.svg`}
+            onError={event => 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,