From 9dc840765c0450885a13abd5ed367a989360f988 Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 24 Jul 2019 12:04:18 +1000 Subject: [PATCH] styles and blast --- client/animations.test.js | 2 +- client/assets/styles/colours.less | 9 ++++-- client/assets/styles/instance.less | 13 +++----- .../assets/styles/{styles.css => styles.less} | 12 ++++--- client/assets/styles/vbox.less | 6 +--- client/index.js | 2 +- client/src/components/anims/blast.jsx | 31 ++++++++----------- client/src/components/vbox.component.jsx | 18 ++++++----- 8 files changed, 45 insertions(+), 48 deletions(-) rename client/assets/styles/{styles.css => styles.less} (98%) diff --git a/client/animations.test.js b/client/animations.test.js index 96a91b4e..fa76c5dd 100644 --- a/client/animations.test.js +++ b/client/animations.test.js @@ -1,4 +1,4 @@ -require('./assets/styles/styles.css'); +require('./assets/styles/styles.less'); require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.less'); require('./assets/styles/instance.mobile.css'); diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index 8eb0fde0..a6962591 100644 --- a/client/assets/styles/colours.less +++ b/client/assets/styles/colours.less @@ -4,9 +4,12 @@ @white: #f5f5f5; // whitesmoke @purple: #9355b5; // 6lack - that far cover -@darkgray: #222; -@gray: #333; - +@gray: #222; +@gray-box: #222; +@gray-exists: #444; +@gray-hint: #666; +@gray-hover: #888; +@gray-focus: whitesmoke; svg { stroke: none; diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 77a2efc9..2681567d 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -1,6 +1,4 @@ -/* - INSTANCE -*/ +@import 'colours.less'; .instance { overflow-x: hidden; @@ -92,7 +90,7 @@ } .vbox-combiner-arrow { - color: #444; + color: @gray-hint; grid-area: carrow; display: block; text-align: center; @@ -109,7 +107,7 @@ margin: 1em 0.25em 0 0.25em; grid-area: varrow; font-size: 2em; - color: #444; + color: @gray-hint; } .vbox-combiner button { @@ -134,7 +132,7 @@ .arrow { grid-area: arrow; - color: #444; + color: @gray-hint; } @keyframes action { @@ -350,8 +348,7 @@ .equipping, .receiving { transition: border-color 0.5s ease-in; - border-color: whitesmoke; - border-width: 2px; + border: 2px dashed @gray-hint; } .thresholds { diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.less similarity index 98% rename from client/assets/styles/styles.css rename to client/assets/styles/styles.less index 138c51a6..3ff5b031 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.less @@ -1,3 +1,5 @@ +@import 'colours.less'; + /* GLOBAL */ @@ -6,7 +8,7 @@ html, body, #mnml { /*width: 100%;*/ margin: 0; - background-color: #000000; + background-color: black; font-family: 'Jura'; color: whitesmoke; font-size: 14pt; @@ -146,7 +148,7 @@ button, input { color: whitesmoke; height: auto; border-width: 2px; - border-color: #333; + border-color: @gray-exists; border-radius: 0; letter-spacing: 0.25em; box-sizing: border-box; @@ -162,13 +164,13 @@ button, input { button:hover { color: whitesmoke; - border-color: #888; + border-color: @gray-hover; } button:focus { /*colour necesary to bash skellington*/ - color: whitesmoke; - border-color: whitesmoke; + color: @gray-focus; + border-color: @gray-focus; } a { diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 074a813f..b24e2cca 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,10 +3,6 @@ .vbox { margin-bottom: 2em; - .vbox-section { - // border: 2px solid #444; - } - .vbox-hdr { margin-bottom: 1em; height: 2em; @@ -35,7 +31,7 @@ .vbox-btn { width: 100%; margin: 0; - background-color: @gray; + background-color: @gray-box; border-width: 0; height: 3em; diff --git a/client/index.js b/client/index.js index 42505427..a5a631f2 100644 --- a/client/index.js +++ b/client/index.js @@ -1,4 +1,4 @@ -require('./assets/styles/styles.css'); +require('./assets/styles/styles.less'); require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.less'); require('./assets/styles/vbox.less'); diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index 73e6e237..b8163225 100644 --- a/client/src/components/anims/blast.jsx +++ b/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"> - - - - - - - - - - - {times(50, () => ( - - - - - ))} - + {times(50, () => ( + + + + + ))} + {times(50, () => ( + + + + + ))} ); } @@ -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', diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 6d588238..67b4808f 100644 --- a/client/src/components/vbox.component.jsx +++ b/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) { ); @@ -211,6 +214,7 @@ function Vbox(args) { @@ -361,7 +365,7 @@ function Vbox(args) { return (
hoverInfo(e, 'inventory')}>

e.target.scrollIntoView(true)}>INVENTORY