Adding some visuals for the health.

2 files changed, 98 insertions, 19 deletions

diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm
index 59431da..b45e0cf 100644
--- a/src/battlemap/src/View/Controlled/CharacterCard.elm
+++ b/src/battlemap/src/View/Controlled/CharacterCard.elm
@@ -35,26 +35,61 @@ get_health_bar : (
       (Html.Html Struct.Event.Type)
    )
 get_health_bar char =
-   (Html.div
-      [
-         (Html.Attributes.class "battlemap-character-card-health")
-      ]
-      [
-         (Html.text
-            (
-               "HP: "
-               ++ (toString (Struct.Character.get_current_health char))
-               ++ "/"
-               ++
-               (toString
-                  (Struct.Statistics.get_max_health
-                     (Struct.Character.get_statistics char)
+   let
+      current = (Struct.Character.get_current_health char)
+      max =
+         (Struct.Statistics.get_max_health
+            (Struct.Character.get_statistics char)
+         )
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battlemap-character-card-percent-bar"),
+            (Html.Attributes.class "battlemap-character-card-health")
+         ]
+         [
+            (Html.div
+               [
+                  (Html.Attributes.class
+                     "battlemap-character-card-percent-bar-text"
                   )
-               )
+               ]
+               [
+                  (Html.text
+                     (
+                        "HP: "
+                        ++ (toString current)
+                        ++ "/"
+                        ++ (toString max)
+                     )
+                  )
+               ]
+            ),
+            (Html.div
+               [
+                  (Html.Attributes.style
+                     [
+                        (
+                           "width",
+                           (
+                              (toString
+                                 (100.0 * ((toFloat current)/(toFloat max)))
+                              )
+                              ++ "%"
+                           )
+                        )
+                     ]
+                  ),
+                  (Html.Attributes.class
+                     "battlemap-character-card-percent-bar-bar"
+                  ),
+                  (Html.Attributes.class "battlemap-character-card-health-bar")
+               ]
+               [
+               ]
             )
-         )
-      ]
-   )
+         ]
+      )
 
 get_weapon_details : (
       Struct.Model.Type ->
@@ -189,13 +224,13 @@ get_html model char weapon =
          (Html.Attributes.class "battlemap-character-card")
       ]
       [
+         (get_name char),
          (Html.div
             [
                (Html.Attributes.class "battlemap-character-card-top")
             ]
             [
                (View.Character.get_portrait_html model.player_id char),
-               (get_name char),
                (get_health_bar char)
             ]
          ),
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index e714f83..26141c4 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -189,12 +189,56 @@
    grid-row: row 1;
 }
 
+.battlemap-character-card-percent-bar
+{
+   border-radius: 5px;
+   height: 24px;
+   width: 100px;
+   border: 2px solid #6C5D53;
+   text-align: center;
+}
+
+.battlemap-character-card-percent-bar-text
+{
+   line-height: 24px;
+   position: relative;
+   height: inherit;
+   z-index: 1;
+   width: 100px;
+}
+
+.battlemap-character-card-percent-bar-bar
+{
+   position: relative;
+   height: inherit;
+   border-radius: 5px;
+   z-index: 0;
+   top: -100%;
+   max-width: 100px;
+}
+
 .battlemap-character-card-health
 {
    grid-column: col 2;
    grid-row: row 2;
 }
 
+.battlemap-character-card-health-bar
+{
+   background-color: darkred;
+}
+
+.battlemap-character-card-movement
+{
+   grid-column: col 2;
+   grid-row: row 2;
+}
+
+.battlemap-character-card-movement-bar
+{
+   background-color: orange;
+}
+
 .battlemap-character-card-weapon
 {
    display: grid;