Adds status markers.

For the first release, there is are no planned statuses, except the
ranks.

2 files changed, 81 insertions, 5 deletions

diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm
index a6d6bb0..ea5a4e6 100644
--- a/src/battlemap/src/View/Controlled/CharacterCard.elm
+++ b/src/battlemap/src/View/Controlled/CharacterCard.elm
@@ -20,6 +20,8 @@ import Struct.Statistics
 import Struct.Weapon
 import Struct.WeaponSet
 
+import Util.Html
+
 import View.Character
 import View.Gauge
 
@@ -60,6 +62,49 @@ get_health_bar char =
          []
       )
 
+get_rank_status : (
+      Struct.Character.Rank ->
+      (Html.Html Struct.Event.Type)
+   )
+get_rank_status rank =
+   (Html.div
+      [
+         (Html.Attributes.class "battlemap-character-card-status"),
+         (Html.Attributes.class
+            (
+               case rank of
+                  Struct.Character.Commander ->
+                     "battlemap-character-card-commander-status"
+
+                  Struct.Character.Target ->
+                     "battlemap-character-card-target-status"
+
+                  Struct.Character.Optional -> ""
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+get_statuses : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_statuses char =
+   (Html.div
+      [
+         (Html.Attributes.class "battlemap-character-card-statuses")
+      ]
+      [
+         (
+            case (Struct.Character.get_rank char) of
+               Struct.Character.Optional -> (Util.Html.nothing)
+               other -> (get_rank_status other)
+         )
+      ]
+   )
+
 get_active_movement_bar : (
       (Maybe Struct.Navigator.Type) ->
       Struct.Character.Type ->
@@ -448,7 +493,8 @@ get_minimal_html player_ix char =
             [
                (View.Character.get_portrait_html player_ix char),
                (get_health_bar char),
-               (get_inactive_movement_bar char)
+               (get_inactive_movement_bar char),
+               (get_statuses char)
             ]
          )
       ]
@@ -480,7 +526,8 @@ get_summary_html char_turn player_ix char =
                [
                   (View.Character.get_portrait_html player_ix char),
                   (get_health_bar char),
-                  (get_movement_bar char_turn char)
+                  (get_movement_bar char_turn char),
+                  (get_statuses char)
                ]
             ),
             (get_weapon_details char_statistics main_weapon),
@@ -516,7 +563,8 @@ get_full_html player_ix char =
                [
                   (View.Character.get_portrait_html player_ix char),
                   (get_health_bar char),
-                  (get_inactive_movement_bar char)
+                  (get_inactive_movement_bar char),
+                  (get_statuses char)
                ]
             ),
             (get_weapon_details char_statistics main_weapon),
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index a0a2565..74ef048 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -312,11 +312,12 @@
 {
    position: absolute;
    left: 100px;
-   top: 1em;
+   top: 0;
    margin-left: 0.5em;
    width: calc(100% - 100px - 0.5em);
 }
 
+
 .battlemap-character-card-health > .battlemap-gauge-bar
 {
    background-color: darkred;
@@ -327,9 +328,36 @@
 {
    position: absolute;
    left: 100px;
-   top: calc(1em + 1.5em + 1em);
+   top: calc(1.5em + 1em);
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
+}
+
+.battlemap-character-card-statuses
+{
+   position: absolute;
+   left: 100px;
+   top: calc(2*(1.5em + 0.5em) + 0.7em);
    margin-left: 0.5em;
    width: calc(100% - 100px - 0.5em);
+   display: flex;
+}
+
+.battlemap-character-card-status
+{
+   height: 1.5em;
+   width: 1.5em;
+   background-size: 100%;
+}
+
+.battlemap-character-card-target-status
+{
+   background-image: url("/asset/svg/status/target.svg");
+}
+
+.battlemap-character-card-commander-status
+{
+   background-image: url("/asset/svg/status/commander.svg");
 }
 
 .battlemap-character-card-movement > .battlemap-gauge-bar