Isolates gauge creation, changes carcard aesthetic

3 files changed, 132 insertions, 64 deletions

diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm
index b45e0cf..a48a311 100644
--- a/src/battlemap/src/View/Controlled/CharacterCard.elm
+++ b/src/battlemap/src/View/Controlled/CharacterCard.elm
@@ -12,6 +12,7 @@ import Struct.Statistics
 import Struct.Weapon
 
 import View.Character
+import View.Gauge
 
 --------------------------------------------------------------------------------
 -- LOCAL -----------------------------------------------------------------------
@@ -42,53 +43,32 @@ get_health_bar char =
             (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")
-               ]
-               [
-               ]
-            )
-         ]
+      (View.Gauge.get_html
+         ("HP: " ++ (toString current) ++ "/" ++ (toString max))
+         (100.0 * ((toFloat current)/(toFloat max)))
+         [(Html.Attributes.class "battlemap-character-card-health")]
+         []
+         []
+      )
+
+get_movement_bar : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_movement_bar char =
+   let
+      current = (Struct.Character.get_current_health char)
+      max =
+         (Struct.Statistics.get_max_health
+            (Struct.Character.get_statistics char)
+         )
+   in
+      (View.Gauge.get_html
+         ("MP: " ++ (toString current) ++ "/" ++ (toString max))
+         (100.0 * ((toFloat current)/(toFloat max)))
+         [(Html.Attributes.class "battlemap-character-card-movement")]
+         []
+         []
       )
 
 get_weapon_details : (
@@ -231,7 +211,8 @@ get_html model char weapon =
             ]
             [
                (View.Character.get_portrait_html model.player_id char),
-               (get_health_bar char)
+               (get_health_bar char),
+               (get_movement_bar char)
             ]
          ),
          (get_weapon_details
diff --git a/src/battlemap/src/View/Gauge.elm b/src/battlemap/src/View/Gauge.elm
new file mode 100644
index 0000000..86fcef2
--- /dev/null
+++ b/src/battlemap/src/View/Gauge.elm
@@ -0,0 +1,77 @@
+module View.Gauge exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Battlemap -------------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_text_div: (
+      String ->
+      List (Html.Attribute Struct.Event.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_text_div text extra_txt_attr =
+   (Html.div
+      (
+         [(Html.Attributes.class "battlemap-gauge-text")]
+         ++ extra_txt_attr
+      )
+      [
+         (Html.text text)
+      ]
+   )
+
+get_bar_div: (
+      Float ->
+      List (Html.Attribute Struct.Event.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_bar_div percent extra_bar_attr =
+   (Html.div
+      (
+         [
+            (Html.Attributes.style
+               [
+                  ("width", ((toString percent) ++ "%"))
+               ]
+            ),
+            (Html.Attributes.class
+               "battlemap-gauge-bar"
+            )
+         ]
+         ++
+         extra_bar_attr
+      )
+      [
+      ]
+   )
+
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      String ->
+      Float ->
+      List (Html.Attribute Struct.Event.Type) ->
+      List (Html.Attribute Struct.Event.Type) ->
+      List (Html.Attribute Struct.Event.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html text percent extra_div_attr extra_bar_attr extra_txt_attr =
+   (Html.div
+      (
+         [(Html.Attributes.class "battlemap-gauge")]
+         ++ extra_div_attr
+      )
+      [
+         (get_text_div text extra_txt_attr),
+         (get_bar_div percent extra_bar_attr)
+      ]
+   )
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 26141c4..46bab81 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -165,13 +165,15 @@
 {
    display: flex;
    flex-flow: column;
+   margin-left: 0.2em;
+   margin-right: 0.2em;
 }
 
 .battlemap-character-card-top
 {
    display: grid;
-   grid-template-columns: [col] auto [col] auto;
-   grid-template-rows: [row] 1fr [row] 1fr [row] 1fr;
+   grid-template-columns: [col] auto [col] 1fr;
+   grid-template-rows: [row] 1em [row] 1fr [row] 1em [row] 1fr [row] 1em;
 
    align-items: center;
    justify-content: left;
@@ -180,50 +182,56 @@
 .battlemap-character-card .battlemap-character-portrait
 {
    grid-column: col 1;
-   grid-row: row 1 / span 3;
+   grid-row: row 1 / span 6;
+   margin: 0;
 }
 
 .battlemap-character-card-name
 {
-   grid-column: col 2;
-   grid-row: row 1;
+   text-align: center;
+   border-radius: 5px;
+   background-color: #6C5D53;
+   width: 100%;
 }
 
-.battlemap-character-card-percent-bar
+.battlemap-gauge
 {
    border-radius: 5px;
-   height: 24px;
-   width: 100px;
    border: 2px solid #6C5D53;
    text-align: center;
 }
 
-.battlemap-character-card-percent-bar-text
+.battlemap-gauge-text
 {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
    line-height: 24px;
    position: relative;
    height: inherit;
    z-index: 1;
-   width: 100px;
+   width: inherit;
 }
 
-.battlemap-character-card-percent-bar-bar
+.battlemap-gauge-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;
+   width: 100%;
+   height: 100%;
 }
 
-.battlemap-character-card-health-bar
+.battlemap-character-card-health > .battlemap-gauge-bar
 {
    background-color: darkred;
 }
@@ -231,12 +239,14 @@
 .battlemap-character-card-movement
 {
    grid-column: col 2;
-   grid-row: row 2;
+   grid-row: row 4;
+   width: 100%;
+   height: 100%;
 }
 
-.battlemap-character-card-movement-bar
+.battlemap-character-card-movement > .battlemap-gauge-bar
 {
-   background-color: orange;
+   background-color: darkgrey;
 }
 
 .battlemap-character-card-weapon