Visual improvements, some CSS cleanups.

1 files changed, 237 insertions, 265 deletions

diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 2688bdd..358c261 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -31,7 +31,7 @@
    margin: 0 1em 0 1em;
 }
 
-.battlemap-help
+.battlemap-message-board
 {
    grid-column: col 1 / span 3;
    grid-row: row 3;
@@ -50,11 +50,6 @@
    justify-content: space-between;
 }
 
-.battlemap-help .battlemap-character-card
-{
-   width: 30%;
-}
-
 .battlemap-container
 {
    grid-column: col 2;
@@ -108,70 +103,23 @@
 }
 
 /******************************************************************************/
-/** HELP PANEL ****************************************************************/
+/** MESSAGE BOARD *************************************************************/
 /******************************************************************************/
 .battlemap-error
 {
    background-color: #550000;
 }
 
-.battlemap-manual-controls
-{
-   width: 96px;
-   height: 96px;
-   display: grid;
-   grid-template:
-      '.    top .'
-      'left  go  right'
-      '.   bottom .';
-   margin: auto;
-}
-
-.battlemap-manual-controls > div
-{
-   width: 32px;
-   height: 32px;
-   background-image: url(/asset/svg/arrowhead.svg);
-   background-size: 100%;
-   transition: opacity 0.3s ease-out;
-   opacity: 0.5;
-}
-
-.battlemap-manual-controls > div:hover
+.battlemap-message-board .battlemap-character-card
 {
-   opacity: 1;
+   width: 16em;
 }
 
-.battlemap-manual-controls-go
-{
-   margin: auto;
-   width: 28px;
-   height: 28px;
-   border-radius: 100em;
-   grid-area: go;
-}
-
-.battlemap-manual-controls-up
-{
-   transform: rotate(-90deg);
-   grid-area: top;
-}
-
-.battlemap-manual-controls-down
-{
-   transform: rotate(90deg);
-   grid-area: bottom;
-}
-
-.battlemap-manual-controls-left
-{
-   transform: rotate(180deg);
-   grid-area: left;
-}
-
-.battlemap-manual-controls-right
+.battlemap-message-attack-text
 {
-   grid-area: right;
+   width: 100%;
+   text-align: center;
+   font-size: 1.2em;
 }
 
 /******************************************************************************/
@@ -186,6 +134,14 @@
    justify-content: center;
 }
 
+.battlemap-end-turn-button
+{
+   animation-name: reverse-brown-alarm-bg;
+   animation-duration: 2s;
+   animation-iteration-count: infinite;
+}
+
+/** Character Card ************************************************************/
 .battlemap-character-card,
 .battlemap-tile-card
 {
@@ -206,6 +162,51 @@
    margin-top: 0.3em;
 }
 
+.battlemap-character-portrait
+{
+   box-sizing: border-box;
+   border-radius: 5px;
+   background-size: 100% 100%;
+   width: 100px;
+   height: 100px;
+   overflow: hidden;
+}
+
+.battlemap-character-portrait:hover
+{
+   cursor: pointer;
+}
+
+.battlemap-tile-card-icon
+{
+   box-sizing: border-box;
+   border-radius: 5px;
+   background-size: 300% 300%;
+   width: 80px;
+   height: 80px;
+}
+
+.battlemap-character-portrait *
+{
+   box-sizing: border-box;
+   background-size: 100% 100%;
+   width: inherit;
+   height: inherit;
+}
+
+.battlemap-character-portrait-body
+{
+   z-index: 1;
+}
+
+.battlemap-character-portrait-armor
+{
+   position: relative;
+   z-index: 1;
+   top: -100%;
+   background-size: 200% 100%;
+}
+
 .battlemap-character-card .battlemap-character-portrait,
 .battlemap-tile-card-icon
 {
@@ -274,7 +275,7 @@
    border-radius: 5px;
    z-index: 0;
    top: -100%;
-   transition: width 1s ease-out;
+   transition: width 3s ease-in-out;
 }
 
 .battlemap-character-card-health,
@@ -352,6 +353,66 @@
    margin-top: 0.3em;
 }
 
+/** Manual Controls ***********************************************************/
+.battlemap-manual-controls
+{
+   width: 96px;
+   height: 96px;
+   display: grid;
+   grid-template:
+      '.    top .'
+      'left  go  right'
+      '.   bottom .';
+   margin: auto;
+}
+
+.battlemap-manual-controls > div
+{
+   width: 32px;
+   height: 32px;
+   background-image: url(/asset/svg/arrowhead.svg);
+   background-size: 100%;
+   transition: opacity 0.3s ease-out;
+   opacity: 0.5;
+}
+
+.battlemap-manual-controls > div:hover
+{
+   opacity: 1;
+}
+
+.battlemap-manual-controls-go
+{
+   margin: auto;
+   width: 28px;
+   height: 28px;
+   border-radius: 100em;
+   grid-area: go;
+}
+
+.battlemap-manual-controls-up
+{
+   transform: rotate(-90deg);
+   grid-area: top;
+}
+
+.battlemap-manual-controls-down
+{
+   transform: rotate(90deg);
+   grid-area: bottom;
+}
+
+.battlemap-manual-controls-left
+{
+   transform: rotate(180deg);
+   grid-area: left;
+}
+
+.battlemap-manual-controls-right
+{
+   grid-area: right;
+}
+
 /******************************************************************************/
 /** MAIN MENU *****************************************************************/
 /******************************************************************************/
@@ -388,56 +449,7 @@
    animation-iteration-count: infinite;
 }
 
-.battlemap-end-turn-button
-{
-   animation-name: reverse-brown-alarm-bg;
-   animation-duration: 2s;
-   animation-iteration-count: infinite;
-}
-
-.battlemap-character-portrait:hover
-{
-   cursor: pointer;
-}
-
-.battlemap-character-portrait
-{
-   box-sizing: border-box;
-   border-radius: 5px;
-   background-size: 100% 100%;
-   width: 100px;
-   height: 100px;
-}
-
-.battlemap-tile-card-icon
-{
-   box-sizing: border-box;
-   border-radius: 5px;
-   background-size: 300% 300%;
-   width: 80px;
-   height: 80px;
-}
-
-.battlemap-character-portrait *
-{
-   box-sizing: border-box;
-   background-size: 100% 100%;
-   width: inherit;
-   height: inherit;
-}
 
-.battlemap-character-portrait-body
-{
-   z-index: 1;
-}
-
-.battlemap-character-portrait-armor
-{
-   position: relative;
-   z-index: 1;
-   top: -100%;
-   background-size: 200% 100%;
-}
 
 .battlemap-timeline-element,
 .battlemap-characters-element
@@ -557,6 +569,7 @@
    transform: scale(-1, 1);
 }
 
+/** Navigator Markers *********************************************************/
 .battlemap-marker-icon.battlemap-navigator-non-interactive
 {
    box-sizing: border-box;
@@ -679,7 +692,7 @@
 }
 
 .battlemap-can-attack-can-defend-marker.battlemap-navigator-non-interactive,
-.battlemap-can-attack-cant-defend-marker..battlemap-navigator-non-interactive
+.battlemap-can-attack-cant-defend-marker.battlemap-navigator-non-interactive
 {
    z-index: 5;
 }
@@ -707,101 +720,116 @@
    filter: contrast(35%);
 }
 
-.battlemap-animated-character-icon
+
+/**** Selection Classes *******************************************************/
+.battlemap-character-targeted
 {
-   transition: top linear 0.3s, left linear 0.3s;
+   background-color: rgba(255,0,0,0.7);
+   animation-name: red-alarm-bg;
+   animation-duration: 5s;
+   animation-iteration-count: infinite;
 }
 
-.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
+.battlemap-character-selected
 {
-   animation: blinking 0.2s steps(2, start) 8;
+   animation-name: strongly-pulsating;
+   animation-duration: 1.5s;
+   animation-iteration-count: infinite;
 }
 
-.battlemap-animated-portrait-absent .battlemap-character-portrait > *
+/**** Path Icons **************************************************************/
+.battlemap-path-icon
 {
-   visibility: hidden;
+   background-image: url("/asset/svg/arrows.svg");
+   background-size: 96px 32px;
 }
 
-.battlemap-animated-portrait-dodges .battlemap-character-portrait,
-.battlemap-animated-portrait-dies .battlemap-character-portrait,
-.battlemap-animated-portrait-parries .battlemap-character-portrait,
-.battlemap-animated-portrait-attacks .battlemap-character-portrait
+.battlemap-path-icon-UR,
+.battlemap-path-icon-LD,
+.battlemap-path-icon-RD,
+.battlemap-path-icon-UL,
+.battlemap-path-icon-LU,
+.battlemap-path-icon-DR,
+.battlemap-path-icon-DL,
+.battlemap-path-icon-RU
 {
-   overflow: hidden;
+   /*** Default is -^ ***/
+   background-position: 64px 0;
 }
+/*** DL/RU ***/
 
-.battlemap-animated-portrait
+.battlemap-path-icon-LU,
+.battlemap-path-icon-DR
 {
-   width: 100%;
-   height: 100%;
+   transform: rotate(90deg);
 }
 
-.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
+.battlemap-path-icon-RD,
+.battlemap-path-icon-UL
 {
-   animation-name: dodges;
-   animation-duration: 1s;
-   animation-iteration-count: 1;
+   /***  ***/
+   transform: scale(1, -1);
 }
 
-.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
+.battlemap-path-icon-UR,
+.battlemap-path-icon-LD
 {
-   animation-name: attacks;
-   animation-duration: 1s;
-   animation-iteration-count: 1;
+   /*** <| ***/
+   transform: rotate(180deg);
 }
 
-.battlemap-animated-portrait-dies .battlemap-character-portrait > *
+.battlemap-path-icon-RR,
+.battlemap-path-icon-LR,
+.battlemap-path-icon-RL,
+.battlemap-path-icon-LL
 {
-   animation-name: blinking, dies;
-   animation-duration: 1s, 2s;
-   animation-delay: 0s, 1s;
-   animation-iteration-count: 1, 1;
-   animation-fill: default, forwards;
+   background-position: 0 0;
 }
 
-.battlemap-animated-portrait-parries .battlemap-character-portrait > *
+.battlemap-path-icon-markN,
+.battlemap-path-icon-NU,
+.battlemap-path-icon-ND,
+.battlemap-path-icon-NL,
+.battlemap-path-icon-NR
 {
-   animation-name: parries;
-   animation-duration: 1s;
-   animation-iteration-count: 1;
+   display: none;
 }
 
-.battlemap-animation-move-1
-.battlemap-animation-move-R,
-.battlemap-animation-move-L,
-.battlemap-animation-move-U,
-.battlemap-animation-move-D
+.battlemap-path-icon-UU,
+.battlemap-path-icon-UD,
+.battlemap-path-icon-DU,
+.battlemap-path-icon-DD
 {
-   animation-duration: 0.3s;
-   animation-iteration-count: 1;
-   animation-fill-mode: forwards;
+   background-position: 0 0;
+   transform: rotate(90deg);
 }
 
-.battlemap-animation-move-R { animation-name: move-right; }
-.battlemap-animation-move-L { animation-name: move-left; }
-.battlemap-animation-move-U { animation-name: move-up; }
-.battlemap-animation-move-D { animation-name: move-down; }
-
-@keyframes move-right {
-    from { transform: translate(0, 0);}
-    to   { transform: translate(100%, 0);}
+.battlemap-path-icon-markR,
+.battlemap-path-icon-markL,
+.battlemap-path-icon-markU,
+.battlemap-path-icon-markD
+{
+   background-position: 32px 0;
 }
 
-@keyframes move-left {
-    from { transform: translate(0, 0);}
-    to   { transform: translate(-100%, 0);}
+.battlemap-path-icon-markL
+{
+   transform: rotate(180deg);
 }
 
-@keyframes move-up {
-    from { transform: translate(0, 0);}
-    to   { transform: translate(0, -100%);}
+.battlemap-path-icon-markD
+{
+   transform: rotate(90deg);
 }
 
-@keyframes move-down {
-    from { transform: translate(0, 0);}
-    to   { transform: translate(0, 100%);}
+.battlemap-path-icon-markU
+{
+   transform: rotate(-90deg);
 }
 
+/******************************************************************************/
+/** Animations ****************************************************************/
+/******************************************************************************/
 @keyframes red-alarm-bg {
     0% {background-color: rgba(255,0,0,0.25);}
     25% {background-color: rgba(255,0,0,1);}
@@ -809,12 +837,6 @@
     100% {background-color: rgba(255,0,0,0.25);}
 }
 
-@keyframes flickering-opacity {
-    0% { opacity: 1.0;}
-    50% { opacity: 0.7; }
-    100% { opacity: 1.0; }
-}
-
 @keyframes pulsating {
     0% { opacity: 1.0; transform: scale(1);}
     25% { opacity: 1.0; transform: scale(1);}
@@ -853,6 +875,11 @@
    to { visibility: hidden; }
 }
 
+@keyframes blinking2 {
+   from { opacity: 1; }
+   to { opacity: 0; }
+}
+
 @keyframes dodges {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-75%, 0); }
@@ -873,8 +900,8 @@
 }
 
 @keyframes dies {
-   from { transform: translate(0, 0); }
-   to { transform: translate(0, 100%); }
+   from { transform: translate(0, 0) rotate(0); }
+   to { transform: translate(0, 100%) rotate(25deg); }
 }
 
 @keyframes blue-alarm-bd {
@@ -883,118 +910,63 @@
     100% {border-color: rgba(0,0,255,0.25);}
 }
 
-.battlemap-character-targeted
-{
-   background-color: rgba(255,0,0,0.7);
-   animation-name: red-alarm-bg;
-   animation-duration: 5s;
-   animation-iteration-count: infinite;
-}
-
-.battlemap-character-selected
-{
-   animation-name: strongly-pulsating;
-   animation-duration: 1.5s;
-   animation-iteration-count: infinite;
-}
-
-.battlemap-tile-selected
-{
-   box-sizing: border-box;
-   border-size: 2px solid;
-   border-color: rgba(0,0,255,0.7);
-   animation-name: blue-alarm-bg;
-   animation-duration: 2s;
-   animation-iteration-count: infinite;
-}
-
-
-/**** Path Icons **************************************************************/
-.battlemap-path-icon
-{
-   background-image: url("/asset/svg/arrows.svg");
-   background-size: 96px 32px;
-}
-
-.battlemap-path-icon-UR,
-.battlemap-path-icon-LD,
-.battlemap-path-icon-RD,
-.battlemap-path-icon-UL,
-.battlemap-path-icon-LU,
-.battlemap-path-icon-DR,
-.battlemap-path-icon-DL,
-.battlemap-path-icon-RU
-{
-   /*** Default is -^ ***/
-   background-position: 64px 0;
-}
-/*** DL/RU ***/
-
-.battlemap-path-icon-LU,
-.battlemap-path-icon-DR
-{
-   transform: rotate(90deg);
-}
-
-.battlemap-path-icon-RD,
-.battlemap-path-icon-UL
+/******************************************************************************/
+/** Timeline Animations *******************************************************/
+/******************************************************************************/
+/**** Character Icon Animations ***********************************************/
+.battlemap-animated-character-icon
 {
-   /***  ***/
-   transform: scale(1, -1);
+   transition: top linear 0.3s, left linear 0.3s;
 }
 
-.battlemap-path-icon-UR,
-.battlemap-path-icon-LD
+/**** Character Portrait Animations *******************************************/
+.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
 {
-   /*** <| ***/
-   transform: rotate(180deg);
+   animation: blinking 0.2s steps(2, start) 8;
 }
 
-.battlemap-path-icon-RR,
-.battlemap-path-icon-LR,
-.battlemap-path-icon-RL,
-.battlemap-path-icon-LL
+.battlemap-animated-portrait-absent .battlemap-character-portrait > *
 {
-   background-position: 0 0;
+   visibility: hidden;
 }
 
-.battlemap-path-icon-markN,
-.battlemap-path-icon-NU,
-.battlemap-path-icon-ND,
-.battlemap-path-icon-NL,
-.battlemap-path-icon-NR
+.battlemap-animated-portrait-dodges .battlemap-character-portrait,
+.battlemap-animated-portrait-dies .battlemap-character-portrait,
+.battlemap-animated-portrait-parries .battlemap-character-portrait,
+.battlemap-animated-portrait-attacks .battlemap-character-portrait
 {
-   display: none;
+   overflow: hidden;
 }
 
-.battlemap-path-icon-UU,
-.battlemap-path-icon-UD,
-.battlemap-path-icon-DU,
-.battlemap-path-icon-DD
+.battlemap-animated-portrait
 {
-   background-position: 0 0;
-   transform: rotate(90deg);
 }
 
-.battlemap-path-icon-markR,
-.battlemap-path-icon-markL,
-.battlemap-path-icon-markU,
-.battlemap-path-icon-markD
+.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
 {
-   background-position: 32px 0;
+   animation-name: dodges;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
 }
 
-.battlemap-path-icon-markL
+.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
 {
-   transform: rotate(180deg);
+   animation-name: attacks;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
 }
 
-.battlemap-path-icon-markD
+.battlemap-animated-portrait-dies .battlemap-character-portrait > *
 {
-   transform: rotate(90deg);
+   animation-name: blinking2, dies;
+   animation-duration: 0.15s, 2s;
+   animation-delay: 0s, 1s;
+   animation-iteration-count: 8, 1;
 }
 
-.battlemap-path-icon-markU
+.battlemap-animated-portrait-parries .battlemap-character-portrait > *
 {
-   transform: rotate(-90deg);
+   animation-name: parries;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
 }