From 1d8a5927e7167f5d11386160298c782df3229857 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Sat, 7 Apr 2018 14:27:09 +0200 Subject: Use the new SVG to show paths. --- src/battlemap/src/View/Battlemap/Navigator.elm | 91 +++++++++++----------- src/battlemap/www/style.css | 104 +++++++++++++++++-------- 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); } -- cgit v1.2.3-70-g09d2