resizing

client/assets/styles/instance.css

@@ -5,7 +5,7 @@
 .instance {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: min-content min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 1fr;
 
     grid-template-areas:
         "top    top     info"
@@ -148,13 +148,14 @@
 
 .cryp-list {
     grid-area: cryps;
-    display: flex;
-    flex: 1 1 auto;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .instance-cryp, .instance-cryp-active {
     display: grid;
-    grid-template-rows: min-content min-content min-content 250px min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name   "
         "skills "
@@ -184,15 +185,11 @@
 
 .cryp-list .avatar {
     grid-area: avatar;
-    display: flex;
-    flex: 1 1 auto;
-}
-
-.cryp-list img {
-    justify-self: center;
-    grid-area: avatar;
-    min-width: 150px;
-    max-width: 250px;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
 }
 
 .cryp-list .name {

client/src/components/instance.cryps.jsx

@@ -3,7 +3,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
-const { SPECS, STATS, crypAvatar } = require('../utils');
+const { SPECS, STATS, instanceCryp } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -205,7 +205,7 @@ function Cryp(props) {
 
     return (
         <div key={cryp.id} className={crypClass} onClick={onClick} >
-            {crypAvatar(cryp.name)}
+            {instanceCryp(cryp.name)}
             <h2 className="name" >{cryp.name}</h2>
             <div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
                 {skills}

client/src/events.jsx

@@ -1,6 +1,5 @@
 const toast = require('izitoast');
 const eachSeries = require('async/eachSeries');
-const anime = require('animejs').default;
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -16,26 +15,6 @@ function registerEvents(store) {
         if (!instance) ws.clearInstanceStateTimeout();
     });
 
-
-    // // cryp animations
-    // function crypAnimations() {
-    //     const cryps = document.querySelectorAll('img');
-    //     if (!cryps.length) return window.requestAnimationFrame(crypAnimations);
-    //     return anime({
-    //         targets: 'img',
-    //         translateX: () => anime.random(-20, 20),
-    //         translateY: () => anime.random(0, -40),
-    //         rotate: () => anime.random(-15, 15),
-    //         duration: () => anime.random(5000, 6000),
-    //         delay: () => anime.random(0, 1000),
-    //         direction: 'alternate',
-    //         easing: 'linear',
-    //         loop: true,
-    //     });
-    // }
-    // setInterval(crypAnimations, 10000);
-    // crypAnimations();
-
     function setPing(ping) {
         store.dispatch(actions.setPing(ping));
     }

client/src/utils.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const get = require('lodash/get');
+const anime = require('animejs').default;
 
 const shapes = require('./components/shapes');
 
@@ -63,6 +64,16 @@ function crypAvatar(name) {
     );
 }
 
+function instanceCryp(name) {
+    return (
+        <div
+            className="avatar"
+            style={{'background-image': `url(/molecules/${genAvatar(name)}.svg)`}}
+            onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
+        />
+    );
+}
+
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
@@ -519,12 +530,27 @@ function convertItem(v) {
     // return;
 }
 
+function animateCryp(id) {
+    return anime({
+        targets: `#${id}`,
+        translateX: () => anime.random(-20, 20),
+        translateY: () => anime.random(0, -40),
+        rotate: () => anime.random(-15, 15),
+        duration: () => anime.random(5000, 6000),
+        delay: () => anime.random(0, 1000),
+        direction: 'alternate',
+        easing: 'linear',
+        loop: true,
+    });
+}
+
 module.exports = {
     stringSort,
     convertItem,
     numSort,
     genAvatar,
     crypAvatar,
+    instanceCryp,
     requestAvatar,
     eventClasses,
     getCombatSequence,