From 56b0a7f890c7d22d4a147e0cb940e709e3b9c596 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Apr 2019 10:41:51 +1100 Subject: [PATCH 1/5] cooldowns --- html-client/cryps.css | 5 +++++ html-client/src/components/game.component.jsx | 22 +++++++++++++++---- server/WORKLOG.md | 2 -- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/html-client/cryps.css b/html-client/cryps.css index 61b6d22f..f7ee492e 100755 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -309,6 +309,11 @@ button:hover { animation-iteration-count: 1; } +.cryp-skill-btn[disabled] { + animation: none; + color: #333333; +} + .stack { display: flex; flex-flow: column; diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx index e0993850..96afed24 100644 --- a/html-client/src/components/game.component.jsx +++ b/html-client/src/components/game.component.jsx @@ -49,9 +49,21 @@ function GamePanel(props) { function Cryp(cryp) { const skills = range(0, 4).map(i => { - const s = cryp.skills[i] - ? cryp.skills[i].skill - : ( ); + const s = cryp.skills[i]; + if (!s) { + return ( + + ); + } + + const cdText = cryp.skills[i].cd > 0 + ? `- ${s.cd}` + : ''; const highlight = activeSkill ? activeSkill.crypId === cryp.id && activeSkill.skill === s @@ -60,9 +72,11 @@ function GamePanel(props) { return ( ); }); diff --git a/server/WORKLOG.md b/server/WORKLOG.md index 20afb1d7..2f7f6fc5 100644 --- a/server/WORKLOG.md +++ b/server/WORKLOG.md @@ -26,8 +26,6 @@ put ticks on stack at start of phase cryp vbox update defensives in skill.rs - Skill::Slay -> red attack with bonus somethingorother for blue / maim no healing - consolidate buffs debuffs and disables no more red/blue From 27473ffdd5a4d36f57f645e64814469a45094383 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Apr 2019 11:03:28 +1100 Subject: [PATCH 2/5] ko --- html-client/cryps.css | 7 ++++++- html-client/src/components/game.component.jsx | 9 ++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/html-client/cryps.css b/html-client/cryps.css index f7ee492e..65140d09 100755 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -51,7 +51,7 @@ button:hover { height: 100%; margin: 0.5em; box-sizing: border-box; - border: 2px solid whitesmoke; + border-width: 2px solid whitesmoke; } .background { @@ -314,6 +314,11 @@ button:hover { color: #333333; } +.game-cryp-ctr.ko { + animation: none; + opacity: 0.5; +} + .stack { display: flex; flex-flow: column; diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx index 96afed24..2d50ee0f 100644 --- a/html-client/src/components/game.component.jsx +++ b/html-client/src/components/game.component.jsx @@ -48,6 +48,8 @@ function GamePanel(props) { } function Cryp(cryp) { + const ko = cryp.hp.value === 0 ? 'ko' : ''; + const skills = range(0, 4).map(i => { const s = cryp.skills[i]; if (!s) { @@ -72,10 +74,10 @@ function GamePanel(props) { return ( ); @@ -94,8 +96,9 @@ function GamePanel(props) { )); + return ( -
+
Date: Mon, 1 Apr 2019 11:12:23 +1100 Subject: [PATCH 3/5] vbox fix --- html-client/src/components/vbox.component.jsx | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx index 2c71de07..24ee68ba 100644 --- a/html-client/src/components/vbox.component.jsx +++ b/html-client/src/components/vbox.component.jsx @@ -32,12 +32,10 @@ function Vbox(args) { return sendVboxReclaim(i); } - if (combiner.indexOf(i) === -1) { - const insert = combiner.findIndex(j => j === null); - combiner[insert] = i; - return setCombiner(combiner); - } - return setCombiner([i, null, null]); + const insert = combiner.findIndex(j => j === null); + if (insert === -1) return setCombiner([i, null, null]); + combiner[insert] = i; + return setCombiner(combiner); } function combinerRmv(i) { @@ -66,15 +64,25 @@ function Vbox(args) { ); }); - const boundTds = range(0, 9).map(i => ( - e.dataTransfer.setData('text', i)} - onClick={() => boundClick(i) }> - {convertVar(vbox.bound[i])} - - )); + const boundTds = range(0, 9).map(i => { + if (combiner.indexOf(i) > -1) { + return ( + +   + + ); + } + return ( + e.dataTransfer.setData('text', i)} + onClick={() => boundClick(i) }> + {convertVar(vbox.bound[i])} + + ); + }); const boundRows = [ From c31f11624b3d0607b4993079f5d9786b0888b643 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Apr 2019 12:22:10 +1100 Subject: [PATCH 4/5] styles --- html-client/cryps.css | 82 +++++++------------ html-client/src/components/game.component.jsx | 2 +- .../src/components/instance.component.jsx | 2 +- .../components/instance.list.component.jsx | 6 +- 4 files changed, 33 insertions(+), 59 deletions(-) diff --git a/html-client/cryps.css b/html-client/cryps.css index 65140d09..39a3da7a 100755 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -19,15 +19,29 @@ button, input { border-color: whitesmoke; border-radius: 0; letter-spacing: 0.25em; + box-sizing: border-box; + + /*the transitions */ + transition-property: box-shadow; + transition-duration: 0.5s; + transition-delay: 0; + transition-timing-function: ease; } -/*colour necesary to bash skellington*/ button:hover { + /*colour necesary to bash skellington*/ color: whitesmoke; - animation: whiteglow 2000ms infinite; border-color: whitesmoke; } +button.right:hover { + box-shadow: inset -0.5em 0 0 0 whitesmoke; +} + +button.left:hover { + box-shadow: inset 0.5em 0 0 0 whitesmoke; +} + /* MENU */ @@ -51,7 +65,7 @@ button:hover { height: 100%; margin: 0.5em; box-sizing: border-box; - border-width: 2px solid whitesmoke; + border: 1px solid black; } .background { @@ -91,62 +105,29 @@ button:hover { fill: none; stroke-width: 4px; stroke-dasharray: 121, 242; - animation: pulse 2s infinite linear; + animation: saw 2s infinite linear; } -@keyframes pulse { - 0% { - stroke-dashoffset: 363; - } - 100% { - stroke-dashoffset: 0; - } -} - - -@keyframes whiteglow { +@keyframes saw { 0% { - box-shadow: 0 0 0px whitesmoke; - } - 20% { - box-shadow: 0 0 20px whitesmoke; - } - 60% { - box-shadow: 0 0 20px whitesmoke; + stroke-dashoffset: 363; } 100% { - box-shadow: 0 0 0px whitesmoke; - } -} - -@keyframes greenglow { - 0% { - box-shadow: 0 0 -20px forestgreen; - } - 100% { - box-shadow: 0 0 30px forestgreen; - color: forestgreen; - border-color: forestgreen; - } -} - -@keyframes whiteblackglow { - 0% { - box-shadow: 0 0 0px black; - } - 100% { - background: whitesmoke; - color: black; - box-shadow: 0 0 -30px black; + stroke-dashoffset: 0; } } /* INSTANCE */ + .green-btn:hover { - animation: greenglow 2s ease 0s 1 normal forwards; - animation-iteration-count: 1; + transition-property: all; + transition-duration: 2s; + transition-timing-function: ease; + color: forestgreen; + border-color: forestgreen; + /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/ } .instance-btn { @@ -185,7 +166,6 @@ button:hover { .vbox-btn:hover { color: black; - animation: whiteblackglow 2s ease 0s 1 normal forwards; } .vbox-table { @@ -304,13 +284,7 @@ button:hover { flex: 1 1 60%; } -.cryp-skill-btn.active { - animation: whiteblackglow 1s ease 0s 1 normal forwards; - animation-iteration-count: 1; -} - .cryp-skill-btn[disabled] { - animation: none; color: #333333; } diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx index 2d50ee0f..074341d7 100644 --- a/html-client/src/components/game.component.jsx +++ b/html-client/src/components/game.component.jsx @@ -177,7 +177,7 @@ function GamePanel(props) {
diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx index 27cd72ab..2dae589e 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -82,7 +82,7 @@ function InstanceComponent(args) {
diff --git a/html-client/src/components/instance.list.component.jsx b/html-client/src/components/instance.list.component.jsx index 4e158868..71a73008 100644 --- a/html-client/src/components/instance.list.component.jsx +++ b/html-client/src/components/instance.list.component.jsx @@ -8,20 +8,20 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) { const instanceJoin = ( ); - const instancePanels = instances.map((instance) => { + const instancePanels = instances.map(instance => { const name = instance.instance === NULL_UUID ? 'Normal Mode' : `${instance.instance.substring(0, 5)}`; return (