Improves help menu aesthetics.

3 files changed, 184 insertions, 20 deletions

diff --git a/src/asset/www/svg/help-icon.svg b/src/asset/www/svg/help-icon.svg
new file mode 100755
index 0000000..309e5e5
--- /dev/null
+++ b/src/asset/www/svg/help-icon.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32mm"
+   height="32mm"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="help-icon.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.1"
+     inkscape:cx="-9.1331419"
+     inkscape:cy="65.083578"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-265)">
+    <circle
+       style="fill:#483e37;fill-opacity:1;stroke:#6c5d53;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path4485"
+       cx="16"
+       cy="281"
+       r="15" />
+    <g
+       aria-label="?"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#f4eed7;fill-opacity:1;stroke:#e9ddaf;stroke-width:0.26458332"
+       id="text4493"
+       transform="matrix(1.2904739,0,0,1.2904739,-4.6475837,-81.623166)">
+      <path
+         d="m 20.514452,276.91964 q 0,1.57509 -0.992187,2.77812 -0.570508,0.68213 -1.872754,1.5627 -1.016993,0.68212 -1.0542,0.96738 -0.111621,0.83096 -0.08682,1.12861 0.03721,0.5209 0.37207,1.50069 h -0.644922 q -0.471289,0 -1.103808,0.0248 -0.310059,0.0124 -0.979785,0.0124 0.421679,-0.47129 0.421679,-1.0666 0,-0.19844 -0.07441,-0.59531 -0.07441,-0.39688 -0.07441,-0.59531 0,-0.59532 0.58291,-0.96739 1.599903,-1.00459 2.306836,-1.93476 0.917774,-1.20303 0.917774,-2.81533 0,-1.30225 -0.570508,-1.79834 -0.533301,-0.44649 -1.860352,-0.44649 -1.091406,0 -1.761132,0.84336 -0.620117,0.76895 -0.620117,1.89756 0,0.68213 0.434082,1.0418 0.347265,0.28525 1.37666,0.62011 -0.409278,0.0496 -0.768946,0.0496 -1.265039,0 -2.071191,-0.59531 -0.905371,-0.65732 -0.905371,-1.88516 0,-1.36425 1.426269,-2.22002 1.240235,-0.74414 2.691309,-0.74414 4.911328,0 4.911328,3.23702 z m -3.509863,10.0831 q 0,0.57051 -0.409278,0.94258 -0.396875,0.37207 -0.967382,0.37207 -0.595313,0 -0.992188,-0.35967 -0.384472,-0.35967 -0.384472,-0.95498 0,-1.32705 1.37666,-1.32705 0.58291,0 0.979785,0.37207 0.396875,0.37207 0.396875,0.95498 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;font-family:'Dumbledor 1';-inkscape-font-specification:'Dumbledor 1, ';fill:#f4eed7;stroke:#e9ddaf;stroke-width:0.26458332"
+         id="path4495"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/src/battlemap/src/View/MessageBoard/Help.elm b/src/battlemap/src/View/MessageBoard/Help.elm
index 26d820d..773210e 100644
--- a/src/battlemap/src/View/MessageBoard/Help.elm
+++ b/src/battlemap/src/View/MessageBoard/Help.elm
@@ -22,18 +22,27 @@ get_rank_help_message rank =
    case rank of
       Struct.Character.Target ->
          [
-            (Html.h1 [] [(Html.text "Protected Character")]),
-            (Html.div
+            (Html.h1
+               []
                [
-                  (Html.Attributes.class
-                     "battlemap-character-card-target-status"
+                  (get_guide_icon),
+                  (Html.text "Protected Character - "),
+                  (Html.div
+                     [
+                        (Html.Attributes.class
+                           "battlemap-message-board-help-figure"
+                        ),
+                        (Html.Attributes.class
+                           "battlemap-character-card-target-status"
+                        )
+                     ]
+                     []
                   )
                ]
-               []
             ),
             (Html.text
                (
-                  "Players that lost all of their Protected characters are"
+                  "Players that lose all of their protected characters are"
                   ++ " eliminated."
                )
             )
@@ -41,18 +50,27 @@ get_rank_help_message rank =
 
       Struct.Character.Commander ->
          [
-            (Html.h1 [] [(Html.text "Critical Character")]),
-            (Html.div
+            (Html.h1
+               []
                [
-                  (Html.Attributes.class
-                     "battlemap-character-card-commander-status"
+                  (get_guide_icon),
+                  (Html.text "Critical Character - "),
+                  (Html.div
+                     [
+                        (Html.Attributes.class
+                           "battlemap-message-board-help-figure"
+                        ),
+                        (Html.Attributes.class
+                           "battlemap-character-card-commander-status"
+                        )
+                     ]
+                     []
                   )
                ]
-               []
             ),
             (Html.text
                (
-                  "Players that lost any of their Critical characters are"
+                  "Players that lose any of their protected characters are"
                   ++ " eliminated."
                )
             )
@@ -60,15 +78,29 @@ get_rank_help_message rank =
 
       Struct.Character.Optional ->
          [
-            (Html.h1 [] [(Html.text "Reinforcement Character")]),
+            (Html.h1
+               []
+               [
+                  (get_guide_icon),
+                  (Html.text "Reinforcement Character")
+               ]
+            ),
             (Html.text
                (
-                  "Unless it is their last character, losing Reinforcement"
-                  ++ " characters does not cause a player to be eliminated."
+                  "Unless it is their very last character, losing a"
+                  ++ " Reinforcement characters never causes a player to be"
+                  ++ " eliminated."
                )
             )
          ]
 
+get_guide_icon : (Html.Html Struct.Event.Type)
+get_guide_icon =
+   (Html.div
+      [(Html.Attributes.class "battlemap-help-guide-icon")]
+      []
+   )
+
 get_default_help_message : (
       Struct.Model.Type ->
       (List (Html.Html Struct.Event.Type))
@@ -77,7 +109,13 @@ get_default_help_message model =
    case (Struct.CharacterTurn.get_state model.char_turn) of
       Struct.CharacterTurn.SelectedCharacter ->
          [
-            (Html.h1 [] [(Html.text "Character Selected")]),
+            (Html.h1
+               []
+               [
+                  (get_guide_icon),
+                  (Html.text "Character Selected")
+               ]
+            ),
             (Html.text
                (
                   "Click on a target tile to select a path or use the manual"
@@ -89,7 +127,13 @@ get_default_help_message model =
 
       Struct.CharacterTurn.MovedCharacter ->
          [
-            (Html.h1 [] [(Html.text "Character Moved")]),
+            (Html.h1
+               []
+               [
+                  (get_guide_icon),
+                  (Html.text "Character Moved")
+               ]
+            ),
             (Html.text
                (
                   "You can now choose a target in range. Dashed tiles indicate"
@@ -101,7 +145,13 @@ get_default_help_message model =
 
       Struct.CharacterTurn.ChoseTarget ->
          [
-            (Html.h1 [] [(Html.text "Target Selected")]),
+            (Html.h1
+               []
+               [
+                  (get_guide_icon),
+                  (Html.text "Target Selected")
+               ]
+            ),
             (Html.text
                (
                   "If you are satisfied with your choices, end the turn to"
@@ -112,7 +162,13 @@ get_default_help_message model =
 
       _ ->
          [
-            (Html.h1 [] [(Html.text "Selecting Character")]),
+            (Html.h1
+               []
+               [
+                  (get_guide_icon),
+                  (Html.text "Selecting a Character")
+               ]
+            ),
             (Html.text
                (
                   "Click once on a character to focus them. This will show you"
@@ -130,7 +186,8 @@ get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
 get_html model =
    (Html.div
       [
-         (Html.Attributes.class "battlemap-message-board")
+         (Html.Attributes.class "battlemap-message-board"),
+         (Html.Attributes.class "battlemap-message-board-help")
       ]
       (
          case model.help_request of
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 74ef048..8eb2d2f 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -148,6 +148,39 @@
    font-size: 1.2em;
 }
 
+.battlemap-message-board-help
+{
+   display: block;
+}
+
+.battlemap-message-board-help h1
+{
+   margin: 0;
+   margin-bottom: 0.3em;
+   font-size: 1.5em;
+   text-align: center;
+}
+
+.battlemap-message-board-help-figure
+{
+   width: 1.5em;
+   height: 1.5em;
+   background-size: 100%;
+   display: inline-block;
+   vertical-align: middle;
+}
+
+.battlemap-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;
+}
+
 /******************************************************************************/
 /** CONTROLLED PANEL **********************************************************/
 /******************************************************************************/