From 75aa816dedb09e0e1bc395f6e9ae94e1b9e993a1 Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Thu, 28 May 2020 00:11:00 +0200 Subject: Missing files + New Control UI. --- src/css/src/battle/controlled-panel.scss | 17 ++- src/css/src/battle/controlled-panel/buttons.scss | 115 +++++++++++++++++++++ .../battle/controlled-panel/manual-control.scss | 11 +- 3 files changed, 128 insertions(+), 15 deletions(-) create mode 100644 src/css/src/battle/controlled-panel/buttons.scss (limited to 'src/css') diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss index 2a52fe6..6001d39 100644 --- a/src/css/src/battle/controlled-panel.scss +++ b/src/css/src/battle/controlled-panel.scss @@ -19,16 +19,22 @@ display: flex; flex-flow: column; - justify-content: space-between; + justify-content: space-evenly; } -.controlled-actions +.controlled-controls { display: flex; - flex-flow: row wrap; + flex-flow: row; +} - align-items: center; - justify-content: center; +.controlled-actions +{ + width: 50%; + display: grid; + grid-template-columns: 33% 33% 33%; + grid-gap: 2px; + justify-content: space-evenly; } .end-turn-button @@ -39,3 +45,4 @@ } @import 'controlled-panel/manual-control'; +@import 'controlled-panel/buttons'; diff --git a/src/css/src/battle/controlled-panel/buttons.scss b/src/css/src/battle/controlled-panel/buttons.scss new file mode 100644 index 0000000..fb55a61 --- /dev/null +++ b/src/css/src/battle/controlled-panel/buttons.scss @@ -0,0 +1,115 @@ +.action-button +{ + width: 42px; + height: 42px; + background-size: 97%; + background-position: center; +} + +.action-button.disabled +{ + opacity: 0.1; + pointer-events:none; +} + +.action-button + .action-button +{ + margin: 0; +} + +.action-button.abort-button +{ + background-image: url(/asset/svg/damage_type/abort.svg); +} + +.action-button.skipping +{ + --bg-first-act: url(/asset/svg/damage_type/skip.svg); + --bg-second-act: var(--bg-first-act); + background-image: var(--bg-first-act); +} + +.action-button.path-button +{ + --bg-first-act: url(/asset/svg/damage_type/move.svg); + background-image: var(--bg-first-act); +} + +.action-button.attacking +{ + --bg-second-act: url(/asset/svg/damage_type/attack.svg); + background-image: var(--bg-second-act); +} + +.action-button.using-skill +{ + --bg-second-act: url(/asset/svg/damage_type/skill.svg); + background-image: var(--bg-second-act); +} + +.action-button.switching-weapons +{ + --bg-second-act: url(/asset/svg/damage_type/swapwp.svg); + background-image: var(--bg-second-act); +} + +.action-button.end-turn-button +{ + grid-column: span 3; + width: calc(100% - 2px); + --bg-end-turn: url(/asset/svg/damage_type/endturn.svg); +} + +.action-button.end-turn-button.disabled +{ + animation: none; +} + +.action-button.end-turn-button.no-path-was-queued +{ + background-image: var(--bg-second-act), var(--bg-end-turn); + background-size: 42px, 42px; + background-repeat: no-repeat, no-repeat; + background-position: left center, right center; +} + +.action-button.end-turn-button.path-was-queued +{ + background-size: 42px, 42px, 42px; + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: left center, center, right center; + background-image: + url(/asset/svg/damage_type/move.svg), + var(--bg-second-act), + var(--bg-end-turn); +} + +.action-button.end-turn-button.no-path-was-queued, +.action-button.end-turn-button.path-was-queued.no-action +{ + background-size: 42px, 42px; + background-repeat: no-repeat, no-repeat; + background-position: left center, right center; + background-image: + var(--bg-first-act), + var(--bg-end-turn); +} + +.action-button.undo +{ + border-bottom-width: 1px; + filter: brightness(0.8); + +} +.action-button.end-turn-button.no-path-was-queued +{ + background-image: var(--bg-second-act), var(--bg-end-turn); +} + +.action-button.end-turn-button.path-was-queued.no-action +{ + background-image: + url(/asset/svg/damage_type/move.svg), + var(--bg-end-turn); +} + diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss index 7ab41b6..f4f5d99 100644 --- a/src/css/src/battle/controlled-panel/manual-control.scss +++ b/src/css/src/battle/controlled-panel/manual-control.scss @@ -5,7 +5,7 @@ display: grid; grid-template: '. top .' - 'left go right' + 'left . right' '. bottom .'; margin: auto; } @@ -25,15 +25,6 @@ opacity: 1; } -.manual-controls-go -{ - margin: auto; - width: 28px; - height: 28px; - border-radius: 100em; - grid-area: go; -} - .manual-controls-up { transform: rotate(-90deg); -- cgit v1.2.3-70-g09d2