From d4f2f9623f3e23b7aa661e9fccbaa77f4cc0adcb Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 22 Nov 2019 12:47:46 +1100 Subject: [PATCH] wi --- WORKLOG.md | 20 +++++- client/assets/styles/instance.less | 2 +- client/assets/styles/styles.less | 2 +- client/assets/styles/vbox.less | 80 ++++++++++++------------ client/src/components/vbox.combiner.jsx | 16 +++-- client/src/components/vbox.component.jsx | 70 ++++++++++----------- client/src/components/vbox.stash.jsx | 4 +- client/src/components/vbox.store.jsx | 14 ++--- 8 files changed, 107 insertions(+), 101 deletions(-) diff --git a/WORKLOG.md b/WORKLOG.md index f6df3063..daaaefb6 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -12,6 +12,22 @@ _ntr_ * animation effects * vbox combine / buy / equip etc * background music +* effects rework + +Siphon = +[ + DamageBlue(50%), + Apply( + Siphon(2T) + - Siphoning(2T) + ), +] + +Hexagon Set +- Pick Colour +- Random Walk +- Draw hex +- Increase intensity for each visit _mashy_ * buy from preview if you have the required bases in vbox / inventory @@ -53,9 +69,9 @@ _tba_ - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed) - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life) - - Can also work as module style passive keystones + - Can also work as module style passive keystones * troll life -> dmg -> Invert life spec? - * prince of peace + * prince of peace * bonus healing / no damage -> Heal power spec? * fuck magic -> Some sort of reflect spec? * empower on ko -> Amplify + Power spec diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 26bee42c..76e68884 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,7 +5,7 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: min-content minmax(min-content, 1fr); + grid-template-columns: 3fr minmax(min-content, 6fr); grid-template-rows: min-content 1fr; grid-template-areas: diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index e4e9264a..72ab973c 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -125,7 +125,7 @@ button, input { font-family: 'Jura'; color: whitesmoke; height: auto; - border-width: 0.1em; + border-width: 0.2em; border-color: @gray-exists; letter-spacing: 0.25em; box-sizing: border-box; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 411dae51..c4d5c6cd 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,40 +2,38 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 9.5em 2.5em 4.5em min-content; - grid-template-columns: 8em 24em; + grid-template-rows: 1fr min-content; + grid-template-columns: 1fr 3fr; grid-template-areas: "store-hdr store" - "stash-hdr store" - "stash stash" - "refund combiner"; + "stash-hdr stash" + "refund combiner"; margin-bottom: 1em; line-height: 0; - .vbox-padding { - margin-left: 0.5em; - margin-bottom: 0.5em; - margin-top: 0.5em; - margin-right: 0.5em; + // immediate children + > div { + padding: 0.5em; } .store { grid-area: store; - border-bottom: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; + border-right: 0.2em solid @gray-exists; + border-top: 0.2em solid @gray-exists; } .store-hdr { grid-area: store-hdr; - border-bottom: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; + display: flex; + flex-flow: column; + text-align: center; + border-left: 0.2em solid @gray-exists; + border-top: 0.2em solid @gray-exists; + button { - margin-top: 0.5em; + margin: 1em 0 0 0; line-height: 1.6; - height: 4em; letter-spacing: 0.1em; background-color: #421010; &:hover { @@ -47,18 +45,17 @@ .combiner { grid-area: combiner; - border-top: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; display: flex; flex-direction: column; - + + padding: 0.5em 0 0 0; + .vbox-padding { margin-right: 0em; margin-bottom: 0em; } button { - height: 3em; letter-spacing: 0.1em; background-color: #996100; &[disabled] { @@ -66,35 +63,42 @@ }; } } - + .stash { grid-area: stash; - .vbox-padding { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 0.5em 1em; - align-items: center; - } - border-right: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0.5em 1em; + + align-items: center; + padding: 0.5em; + border: 0.2em solid @gray-exists; + border-left: 0; } .stash-hdr { + display: flex; + flex-flow: column; + justify-content: center; + grid-area: stash-hdr; - border-left: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; text-align: center; + border: 0.2em solid @gray-exists; + border-right: 0; } .refund { + padding: 0.5em 0.5em 0 0; + button { line-height: 1.4; - height: 3em; letter-spacing: 0.1em; background-color: #996100; } - border-left: 0.1em solid @gray-exists; - border-bottom: 0.1em solid @gray-exists; + + .vbox-padding { + padding-left: 0; + } } .vbox-hdr { @@ -115,14 +119,12 @@ grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em 1em; align-items: center; - margin-bottom: 0.5em; } .vbox-btn { width: 100%; margin: 0; background-color: @gray-box; - height: 3em; line-height: 1em; border-width: 0; @@ -153,7 +155,7 @@ } button { - height: 3.25em; + height: 4.5em; margin: 0; width: 100%; diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index 4b8ab14e..e1514e1f 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -52,15 +52,13 @@ function combinerBtn(props) { } return (
-
- -
+
); } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 819c43b5..e5286807 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -177,27 +177,25 @@ class Vbox extends preact.Component { function storeHdr() { return (
-
-

e.target.scrollIntoView(true)} - onMouseOver={e => vboxHover(e, 'store')}> STORE -

-
vboxHover(e, 'bits')}> -

{vbox.bits}b

-
- +

e.target.scrollIntoView(true)} + onMouseOver={e => vboxHover(e, 'store')}> STORE +

+
vboxHover(e, 'bits')}> +

{vbox.bits}b

+
); } @@ -205,11 +203,9 @@ class Vbox extends preact.Component { function stashHdr() { return (
-
-

e.target.scrollIntoView(true)} - onMouseOver={e => vboxHover(e, 'stash')}> STASH -

-
+

e.target.scrollIntoView(true)} + onMouseOver={e => vboxHover(e, 'stash')}> STASH +

); } @@ -221,19 +217,17 @@ class Vbox extends preact.Component { && instance.time_control === 'Practice' && instance.rounds.length === 1; return (
-
- -
+
); } diff --git a/client/src/components/vbox.stash.jsx b/client/src/components/vbox.stash.jsx index 2aad03f0..4ed23fd7 100644 --- a/client/src/components/vbox.stash.jsx +++ b/client/src/components/vbox.stash.jsx @@ -99,9 +99,7 @@ function stashElement(props) { onDragOver={ev => ev.preventDefault()} onDrop={stashClick} > -
- {range(0, 4).map(i => stashBtn(vbox.bound[i], i))} -
+ {range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
); } diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx index 64d4e5fc..20a5a402 100644 --- a/client/src/components/vbox.store.jsx +++ b/client/src/components/vbox.store.jsx @@ -65,14 +65,12 @@ function storeElement(props) { return (
e.stopPropagation()}> -
-
- {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} -
-
- {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} - {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} -
+
+ {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} +
+
+ {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} + {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
);