The "Character Card" looks nice.

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;