Adds SCSS for the map editor.

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;
+}
+