From 24efb898f526e0aa02a0e15b74436da8ba166cac Mon Sep 17 00:00:00 2001 From: nsensfel Date: Wed, 6 Mar 2019 18:44:57 +0100 Subject: Impr. MapEd tile focus, CSS factoring. --- src/css/src/battle.scss | 5 +- src/css/src/battle/constants.scss | 2 +- src/css/src/battle/controlled-panel.scss | 4 +- src/css/src/battle/info-card.scss | 104 -------------- src/css/src/battle/info-card/character.scss | 150 ------------------- src/css/src/battle/info-card/tile.scss | 22 --- src/css/src/battle/map.scss | 31 +--- src/css/src/battle/map/variant.scss | 33 ----- src/css/src/battle/sub-menus.scss | 4 +- src/css/src/map-editor.scss | 4 +- src/css/src/map-editor/constants.scss | 2 +- src/css/src/map-editor/map.scss | 26 +--- src/css/src/map-editor/map/variant.scss | 33 ----- src/css/src/map-editor/sub-menus.scss | 4 +- src/css/src/map-editor/toolbox.scss | 4 +- src/css/src/roster-editor.scss | 4 +- src/css/src/roster-editor/constants.scss | 2 +- src/css/src/roster-editor/controlled-panel.scss | 4 +- src/css/src/roster-editor/info-card.scss | 103 -------------- src/css/src/roster-editor/info-card/character.scss | 157 -------------------- src/css/src/roster-editor/selection-window.scss | 4 +- src/css/src/shared/battle-characters.scss | 1 + .../src/shared/battle-characters/info-card.scss | 158 +++++++++++++++++++++ src/css/src/shared/battle-map.scss | 2 + src/css/src/shared/battle-map/info-card.scss | 22 +++ src/css/src/shared/battle-map/tile.scss | 24 ++++ src/css/src/shared/battle-map/tile/variant.scss | 33 +++++ src/css/src/shared/battle-view.scss | 18 +++ src/css/src/shared/battle-view/button.scss | 27 ++++ src/css/src/shared/battle-view/constants.scss | 10 ++ src/css/src/shared/battle-view/info-card.scss | 101 +++++++++++++ src/css/src/shared/battle-view/main-menu.scss | 37 +++++ src/css/src/shared/battle-view/menu-mixins.scss | 36 +++++ src/css/src/shared/battle-view/message-board.scss | 33 +++++ .../shared/battle-view/message-board/error.scss | 7 + .../src/shared/battle-view/message-board/help.scss | 33 +++++ src/css/src/shared/battleview.scss | 17 --- src/css/src/shared/battleview/button.scss | 27 ---- src/css/src/shared/battleview/constants.scss | 10 -- src/css/src/shared/battleview/main-menu.scss | 37 ----- src/css/src/shared/battleview/menu-mixins.scss | 36 ----- src/css/src/shared/battleview/message-board.scss | 33 ----- .../src/shared/battleview/message-board/error.scss | 7 - .../src/shared/battleview/message-board/help.scss | 33 ----- 44 files changed, 571 insertions(+), 873 deletions(-) delete mode 100644 src/css/src/battle/info-card.scss delete mode 100644 src/css/src/battle/info-card/character.scss delete mode 100644 src/css/src/battle/info-card/tile.scss delete mode 100644 src/css/src/battle/map/variant.scss delete mode 100644 src/css/src/map-editor/map/variant.scss delete mode 100644 src/css/src/roster-editor/info-card.scss delete mode 100644 src/css/src/roster-editor/info-card/character.scss create mode 100644 src/css/src/shared/battle-characters.scss create mode 100644 src/css/src/shared/battle-characters/info-card.scss create mode 100644 src/css/src/shared/battle-map.scss create mode 100644 src/css/src/shared/battle-map/info-card.scss create mode 100644 src/css/src/shared/battle-map/tile.scss create mode 100644 src/css/src/shared/battle-map/tile/variant.scss create mode 100644 src/css/src/shared/battle-view.scss create mode 100644 src/css/src/shared/battle-view/button.scss create mode 100644 src/css/src/shared/battle-view/constants.scss create mode 100644 src/css/src/shared/battle-view/info-card.scss create mode 100644 src/css/src/shared/battle-view/main-menu.scss create mode 100644 src/css/src/shared/battle-view/menu-mixins.scss create mode 100644 src/css/src/shared/battle-view/message-board.scss create mode 100644 src/css/src/shared/battle-view/message-board/error.scss create mode 100644 src/css/src/shared/battle-view/message-board/help.scss delete mode 100644 src/css/src/shared/battleview.scss delete mode 100644 src/css/src/shared/battleview/button.scss delete mode 100644 src/css/src/shared/battleview/constants.scss delete mode 100644 src/css/src/shared/battleview/main-menu.scss delete mode 100644 src/css/src/shared/battleview/menu-mixins.scss delete mode 100644 src/css/src/shared/battleview/message-board.scss delete mode 100644 src/css/src/shared/battleview/message-board/error.scss delete mode 100644 src/css/src/shared/battleview/message-board/help.scss (limited to 'src/css') diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss index 3ba177a..536b2fa 100644 --- a/src/css/src/battle.scss +++ b/src/css/src/battle.scss @@ -1,8 +1,9 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-characters'; +@import 'shared/battle-map'; @import 'shared/omnimod-icons'; @import 'battle/controlled-panel'; -@import 'battle/info-card'; @import 'battle/keyframes'; @import 'battle/map'; @import 'battle/message-board'; diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss index 3e08351..7918a0b 100644 --- a/src/css/src/battle/constants.scss +++ b/src/css/src/battle/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants'; $CONTROLLED-MENU-WIDTH: 15em; $SUB-MENU-WIDTH: 20em; diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss index fe6cb13..2a52fe6 100644 --- a/src/css/src/battle/controlled-panel.scss +++ b/src/css/src/battle/controlled-panel.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss deleted file mode 100644 index 7cb1c08..0000000 --- a/src/css/src/battle/info-card.scss +++ /dev/null @@ -1,104 +0,0 @@ -@import "../shared/colors"; -@import "../shared/shadows"; - -.info-card -{ - display: flex; - flex-flow: column; -} - -.info-card-top -{ - position: relative; - - margin-top: 0.5em; -} - -.info-card-picture -{ - top: 0; - left: 0; - - box-sizing: border-box; - - border-radius: 5px; - overflow: hidden; - - margin: 0; - - @include box-shadow(2px, $BROWN-0, 1); - - display: inline-block; -} - -.info-card-text-field -{ - display:flex; - justify-content:center; - align-items:center; - border-radius: 5px; - background-color: $BROWN-2; - width: 100%; -} - -.gauge -{ - position: relative; - border-radius: 5px; - border: 2px solid $BROWN-2; - text-align: center; - height: 2em; -} - -.gauge-text -{ - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 1; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.gauge-bar -{ - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 0; - - border-radius: 5px; - z-index: 0; - transition: width 3s ease-in-out; -} - -.character-card-health, -.tile-card-cost -{ - position: absolute; - left: 100px; - top: 0; - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); -} - - -.character-card-movement, -.tile-card-location -{ - position: absolute; - left: 100px; - top: calc(1.5em + 1em); - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); -} - -@import 'info-card/character'; -@import 'info-card/tile'; diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss deleted file mode 100644 index 114e54d..0000000 --- a/src/css/src/battle/info-card/character.scss +++ /dev/null @@ -1,150 +0,0 @@ -@import "../../shared/colors"; - -.character-portrait -{ - background-size: 100% 100%; - width: 100px; - height: 100px; - overflow: hidden; - cursor: pointer; -} - -.character-portrait * -{ - box-sizing: border-box; - background-size: 100% 100%; - width: inherit; - height: inherit; -} - -.character-portrait-body -{ - z-index: 1; -} - -.character-portrait-armor -{ - position: relative; - z-index: 1; - top: -100%; - background-size: 200% 100%; -} - -.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } -.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } -.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } -.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } -.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } -.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } -.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } -.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } - -.character-card-statuses -{ - position: absolute; - left: 100px; - top: calc(2*(1.5em + 0.5em) + 0.7em); - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); - display: flex; -} - -.character-card-status -{ - height: 1.5em; - width: 1.5em; - background-size: 100%; -} - -.character-card-target-status -{ - background-image: url("/asset/svg/status/target.svg"); -} - -.character-card-commander-status -{ - background-image: url("/asset/svg/status/commander.svg"); -} - -.character-card-health > .gauge-bar -{ - background-color: $RED-3; -} - -.character-card-movement > .gauge-bar -{ - background-color: $BLUE-3; -} - -.character-card-weapon, -.character-card-weapon-summary -{ - display: grid; - - border-radius: 5px; - - padding: 0.3em; - margin-top: 0.3em; -} - -.character-card-weapon -{ - background-color: #6C5D53; -} - -.character-card-weapon-summary -{ - background-color: $BROWN-1; -} - -.character-card-armor -{ - display: grid; - border-radius: 5px; - background-color: $BROWN-2; - - padding: 0.3em; - margin-top: 0.3em; -} - -.character-card-armor-stats -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.character-card-stats > *, -.character-card-armor-stats > * -{ - width: 25%; -} - -.character-card-stats -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - - border-radius: 5px; - background-color: $BROWN-2; - - padding: 0.3em; - margin-top: 0.3em; -} - -.asset-armor-variation-bird -{ - background-size: 200% 100%; - background-position: 100% 0; -} - -.character-card-mod -{ - display: inline-block; -} - -.info-card-mod -{ - display: inline-block; -} diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss deleted file mode 100644 index 8a6e1e1..0000000 --- a/src/css/src/battle/info-card/tile.scss +++ /dev/null @@ -1,22 +0,0 @@ - -.tile-card-icon -{ - position: relative; - width: 80px; - height: 80px; - display: inline-block; -} - -.tile-card-icon * -{ - position: absolute; - - background-size: 400%; - width: 80px; - height: 80px; -} - -.tile-card-top -{ - margin:0.3em; -} diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss index 9b95adf..1501ca1 100644 --- a/src/css/src/battle/map.scss +++ b/src/css/src/battle/map.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; @@ -40,22 +40,6 @@ position: relative; } -.tiled, .tiled * -{ - height: 32px; - width: 32px; - /** Fixes odd behavior of table cell being resized. **/ - /* min-width: 32px; */ - /* max-width: 32px; */ -} - -.tile-icon, .tile-icon * -{ - z-index: 0; - position: absolute; - background-size: 400%; -} - .path-icon-below-markers {z-index: 1;} .marker-icon {z-index: 2;} .path-icon-above-markers {z-index: 3;} @@ -68,18 +52,7 @@ position: absolute; } -.tiles-layer -{ - /*display: table; */ -} - -.tiles-layer-row -{ - /* display: table-row; */ -} - @import 'map/animation.scss'; @import 'map/character.scss'; @import 'map/marker.scss'; @import 'map/path.scss'; -@import 'map/variant.scss'; diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss deleted file mode 100644 index 253d5e3..0000000 --- a/src/css/src/battle/map/variant.scss +++ /dev/null @@ -1,33 +0,0 @@ - -.tile-variant-0 * {background-position: 0 0;} -.tile-variant-1 * {background-position: 100% 0;} -.tile-variant-2 * {background-position: 200% 0;} -.tile-variant-3 * {background-position: 300% 0;} - -.tile-variant-4 * {background-position: 0 100%;} -.tile-variant-5 * {background-position: 100% 100%;} -.tile-variant-6 * {background-position: 200% 100%;} -.tile-variant-7 * {background-position: 300% 100%;} - -.tile-variant-8 * {background-position: 0 200%;} -.tile-variant-9 * {background-position: 100% 200%;} -.tile-variant-10 * {background-position: 200% 200%;} -.tile-variant-11 * {background-position: 300% 200%;} - -.tile-variant-12 * {background-position: 0 300%;} -.tile-variant-13 * {background-position: 100% 300%;} -.tile-variant-14 * {background-position: 200% 300%;} -.tile-variant-15 * {background-position: 300% 300%;} - -.tile-icon-bg { z-index: 0; } -.tile-icon-dt { z-index: 9; } - -.tile-icon-f-0 { z-index: 1; } -.tile-icon-f-1 { z-index: 2; } -.tile-icon-f-2 { z-index: 3; } -.tile-icon-f-3 { z-index: 4; } -.tile-icon-f-4 { z-index: 5; } -.tile-icon-f-5 { z-index: 6; } -.tile-icon-f-6 { z-index: 7; } -.tile-icon-f-7 { z-index: 8; } - diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss index d302a4f..29ed0a5 100644 --- a/src/css/src/battle/sub-menus.scss +++ b/src/css/src/battle/sub-menus.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/map-editor.scss b/src/css/src/map-editor.scss index 8be26ab..edda499 100644 --- a/src/css/src/map-editor.scss +++ b/src/css/src/map-editor.scss @@ -1,4 +1,6 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-map'; +@import 'shared/omnimod-icons'; @import 'map-editor/map'; @import 'map-editor/sub-menus'; diff --git a/src/css/src/map-editor/constants.scss b/src/css/src/map-editor/constants.scss index a8f67d3..51af535 100644 --- a/src/css/src/map-editor/constants.scss +++ b/src/css/src/map-editor/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants'; $TOOLBOX-MENU-WIDTH: 15em; $SUB-MENU-WIDTH: 20em; diff --git a/src/css/src/map-editor/map.scss b/src/css/src/map-editor/map.scss index 66c0207..a1ada34 100644 --- a/src/css/src/map-editor/map.scss +++ b/src/css/src/map-editor/map.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; @@ -40,38 +40,20 @@ position: relative; } -.map-tiled, .map-tiled * -{ - height: 32px; - width: 32px; -} - -.map-tile-icon, .map-tile-icon * -{ - z-index: 0; - position: absolute; - background-size: 400%; -} - -.map-tile-selected +.tile-selected { border: 1px dashed white; } -.map-tile-square-corner +.tile-square-corner { animation-name: blinking; animation-duration: 1s; animation-iteration-count: infinite; } -.map-tile, .map-tile * {background-size: 400%;} -.map-tile * {position: absolute;} - @keyframes blinking { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } - -@import 'map/variant.scss'; diff --git a/src/css/src/map-editor/map/variant.scss b/src/css/src/map-editor/map/variant.scss deleted file mode 100644 index 109f093..0000000 --- a/src/css/src/map-editor/map/variant.scss +++ /dev/null @@ -1,33 +0,0 @@ - -.map-tile-variant-0 * {background-position: 0 0;} -.map-tile-variant-1 * {background-position: 100% 0;} -.map-tile-variant-2 * {background-position: 200% 0;} -.map-tile-variant-3 * {background-position: 300% 0;} - -.map-tile-variant-4 * {background-position: 0 100%;} -.map-tile-variant-5 * {background-position: 100% 100%;} -.map-tile-variant-6 * {background-position: 200% 100%;} -.map-tile-variant-7 * {background-position: 300% 100%;} - -.map-tile-variant-8 * {background-position: 0 200%;} -.map-tile-variant-9 * {background-position: 100% 200%;} -.map-tile-variant-10 * {background-position: 200% 200%;} -.map-tile-variant-11 * {background-position: 300% 200%;} - -.map-tile-variant-12 * {background-position: 0 300%;} -.map-tile-variant-13 * {background-position: 100% 300%;} -.map-tile-variant-14 * {background-position: 200% 300%;} -.map-tile-variant-15 * {background-position: 300% 300%;} - -.map-tile-icon-bg { z-index: 0; } -.map-tile-icon-dt { z-index: 9; } - -.map-tile-icon-f-0 { z-index: 1; } -.map-tile-icon-f-1 { z-index: 2; } -.map-tile-icon-f-2 { z-index: 3; } -.map-tile-icon-f-3 { z-index: 4; } -.map-tile-icon-f-4 { z-index: 5; } -.map-tile-icon-f-5 { z-index: 6; } -.map-tile-icon-f-6 { z-index: 7; } -.map-tile-icon-f-7 { z-index: 8; } - diff --git a/src/css/src/map-editor/sub-menus.scss b/src/css/src/map-editor/sub-menus.scss index d526238..4a97a22 100644 --- a/src/css/src/map-editor/sub-menus.scss +++ b/src/css/src/map-editor/sub-menus.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/map-editor/toolbox.scss b/src/css/src/map-editor/toolbox.scss index 2398796..2b9bdd3 100644 --- a/src/css/src/map-editor/toolbox.scss +++ b/src/css/src/map-editor/toolbox.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/roster-editor.scss b/src/css/src/roster-editor.scss index a35188e..49c9fc4 100644 --- a/src/css/src/roster-editor.scss +++ b/src/css/src/roster-editor.scss @@ -1,6 +1,6 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-characters'; @import 'shared/omnimod-icons'; @import 'roster-editor/controlled-panel'; -@import 'roster-editor/info-card'; @import 'roster-editor/selection-window'; diff --git a/src/css/src/roster-editor/constants.scss b/src/css/src/roster-editor/constants.scss index ee4e862..8ce7828 100644 --- a/src/css/src/roster-editor/constants.scss +++ b/src/css/src/roster-editor/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants'; $CONTROLLED-MENU-WIDTH: 15em; diff --git a/src/css/src/roster-editor/controlled-panel.scss b/src/css/src/roster-editor/controlled-panel.scss index 23b2a8a..ace0cf0 100644 --- a/src/css/src/roster-editor/controlled-panel.scss +++ b/src/css/src/roster-editor/controlled-panel.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/roster-editor/info-card.scss b/src/css/src/roster-editor/info-card.scss deleted file mode 100644 index bb043a9..0000000 --- a/src/css/src/roster-editor/info-card.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import "../shared/colors"; -@import "../shared/shadows"; - -.info-card -{ - display: flex; - flex-flow: column; -} - -.info-card-top -{ - position: relative; - - margin-top: 0.5em; -} - -.info-card-picture -{ - top: 0; - left: 0; - - box-sizing: border-box; - - border-radius: 5px; - overflow: hidden; - - margin: 0; - - @include box-shadow(2px, $BROWN-0, 1); - - display: inline-block; -} - -.info-card-text-field -{ - display:flex; - justify-content:center; - align-items:center; - border-radius: 5px; - background-color: $BROWN-2; - width: 100%; -} - -.gauge -{ - position: relative; - border-radius: 5px; - border: 2px solid $BROWN-2; - text-align: center; - height: 2em; -} - -.gauge-text -{ - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 1; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.gauge-bar -{ - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 0; - - border-radius: 5px; - z-index: 0; - transition: width 3s ease-in-out; -} - -.character-card-health, -.tile-card-cost -{ - position: absolute; - left: 100px; - top: 0; - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); -} - - -.character-card-movement, -.tile-card-location -{ - position: absolute; - left: 100px; - top: calc(1.5em + 1em); - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); -} - -@import 'info-card/character'; diff --git a/src/css/src/roster-editor/info-card/character.scss b/src/css/src/roster-editor/info-card/character.scss deleted file mode 100644 index cb00546..0000000 --- a/src/css/src/roster-editor/info-card/character.scss +++ /dev/null @@ -1,157 +0,0 @@ -@import "../../shared/colors"; - -.character-portrait -{ - background-size: 100% 100%; - width: 100px; - height: 100px; - overflow: hidden; - cursor: pointer; -} - -.character-portrait * -{ - box-sizing: border-box; - background-size: 100% 100%; - width: inherit; - height: inherit; -} - -.character-portrait-body -{ - z-index: 1; -} - -.character-portrait-armor -{ - position: relative; - z-index: 1; - top: -100%; - background-size: 200% 100%; -} - -.character-portrait-battle-index -{ - position: relative; - z-index: 2; - top: -200%; -} - -.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } -.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } -.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } -.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } -.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } -.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } -.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } -.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } - -.character-card-statuses -{ - position: absolute; - left: 100px; - top: calc(2*(1.5em + 0.5em) + 0.7em); - margin-left: 0.5em; - width: calc(100% - 100px - 0.5em); - display: flex; -} - -.character-card-status -{ - height: 1.5em; - width: 1.5em; - background-size: 100%; -} - -.character-card-target-status -{ - background-image: url("/asset/svg/status/target.svg"); -} - -.character-card-commander-status -{ - background-image: url("/asset/svg/status/commander.svg"); -} - -.character-card-health > .gauge-bar -{ - background-color: $RED-3; -} - -.character-card-movement > .gauge-bar -{ - background-color: $BLUE-3; -} - -.character-card-weapon, -.character-card-weapon-summary -{ - display: grid; - - border-radius: 5px; - - padding: 0.3em; - margin-top: 0.3em; -} - -.character-card-weapon -{ - background-color: #6C5D53; -} - -.character-card-weapon-summary -{ - background-color: $BROWN-1; -} - -.character-card-armor -{ - display: grid; - border-radius: 5px; - background-color: $BROWN-2; - - padding: 0.3em; - margin-top: 0.3em; -} - -.character-card-armor-stats -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.character-card-stats > *, -.character-card-armor-stats > * -{ - width: 25%; -} - -.character-card-stats -{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - - border-radius: 5px; - background-color: $BROWN-2; - - padding: 0.3em; - margin-top: 0.3em; -} - -.asset-armor-variation-bird -{ - background-size: 200% 100%; - background-position: 100% 0; -} - -.character-card-mod -{ - display: inline-block; -} - -.info-card-mod -{ - display: inline-block; -} diff --git a/src/css/src/roster-editor/selection-window.scss b/src/css/src/roster-editor/selection-window.scss index c719ea0..f3a63a0 100644 --- a/src/css/src/roster-editor/selection-window.scss +++ b/src/css/src/roster-editor/selection-window.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins'; @import 'constants'; diff --git a/src/css/src/shared/battle-characters.scss b/src/css/src/shared/battle-characters.scss new file mode 100644 index 0000000..78b6f46 --- /dev/null +++ b/src/css/src/shared/battle-characters.scss @@ -0,0 +1 @@ +@import 'battle-characters/info-card'; diff --git a/src/css/src/shared/battle-characters/info-card.scss b/src/css/src/shared/battle-characters/info-card.scss new file mode 100644 index 0000000..7a90a97 --- /dev/null +++ b/src/css/src/shared/battle-characters/info-card.scss @@ -0,0 +1,158 @@ +@import "../../shared/colors"; + +.character-portrait +{ + background-size: 100% 100%; + width: 100px; + height: 100px; + overflow: hidden; + cursor: pointer; +} + +.character-portrait * +{ + box-sizing: border-box; + background-size: 100% 100%; + width: inherit; + height: inherit; +} + + +.character-portrait-battle-index +{ + position: relative; + z-index: 2; + top: -200%; +} + +.character-portrait-body +{ + z-index: 1; +} + +.character-portrait-armor +{ + position: relative; + z-index: 1; + top: -100%; + background-size: 200% 100%; +} + +.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } +.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } +.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } +.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } +.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } +.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } +.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } +.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } + +.character-card-statuses +{ + position: absolute; + left: 100px; + top: calc(2*(1.5em + 0.5em) + 0.7em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); + display: flex; +} + +.character-card-status +{ + height: 1.5em; + width: 1.5em; + background-size: 100%; +} + +.character-card-target-status +{ + background-image: url("/asset/svg/status/target.svg"); +} + +.character-card-commander-status +{ + background-image: url("/asset/svg/status/commander.svg"); +} + +.character-card-health > .gauge-bar +{ + background-color: $RED-3; +} + +.character-card-movement > .gauge-bar +{ + background-color: $BLUE-3; +} + +.character-card-weapon, +.character-card-weapon-summary +{ + display: grid; + + border-radius: 5px; + + padding: 0.3em; + margin-top: 0.3em; +} + +.character-card-weapon +{ + background-color: #6C5D53; +} + +.character-card-weapon-summary +{ + background-color: $BROWN-1; +} + +.character-card-armor +{ + display: grid; + border-radius: 5px; + background-color: $BROWN-2; + + padding: 0.3em; + margin-top: 0.3em; +} + +.character-card-armor-stats +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.character-card-stats > *, +.character-card-armor-stats > * +{ + width: 25%; +} + +.character-card-stats +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + border-radius: 5px; + background-color: $BROWN-2; + + padding: 0.3em; + margin-top: 0.3em; +} + +.asset-armor-variation-bird +{ + background-size: 200% 100%; + background-position: 100% 0; +} + +.character-card-mod +{ + display: inline-block; +} + +.info-card-mod +{ + display: inline-block; +} diff --git a/src/css/src/shared/battle-map.scss b/src/css/src/shared/battle-map.scss new file mode 100644 index 0000000..659ad54 --- /dev/null +++ b/src/css/src/shared/battle-map.scss @@ -0,0 +1,2 @@ +@import 'battle-map/info-card'; +@import 'battle-map/tile'; diff --git a/src/css/src/shared/battle-map/info-card.scss b/src/css/src/shared/battle-map/info-card.scss new file mode 100644 index 0000000..8a6e1e1 --- /dev/null +++ b/src/css/src/shared/battle-map/info-card.scss @@ -0,0 +1,22 @@ + +.tile-card-icon +{ + position: relative; + width: 80px; + height: 80px; + display: inline-block; +} + +.tile-card-icon * +{ + position: absolute; + + background-size: 400%; + width: 80px; + height: 80px; +} + +.tile-card-top +{ + margin:0.3em; +} diff --git a/src/css/src/shared/battle-map/tile.scss b/src/css/src/shared/battle-map/tile.scss new file mode 100644 index 0000000..89e2fc7 --- /dev/null +++ b/src/css/src/shared/battle-map/tile.scss @@ -0,0 +1,24 @@ +.tiled, .tiled * +{ + height: 32px; + width: 32px; +} + +.tiled * +{ + position: absolute; +} + +.tile-icon +{ + z-index: 0; + position: absolute; +} + +.tile-icon *, +.tile * +{ + background-size: 400%; +} + +@import "tile/variant.scss" diff --git a/src/css/src/shared/battle-map/tile/variant.scss b/src/css/src/shared/battle-map/tile/variant.scss new file mode 100644 index 0000000..253d5e3 --- /dev/null +++ b/src/css/src/shared/battle-map/tile/variant.scss @@ -0,0 +1,33 @@ + +.tile-variant-0 * {background-position: 0 0;} +.tile-variant-1 * {background-position: 100% 0;} +.tile-variant-2 * {background-position: 200% 0;} +.tile-variant-3 * {background-position: 300% 0;} + +.tile-variant-4 * {background-position: 0 100%;} +.tile-variant-5 * {background-position: 100% 100%;} +.tile-variant-6 * {background-position: 200% 100%;} +.tile-variant-7 * {background-position: 300% 100%;} + +.tile-variant-8 * {background-position: 0 200%;} +.tile-variant-9 * {background-position: 100% 200%;} +.tile-variant-10 * {background-position: 200% 200%;} +.tile-variant-11 * {background-position: 300% 200%;} + +.tile-variant-12 * {background-position: 0 300%;} +.tile-variant-13 * {background-position: 100% 300%;} +.tile-variant-14 * {background-position: 200% 300%;} +.tile-variant-15 * {background-position: 300% 300%;} + +.tile-icon-bg { z-index: 0; } +.tile-icon-dt { z-index: 9; } + +.tile-icon-f-0 { z-index: 1; } +.tile-icon-f-1 { z-index: 2; } +.tile-icon-f-2 { z-index: 3; } +.tile-icon-f-3 { z-index: 4; } +.tile-icon-f-4 { z-index: 5; } +.tile-icon-f-5 { z-index: 6; } +.tile-icon-f-6 { z-index: 7; } +.tile-icon-f-7 { z-index: 8; } + diff --git a/src/css/src/shared/battle-view.scss b/src/css/src/shared/battle-view.scss new file mode 100644 index 0000000..979740f --- /dev/null +++ b/src/css/src/shared/battle-view.scss @@ -0,0 +1,18 @@ +@import 'colors'; +@import 'shadows'; + +* +{ + color: $GOLD-0; + @include text-shadow(1px, $BROWN-0, 0.5); +} + +body +{ + background-color: $BROWN-2; +} + +@import 'battle-view/button'; +@import 'battle-view/main-menu'; +@import 'battle-view/info-card'; +@import 'battle-view/message-board'; diff --git a/src/css/src/shared/battle-view/button.scss b/src/css/src/shared/battle-view/button.scss new file mode 100644 index 0000000..75788ca --- /dev/null +++ b/src/css/src/shared/battle-view/button.scss @@ -0,0 +1,27 @@ +@import '../colors'; + +button +{ + /** FIXME not everywhere **/ + flex: 1; + + text-transform: uppercase; + background-color: $BROWN-3; + border-color: $BROWN-1; +} + +/** FIXME not everywhere **/ +button + button +{ + margin-left: 0.5em; +} + +button:hover +{ + background-color: $BROWN-4; +} + +button:disabled +{ + background-color: $BROWN-0; +} diff --git a/src/css/src/shared/battle-view/constants.scss b/src/css/src/shared/battle-view/constants.scss new file mode 100644 index 0000000..63d4bbf --- /dev/null +++ b/src/css/src/shared/battle-view/constants.scss @@ -0,0 +1,10 @@ +$MENU-MARGIN: 0.5em; +$MENU-PADDING: 0.5em; +$MENU-BORDER: 0.2em; +$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; + +$MAIN-MENU-HEIGHT: 3em; +$MESSAGE-BOARD-HEIGHT: 10em; + +$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; +$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/shared/battle-view/info-card.scss b/src/css/src/shared/battle-view/info-card.scss new file mode 100644 index 0000000..d7839cd --- /dev/null +++ b/src/css/src/shared/battle-view/info-card.scss @@ -0,0 +1,101 @@ +@import "../../shared/colors"; +@import "../../shared/shadows"; + +.info-card +{ + display: flex; + flex-flow: column; +} + +.info-card-top +{ + position: relative; + + margin-top: 0.5em; +} + +.info-card-picture +{ + top: 0; + left: 0; + + box-sizing: border-box; + + border-radius: 5px; + overflow: hidden; + + margin: 0; + + @include box-shadow(2px, $BROWN-0, 1); + + display: inline-block; +} + +.info-card-text-field +{ + display:flex; + justify-content:center; + align-items:center; + border-radius: 5px; + background-color: $BROWN-2; + width: 100%; +} + +.gauge +{ + position: relative; + border-radius: 5px; + border: 2px solid $BROWN-2; + text-align: center; + height: 2em; +} + +.gauge-text +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.gauge-bar +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 0; + + border-radius: 5px; + z-index: 0; + transition: width 3s ease-in-out; +} + +.character-card-health, +.tile-card-cost +{ + position: absolute; + left: 100px; + top: 0; + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} + + +.character-card-movement, +.tile-card-location +{ + position: absolute; + left: 100px; + top: calc(1.5em + 1em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} diff --git a/src/css/src/shared/battle-view/main-menu.scss b/src/css/src/shared/battle-view/main-menu.scss new file mode 100644 index 0000000..fd5db10 --- /dev/null +++ b/src/css/src/shared/battle-view/main-menu.scss @@ -0,0 +1,37 @@ +@import '../colors'; + +@import 'constants'; +@import 'menu-mixins'; + +.main-menu +{ + position: absolute; + top: 0; + left: 0; + right: 0; + + height: $MAIN-MENU-HEIGHT; + + @include menu-background-color(); + + display: flex; + flex-direction: row; + flex-wrap: wrap; + + @include menu-border(); + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; + + @include menu-padding(); + + @include menu-margin(); + + margin-top: 0; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + diff --git a/src/css/src/shared/battle-view/menu-mixins.scss b/src/css/src/shared/battle-view/menu-mixins.scss new file mode 100644 index 0000000..235671f --- /dev/null +++ b/src/css/src/shared/battle-view/menu-mixins.scss @@ -0,0 +1,36 @@ +@import '../colors'; + +@import 'constants'; + +@mixin menu-border () +{ + border: $MENU-BORDER solid $BROWN-1; + border-radius: 15px; +} + +@mixin menu-margin () +{ + margin: $MENU-MARGIN; +} + +@mixin menu-padding () +{ + padding: $MENU-PADDING; +} + +@mixin menu-background-color () +{ + background-color: $BROWN-3; +} + +@mixin menu-panel () +{ + position: absolute; + display: block; + + @include menu-background-color(); + + @include menu-padding(); + + @include menu-border(); +} diff --git a/src/css/src/shared/battle-view/message-board.scss b/src/css/src/shared/battle-view/message-board.scss new file mode 100644 index 0000000..0fc9fa7 --- /dev/null +++ b/src/css/src/shared/battle-view/message-board.scss @@ -0,0 +1,33 @@ +@import 'constants'; +@import 'menu-mixins'; + +.message-board +{ + position: absolute; + bottom: 0; + left: 0; + right: 0; + + height: $MESSAGE-BOARD-HEIGHT; + + @include menu-background-color(); + + @include menu-border(); + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + @include menu-padding(); + + @include menu-margin(); + margin-bottom: 0; + + display: flex; + flex-flow: row; + justify-content: space-between; + + overflow-y: auto; +} + +@import 'message-board/error'; +@import 'message-board/help'; diff --git a/src/css/src/shared/battle-view/message-board/error.scss b/src/css/src/shared/battle-view/message-board/error.scss new file mode 100644 index 0000000..10b9eda --- /dev/null +++ b/src/css/src/shared/battle-view/message-board/error.scss @@ -0,0 +1,7 @@ +@import '../../colors'; + +.error +{ + background-color: $RED-1; +} + diff --git a/src/css/src/shared/battle-view/message-board/help.scss b/src/css/src/shared/battle-view/message-board/help.scss new file mode 100644 index 0000000..bb66c33 --- /dev/null +++ b/src/css/src/shared/battle-view/message-board/help.scss @@ -0,0 +1,33 @@ +.message-board-help +{ + display: block; +} + +.message-board-help h1 +{ + margin: 0; + margin-bottom: 0.3em; + font-size: 1.5em; + text-align: center; +} + +.message-board-help-figure +{ + width: 1.5em; + height: 1.5em; + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + +.help-guide-icon +{ + margin-right: 0.5em; + width: 1.5em; + height: 1.5em; + background-image: url("/asset/svg/help-icon.svg"); + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + diff --git a/src/css/src/shared/battleview.scss b/src/css/src/shared/battleview.scss deleted file mode 100644 index fc80bee..0000000 --- a/src/css/src/shared/battleview.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import 'colors'; -@import 'shadows'; - -* -{ - color: $GOLD-0; - @include text-shadow(1px, $BROWN-0, 0.5); -} - -body -{ - background-color: $BROWN-2; -} - -@import 'battleview/button'; -@import 'battleview/main-menu'; -@import 'battleview/message-board'; diff --git a/src/css/src/shared/battleview/button.scss b/src/css/src/shared/battleview/button.scss deleted file mode 100644 index 75788ca..0000000 --- a/src/css/src/shared/battleview/button.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../colors'; - -button -{ - /** FIXME not everywhere **/ - flex: 1; - - text-transform: uppercase; - background-color: $BROWN-3; - border-color: $BROWN-1; -} - -/** FIXME not everywhere **/ -button + button -{ - margin-left: 0.5em; -} - -button:hover -{ - background-color: $BROWN-4; -} - -button:disabled -{ - background-color: $BROWN-0; -} diff --git a/src/css/src/shared/battleview/constants.scss b/src/css/src/shared/battleview/constants.scss deleted file mode 100644 index 63d4bbf..0000000 --- a/src/css/src/shared/battleview/constants.scss +++ /dev/null @@ -1,10 +0,0 @@ -$MENU-MARGIN: 0.5em; -$MENU-PADDING: 0.5em; -$MENU-BORDER: 0.2em; -$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; - -$MAIN-MENU-HEIGHT: 3em; -$MESSAGE-BOARD-HEIGHT: 10em; - -$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; -$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/shared/battleview/main-menu.scss b/src/css/src/shared/battleview/main-menu.scss deleted file mode 100644 index fd5db10..0000000 --- a/src/css/src/shared/battleview/main-menu.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../colors'; - -@import 'constants'; -@import 'menu-mixins'; - -.main-menu -{ - position: absolute; - top: 0; - left: 0; - right: 0; - - height: $MAIN-MENU-HEIGHT; - - @include menu-background-color(); - - display: flex; - flex-direction: row; - flex-wrap: wrap; - - @include menu-border(); - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - - @include menu-padding(); - - @include menu-margin(); - - margin-top: 0; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; -} - diff --git a/src/css/src/shared/battleview/menu-mixins.scss b/src/css/src/shared/battleview/menu-mixins.scss deleted file mode 100644 index 235671f..0000000 --- a/src/css/src/shared/battleview/menu-mixins.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import '../colors'; - -@import 'constants'; - -@mixin menu-border () -{ - border: $MENU-BORDER solid $BROWN-1; - border-radius: 15px; -} - -@mixin menu-margin () -{ - margin: $MENU-MARGIN; -} - -@mixin menu-padding () -{ - padding: $MENU-PADDING; -} - -@mixin menu-background-color () -{ - background-color: $BROWN-3; -} - -@mixin menu-panel () -{ - position: absolute; - display: block; - - @include menu-background-color(); - - @include menu-padding(); - - @include menu-border(); -} diff --git a/src/css/src/shared/battleview/message-board.scss b/src/css/src/shared/battleview/message-board.scss deleted file mode 100644 index 0fc9fa7..0000000 --- a/src/css/src/shared/battleview/message-board.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import 'constants'; -@import 'menu-mixins'; - -.message-board -{ - position: absolute; - bottom: 0; - left: 0; - right: 0; - - height: $MESSAGE-BOARD-HEIGHT; - - @include menu-background-color(); - - @include menu-border(); - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - @include menu-padding(); - - @include menu-margin(); - margin-bottom: 0; - - display: flex; - flex-flow: row; - justify-content: space-between; - - overflow-y: auto; -} - -@import 'message-board/error'; -@import 'message-board/help'; diff --git a/src/css/src/shared/battleview/message-board/error.scss b/src/css/src/shared/battleview/message-board/error.scss deleted file mode 100644 index 10b9eda..0000000 --- a/src/css/src/shared/battleview/message-board/error.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../colors'; - -.error -{ - background-color: $RED-1; -} - diff --git a/src/css/src/shared/battleview/message-board/help.scss b/src/css/src/shared/battleview/message-board/help.scss deleted file mode 100644 index bb66c33..0000000 --- a/src/css/src/shared/battleview/message-board/help.scss +++ /dev/null @@ -1,33 +0,0 @@ -.message-board-help -{ - display: block; -} - -.message-board-help h1 -{ - margin: 0; - margin-bottom: 0.3em; - font-size: 1.5em; - text-align: center; -} - -.message-board-help-figure -{ - width: 1.5em; - height: 1.5em; - background-size: 100%; - display: inline-block; - vertical-align: middle; -} - -.help-guide-icon -{ - margin-right: 0.5em; - width: 1.5em; - height: 1.5em; - background-image: url("/asset/svg/help-icon.svg"); - background-size: 100%; - display: inline-block; - vertical-align: middle; -} - -- cgit v1.2.3-70-g09d2