Use the new SVG to show paths.

2 files changed, 116 insertions, 79 deletions

diff --git a/src/battlemap/src/View/Battlemap/Navigator.elm b/src/battlemap/src/View/Battlemap/Navigator.elm
index f114b82..18bcb38 100644
--- a/src/battlemap/src/View/Battlemap/Navigator.elm
+++ b/src/battlemap/src/View/Battlemap/Navigator.elm
@@ -93,60 +93,57 @@ path_node_get_html : (
          (List (Html.Html Struct.Event.Type))
       )
    )
-path_node_get_html new_dir (curr_loc, prev_dir, curr_nodes) =
-   let
-      new_loc = (Struct.Location.neighbor curr_loc new_dir)
-   in
+path_node_get_html next_dir (curr_loc, curr_dir, curr_nodes) =
+   (
+      (Struct.Location.neighbor curr_loc next_dir),
+      next_dir,
       (
-         new_loc,
-         new_dir,
-         (
-            (Html.div
-               [
-                  (Html.Attributes.class "battlemap-path-icon"),
-                  (Html.Attributes.class "battlemap-tiled"),
-                  (Html.Attributes.class
+         (Html.div
+            [
+               (Html.Attributes.class "battlemap-path-icon"),
+               (Html.Attributes.class "battlemap-tiled"),
+               (Html.Attributes.class
+                  (
+                     "battlemap-path-icon-"
+                     ++
+                     (Struct.Direction.to_string curr_dir)
+                     ++
+                     (Struct.Direction.to_string next_dir)
+                  )
+               ),
+               (Html.Events.onClick
+                  (Struct.Event.TileSelected
+                     (Struct.Location.get_ref curr_loc)
+                  )
+               ),
+               (Html.Attributes.style
+                  [
                      (
-                        "battlemap-path-icon-"
-                        ++
-                        (Struct.Direction.to_string prev_dir)
-                        ++
-                        (Struct.Direction.to_string new_dir)
-                     )
-                  ),
-                  (Html.Events.onClick
-                     (Struct.Event.TileSelected
-                        (Struct.Location.get_ref new_loc)
-                     )
-                  ),
-                  (Html.Attributes.style
-                     [
+                        "top",
                         (
-                           "top",
-                           (
-                              (toString (new_loc.y * Constants.UI.tile_size))
-                              ++
-                              "px"
-                           )
-                        ),
+                           (toString (curr_loc.y * Constants.UI.tile_size))
+                           ++
+                           "px"
+                        )
+                     ),
+                     (
+                        "left",
                         (
-                           "left",
-                           (
-                              (toString (new_loc.x * Constants.UI.tile_size))
-                              ++
-                              "px"
-                           )
+                           (toString (curr_loc.x * Constants.UI.tile_size))
+                           ++
+                           "px"
                         )
-                     ]
-                  )
-               ]
-               [
-               ]
-            )
-            ::
-            curr_nodes
+                     )
+                  ]
+               )
+            ]
+            [
+            ]
          )
+         ::
+         curr_nodes
       )
+   )
 
 mark_the_spot : (
       Struct.Location.Type ->
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 4ba0dc5..a719e51 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -207,8 +207,8 @@
 
 .battlemap-tile-icon       {z-index: 0; position: absolute; background-size: 96px 96px;}
 .battlemap-marker-icon     {z-index: 1;}
-.battlemap-character-icon  {z-index: 2;}
-.battlemap-path-icon       {z-index: 3; color: white;}
+.battlemap-path-icon       {z-index: 2;}
+.battlemap-character-icon  {z-index: 3;}
 
 .battlemap-marker-icon,
 .battlemap-character-icon,
@@ -293,47 +293,87 @@
 }
 
 /**** Path Icons **************************************************************/
-.battlemap-path-icon-NR:before,
-.battlemap-path-icon-LR:before,
-.battlemap-path-icon-RR:before,
-.battlemap-path-icon-UR:before,
-.battlemap-path-icon-DR:before
+.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
+{
+   /***  ***/
+   transform: scale(1, -1);
+}
+
+.battlemap-path-icon-UR,
+.battlemap-path-icon-LD
+{
+   /*** <| ***/
+   transform: rotate(180deg);
+}
+
+.battlemap-path-icon-NR,
+.battlemap-path-icon-NL,
+.battlemap-path-icon-RR,
+.battlemap-path-icon-LR,
+.battlemap-path-icon-RL,
+.battlemap-path-icon-LL
+{
+   background-position: 0 0;
+}
+
+.battlemap-path-icon-NU,
+.battlemap-path-icon-ND,
+.battlemap-path-icon-UU,
+.battlemap-path-icon-UD,
+.battlemap-path-icon-DU,
+.battlemap-path-icon-DD
 {
-   content: "}";
+   background-position: 0 0;
+   transform: rotate(90deg);
 }
 
-.battlemap-path-icon-NL:before,
-.battlemap-path-icon-LL:before,
-.battlemap-path-icon-RL:before,
-.battlemap-path-icon-UL:before,
-.battlemap-path-icon-DL:before
+.battlemap-path-icon-markN,
+.battlemap-path-icon-markR,
+.battlemap-path-icon-markL,
+.battlemap-path-icon-markU,
+.battlemap-path-icon-markD
 {
-   content: "{";
+   background-position: 32px 0;
 }
 
-.battlemap-path-icon-NU:before,
-.battlemap-path-icon-LU:before,
-.battlemap-path-icon-RU:before,
-.battlemap-path-icon-UU:before,
-.battlemap-path-icon-DU:before
+.battlemap-path-icon-markL
 {
-   content: "^";
+   transform: rotate(180deg);
 }
 
-.battlemap-path-icon-ND:before,
-.battlemap-path-icon-LD:before,
-.battlemap-path-icon-RD:before,
-.battlemap-path-icon-UD:before,
-.battlemap-path-icon-DD:before
+.battlemap-path-icon-markD
 {
-   content: "v";
+   transform: rotate(90deg);
 }
 
-.battlemap-path-icon-markN:before,
-.battlemap-path-icon-markL:before,
-.battlemap-path-icon-markU:before,
-.battlemap-path-icon-markD:before,
-.battlemap-path-icon-markR:before
+.battlemap-path-icon-markU
 {
-   content: "x";
+   transform: rotate(-90deg);
 }