styles and blast

client/src/components/anims/blast.jsx

@@ -42,23 +42,18 @@ class Blast extends Component {
                 transform-box='fill-box'
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
-                <defs>
-                    <filter id="blastFilter">
-                        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
-                        <feMerge>
-                            <feMergeNode />
-                            <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                    </filter>
-                </defs>
-                <g>
-                    {times(50, () => (
-                        <g>
-                            <rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
-                            <rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
-                        </g>
-                    ))}
-                </g>
+                {times(50, () => (
+                    <g>
+                        <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="2" height="2" />
+                        <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="1" height="1" />
+                    </g>
+                ))}
+                {times(50, () => (
+                    <g>
+                        <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="3" height="3" />
+                        <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="2" height="2" />
+                    </g>
+                ))}
             </svg>
         );
     }
@@ -76,7 +71,7 @@ class Blast extends Component {
         this.animations.push(anime({
             targets: ['#blast g'],
             transform: () => `
-                translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
+                translate(${anime.random(-150, 150)} ${anime.random(-150, 150)})
             `,
             style: { rotate: anime.random(-180, 180) },
             easing: 'easeOutCubic',

client/src/components/vbox.component.jsx

@@ -184,13 +184,15 @@ function Vbox(args) {
 
         const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
+        // state not yet set in double click handler
+        function onDblClick(e) {
+            sendVboxAccept(group, index);
+            e.stopPropagation();
+        }
+
         function onClick(e) {
             e.stopPropagation();
-            // double clicked
-            if (selected) {
-                return vboxBuySelected();
-            }
-
+            if (selected) return clearVboxSelected();
             return setVboxSelected([group, index]);
         }
 
@@ -201,7 +203,8 @@ function Vbox(args) {
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
-                    onClick={onClick}>
+                    onClick={onClick}
+                    onDblClick={onDblClick} >
                     {shapes[v]()}
                 </button>
             );
@@ -211,6 +214,7 @@ function Vbox(args) {
             <button
                 class={classes}
                 onClick={onClick}
+                onDblClick={onDblClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
             </button>
@@ -361,7 +365,7 @@ function Vbox(args) {
         return (
             <div class='vbox-section'
                 onClick={inventoryClick}
-                style={vboxSelecting ? { cursor: 'pointer' } : null}
+                style={vboxSelecting || itemUnequip ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>