From 994519db688853605d00f75ddcf70f883ef1025a Mon Sep 17 00:00:00 2001 From: nsensfel Date: Wed, 30 May 2018 16:52:24 +0200 Subject: Isolates gauge creation, changes carcard aesthetic --- .../src/View/Controlled/CharacterCard.elm | 77 ++++++++-------------- src/battlemap/src/View/Gauge.elm | 77 ++++++++++++++++++++++ src/battlemap/www/style.css | 42 +++++++----- 3 files changed, 132 insertions(+), 64 deletions(-) create mode 100644 src/battlemap/src/View/Gauge.elm 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 -- cgit v1.2.3-70-g09d2