From 8fcf078fb0a5df7b1a97707f50d14997938676c8 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Thu, 19 Apr 2018 16:21:41 +0200 Subject: The "Character Card" looks nice. --- src/battlemap/src/View/Controlled.elm | 35 +++-- .../src/View/Controlled/CharacterCard.elm | 131 +++++++++------ src/battlemap/www/style.css | 175 +++++++++++---------- 3 files changed, 196 insertions(+), 145 deletions(-) diff --git a/src/battlemap/src/View/Controlled.elm b/src/battlemap/src/View/Controlled.elm index 6f1e10d..0afd481 100644 --- a/src/battlemap/src/View/Controlled.elm +++ b/src/battlemap/src/View/Controlled.elm @@ -10,11 +10,12 @@ import Struct.Character import Struct.CharacterTurn import Struct.Event import Struct.Model -import Struct.Navigator -import Struct.Statistics +import Struct.WeaponSet import Util.Html +import View.Controlled.CharacterCard + -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- -------------------------------------------------------------------------------- @@ -39,15 +40,12 @@ inventory_button = [ (Html.text "Switch Weapon") ] ) -get_curr_char_info_htmls : ( +get_available_actions : ( Struct.Model.Type -> - Struct.Character.Type -> (List (Html.Html Struct.Event.Type)) ) -get_curr_char_info_htmls model char = - case - (Struct.CharacterTurn.get_state model.char_turn) - of +get_available_actions model = + case (Struct.CharacterTurn.get_state model.char_turn) of Struct.CharacterTurn.SelectedCharacter -> [ (attack_button), @@ -66,13 +64,6 @@ get_curr_char_info_htmls model char = _ -> [ - (Html.text - ( - "Error: CharacterTurn structure in an inconsistent state:" - ++ " Has an active character yet the 'state' is not any of" - ++ " those expected in such cases." - ) - ) ] -------------------------------------------------------------------------------- @@ -86,7 +77,19 @@ get_html model = (Just char) -> (Html.div [(Html.Attributes.class "battlemap-controlled")] - (get_curr_char_info_htmls model char) + [ + (View.Controlled.CharacterCard.get_html + model + char + (Struct.WeaponSet.get_active_weapon + (Struct.Character.get_weapons char) + ) + ), + (Html.div + [(Html.Attributes.class "battlemap-controlled-actions")] + (get_available_actions model) + ) + ] ) Nothing -> (Util.Html.nothing) diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm index 5b84aa6..9c88b75 100644 --- a/src/battlemap/src/View/Controlled/CharacterCard.elm +++ b/src/battlemap/src/View/Controlled/CharacterCard.elm @@ -11,6 +11,7 @@ import Struct.Character import Struct.Event import Struct.Model import Struct.Statistics +import Struct.Weapon -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- @@ -39,13 +40,13 @@ get_name : ( Struct.Character.Type -> (Html.Html Struct.Event.Type) ) -get_name_html char = +get_name char = (Html.div [ (Html.Attributes.class "battlemap-character-card-name") ] [ - (Html.string (Struct.Character.get_name char)) + (Html.text (Struct.Character.get_name char)) ] ) @@ -59,13 +60,14 @@ get_health_bar char = (Html.Attributes.class "battlemap-character-card-health") ] [ - (Html.string + (Html.text ( - (toString (Struct.Character.get_current_health char)) + "HP: " + ++ (toString (Struct.Character.get_current_health char)) ++ "/" ++ (toString - (Struct.Statistics.get_health + (Struct.Statistics.get_max_health (Struct.Character.get_statistics char) ) ) @@ -74,58 +76,77 @@ get_health_bar char = ] ) -get_movement_bar : ( - Struct.Character.Type -> +get_weapon_details : ( + Struct.Model.Type -> + Struct.Statistics.Type -> + Struct.Weapon.Type -> (Html.Html Struct.Event.Type) ) -get_movement_bar char = +get_weapon_details model stats weapon = (Html.div [ - (Html.Attributes.class "battlemap-character-card-movement") + (Html.Attributes.class "battlemap-character-card-weapon") ] [ - (Html.string - ( - "???/" - ++ - (toString - (Struct.Statistics.get_movement_points - (Struct.Character.get_statistics char) + (Html.div + [ + (Html.Attributes.class "battlemap-character-card-weapon-name") + ] + [ + (Html.text (Struct.Weapon.get_name weapon)) + ] + ), + (Html.div + [ + (Html.Attributes.class "battlemap-character-card-weapon-name") + ] + [ + (Html.text + ( + "[" + ++ (toString (Struct.Statistics.get_damage_min stats)) + ++ ", " + ++ (toString (Struct.Statistics.get_damage_max stats)) + ++ "] " + ++ + (case (Struct.Weapon.get_damage_type weapon) of + Struct.Weapon.Slash -> "slashing " + Struct.Weapon.Pierce -> "piercing " + Struct.Weapon.Blunt -> "bludgeoning " + ) + ++ + (case (Struct.Weapon.get_range_type weapon) of + Struct.Weapon.Ranged -> "ranged" + Struct.Weapon.Melee -> "melee" + ) ) ) - ) + ] ) ] ) -get_weapon_details : ( - Struct.Model.Type -> - Struct.Character.Type -> - Struct.Weapon.Type -> - (Html.Html Struct.Event.Type) - ) -get_weapon_details model char weapon = +stat_name : String -> (Html.Html Struct.Event.Type) +stat_name name = (Html.div [ - (Html.Attributes.class "battlemap-character-card-weapon") + (Html.Attributes.class "battlemap-character-card-stat-name") ] [ - (Html.string (Struct.Weapon.get_name wp)) + (Html.text name) ] ) -get_stat : String -> Int -> Boolean -> (Html.Html Struct.Event.Type) -get_stat name val perc = +stat_val : Int -> Bool -> (Html.Html Struct.Event.Type) +stat_val val perc = (Html.div [ - (Html.Attributes.class "battlemap-character-card-stats-item") + (Html.Attributes.class "battlemap-character-card-stat-val") ] [ - (Html.string + (Html.text ( - name - ++ " " - ++ (toString val) + (toString val) ++ ( if perc @@ -154,13 +175,25 @@ get_relevant_stats model char weapon = (Html.Attributes.class "battlemap-character-card-stats") ] [ - (get_stat "Dodg" (Struct.Statistics.get_dodges stats) True), - (get_stat "Parr" (Struct.Statistics.get_parries stats) True), - (get_stat "Accu" (Struct.Statistics.get_accuracy stats) False), - (get_stat "2Hit" (Struct.Statistics.get_double_hits stats) True), - (get_stat "Crit" (Struct.Statistics.get_critical_hits stats) True) + (stat_name "Dodge"), + (stat_val (Struct.Statistics.get_dodges stats) True), + (stat_name "Parry"), + (stat_val + (case (Struct.Weapon.get_range_type weapon) of + Struct.Weapon.Ranged -> 0 + Struct.Weapon.Melee -> (Struct.Statistics.get_parries stats) + ) + True + ), + (stat_name "Accu."), + (stat_val (Struct.Statistics.get_accuracy stats) False), + (stat_name "2xHit"), + (stat_val (Struct.Statistics.get_double_hits stats) True), + (stat_name "Crit."), + (stat_val (Struct.Statistics.get_critical_hits stats) True) ] ) + -------------------------------------------------------------------------------- -- EXPORTED -------------------------------------------------------------------- -------------------------------------------------------------------------------- @@ -170,17 +203,27 @@ get_html : ( Struct.Weapon.Type -> (Html.Html Struct.Event.Type) ) -get_html model character weapon = +get_html model char weapon = (Html.div [ (Html.Attributes.class "battlemap-character-card") ] [ - (get_portrait char), - (get_name char), - (get_health_bar char), - (get_movement_bar char), - (get_weapon_details model char weapon), + (Html.div + [ + (Html.Attributes.class "battlemap-character-card-top") + ] + [ + (get_portrait char), + (get_name char), + (get_health_bar char) + ] + ), + (get_weapon_details + model + (Struct.Character.get_statistics char) + weapon + ), (get_relevant_stats model char weapon) ] ) diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css index 4f56b76..dfbfdc4 100644 --- a/src/battlemap/www/style.css +++ b/src/battlemap/www/style.css @@ -1,7 +1,6 @@ /******************************************************************************/ /** LAYOUT ********************************************************************/ /******************************************************************************/ - .fullscreen-module { display: grid; @@ -21,13 +20,9 @@ flex-direction: row; flex-wrap: wrap; - border: 1px solid #502D16; + border: 3px solid #502D16; border-top: none; border-radius: 0 0 15px 15px; - box-shadow: - -1px 0px 2px #502D16, - 1px 0px 2px #502D16, - 0px 1px 2px #502D16; padding: 0.5em; @@ -41,13 +36,9 @@ grid-column: col 1 / span 3; grid-row: row 3; - border: 1px solid #502D16; + border: 3px solid #502D16; border-radius: 15px 15px 0 0; border-bottom: none; - box-shadow: - -1px 0px 2px #502D16, - 1px 0px 2px #502D16, - 0px -1px 2px #502D16; padding: 0.5em; margin: 0 1em 0 1em; @@ -55,12 +46,7 @@ background-color: rgba(145,124,111,1); } -.battlemap-error -{ - background-color: rgba(85,0,0,1); -} -/** Main Content **************************************************************/ .battlemap-container { grid-column: col 2; @@ -74,13 +60,8 @@ margin: auto; - border: 1px solid #502D16; + border: 3px solid #502D16; border-radius: 15px; - box-shadow: - -1px 0px 2px #502D16, - 1px 0px 2px #502D16, - 0px -1px 2px #502D16, - 0px 1px 2px #502D16; } .battlemap-controlled @@ -91,18 +72,13 @@ display: flex; flex-flow: column; - align-items: center; - justify-content: center; + justify-content: space-between; padding: 0.5em; - border: 1px solid #502D16; + border: 3px solid #502D16; border-radius: 0 15px 15px 0; border-left: none; - box-shadow: - 1px 0px 2px #502D16, - 0px -1px 2px #502D16, - 0px 1px 2px #502D16; background-color: rgba(145,124,111,1); } @@ -115,103 +91,121 @@ padding: 0.5em; overflow: auto; - border: 1px solid #502D16; + border: 3px solid #502D16; border-radius: 15px 0 0 15px; border-right: none; - box-shadow: - -1px 0px 2px #502D16, - 0px -1px 2px #502D16, - 0px 1px 2px #502D16; background-color: rgba(145,124,111,1); } -/*** Main View ****************************************************************/ -.battlemap-actual +/******************************************************************************/ +/** HELP PANEL ****************************************************************/ +/******************************************************************************/ +.battlemap-error { - display: inline-block; - transform-origin: top left; - - /*** Otherwise, it won't display correctly without 'transform: scale' ***/ - position: relative; - background-color: rgba(145,124,111,1); + background-color: rgba(85,0,0,1); } -/******************************************************************************/ -/** RIGHT PANEL ***************************************************************/ -/******************************************************************************/ -.battlemap-side-bar +.battlemap-manual-controls { - flex-grow: 1; - overflow-y: auto; + max-height: 30%; width: inherit; - height: inherit; - word-wrap: break-word; + flex: initial; + display: flex; - flex-direction: column; - padding: 0.5em; - color: #FFEEAA; - border-left: 1px solid #502D16; - box-shadow: -1px 0px 2px #502D16; + flex-direction: row; + flex-wrap: wrap; } -.battlemap-tabmenu +/******************************************************************************/ +/** CONTROLLED PANEL **********************************************************/ +/******************************************************************************/ +.battlemap-controlled-actions { - flex-grow: 1; display: flex; - flex-direction: column; - flex-wrap: wrap; - width: inherit; + flex-flow: row wrap; + + align-items: center; + justify-content: center; } -/** Tab Menu Specifics ********************************************************/ -.battlemap-main-menu +.battlemap-character-card { display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; + flex-flow: column; } -.battlemap-main-menu button +.battlemap-character-card-top { - flex: 1; + display: grid; + grid-template-columns: [col] auto [col] auto; + grid-template-rows: [row] 1fr [row] 1fr [row] 1fr; - text-transform: uppercase; + align-items: center; + justify-content: left; } -.battlemap-tabmenu-content +.battlemap-character-card-portrait { - flex: 1; + grid-column: col 1; + grid-row: row 1 / span 3; } -/** General *******************************************************************/ -.battlemap-side-bar-targets +.battlemap-character-card-name { - flex-grow: 1; - display: flex; - flex-direction: column; - flex-wrap: wrap; - width: inherit; + grid-column: col 2; + grid-row: row 1; +} + +.battlemap-character-card-health +{ + grid-column: col 2; + grid-row: row 2; } -.battlemap-float-left { float: left; } -.battlemap-float-right { float: right; } +.battlemap-character-card-weapon +{ + display: grid; -.battlemap-manual-controls + border-radius: 5px; + background-color: #6C5D53; + + padding: 0.3em; +} + +.battlemap-character-card-stats { - max-height: 30%; - width: inherit; - flex: initial; + display: grid; + grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%; + border-radius: 5px; + background-color: #6C5D53; + + padding: 0.3em; + margin-top: 0.3em; +} + +/******************************************************************************/ +/** MAIN MENU *****************************************************************/ +/******************************************************************************/ +.battlemap-main-menu +{ display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: space-between; } -/** Tabs **********************************************************************/ +.battlemap-main-menu button +{ + flex: 1; + + text-transform: uppercase; +} -/**** Characters Tab */ +/******************************************************************************/ +/** SUB-MENU ******************************************************************/ +/******************************************************************************/ .battlemap-tabmenu-characters-tab { display: flex; @@ -256,9 +250,20 @@ width: 36px; height: 36px; } + /******************************************************************************/ /** Main View Elements ********************************************************/ /******************************************************************************/ +.battlemap-actual +{ + display: inline-block; + transform-origin: top left; + + /*** Otherwise, it won't display correctly without 'transform: scale' ***/ + position: relative; + background-color: rgba(145,124,111,1); +} + .battlemap-tiled { height: 32px; -- cgit v1.2.3-70-g09d2