Use SVG for tiles.

The grass tiles look good, the rocky ground ones not so much...

4 files changed, 39 insertions, 3 deletions

diff --git a/src/battlemap/src/Constants/IO.elm b/src/battlemap/src/Constants/IO.elm
index ba8701d..fe62a6f 100644
--- a/src/battlemap/src/Constants/IO.elm
+++ b/src/battlemap/src/Constants/IO.elm
@@ -12,3 +12,6 @@ character_turn_handler = (battlemap_handler_url ++ "/character_turn")
 
 battlemap_loading_handler : String
 battlemap_loading_handler = (battlemap_handler_url ++ "/load_state")
+
+tile_assets_url : String
+tile_assets_url = (base_url ++ "/asset/svg/tile/")
diff --git a/src/battlemap/src/Struct/Tile.elm b/src/battlemap/src/Struct/Tile.elm
index d75e74e..6063cb8 100644
--- a/src/battlemap/src/Struct/Tile.elm
+++ b/src/battlemap/src/Struct/Tile.elm
@@ -48,7 +48,9 @@ get_location : Type -> Struct.Location.Type
 get_location tile = tile.location
 
 get_icon_id : Type -> String
-get_icon_id tile = tile.icon_id
+get_icon_id tile =
+   -- Just to see how it looks with SVG
+   (toString (rem tile.crossing_cost 2))
 
 get_cost : Type -> Int
 get_cost tile = tile.crossing_cost
diff --git a/src/battlemap/src/View/Battlemap/Tile.elm b/src/battlemap/src/View/Battlemap/Tile.elm
index 1c3628c..3286394 100644
--- a/src/battlemap/src/View/Battlemap/Tile.elm
+++ b/src/battlemap/src/View/Battlemap/Tile.elm
@@ -7,6 +7,7 @@ import Html.Events
 
 -- Battlemap -------------------------------------------------------------------
 import Constants.UI
+import Constants.IO
 
 import Struct.Event
 import Struct.Location
@@ -32,7 +33,18 @@ get_html tile =
             (Html.Attributes.class "battlemap-tile-icon"),
             (Html.Attributes.class "battlemap-tiled"),
             (Html.Attributes.class
-               ("asset-tile-" ++ (Struct.Tile.get_icon_id tile))
+               (
+                  "battlemap-tile-variant-"
+                  ++
+                  (toString
+                     -- I don't like how Elm does random, let's get some noisy
+                     -- function instead.
+                     (rem
+                        ((-1 * (tile_loc.x + tile_loc.y))^2)
+                        9
+                     )
+                  )
+               )
             ),
             (Html.Attributes.class "clickable"),
             (Html.Events.onClick
@@ -47,6 +59,15 @@ get_html tile =
                   (
                      "left",
                      ((toString (tile_loc.x * Constants.UI.tile_size)) ++ "px")
+                  ),
+                  (
+                     "background-image",
+                     (
+                        "url("
+                        ++ Constants.IO.tile_assets_url
+                        ++ (Struct.Tile.get_icon_id tile)
+                        ++".svg)"
+                     )
                   )
                ]
             )
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index b4e744a..4ba0dc5 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -195,7 +195,17 @@
    /* max-width: 32px; */
 }
 
-.battlemap-tile-icon       {z-index: 0; position: absolute;}
+.battlemap-tile-variant-0  {background-position: 0    0;}
+.battlemap-tile-variant-1  {background-position: 32px 0;}
+.battlemap-tile-variant-2  {background-position: 64px 0;}
+.battlemap-tile-variant-3  {background-position: 0    32px;}
+.battlemap-tile-variant-4  {background-position: 32px 32px;}
+.battlemap-tile-variant-5  {background-position: 64px 32px;}
+.battlemap-tile-variant-6  {background-position: 0    64px;}
+.battlemap-tile-variant-7  {background-position: 32px 64px;}
+.battlemap-tile-variant-8  {background-position: 64px 64px;}
+
+.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;}