Adds tile cards.

5 files changed, 193 insertions, 143 deletions

diff --git a/src/battlemap/src/Struct/Tile.elm b/src/battlemap/src/Struct/Tile.elm
index 2ae1788..944c561 100644
--- a/src/battlemap/src/Struct/Tile.elm
+++ b/src/battlemap/src/Struct/Tile.elm
@@ -5,7 +5,8 @@ module Struct.Tile exposing
       error_tile,
       get_location,
       get_icon_id,
-      get_cost
+      get_cost,
+      get_variant_id
    )
 
 -- Battlemap -------------------------------------------------------------------
@@ -24,6 +25,11 @@ type alias Type =
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
+noise_function : Int -> Int -> Int -> Int
+noise_function a b c =
+   (round
+         (radians (toFloat ((a + 1) * 2 + (b + 1) * 3 + c)))
+   )
 
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
@@ -54,3 +60,7 @@ get_icon_id tile = tile.icon_id
 
 get_cost : Type -> Int
 get_cost tile = tile.crossing_cost
+
+get_variant_id : Type -> Int
+get_variant_id tile =
+   ((noise_function tile.location.x tile.location.y tile.crossing_cost) % 9)
diff --git a/src/battlemap/src/View/Battlemap/Tile.elm b/src/battlemap/src/View/Battlemap/Tile.elm
index 2b526b2..5ac0701 100644
--- a/src/battlemap/src/View/Battlemap/Tile.elm
+++ b/src/battlemap/src/View/Battlemap/Tile.elm
@@ -16,11 +16,6 @@ import Struct.Tile
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
-noise_function : Int -> Int -> Int -> Int
-noise_function a b c =
-   (round
-         (radians (toFloat ((a + 1) * 2 + (b + 1) * 3 + c)))
-   )
 
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
@@ -40,19 +35,7 @@ get_html tile =
             (Html.Attributes.class
                (
                   "battlemap-tile-variant-"
-                  ++
-                  (toString
-                     -- I don't like how Elm does random, let's get some noisy
-                     -- function instead.
-                     (
-                        (noise_function
-                           tile_loc.x
-                           tile_loc.y
-                           (Struct.Tile.get_cost tile)
-                        )
-                        % 9
-                     )
-                  )
+                  ++ (toString (Struct.Tile.get_variant_id tile))
                )
             ),
             (Html.Attributes.class "clickable"),
diff --git a/src/battlemap/src/View/SubMenu/Status.elm b/src/battlemap/src/View/SubMenu/Status.elm
index feb5097..70a7e3c 100644
--- a/src/battlemap/src/View/SubMenu/Status.elm
+++ b/src/battlemap/src/View/SubMenu/Status.elm
@@ -7,120 +7,16 @@ import Html
 import Html.Attributes
 
 -- Struct.Battlemap -------------------------------------------------------------------
-import Struct.Battlemap
-import Struct.Character
-import Struct.Error
 import Struct.Event
 import Struct.Location
 import Struct.Model
-import Struct.Statistics
-import Struct.Tile
 import Struct.UI
 
 import View.SubMenu.Status.CharacterInfo
+import View.SubMenu.Status.TileInfo
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
 --------------------------------------------------------------------------------
-get_char_info_html : (
-      Struct.Model.Type ->
-      Struct.Character.Ref ->
-      (Html.Html Struct.Event.Type)
-   )
-get_char_info_html model char_ref =
-   case (Dict.get char_ref model.characters) of
-      Nothing -> (Html.text "Error: Unknown character selected.")
-      (Just char) ->
-         (Html.text
-            (
-               "Focusing "
-               ++ char.name
-               ++ " (Player "
-               ++ (Struct.Character.get_player_id char)
-               ++ "): "
-               ++
-               (toString
-                  (Struct.Statistics.get_movement_points
-                     (Struct.Character.get_statistics char)
-                  )
-               )
-               ++ " movement points; "
-               ++ "???"
-               ++ " attack range. Health: "
-               ++ (toString (Struct.Character.get_current_health char))
-               ++ "/"
-               ++
-               (toString
-                  (Struct.Statistics.get_max_health
-                     (Struct.Character.get_statistics char)
-                  )
-               )
-            )
-         )
-
-get_error_html : Struct.Error.Type -> (Html.Html Struct.Event.Type)
-get_error_html err =
-   (Html.div
-      [
-         (Html.Attributes.class "battlemap-tabmenu-error-message")
-      ]
-      [
-         (Html.text (Struct.Error.to_string err))
-      ]
-   )
-
-get_tile_info_html : (
-      Struct.Model.Type ->
-      Struct.Location.Type ->
-      (Html.Html Struct.Event.Type)
-   )
-get_tile_info_html model loc =
-   case (Struct.Battlemap.try_getting_tile_at loc model.battlemap) of
-      (Just tile) ->
-         (Html.div
-            [
-               (Html.Attributes.class
-                  "battlemap-tabmenu-tile-info-tab"
-               )
-            ]
-            [
-               (Html.div
-                  [
-                     (Html.Attributes.class "battlemap-tile-icon"),
-                     (Html.Attributes.class "battlemap-tiled"),
-                     (Html.Attributes.class
-                        (
-                           "asset-tile-"
-                           ++
-                           (Struct.Tile.get_icon_id tile)
-                        )
-                     )
-                  ]
-                  [
-                  ]
-               ),
-               (Html.div
-                  [
-                  ]
-                  [
-                     (Html.text
-                        (
-                           "Focusing tile ("
-                           ++ (toString loc.x)
-                           ++ ", "
-                           ++ (toString loc.y)
-                           ++ "). {ID = "
-                           ++ (Struct.Tile.get_icon_id tile)
-                           ++ ", cost = "
-                           ++ (toString (Struct.Tile.get_cost tile))
-                           ++ "}."
-                        )
-                     )
-                  ]
-               )
-            ]
-         )
-
-      Nothing -> (Html.text "Error: Unknown tile location selected.")
 
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
@@ -135,7 +31,7 @@ get_html model =
       [
          (case (Struct.UI.get_previous_action model.ui) of
             (Just (Struct.UI.SelectedLocation loc)) ->
-               (get_tile_info_html
+               (View.SubMenu.Status.TileInfo.get_html
                   model
                   (Struct.Location.from_ref loc)
                )
diff --git a/src/battlemap/src/View/SubMenu/Status/TileInfo.elm b/src/battlemap/src/View/SubMenu/Status/TileInfo.elm
new file mode 100644
index 0000000..75953f8
--- /dev/null
+++ b/src/battlemap/src/View/SubMenu/Status/TileInfo.elm
@@ -0,0 +1,137 @@
+module View.SubMenu.Status.TileInfo exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Struct.Battlemap -------------------------------------------------------------------
+import Constants.IO
+import Constants.Movement
+
+import Struct.Battlemap
+import Struct.Event
+import Struct.Location
+import Struct.Model
+import Struct.Tile
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_icon : (Struct.Tile.Type -> (Html.Html Struct.Event.Type))
+get_icon tile =
+   (Html.div
+      [
+         (Html.Attributes.class "battlemap-tile-card-icon"),
+         (Html.Attributes.class
+            (
+               "battlemap-tile-variant-"
+               ++ (toString (Struct.Tile.get_variant_id tile))
+            )
+         ),
+         (Html.Attributes.style
+            [
+               (
+                  "background-image",
+                  (
+                     "url("
+                     ++ Constants.IO.tile_assets_url
+                     ++ (Struct.Tile.get_icon_id tile)
+                     ++".svg)"
+                  )
+               )
+            ]
+         )
+      ]
+      [
+      ]
+   )
+
+get_name : (Struct.Tile.Type -> (Html.Html Struct.Event.Type))
+get_name tile =
+   (Html.div
+      [
+         (Html.Attributes.class "battlemap-tile-card-name")
+      ]
+      [
+         (Html.text
+            (
+               "Tile Type "
+               ++ (Struct.Tile.get_icon_id tile)
+            )
+         )
+      ]
+   )
+
+get_cost : (Struct.Tile.Type -> (Html.Html Struct.Event.Type))
+get_cost tile =
+   let
+      cost = (Struct.Tile.get_cost tile)
+      text =
+         if (cost > Constants.Movement.max_points)
+         then
+            "Obstructed"
+         else
+            ("Cost: " ++ (toString cost))
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battlemap-tile-card-cost")
+         ]
+         [
+            (Html.text text)
+         ]
+      )
+
+get_location : (Struct.Tile.Type -> (Html.Html Struct.Event.Type))
+get_location tile =
+   let
+      tile_location = (Struct.Tile.get_location tile)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battlemap-tile-card-location")
+         ]
+         [
+            (Html.text
+               (
+                  "{x: "
+                  ++ (toString tile_location.x)
+                  ++ "; y: "
+                  ++ (toString tile_location.y)
+                  ++ "}"
+               )
+            )
+         ]
+      )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.Location.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model loc =
+   case (Struct.Battlemap.try_getting_tile_at loc model.battlemap) of
+      (Just tile) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battlemap-tile-card")
+            ]
+            [
+               (get_name tile),
+               (Html.div
+                  [
+                     (Html.Attributes.class "battlemap-tile-card-top")
+                  ]
+                  [
+                     (get_icon tile),
+                     (get_location tile),
+                     (get_cost tile)
+                  ]
+               )
+            ]
+         )
+
+      Nothing -> (Html.text "Error: Unknown tile location selected.")
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index cc05378..40b91a1 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -177,13 +177,15 @@
    justify-content: center;
 }
 
-.battlemap-character-card
+.battlemap-character-card,
+.battlemap-tile-card
 {
    display: flex;
    flex-flow: column;
 }
 
-.battlemap-character-card-top
+.battlemap-character-card-top,
+.battlemap-tile-card-top
 {
    display: grid;
    grid-template-columns: [col] auto [col] 1fr;
@@ -195,7 +197,8 @@
    margin-top: 0.3em;
 }
 
-.battlemap-character-card .battlemap-character-portrait
+.battlemap-character-card .battlemap-character-portrait,
+.battlemap-tile-card-icon
 {
    grid-column: col 1;
    grid-row: row 1 / span 6;
@@ -217,10 +220,20 @@
 .battlemap-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
 .battlemap-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }
 
-.battlemap-character-card-name
+.battlemap-tile-card-top
 {
-   text-align: center;
- k  border-radius: 5px;
+   margin:0.3em;
+}
+
+.battlemap-character-card-name,
+.battlemap-tile-card-name,
+.battlemap-tile-card-cost,
+.battlemap-tile-card-location
+{
+   display:flex;
+   justify-content:center;
+   align-items:center;
+   border-radius: 5px;
    background-color: #6C5D53;
    width: 100%;
 }
@@ -255,7 +268,8 @@
    transition: width 0.3s ease-out;
 }
 
-.battlemap-character-card-health
+.battlemap-character-card-health,
+.battlemap-tile-card-cost
 {
    grid-column: col 2;
    grid-row: row 2;
@@ -267,7 +281,8 @@
    background-color: darkred;
 }
 
-.battlemap-character-card-movement
+.battlemap-character-card-movement,
+.battlemap-tile-card-location
 {
    grid-column: col 2;
    grid-row: row 4;
@@ -378,6 +393,15 @@
    height: 100px;
 }
 
+.battlemap-tile-card-icon
+{
+   box-sizing: border-box;
+   border-radius: 5px;
+   background-size: 300% 300%;
+   width: 80px;
+   height: 80px;
+}
+
 .battlemap-character-portrait *
 {
    box-sizing: border-box;
@@ -449,16 +473,16 @@
 }
 
 .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-tile-variant-1  {background-position: 100% 0;}
+.battlemap-tile-variant-2  {background-position: 200% 0;}
+.battlemap-tile-variant-3  {background-position: 0    100%;}
+.battlemap-tile-variant-4  {background-position: 100% 100%;}
+.battlemap-tile-variant-5  {background-position: 200% 100%;}
+.battlemap-tile-variant-6  {background-position: 0    200%;}
+.battlemap-tile-variant-7  {background-position: 100% 200%;}
+.battlemap-tile-variant-8  {background-position: 200% 200%;}
+
+.battlemap-tile-icon       {z-index: 0; position: absolute; background-size: 300%;}
 .battlemap-path-icon-below-markers {z-index: 1;}
 .battlemap-marker-icon     {z-index: 2;}
 .battlemap-path-icon-above-markers {z-index: 3;}