summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/css/src/battle.scss10
-rw-r--r--src/css/src/battle/info-card/tile.scss10
-rw-r--r--src/css/src/battle/main-menu.scss4
-rw-r--r--src/css/src/battle/map/variant.scss32
-rw-r--r--src/css/src/map-editor.scss45
-rw-r--r--src/css/src/map-editor/constants.scss15
-rw-r--r--src/css/src/map-editor/main-menu.scss36
-rw-r--r--src/css/src/map-editor/map.scss75
-rw-r--r--src/css/src/map-editor/map/variant.scss33
-rw-r--r--src/css/src/map-editor/menu-mixins.scss24
-rw-r--r--src/css/src/map-editor/message-board.scss44
-rw-r--r--src/css/src/map-editor/message-board/error.scss7
-rw-r--r--src/css/src/map-editor/message-board/help.scss33
-rw-r--r--src/css/src/map-editor/sub-menus.scss23
-rw-r--r--src/css/src/map-editor/toolbox.scss37
15 files changed, 408 insertions, 20 deletions
diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss
index c671396..a341ce3 100644
--- a/src/css/src/battle.scss
+++ b/src/css/src/battle.scss
@@ -26,6 +26,16 @@ button + button
margin-left: 0.5em;
}
+button:hover
+{
+ background-color: $BROWN-4;
+}
+
+button:disabled
+{
+ background-color: $BROWN-0;
+}
+
@import 'battle/controlled-panel';
@import 'battle/info-card';
@import 'battle/keyframes';
diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss
index 65ed591..ab8b1a0 100644
--- a/src/css/src/battle/info-card/tile.scss
+++ b/src/css/src/battle/info-card/tile.scss
@@ -1,6 +1,16 @@
.battle-tile-card-icon
{
+ position: relative;
+ width: 80px;
+ height: 80px;
+ display: inline-block;
+}
+
+.battle-tile-card-icon *
+{
+ position: absolute;
+
background-size: 400%;
width: 80px;
height: 80px;
diff --git a/src/css/src/battle/main-menu.scss b/src/css/src/battle/main-menu.scss
index 1dfe02a..ac43c29 100644
--- a/src/css/src/battle/main-menu.scss
+++ b/src/css/src/battle/main-menu.scss
@@ -35,7 +35,3 @@
justify-content: space-between;
}
-.battle-main-menu button:hover
-{
- background-color: $BROWN-4;
-}
diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss
index ca8aa66..58f9915 100644
--- a/src/css/src/battle/map/variant.scss
+++ b/src/css/src/battle/map/variant.scss
@@ -1,23 +1,23 @@
-.battle-tile-variant-0 {background-position: 0 0;}
-.battle-tile-variant-1 {background-position: 100% 0;}
-.battle-tile-variant-2 {background-position: 200% 0;}
-.battle-tile-variant-3 {background-position: 300% 0;}
+.battle-tile-variant-0 * {background-position: 0 0;}
+.battle-tile-variant-1 * {background-position: 100% 0;}
+.battle-tile-variant-2 * {background-position: 200% 0;}
+.battle-tile-variant-3 * {background-position: 300% 0;}
-.battle-tile-variant-4 {background-position: 0 100%;}
-.battle-tile-variant-5 {background-position: 100% 100%;}
-.battle-tile-variant-6 {background-position: 200% 100%;}
-.battle-tile-variant-7 {background-position: 300% 100%;}
+.battle-tile-variant-4 * {background-position: 0 100%;}
+.battle-tile-variant-5 * {background-position: 100% 100%;}
+.battle-tile-variant-6 * {background-position: 200% 100%;}
+.battle-tile-variant-7 * {background-position: 300% 100%;}
-.battle-tile-variant-8 {background-position: 0 200%;}
-.battle-tile-variant-9 {background-position: 100% 200%;}
-.battle-tile-variant-10 {background-position: 200% 200%;}
-.battle-tile-variant-11 {background-position: 300% 200%;}
+.battle-tile-variant-8 * {background-position: 0 200%;}
+.battle-tile-variant-9 * {background-position: 100% 200%;}
+.battle-tile-variant-10 * {background-position: 200% 200%;}
+.battle-tile-variant-11 * {background-position: 300% 200%;}
-.battle-tile-variant-12 {background-position: 0 300%;}
-.battle-tile-variant-13 {background-position: 100% 300%;}
-.battle-tile-variant-14 {background-position: 200% 300%;}
-.battle-tile-variant-15 {background-position: 300% 300%;}
+.battle-tile-variant-12 * {background-position: 0 300%;}
+.battle-tile-variant-13 * {background-position: 100% 300%;}
+.battle-tile-variant-14 * {background-position: 200% 300%;}
+.battle-tile-variant-15 * {background-position: 300% 300%;}
.battle-tile-icon-bg { z-index: 0; }
.battle-tile-icon-dt { z-index: 9; }
diff --git a/src/css/src/map-editor.scss b/src/css/src/map-editor.scss
new file mode 100644
index 0000000..711e612
--- /dev/null
+++ b/src/css/src/map-editor.scss
@@ -0,0 +1,45 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+ color: $GOLD-0;
+ @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body
+{
+ background-color: $BROWN-2;
+}
+
+button
+{
+ flex: 1;
+
+ text-transform: uppercase;
+ background-color: $BROWN-3;
+ border-color: $BROWN-1;
+}
+
+button + button
+{
+ margin-left: 0.5em;
+}
+
+button:hover
+{
+ background-color: $BROWN-4;
+}
+
+button:disabled
+{
+ background-color: $BROWN-0;
+}
+
+
+//@import 'map-editor/info-card';
+@import 'map-editor/main-menu';
+@import 'map-editor/map';
+@import 'map-editor/message-board';
+@import 'map-editor/sub-menus';
+@import 'map-editor/toolbox';
diff --git a/src/css/src/map-editor/constants.scss b/src/css/src/map-editor/constants.scss
new file mode 100644
index 0000000..9c46e20
--- /dev/null
+++ b/src/css/src/map-editor/constants.scss
@@ -0,0 +1,15 @@
+$MENU-MARGIN: 0.5em;
+$MENU-PADDING: 0.5em;
+$MENU-BORDER: 0.2em;
+
+$MAIN-MENU-HEIGHT: 3em;
+$MESSAGE-BOARD-HEIGHT: 10em;
+$TOOLBOX-MENU-WIDTH: 15em;
+$SUB-MENU-WIDTH: 20em;
+
+$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER;
+
+$NEXT-TO-TOOLBOX-MENU: $TOOLBOX-MENU-WIDTH + $MENU-EXTRA;
+$NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA;
+$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA;
+$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA;
diff --git a/src/css/src/map-editor/main-menu.scss b/src/css/src/map-editor/main-menu.scss
new file mode 100644
index 0000000..4d4a488
--- /dev/null
+++ b/src/css/src/map-editor/main-menu.scss
@@ -0,0 +1,36 @@
+@import '../shared/colors';
+
+@import 'constants';
+@import 'menu-mixins';
+
+.map-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/map-editor/map.scss b/src/css/src/map-editor/map.scss
new file mode 100644
index 0000000..afa5bde
--- /dev/null
+++ b/src/css/src/map-editor/map.scss
@@ -0,0 +1,75 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.map-container-centerer
+{
+ position: absolute;
+
+ top: $BELOW-MAIN-MENU;
+ left: $NEXT-TO-TOOLBOX-MENU;
+ right: $NEXT-TO-SUB-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ display: flex;
+}
+
+.map-container
+{
+ display: inline-block;
+ max-height: 100%;
+ max-width: 100%;
+
+ overflow: scroll;
+
+ margin: auto;
+ resize: both;
+
+ @include menu-border();
+
+ @include menu-background-color();
+}
+
+.map-actual
+{
+ display: inline-block;
+ transform-origin: top left;
+
+ /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+ 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
+{
+ border: 1px dashed white;
+}
+
+.map-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
new file mode 100644
index 0000000..109f093
--- /dev/null
+++ b/src/css/src/map-editor/map/variant.scss
@@ -0,0 +1,33 @@
+
+.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/menu-mixins.scss b/src/css/src/map-editor/menu-mixins.scss
new file mode 100644
index 0000000..f7129a1
--- /dev/null
+++ b/src/css/src/map-editor/menu-mixins.scss
@@ -0,0 +1,24 @@
+@import '../shared/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;
+}
diff --git a/src/css/src/map-editor/message-board.scss b/src/css/src/map-editor/message-board.scss
new file mode 100644
index 0000000..22720e8
--- /dev/null
+++ b/src/css/src/map-editor/message-board.scss
@@ -0,0 +1,44 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.map-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;
+}
+
+/*
+.map-message-board
+{
+ background: $BROWN-4;
+ color: $BROWN-0;
+ line-height: 1.3em;
+ font-size: 1.2em;
+ text-shadow: none;
+}
+*/
+
+@import 'message-board/error';
+@import 'message-board/help';
diff --git a/src/css/src/map-editor/message-board/error.scss b/src/css/src/map-editor/message-board/error.scss
new file mode 100644
index 0000000..ddfa4ba
--- /dev/null
+++ b/src/css/src/map-editor/message-board/error.scss
@@ -0,0 +1,7 @@
+@import '../../shared/colors';
+
+.map-error
+{
+ background-color: $RED-1;
+}
+
diff --git a/src/css/src/map-editor/message-board/help.scss b/src/css/src/map-editor/message-board/help.scss
new file mode 100644
index 0000000..7ffc576
--- /dev/null
+++ b/src/css/src/map-editor/message-board/help.scss
@@ -0,0 +1,33 @@
+.map-message-board-help
+{
+ display: block;
+}
+
+.map-message-board-help h1
+{
+ margin: 0;
+ margin-bottom: 0.3em;
+ font-size: 1.5em;
+ text-align: center;
+}
+
+.map-message-board-help-figure
+{
+ width: 1.5em;
+ height: 1.5em;
+ background-size: 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.map-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/map-editor/sub-menus.scss b/src/css/src/map-editor/sub-menus.scss
new file mode 100644
index 0000000..269ac83
--- /dev/null
+++ b/src/css/src/map-editor/sub-menus.scss
@@ -0,0 +1,23 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.map-sub-menu
+{
+ position: absolute;
+ right: 0;
+ top: $BELOW-MAIN-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ width: $SUB-MENU-WIDTH;
+
+ @include menu-background-color();
+
+ @include menu-padding();
+
+ @include menu-border();
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: none;
+
+ overflow: auto;
+}
diff --git a/src/css/src/map-editor/toolbox.scss b/src/css/src/map-editor/toolbox.scss
new file mode 100644
index 0000000..77c59f1
--- /dev/null
+++ b/src/css/src/map-editor/toolbox.scss
@@ -0,0 +1,37 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.map-toolbox
+{
+ position: absolute;
+ display: block;
+ left: 0;
+ top: $BELOW-MAIN-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ width: $TOOLBOX-MENU-WIDTH;
+
+ @include menu-background-color();
+
+ @include menu-padding();
+
+ @include menu-border();
+
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left: none;
+
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+}
+
+.map-toolbox-actions
+{
+ display: flex;
+ flex-flow: row wrap;
+
+ align-items: center;
+ justify-content: center;
+}
+