Improving display of timeline & characters...

4 files changed, 55 insertions, 8 deletions

diff --git a/src/battlemap/src/Update/HandleServerReply.elm b/src/battlemap/src/Update/HandleServerReply.elm
index 3d66649..9319b38 100644
--- a/src/battlemap/src/Update/HandleServerReply.elm
+++ b/src/battlemap/src/Update/HandleServerReply.elm
@@ -13,6 +13,7 @@ import Struct.Event
 import Struct.Model
 import Struct.ServerReply
 import Struct.TurnResult
+import Struct.UI
 
 --------------------------------------------------------------------------------
 -- TYPES -----------------------------------------------------------------------
@@ -68,7 +69,8 @@ add_to_timeline turn_results current_state =
                   (Array.append
                      model.timeline
                      (Array.fromList turn_results)
-                  )
+                  ),
+               ui = (Struct.UI.set_displayed_tab model.ui Struct.UI.TimelineTab)
             },
             Nothing
          )
diff --git a/src/battlemap/src/View/SideBar/TabMenu/Characters.elm b/src/battlemap/src/View/SideBar/TabMenu/Characters.elm
index 5af7a65..79799c3 100644
--- a/src/battlemap/src/View/SideBar/TabMenu/Characters.elm
+++ b/src/battlemap/src/View/SideBar/TabMenu/Characters.elm
@@ -22,13 +22,26 @@ get_character_portrait_html : (
 get_character_portrait_html char =
    (Html.div
       [
-         (Html.Attributes.class "battlemap-character-portrait"),
          (Html.Attributes.class
             (
                "asset-character-portrait-"
                ++ (Struct.Character.get_portrait_id char)
             )
          ),
+         (Html.Attributes.class "battlemap-character-portrait")
+      ]
+      [
+      ]
+   )
+
+get_character_element_html : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_character_element_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battlemap-characters-element"),
          (Html.Attributes.class "clickable"),
          (Html.Events.onClick
             (Struct.Event.CharacterInfoRequested
@@ -37,8 +50,29 @@ get_character_portrait_html char =
          )
       ]
       [
+         (get_character_portrait_html char),
+         (Html.text
+            (
+               (Struct.Character.get_name char)
+               ++ ": "
+               ++ (toString (Struct.Character.get_current_health char))
+               ++ " HP, "
+               ++
+               (
+                  if (Struct.Character.is_enabled char)
+                  then
+                     "active"
+                  else
+                     "inactive"
+               )
+               ++ " (Player "
+               ++ (Struct.Character.get_player_id char)
+               ++ ")."
+            )
+         )
       ]
    )
+
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
 --------------------------------------------------------------------------------
@@ -50,7 +84,7 @@ get_html model =
          (Html.Attributes.class "battlemap-tabmenu-characters-tab")
       ]
       (List.map
-         (get_character_portrait_html)
+         (get_character_element_html)
          (Dict.values model.characters)
       )
    )
diff --git a/src/battlemap/src/View/SideBar/TabMenu/Timeline.elm b/src/battlemap/src/View/SideBar/TabMenu/Timeline.elm
index df0fe8b..8ca1f3d 100644
--- a/src/battlemap/src/View/SideBar/TabMenu/Timeline.elm
+++ b/src/battlemap/src/View/SideBar/TabMenu/Timeline.elm
@@ -34,6 +34,7 @@ get_attack_html model attack =
       ((Just atkchar), (Just defchar)) ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-attack")
             ]
             [
@@ -51,6 +52,7 @@ get_attack_html model attack =
       _ ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-attack")
             ]
             [
@@ -68,6 +70,7 @@ get_movement_html model movement =
       (Just char) ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-movement")
             ]
             [
@@ -87,6 +90,7 @@ get_movement_html model movement =
       _ ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-movement")
             ]
             [
@@ -104,6 +108,7 @@ get_weapon_switch_html model weapon_switch =
       (Just char) ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-weapon-switch")
             ]
             [
@@ -119,6 +124,7 @@ get_weapon_switch_html model weapon_switch =
       _ ->
          (Html.div
             [
+               (Html.Attributes.class "battlemap-timeline-element"),
                (Html.Attributes.class "battlemap-timeline-weapon-switch")
             ]
             [
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 914896c..149eafc 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -127,10 +127,8 @@
    height: 100px;
 }
 
-/**** Timeline Tab */
-.battlemap-timeline-movement,
-.battlemap-timeline-attack,
-.battlemap-timeline-weapon-switch
+.battlemap-timeline-element,
+.battlemap-characters-element
 {
    border-radius: 6px;
    padding: 1em;
@@ -144,11 +142,18 @@
    background-color: #EEE;
 }
 
-.battlemap-tabmenu-timeline-tab
+.battlemap-tabmenu-timeline-tab,
+.battlemap-tabmenu-characters-tab
 {
    background-color: #AAA;
 }
 
+.battlemap-tabmenu-characters-tab .battlemap-character-portrait
+{
+   width: 64px;
+   height: 64px;
+   float: left;
+}
 /******************************************************************************/
 /** Main View Elements ********************************************************/
 /******************************************************************************/