Improves UI. Makes way for visually scalable bmap.

7 files changed, 110 insertions, 40 deletions

diff --git a/src/battlemap/src/Constants/UI.elm b/src/battlemap/src/Constants/UI.elm
new file mode 100644
index 0000000..eca47b7
--- /dev/null
+++ b/src/battlemap/src/Constants/UI.elm
@@ -0,0 +1,4 @@
+module Constants.UI exposing (..)
+
+tile_size : Int
+tile_size = 32
diff --git a/src/battlemap/src/View.elm b/src/battlemap/src/View.elm
index 90c56cd..480abd3 100644
--- a/src/battlemap/src/View.elm
+++ b/src/battlemap/src/View.elm
@@ -2,6 +2,7 @@ module View exposing (view)
 
 import Dict
 import Html
+import Html.Attributes
 
 import View.Battlemap
 
@@ -14,17 +15,28 @@ import Model
 view : Model.Type -> (Html.Html Event.Type)
 view model =
    (Html.div
-      []
+      [
+         (Html.Attributes.class "battlemap")
+      ]
       [
          (Html.div
-            []
+            [
+               (Html.Attributes.class "battlemap-controls")
+            ]
             (View.Controls.view)
          ),
-         (View.Status.view model),
-         (View.Battlemap.get_html
-            model.battlemap
-            32
-            (Dict.values model.characters)
-         )
+         (Html.div
+            [
+               (Html.Attributes.class "battlemap-container")
+            ]
+            [
+               (View.Battlemap.get_html
+                  model.battlemap
+                  1
+                  (Dict.values model.characters)
+               )
+            ]
+         ),
+         (View.Status.view model)
       ]
    )
diff --git a/src/battlemap/src/View/Battlemap.elm b/src/battlemap/src/View/Battlemap.elm
index 94acf25..81c13f7 100644
--- a/src/battlemap/src/View/Battlemap.elm
+++ b/src/battlemap/src/View/Battlemap.elm
@@ -12,6 +12,8 @@ import Battlemap
 
 import Character
 
+import Constants.UI
+
 import View.Battlemap.Tile
 import View.Battlemap.Navigator
 
@@ -19,8 +21,8 @@ import Event
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
-char_on_map : Int -> Character.Type -> (Html.Html Event.Type)
-char_on_map tile_size char =
+char_on_map : Character.Type -> (Html.Html Event.Type)
+char_on_map char =
    let
       char_loc = (Character.get_location char)
    in
@@ -36,8 +38,14 @@ char_on_map tile_size char =
             ),
             (Html.Attributes.style
                [
-                  ("top", ((toString (char_loc.y * tile_size)) ++ "px")),
-                  ("left", ((toString (char_loc.x * tile_size)) ++ "px"))
+                  (
+                     "top",
+                     ((toString (char_loc.y * Constants.UI.tile_size)) ++ "px")
+                  ),
+                  (
+                     "left",
+                     ((toString (char_loc.x * Constants.UI.tile_size)) ++ "px")
+                  )
                ]
             )
          ]
@@ -50,29 +58,37 @@ char_on_map tile_size char =
 --------------------------------------------------------------------------------
 get_html : (
       Battlemap.Type ->
-      Int ->
+      Float ->
       (List Character.Type) ->
       (Html.Html Event.Type)
    )
-get_html battlemap tile_size characters =
+get_html battlemap scale characters =
    (Html.div
       [
-         (Html.Attributes.class "battlemap-container")
+         (Html.Attributes.class "battlemap-actual"),
+         (Html.Attributes.style
+            [
+               (
+                  "transform",
+                  ("scale(" ++ (toString scale) ++ ")")
+               )
+            ]
+         )
       ]
       (
          (List.map
-            (View.Battlemap.Tile.get_html tile_size)
+            (View.Battlemap.Tile.get_html)
             (Array.toList (Battlemap.get_tiles battlemap))
          )
          ++
          (List.map
-            (char_on_map tile_size)
+            (char_on_map)
             characters
          )
          ++
          case (Battlemap.try_getting_navigator_summary battlemap) of
             (Just nav_summary) ->
-               (View.Battlemap.Navigator.get_html tile_size nav_summary)
+               (View.Battlemap.Navigator.get_html nav_summary)
 
             Nothing -> [(Html.text "")]
       )
diff --git a/src/battlemap/src/View/Battlemap/Navigator.elm b/src/battlemap/src/View/Battlemap/Navigator.elm
index 6758614..b87d986 100644
--- a/src/battlemap/src/View/Battlemap/Navigator.elm
+++ b/src/battlemap/src/View/Battlemap/Navigator.elm
@@ -10,17 +10,18 @@ import Battlemap.Direction
 import Battlemap.Marker
 import Battlemap.Navigator
 
+import Constants.UI
+
 import Event
 
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
 marker_get_html : (
-      Int ->
       (Battlemap.Location.Ref, Battlemap.Marker.Type) ->
       (Html.Html Event.Type)
    )
-marker_get_html tile_size (loc_ref, marker) =
+marker_get_html (loc_ref, marker) =
    (Html.div
       [
          (Html.Attributes.class "battlemap-marker-icon"),
@@ -45,8 +46,14 @@ marker_get_html tile_size (loc_ref, marker) =
                   loc = (Battlemap.Location.from_ref loc_ref)
                in
                   [
-                     ("top", ((toString (loc.y * tile_size)) ++ "px")),
-                     ("left", ((toString (loc.x * tile_size)) ++ "px"))
+                     (
+                        "top",
+                        ((toString (loc.y * Constants.UI.tile_size)) ++ "px")
+                     ),
+                     (
+                        "left",
+                        ((toString (loc.x * Constants.UI.tile_size)) ++ "px")
+                     )
                   ]
             )
          )
@@ -56,7 +63,6 @@ marker_get_html tile_size (loc_ref, marker) =
    )
 
 path_node_get_html : (
-      Int ->
       Battlemap.Direction.Type ->
       (
          Battlemap.Location.Type,
@@ -69,7 +75,7 @@ path_node_get_html : (
          (List (Html.Html Event.Type))
       )
    )
-path_node_get_html tile_size new_dir (curr_loc, prev_dir, curr_nodes) =
+path_node_get_html new_dir (curr_loc, prev_dir, curr_nodes) =
    let
       new_loc = (Battlemap.Location.neighbor curr_loc new_dir)
    in
@@ -97,11 +103,19 @@ path_node_get_html tile_size new_dir (curr_loc, prev_dir, curr_nodes) =
                      [
                         (
                            "top",
-                           ((toString (new_loc.y * tile_size)) ++ "px")
+                           (
+                              (toString (new_loc.y * Constants.UI.tile_size))
+                              ++
+                              "px"
+                           )
                         ),
                         (
                            "left",
-                           ((toString (new_loc.x * tile_size)) ++ "px")
+                           (
+                              (toString (new_loc.x * Constants.UI.tile_size))
+                              ++
+                              "px"
+                           )
                         )
                      ]
                   )
@@ -115,12 +129,11 @@ path_node_get_html tile_size new_dir (curr_loc, prev_dir, curr_nodes) =
       )
 
 mark_the_spot : (
-      Int ->
       Battlemap.Location.Type ->
       Battlemap.Direction.Type ->
       (Html.Html Event.Type)
    )
-mark_the_spot tile_size loc origin_dir =
+mark_the_spot loc origin_dir =
    (Html.div
       [
          (Html.Attributes.class "battlemap-path-icon"),
@@ -139,11 +152,11 @@ mark_the_spot tile_size loc origin_dir =
             [
                (
                   "top",
-                  ((toString (loc.y * tile_size)) ++ "px")
+                  ((toString (loc.y * Constants.UI.tile_size)) ++ "px")
                ),
                (
                   "left",
-                  ((toString (loc.x * tile_size)) ++ "px")
+                  ((toString (loc.x * Constants.UI.tile_size)) ++ "px")
                )
             ]
          )
@@ -155,23 +168,22 @@ mark_the_spot tile_size loc origin_dir =
 -- EXPORTED --------------------------------------------------------------------
 --------------------------------------------------------------------------------
 get_html : (
-      Int ->
       Battlemap.Navigator.Summary ->
       (List (Html.Html Event.Type))
    )
-get_html tile_size nav_summary =
+get_html nav_summary =
    (
-      (List.map (marker_get_html tile_size) nav_summary.markers)
+      (List.map (marker_get_html) nav_summary.markers)
       ++
       (
          let
             (final_loc, final_dir, path_node_htmls) =
                (List.foldr
-                  (path_node_get_html tile_size)
+                  (path_node_get_html)
                   (nav_summary.starting_location, Battlemap.Direction.None, [])
                   nav_summary.path
                )
          in
-            ((mark_the_spot tile_size final_loc final_dir) :: path_node_htmls)
+            ((mark_the_spot final_loc final_dir) :: path_node_htmls)
       )
    )
diff --git a/src/battlemap/src/View/Battlemap/Tile.elm b/src/battlemap/src/View/Battlemap/Tile.elm
index d4b4cc8..af5167a 100644
--- a/src/battlemap/src/View/Battlemap/Tile.elm
+++ b/src/battlemap/src/View/Battlemap/Tile.elm
@@ -7,14 +7,15 @@ import Html.Events
 import Battlemap.Tile
 import Battlemap.Location
 
+import Constants.UI
+
 import Event
 
 get_html : (
-      Int ->
       Battlemap.Tile.Type ->
       (Html.Html Event.Type)
    )
-get_html tile_size tile =
+get_html tile =
    let
       tile_loc = (Battlemap.Tile.get_location tile)
    in
@@ -30,8 +31,14 @@ get_html tile_size tile =
             ),
             (Html.Attributes.style
                [
-                  ("top", ((toString (tile_loc.y * tile_size)) ++ "px")),
-                  ("left", ((toString (tile_loc.x * tile_size)) ++ "px"))
+                  (
+                     "top",
+                     ((toString (tile_loc.y * Constants.UI.tile_size)) ++ "px")
+                  ),
+                  (
+                     "left",
+                     ((toString (tile_loc.x * Constants.UI.tile_size)) ++ "px")
+                  )
                ]
             )
          ]
diff --git a/src/battlemap/src/View/Status.elm b/src/battlemap/src/View/Status.elm
index 973588d..8986590 100644
--- a/src/battlemap/src/View/Status.elm
+++ b/src/battlemap/src/View/Status.elm
@@ -3,6 +3,7 @@ module View.Status exposing (view)
 import Dict
 
 import Html
+import Html.Attributes
 
 import Battlemap
 import Character
@@ -37,6 +38,7 @@ view : Model.Type -> (Html.Html Event.Type)
 view model =
    (Html.div
       [
+         (Html.Attributes.class "battlemap-status")
       ]
       [
          (Html.text
diff --git a/src/battlemap/www/index.html b/src/battlemap/www/index.html
index 21c6a27..a7308e5 100644
--- a/src/battlemap/www/index.html
+++ b/src/battlemap/www/index.html
@@ -2,9 +2,26 @@
 <html>
    <head>
    <style>
+      html
+      {
+         height: 100%;
+      }
+
+      html, body, .battlemap
+      {
+         position: absolute;
+         top: 0;
+         bottom: 0;
+         right: 0;
+         left: 0;
+      }
+
       .battlemap-container
       {
-         position: relative;
+         overflow: auto;
+         resize: vertical;
+         width: inherit;
+         height: 70%;
       }
 
       .battlemap-tiled