From 16a0a18905b583890bf2ce2d296f8eefb895255c Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 16 Sep 2019 18:31:45 +1000 Subject: [PATCH] new game styles --- client/assets/styles/game.less | 253 +++++++++------------ client/src/components/skill.btn.jsx | 2 +- client/src/components/targeting.arrows.jsx | 10 +- 3 files changed, 114 insertions(+), 151 deletions(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 7722f5fc..df25689f 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -28,30 +28,34 @@ .opponent { grid-area: opponent; -} -.opponent .combat-text { - top: 75%; -} + .combat-text { + top: 75%; + } -.opponent .combat-anim { - top: 25%; -} + .combat-anim { + top: 25%; + } -.opponent .game-construct { - align-items: flex-start; - grid-template-rows: min-content min-content min-content minmax(min-content, 2fr); - grid-template-columns: 1fr; - grid-template-areas: - "stats " - "name " - "effects " - "avatar "; -} + .game-construct { + align-items: flex-start; + grid-template-rows: min-content min-content 1fr; + grid-template-columns: 1fr 2fr; + grid-template-areas: + "effects stats" + "effects name" + "effects avatar"; -.opponent .game-construct .name { - margin-bottom: 0; - margin-top: 0.25em; + .effects { + align-self: flex-start; + text-align: right; + } + } + + .game-construct .name { + margin-bottom: 0; + margin-top: 0.25em; + } } .game-construct { @@ -65,19 +69,98 @@ justify-items: center; - grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content; - grid-template-columns: 1fr; + grid-template-rows: minmax(min-content, 1fr) min-content min-content; + grid-template-columns: 1fr 3fr; grid-template-areas: - "skills " - "avatar " - "effects " - "name " - "stats "; + "skills avatar" + "effects name" + "effects stats"; transition-property: translate, opacity; transition-duration: 0.25s; transition-delay: 0; transition-timing-function: ease; + + .effects { + align-self: flex-end; + } + + .stats { + align-self: flex-end; + } + + .name { + width: 100%; + margin-bottom: 0.25em; + text-align: center; + grid-area: name; + } + + .skills { + grid-area: skills; + width: 100%; + + button { + width: 100%; + height: 2em; + height: 25%; + } + } + + .effects { + grid-area: effects; + white-space: nowrap; + width: 100%; + text-align: center; + font-size: 1.5em; + } + + .ko { + animation: none; + opacity: 0.20; + } + + .ko button:hover { + color: #333; + } + + .unfocus { + opacity: 0.35; + } + + .unfocus.ko { + opacity: 0.20; + } + + .stats { + grid-area: stats; + display: flex; + justify-content: center; + text-align: center; + } + + .stats div { + padding: 0 0.5em; + display: flex; + flex-flow: column; + white-space: nowrap; + text-align: center; + } + + .stats .value { + display: none; + } + + figcaption { + white-space: nowrap; + font-size: 100%; + } +} + +@media (max-width: 1500px) { + .game-construct figure { + padding: 0 0.25em; + } } #targeting { @@ -101,116 +184,6 @@ max-height: 10em; } } -/* -.resolving #targeting { - opacity: 0; -} -*/ -.game-construct .name { - width: 100%; - margin-bottom: 0.25em; - text-align: center; - grid-area: name; -} - -.game-construct .stats { - grid-area: stats; - display: flex; - justify-content: center; - text-align: center; -} - -.game-construct .stats div { - padding: 0 0.5em; - display: flex; - flex-flow: column; - white-space: nowrap; - text-align: center; -} - -.game-construct .stats .value { - display: none; -} - -.game-construct figcaption { - white-space: nowrap; - font-size: 100%; -} - -@media (max-width: 1500px) { - .game-construct figure { - padding: 0 0.25em; - } -} - -.game-construct .skills { - grid-area: skills; - display: flex; - flex-flow: column-reverse; - justify-self: center; - width: 100%; -} - -.game-construct .skills button { - width: 100%; -} - -.game-construct .effects { - grid-area: effects; - white-space: nowrap; - width: 100%; - text-align: center; - font-size: 1.5em; -} - -.game-btn { - flex: 0 0 25%; -} - -.game-btn:first-child { - margin-right: 0.5em; -} - -.game-construct button { - color: #888; - flex: 1 1 100%; - padding: 0; - margin: 0 0.5em; - border-width: 0px; -} - -.game-construct button.active { - color: whitesmoke; -} - -.game-construct button[disabled], .game-construct button[disabled]:hover { - color: #333333; - text-decoration: line-through -} - -.game-construct button:hover { - color: whitesmoke; -} - -.game-construct.ko { - animation: none; - opacity: 0.20; -/* filter: grayscale(100%); -*/} - -.game-construct.ko button:hover { - color: #333; -} - -.game-construct.unfocus { - opacity: 0.35; -/* filter: blur(5px); -*/} - -.game-construct.unfocus.ko { - opacity: 0.20; -/* filter: blur(5px) grayscale(100%); -*/} .combat-text { font-size: 2em; @@ -238,10 +211,6 @@ width: 100%; } -.game-construct.active-skill { -/* filter: drop-shadow(0 0 0.2em silver); -*/} - .game-construct.red-damage { color: #a52a2a; /*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/ @@ -326,7 +295,7 @@ object-fit: contain; background-size: contain; background-repeat: no-repeat; - background-position: center; + background-position: top; pointer-events: none; } diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index 3fa23031..d1f39939 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -44,7 +44,7 @@ function Skill(props) { return ( ); } diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index ed822459..6ea195f1 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -52,17 +52,11 @@ class TargetSvg extends Component { ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id) : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id); - const pathOffset = [ - [0, -1, -2], - [1, 0, -1], - [2, 1, 0], - ][source][target]; - const sourceY = height; - const sourceX = (source * width / 3) + width / 6; + const sourceX = (source * width / 3) + width / 24; const targetX = (target * width / 3) + width / 6 + (defensive ? width / 64 : 0) - + (pathOffset * width / 32); + + (source * width / 18); const targetY = defensive ? height : 0; const bendStart = height * (0.7 - 0.1 * source); const bendEnd = height * 0.20;