"Battlemap" -> "Battle".

31 files changed, 3470 insertions, 0 deletions

diff --git a/src/battle/src/View/Character.elm b/src/battle/src/View/Character.elm
new file mode 100644
index 0000000..d33feb1
--- /dev/null
+++ b/src/battle/src/View/Character.elm
@@ -0,0 +1,230 @@
+module View.Character exposing
+   (
+      get_portrait_html,
+      get_icon_html
+   )
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map  ------------------------------------------------------------------
+import Constants.UI
+
+import Util.Html
+
+import Struct.Armor
+import Struct.Character
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.Model
+import Struct.UI
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_activation_level_class : (
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_activation_level_class char =
+   if (Struct.Character.is_enabled char)
+   then
+      (Html.Attributes.class "battle-character-icon-enabled")
+   else
+      (Html.Attributes.class "battle-character-icon-disabled")
+
+get_alliance_class : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_alliance_class model char =
+   if ((Struct.Character.get_player_ix char) == model.player_ix)
+   then
+      (Html.Attributes.class "battle-character-ally")
+   else
+      (Html.Attributes.class "battle-character-enemy")
+
+get_position_style : (
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_position_style char =
+   let char_loc = (Struct.Character.get_location char) in
+      (Html.Attributes.style
+         [
+            ("top", ((toString (char_loc.y * Constants.UI.tile_size)) ++ "px")),
+            ("left", ((toString (char_loc.x * Constants.UI.tile_size)) ++ "px"))
+         ]
+      )
+
+get_focus_class : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_focus_class model char =
+   if
+   (
+      (Struct.UI.get_previous_action model.ui)
+      ==
+      (Just (Struct.UI.SelectedCharacter (Struct.Character.get_index char)))
+   )
+   then
+      (Html.Attributes.class "battle-character-selected")
+   else
+      if
+      (
+         (Struct.CharacterTurn.try_getting_target model.char_turn)
+         ==
+         (Just (Struct.Character.get_index char))
+      )
+      then
+         (Html.Attributes.class "battle-character-targeted")
+      else
+         (Html.Attributes.class "")
+
+get_icon_body_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_icon_body_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-icon-body"),
+         (Html.Attributes.class
+            (
+               "asset-character-team-body-"
+               ++ (toString (Struct.Character.get_player_ix char))
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+get_icon_head_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_icon_head_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-icon-head"),
+         (Html.Attributes.class
+            ("asset-character-icon-" ++ (Struct.Character.get_icon_id char))
+         )
+      ]
+      [
+      ]
+   )
+
+get_icon_actual_html : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_icon_actual_html model char =
+      (Html.div
+         [
+            (Html.Attributes.class "battle-tiled"),
+            (Html.Attributes.class "battle-character-icon"),
+            (get_activation_level_class char),
+            (get_alliance_class model char),
+            (get_position_style char),
+            (get_focus_class model char),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.CharacterSelected (Struct.Character.get_index char))
+            )
+         ]
+         [
+            (get_icon_body_html char),
+            (get_icon_head_html char)
+         ]
+      )
+
+get_portrait_body_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_portrait_body_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-portrait-body"),
+         (Html.Attributes.class
+            (
+               "asset-character-portrait-"
+               ++ (Struct.Character.get_portrait_id char)
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+get_portrait_armor_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_portrait_armor_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-portrait-armor"),
+         (Html.Attributes.class
+            (
+               "asset-armor-"
+               ++
+               (Struct.Armor.get_image_id (Struct.Character.get_armor char))
+            )
+         ),
+         (Html.Attributes.class
+            (
+               "asset-armor-variation-"
+               ++ (Struct.Character.get_armor_variation char)
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_portrait_html : (
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_portrait_html viewer_ix char =
+   (Html.div
+      [
+         (Html.Attributes.class
+            (
+               if ((Struct.Character.get_player_ix char) == viewer_ix)
+               then
+                  "battle-character-ally"
+               else
+                  "battle-character-enemy"
+            )
+         ),
+         (Html.Attributes.class "battle-character-portrait"),
+         (Html.Attributes.class
+            (
+               "battle-character-portrait-team-"
+               ++
+               (toString (Struct.Character.get_player_ix char))
+            )
+         ),
+         (Html.Events.onClick
+            (Struct.Event.LookingForCharacter (Struct.Character.get_index char))
+         )
+      ]
+      [
+         (get_portrait_body_html char),
+         (get_portrait_armor_html char)
+      ]
+   )
+
+get_icon_html : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_icon_html model char =
+   if (Struct.Character.is_alive char)
+   then
+      (get_icon_actual_html model char)
+   else
+      (Util.Html.nothing)
diff --git a/src/battle/src/View/Controlled.elm b/src/battle/src/View/Controlled.elm
new file mode 100644
index 0000000..e0e20bf
--- /dev/null
+++ b/src/battle/src/View/Controlled.elm
@@ -0,0 +1,133 @@
+module View.Controlled exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Struct.Map -------------------------------------------------------------------
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.Navigator
+
+import Util.Html
+
+import View.Controlled.CharacterCard
+import View.Controlled.ManualControls
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+has_a_path : Struct.CharacterTurn.Type -> Bool
+has_a_path char_turn =
+   case (Struct.CharacterTurn.try_getting_navigator char_turn) of
+      (Just nav) -> ((Struct.Navigator.get_path nav) /= [])
+      Nothing -> False
+
+
+attack_button : Struct.CharacterTurn.Type -> (Html.Html Struct.Event.Type)
+attack_button char_turn =
+   (Html.button
+      [ (Html.Events.onClick Struct.Event.AttackWithoutMovingRequest) ]
+      [
+         (Html.text
+            (
+               if (has_a_path char_turn)
+               then ("Go & Select Target")
+               else ("Select Target")
+            )
+         )
+      ]
+   )
+
+abort_button : (Html.Html Struct.Event.Type)
+abort_button =
+   (Html.button
+      [ (Html.Events.onClick Struct.Event.AbortTurnRequest) ]
+      [ (Html.text "Abort") ]
+   )
+
+end_turn_button : String -> (Html.Html Struct.Event.Type)
+end_turn_button suffix =
+   (Html.button
+      [
+         (Html.Events.onClick Struct.Event.TurnEnded),
+         (Html.Attributes.class "battle-end-turn-button")
+      ]
+      [ (Html.text ("End Turn" ++ suffix)) ]
+   )
+
+inventory_button : (Html.Html Struct.Event.Type)
+inventory_button =
+   (Html.button
+      [ (Html.Events.onClick Struct.Event.WeaponSwitchRequest) ]
+      [ (Html.text "Switch Weapon") ]
+   )
+
+get_available_actions : (
+      Struct.CharacterTurn.Type ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_available_actions char_turn =
+   case (Struct.CharacterTurn.get_state char_turn) of
+      Struct.CharacterTurn.SelectedCharacter ->
+         [
+            (attack_button char_turn),
+            (inventory_button),
+            (end_turn_button " Doing Nothing"),
+            (abort_button)
+         ]
+
+      Struct.CharacterTurn.MovedCharacter ->
+         [
+            (end_turn_button " Without Attacking"),
+            (abort_button)
+         ]
+
+      Struct.CharacterTurn.ChoseTarget ->
+         [
+            (end_turn_button " By Attacking"),
+            (abort_button)
+         ]
+
+      _ ->
+         [
+         ]
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.CharacterTurn.Type -> Int -> (Html.Html Struct.Event.Type)
+get_html char_turn player_ix =
+   case
+      (Struct.CharacterTurn.try_getting_active_character char_turn)
+   of
+      (Just char) ->
+         (Html.div
+            [(Html.Attributes.class "battle-controlled")]
+            [
+               (View.Controlled.CharacterCard.get_summary_html
+                  char_turn
+                  player_ix
+                  char
+               ),
+               (
+                  if
+                  (
+                     (Struct.CharacterTurn.get_state char_turn)
+                     ==
+                     Struct.CharacterTurn.SelectedCharacter
+                  )
+                  then
+                     (View.Controlled.ManualControls.get_html)
+                  else
+                     (Util.Html.nothing)
+               ),
+               (Html.div
+                  [(Html.Attributes.class "battle-controlled-actions")]
+                  (get_available_actions char_turn)
+               )
+            ]
+         )
+
+      Nothing -> (Util.Html.nothing)
diff --git a/src/battle/src/View/Controlled/CharacterCard.elm b/src/battle/src/View/Controlled/CharacterCard.elm
new file mode 100644
index 0000000..b53ae57
--- /dev/null
+++ b/src/battle/src/View/Controlled/CharacterCard.elm
@@ -0,0 +1,582 @@
+module View.Controlled.CharacterCard exposing
+   (
+      get_minimal_html,
+      get_summary_html,
+      get_full_html
+   )
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Armor
+import Struct.Attributes
+import Struct.Character
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.HelpRequest
+import Struct.Navigator
+import Struct.Statistics
+import Struct.Weapon
+import Struct.WeaponSet
+
+import Util.Html
+
+import View.Character
+import View.Gauge
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_name : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_name char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-name")
+      ]
+      [
+         (Html.text (Struct.Character.get_name char))
+      ]
+   )
+
+get_health_bar : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_health_bar char =
+   let
+      current = (Struct.Character.get_sane_current_health char)
+      max =
+         (Struct.Statistics.get_max_health
+            (Struct.Character.get_statistics char)
+         )
+   in
+      (View.Gauge.get_html
+         ("HP: " ++ (toString current) ++ "/" ++ (toString max))
+         (100.0 * ((toFloat current)/(toFloat max)))
+         [(Html.Attributes.class "battle-character-card-health")]
+         []
+         []
+      )
+
+get_rank_status : (
+      Struct.Character.Rank ->
+      (Html.Html Struct.Event.Type)
+   )
+get_rank_status rank =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-status"),
+         (Html.Attributes.class "clickable"),
+         (Html.Events.onClick
+            (Struct.Event.RequestedHelp (Struct.HelpRequest.HelpOnRank rank))
+         ),
+         (Html.Attributes.class
+            (
+               case rank of
+                  Struct.Character.Commander ->
+                     "battle-character-card-commander-status"
+
+                  Struct.Character.Target ->
+                     "battle-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 "battle-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 ->
+      (Html.Html Struct.Event.Type)
+   )
+get_active_movement_bar maybe_navigator char =
+   let
+      max =
+         (Struct.Statistics.get_movement_points
+            (Struct.Character.get_statistics char)
+         )
+      current =
+         case maybe_navigator of
+            (Just navigator) ->
+               (Struct.Navigator.get_remaining_points navigator)
+
+            Nothing ->
+               max
+   in
+      (View.Gauge.get_html
+         ("MP: " ++ (toString current) ++ "/" ++ (toString max))
+         (100.0 * ((toFloat current)/(toFloat max)))
+         [(Html.Attributes.class "battle-character-card-movement")]
+         []
+         []
+      )
+
+get_inactive_movement_bar : (
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_inactive_movement_bar char =
+   let
+      max =
+         (Struct.Statistics.get_movement_points
+            (Struct.Character.get_statistics char)
+         )
+   in
+      (View.Gauge.get_html
+         (
+            "MP: "
+            ++
+            (toString
+               (Struct.Statistics.get_movement_points
+                  (Struct.Character.get_statistics char)
+               )
+            )
+         )
+         100.0
+         [(Html.Attributes.class "battle-character-card-movement")]
+         []
+         []
+      )
+
+get_movement_bar : (
+      Struct.CharacterTurn.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_movement_bar char_turn char =
+   case (Struct.CharacterTurn.try_getting_active_character char_turn) of
+      (Just active_char) ->
+         if
+         (
+            (Struct.Character.get_index active_char)
+            ==
+            (Struct.Character.get_index char)
+         )
+         then
+            (get_active_movement_bar
+               (Struct.CharacterTurn.try_getting_navigator char_turn)
+               active_char
+            )
+         else
+            (get_inactive_movement_bar char)
+
+      Nothing ->
+         (get_inactive_movement_bar char)
+
+get_weapon_details : (
+      Struct.Statistics.Type ->
+      Struct.Weapon.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_weapon_details stats weapon =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-weapon")
+      ]
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-weapon-name")
+            ]
+            [
+               (Html.text (Struct.Weapon.get_name weapon))
+            ]
+         ),
+         (Html.div
+            [
+               (Html.Attributes.class "battle-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_summary : (
+      Struct.Weapon.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_weapon_summary weapon =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-weapon-summary")
+      ]
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-weapon-name")
+            ]
+            [
+               (Html.text (Struct.Weapon.get_name weapon))
+            ]
+         ),
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-weapon-name")
+            ]
+            [
+               (Html.text
+                  (
+                     (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_armor_details : (
+      Struct.Armor.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_armor_details armor =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-armor")
+      ]
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-armor-name")
+            ]
+            [
+               (Html.text (Struct.Armor.get_name armor))
+            ]
+         ),
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-armor-stats")
+            ]
+            [
+               (stat_name "Slash"),
+               (stat_val
+                  (Struct.Armor.get_resistance_to Struct.Weapon.Slash armor)
+                  False
+               ),
+               (stat_name "Pierc."),
+               (stat_val
+                  (Struct.Armor.get_resistance_to Struct.Weapon.Pierce armor)
+                  False
+               ),
+               (stat_name "Blund."),
+               (stat_val
+                  (Struct.Armor.get_resistance_to Struct.Weapon.Blunt armor)
+                  False
+               )
+            ]
+         )
+      ]
+   )
+
+stat_name  : String -> (Html.Html Struct.Event.Type)
+stat_name name =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-stat-name")
+      ]
+      [
+         (Html.text name)
+      ]
+   )
+
+stat_val : Int -> Bool -> (Html.Html Struct.Event.Type)
+stat_val val perc =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card-stat-val")
+      ]
+      [
+         (Html.text
+            (
+               (toString val)
+               ++
+               (
+                  if perc
+                  then
+                     "%"
+                  else
+                     ""
+               )
+            )
+         )
+      ]
+   )
+
+att_dual_val : Int -> Int -> (Html.Html Struct.Event.Type)
+att_dual_val base active =
+   let
+      diff = (active - base)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-character-card-att-dual-val")
+         ]
+         [
+            (Html.text
+               (
+                  (toString base)
+                  ++ " ("
+                  ++
+                  (
+                     if (diff > 0)
+                     then
+                        ("+" ++ (toString diff))
+                     else
+                        if (diff == 0)
+                        then
+                           "~"
+                        else
+                           (toString diff)
+                  )
+                  ++ ")"
+               )
+            )
+         ]
+      )
+
+get_relevant_stats : (
+      Struct.Character.Type ->
+      Struct.Weapon.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_relevant_stats char weapon =
+   let
+      stats = (Struct.Character.get_statistics char)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-character-card-stats")
+         ]
+         [
+            (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)
+         ]
+      )
+
+get_attributes : (
+      Struct.Character.Type ->
+      Struct.Weapon.Type ->
+      Struct.Armor.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_attributes char weapon armor =
+   let
+      base_atts = (Struct.Character.get_attributes char)
+      active_atts =
+         (Struct.Armor.apply_to_attributes
+            armor
+            (Struct.Weapon.apply_to_attributes weapon base_atts)
+         )
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-character-card-stats")
+         ]
+         [
+            (stat_name "Con"),
+            (att_dual_val
+               (Struct.Attributes.get_constitution base_atts)
+               (Struct.Attributes.get_constitution active_atts)
+            ),
+            (stat_name "Dex"),
+            (att_dual_val
+               (Struct.Attributes.get_dexterity base_atts)
+               (Struct.Attributes.get_dexterity active_atts)
+            ),
+            (stat_name "Int"),
+            (att_dual_val
+               (Struct.Attributes.get_intelligence base_atts)
+               (Struct.Attributes.get_intelligence active_atts)
+            ),
+            (stat_name "Min"),
+            (att_dual_val
+               (Struct.Attributes.get_mind base_atts)
+               (Struct.Attributes.get_mind active_atts)
+            ),
+            (stat_name "Spe"),
+            (att_dual_val
+               (Struct.Attributes.get_speed base_atts)
+               (Struct.Attributes.get_speed active_atts)
+            ),
+            (stat_name "Str"),
+            (att_dual_val
+               (Struct.Attributes.get_strength base_atts)
+               (Struct.Attributes.get_strength active_atts)
+            )
+         ]
+      )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_minimal_html : (
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_minimal_html player_ix char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-card"),
+         (Html.Attributes.class "battle-character-card-minimal")
+      ]
+      [
+         (get_name char),
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-card-top")
+            ]
+            [
+               (View.Character.get_portrait_html player_ix char),
+               (get_health_bar char),
+               (get_inactive_movement_bar char),
+               (get_statuses char)
+            ]
+         )
+      ]
+   )
+
+get_summary_html : (
+      Struct.CharacterTurn.Type ->
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_summary_html char_turn player_ix char =
+   let
+      weapon_set = (Struct.Character.get_weapons char)
+      main_weapon = (Struct.WeaponSet.get_active_weapon weapon_set)
+      char_statistics = (Struct.Character.get_statistics char)
+      secondary_weapon = (Struct.WeaponSet.get_secondary_weapon weapon_set)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-character-card")
+         ]
+         [
+            (get_name char),
+            (Html.div
+               [
+                  (Html.Attributes.class "battle-character-card-top")
+               ]
+               [
+                  (View.Character.get_portrait_html player_ix char),
+                  (get_health_bar char),
+                  (get_movement_bar char_turn char),
+                  (get_statuses char)
+               ]
+            ),
+            (get_weapon_details char_statistics main_weapon),
+            (get_armor_details (Struct.Character.get_armor char)),
+            (get_relevant_stats char main_weapon),
+            (get_weapon_summary secondary_weapon)
+         ]
+      )
+
+get_full_html : (
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_full_html player_ix char =
+   let
+      weapon_set = (Struct.Character.get_weapons char)
+      main_weapon = (Struct.WeaponSet.get_active_weapon weapon_set)
+      char_statistics = (Struct.Character.get_statistics char)
+      secondary_weapon = (Struct.WeaponSet.get_secondary_weapon weapon_set)
+      armor = (Struct.Character.get_armor char)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-character-card")
+         ]
+         [
+            (get_name char),
+            (Html.div
+               [
+                  (Html.Attributes.class "battle-character-card-top")
+               ]
+               [
+                  (View.Character.get_portrait_html player_ix char),
+                  (get_health_bar char),
+                  (get_inactive_movement_bar char),
+                  (get_statuses char)
+               ]
+            ),
+            (get_weapon_details char_statistics main_weapon),
+            (get_armor_details armor),
+            (get_relevant_stats char main_weapon),
+            (get_weapon_summary secondary_weapon),
+            (get_attributes char main_weapon armor)
+         ]
+      )
diff --git a/src/battle/src/View/Controlled/ManualControls.elm b/src/battle/src/View/Controlled/ManualControls.elm
new file mode 100644
index 0000000..1dceafb
--- /dev/null
+++ b/src/battle/src/View/Controlled/ManualControls.elm
@@ -0,0 +1,60 @@
+module View.Controlled.ManualControls exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Direction
+import Struct.Event
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+direction_button : (
+      Struct.Direction.Type ->
+      String ->
+      (Html.Html Struct.Event.Type)
+   )
+direction_button dir label =
+   (Html.div
+      [
+         (Html.Attributes.class ("battle-manual-controls-" ++ label)),
+         (Html.Attributes.class "clickable"),
+         (Html.Events.onClick
+            (Struct.Event.DirectionRequested dir)
+         )
+      ]
+      []
+   )
+
+go_button : (Html.Html Struct.Event.Type)
+go_button =
+   (Html.button
+      [
+         (Html.Attributes.class "battle-manual-controls-go"),
+         (Html.Events.onClick Struct.Event.AttackWithoutMovingRequest)
+      ]
+      [
+         (Html.text "Go")
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (Html.Html Struct.Event.Type)
+get_html =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-manual-controls")
+      ]
+      [
+         (direction_button Struct.Direction.Left "left"),
+         (direction_button Struct.Direction.Down "down"),
+         (direction_button Struct.Direction.Up "up"),
+         (direction_button Struct.Direction.Right "right"),
+         (go_button)
+      ]
+   )
diff --git a/src/battle/src/View/Controlled/Targets.elm b/src/battle/src/View/Controlled/Targets.elm
new file mode 100644
index 0000000..eee5a54
--- /dev/null
+++ b/src/battle/src/View/Controlled/Targets.elm
@@ -0,0 +1,69 @@
+module View.SideBar.Targets exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Dict
+
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Character
+import Struct.Event
+import Struct.Model
+import Struct.Statistics
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+get_target_info_html : (
+      Struct.Model.Type ->
+      Struct.Character.Ref ->
+      (Html.Html Struct.Event.Type)
+   )
+get_target_info_html model char_ref =
+   case (Dict.get char_ref model.characters) of
+      Nothing -> (Html.text "Error: Unknown character selected.")
+      (Just char) ->
+         (Html.text
+            (
+               "Attacking "
+               ++ char.name
+               ++ " (player "
+               ++ (toString (Struct.Character.get_player_ix char))
+               ++ "): "
+               ++
+               (toString
+                  (Struct.Statistics.get_movement_points
+                     (Struct.Character.get_statistics char)
+                  )
+               )
+               ++ " movement points; "
+               ++ "???"
+               ++ " attack range. Health: "
+               ++ (toString (Struct.Character.get_sane_current_health char))
+               ++ "/"
+               ++
+               (toString
+                  (Struct.Statistics.get_max_health
+                     (Struct.Character.get_statistics char)
+                  )
+               )
+            )
+         )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.Character.Ref ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model target_ref =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-side-bar-targets")
+      ]
+      [(get_target_info_html model target_ref)]
+   )
diff --git a/src/battle/src/View/Gauge.elm b/src/battle/src/View/Gauge.elm
new file mode 100644
index 0000000..cf89f3a
--- /dev/null
+++ b/src/battle/src/View/Gauge.elm
@@ -0,0 +1,76 @@
+module View.Gauge exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+
+--------------------------------------------------------------------------------
+-- 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 "battle-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
+               "battle-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 "battle-gauge")]
+         ++ extra_div_attr
+      )
+      [
+         (get_text_div text extra_txt_attr),
+         (get_bar_div percent extra_bar_attr)
+      ]
+   )
diff --git a/src/battle/src/View/MainMenu.elm b/src/battle/src/View/MainMenu.elm
new file mode 100644
index 0000000..9f3099b
--- /dev/null
+++ b/src/battle/src/View/MainMenu.elm
@@ -0,0 +1,38 @@
+module View.MainMenu exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.UI
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_menu_button_html : (
+      Struct.UI.Tab ->
+      (Html.Html Struct.Event.Type)
+   )
+get_menu_button_html tab =
+   (Html.button
+      [ (Html.Events.onClick (Struct.Event.TabSelected tab)) ]
+      [ (Html.text (Struct.UI.to_string tab)) ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (Html.Html Struct.Event.Type)
+get_html =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-main-menu")
+      ]
+      (List.map
+         (get_menu_button_html)
+         (Struct.UI.get_all_tabs)
+      )
+   )
diff --git a/src/battle/src/View/Map.elm b/src/battle/src/View/Map.elm
new file mode 100644
index 0000000..ad10695
--- /dev/null
+++ b/src/battle/src/View/Map.elm
@@ -0,0 +1,162 @@
+module View.Map exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+import Html.Lazy
+
+import List
+
+-- Map -------------------------------------------------------------------
+import Constants.UI
+
+import Struct.Map
+import Struct.Character
+import Struct.Event
+import Struct.Model
+import Struct.Navigator
+import Struct.UI
+
+import Util.Html
+
+import View.Map.Character
+import View.Map.Navigator
+import View.Map.Tile
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_tiles_html : Struct.Map.Type -> (Html.Html Struct.Event.Type)
+get_tiles_html map =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tiles-layer"),
+         (Html.Attributes.style
+            [
+               (
+                  "width",
+                  (
+                     (toString
+                        (
+                           (Struct.Map.get_width map)
+                           * Constants.UI.tile_size
+                        )
+                     )
+                     ++ "px"
+                  )
+               ),
+               (
+                  "height",
+                  (
+                     (toString
+                        (
+                           (Struct.Map.get_height map)
+                           * Constants.UI.tile_size
+                        )
+                     )
+                     ++ "px"
+                  )
+               )
+            ]
+         )
+      ]
+      (List.map
+         (View.Map.Tile.get_html)
+         (Array.toList (Struct.Map.get_tiles map))
+      )
+   )
+
+maybe_print_navigator : (
+      Bool ->
+      (Maybe Struct.Navigator.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+maybe_print_navigator interactive maybe_nav =
+   let
+      name_suffix =
+         if (interactive)
+         then
+            "interactive"
+         else
+            "non-interactive"
+   in
+      case maybe_nav of
+         (Just nav) ->
+            (Html.div
+               [
+                  (Html.Attributes.class ("battle-navigator" ++ name_suffix))
+               ]
+               (View.Map.Navigator.get_html
+                  (Struct.Navigator.get_summary nav)
+                  interactive
+               )
+            )
+
+         Nothing ->
+            (Util.Html.nothing)
+
+get_characters_html : (
+      Struct.Model.Type ->
+      (Array.Array Struct.Character.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_characters_html model characters =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-characters")
+      ]
+      (List.map
+         (View.Map.Character.get_html model)
+         (Array.toList model.characters)
+      )
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-actual"),
+         (Html.Attributes.style
+            (
+               if ((Struct.UI.get_zoom_level model.ui) == 1)
+               then []
+               else
+                  [
+                     (
+                        "transform",
+                        (
+                           "scale("
+                           ++
+                           (toString (Struct.UI.get_zoom_level model.ui))
+                           ++ ")"
+                        )
+                     )
+                  ]
+            )
+         )
+      ]
+      [
+         (Html.Lazy.lazy (get_tiles_html) model.map),
+         -- Not in lazy mode, because I can't easily get rid of that 'model'
+         -- parameter.
+         (get_characters_html model model.characters),
+         (Html.Lazy.lazy2
+            (maybe_print_navigator)
+            True
+            model.char_turn.navigator
+         ),
+         (Html.Lazy.lazy2
+            (maybe_print_navigator)
+            False
+            (Struct.UI.try_getting_displayed_nav model.ui)
+         )
+      ]
+   )
diff --git a/src/battle/src/View/Map/Character.elm b/src/battle/src/View/Map/Character.elm
new file mode 100644
index 0000000..aaf7cb2
--- /dev/null
+++ b/src/battle/src/View/Map/Character.elm
@@ -0,0 +1,218 @@
+module View.Map.Character exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map  ------------------------------------------------------------------
+import Constants.UI
+
+import Util.Html
+
+import Struct.Character
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.Model
+import Struct.TurnResult
+import Struct.TurnResultAnimator
+import Struct.UI
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_animation_class : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_animation_class model char =
+   case model.animator of
+      Nothing -> (Html.Attributes.class "")
+      (Just animator) ->
+         case (Struct.TurnResultAnimator.get_current_animation animator) of
+            (Struct.TurnResultAnimator.Focus char_index) ->
+               if ((Struct.Character.get_index char) /= char_index)
+               then
+                  (Html.Attributes.class "")
+               else
+                  (Html.Attributes.class "battle-character-selected")
+
+            (Struct.TurnResultAnimator.TurnResult current_action) ->
+               if
+               (
+                  (Struct.TurnResult.get_actor_index current_action)
+                  /=
+                  (Struct.Character.get_index char)
+               )
+               then
+                  (Html.Attributes.class "")
+               else
+                  case current_action of
+                     (Struct.TurnResult.Moved _) ->
+                        (Html.Attributes.class
+                           "battle-animated-character-icon"
+                        )
+
+                     _ -> (Html.Attributes.class "")
+            _ -> (Html.Attributes.class "")
+
+get_activation_level_class : (
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_activation_level_class char =
+   if (Struct.Character.is_enabled char)
+   then
+      (Html.Attributes.class "battle-character-icon-enabled")
+   else
+      (Html.Attributes.class "battle-character-icon-disabled")
+
+get_alliance_class : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_alliance_class model char =
+   if ((Struct.Character.get_player_ix char) == model.player_ix)
+   then
+      (Html.Attributes.class "battle-character-ally")
+   else
+      (Html.Attributes.class "battle-character-enemy")
+
+get_position_style : (
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_position_style char =
+   let char_loc = (Struct.Character.get_location char) in
+      (Html.Attributes.style
+         [
+            ("top", ((toString (char_loc.y * Constants.UI.tile_size)) ++ "px")),
+            ("left", ((toString (char_loc.x * Constants.UI.tile_size)) ++ "px"))
+         ]
+      )
+
+get_focus_class : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Attribute Struct.Event.Type)
+   )
+get_focus_class model char =
+   if
+   (
+      (Struct.UI.get_previous_action model.ui)
+      ==
+      (Just (Struct.UI.SelectedCharacter (Struct.Character.get_index char)))
+   )
+   then
+      (Html.Attributes.class "battle-character-selected")
+   else
+      if
+      (
+         (Struct.CharacterTurn.try_getting_target model.char_turn)
+         ==
+         (Just (Struct.Character.get_index char))
+      )
+      then
+         (Html.Attributes.class "battle-character-targeted")
+      else
+         (Html.Attributes.class "")
+
+get_body_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_body_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-icon-body"),
+         (Html.Attributes.class
+            (
+               "asset-character-team-body-"
+               ++ (toString (Struct.Character.get_player_ix char))
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+get_head_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_head_html char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-character-icon-head"),
+         (Html.Attributes.class
+            ("asset-character-icon-" ++ (Struct.Character.get_icon_id char))
+         )
+      ]
+      [
+      ]
+   )
+
+get_banner_html : Struct.Character.Type -> (Html.Html Struct.Event.Type)
+get_banner_html char =
+   case (Struct.Character.get_rank char) of
+      Struct.Character.Commander ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-icon-banner"),
+               (Html.Attributes.class "asset-character-icon-commander-banner")
+            ]
+            [
+            ]
+         )
+
+      Struct.Character.Target ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-character-icon-banner"),
+               (Html.Attributes.class "asset-character-icon-target-banner")
+            ]
+            [
+            ]
+         )
+
+      _ -> (Util.Html.nothing)
+
+get_actual_html : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_actual_html model char =
+      (Html.div
+         [
+            (Html.Attributes.class "battle-tiled"),
+            (Html.Attributes.class "battle-character-icon"),
+            (get_animation_class model char),
+            (get_activation_level_class char),
+            (get_alliance_class model char),
+            (get_position_style char),
+            (get_focus_class model char),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.CharacterSelected
+                  (Struct.Character.get_index char)
+               )
+            )
+         ]
+         [
+            (get_body_html char),
+            (get_head_html char),
+            (get_banner_html char)
+         ]
+      )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model char =
+   if (Struct.Character.is_alive char)
+   then
+      (get_actual_html model char)
+   else
+      (Util.Html.nothing)
diff --git a/src/battle/src/View/Map/Navigator.elm b/src/battle/src/View/Map/Navigator.elm
new file mode 100644
index 0000000..63c982a
--- /dev/null
+++ b/src/battle/src/View/Map/Navigator.elm
@@ -0,0 +1,245 @@
+module View.Map.Navigator exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+import List
+
+-- Map -------------------------------------------------------------------
+import Constants.UI
+
+import Struct.Direction
+import Struct.Event
+import Struct.Location
+import Struct.Marker
+import Struct.Navigator
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+marker_get_html : (
+      Bool ->
+      (Struct.Location.Ref, Struct.Marker.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+marker_get_html is_interactive (loc_ref, marker) =
+   (Html.div
+      (
+         [
+            (Html.Attributes.class "battle-marker-icon"),
+            (Html.Attributes.class "battle-tiled"),
+            (Html.Attributes.class
+               (
+                  "battle-"
+                  ++
+                  (
+                     case marker of
+                        Struct.Marker.CanGoToCanDefend -> "can-go-to-can-defend"
+                        Struct.Marker.CanGoToCantDefend ->
+                           "can-go-to-cant-defend"
+
+                        Struct.Marker.CanAttackCanDefend ->
+                           "can-attack-can-defend"
+
+                        Struct.Marker.CanAttackCantDefend ->
+                           "can-attack-cant-defend"
+                  )
+                  ++
+                  "-marker"
+               )
+            ),
+            (Html.Attributes.style
+               (
+                  let
+                     loc = (Struct.Location.from_ref loc_ref)
+                  in
+                     [
+                        (
+                           "top",
+                           ((toString (loc.y * Constants.UI.tile_size)) ++ "px")
+                        ),
+                        (
+                           "left",
+                           ((toString (loc.x * Constants.UI.tile_size)) ++ "px")
+                        )
+                     ]
+               )
+            )
+         ]
+         ++
+         (
+            if (is_interactive)
+            then
+               if
+               (
+                  (marker == Struct.Marker.CanGoToCanDefend)
+                  || (marker == Struct.Marker.CanGoToCantDefend)
+               )
+               then
+                  [
+                     (Html.Attributes.class "battle-navigator-interactive"),
+                     (Html.Attributes.class "clickable"),
+                     (Html.Events.onClick
+                        (Struct.Event.CharacterOrTileSelected loc_ref)
+                     )
+                  ]
+               else
+                  [
+                     (Html.Attributes.class "battle-navigator-interactive")
+                  ]
+            else
+               [
+                  (Html.Attributes.class "battle-navigator-non-interactive"),
+                  (Html.Events.onClick
+                     (Struct.Event.CharacterOrTileSelected loc_ref)
+                  )
+               ]
+         )
+      )
+      [
+      ]
+   )
+
+path_node_get_html : (
+      Bool ->
+      Struct.Direction.Type ->
+      (
+         Struct.Location.Type,
+         Struct.Direction.Type,
+         (List (Html.Html Struct.Event.Type))
+      ) ->
+      (
+         Struct.Location.Type,
+         Struct.Direction.Type,
+         (List (Html.Html Struct.Event.Type))
+      )
+   )
+path_node_get_html is_below_markers next_dir (curr_loc, curr_dir, curr_nodes) =
+   (
+      (Struct.Location.neighbor next_dir curr_loc),
+      next_dir,
+      (
+         (Html.div
+            [
+               (Html.Attributes.class "battle-path-icon"),
+               (Html.Attributes.class
+                  (
+                     if (is_below_markers)
+                     then
+                        "battle-path-icon-below-markers"
+                     else
+                        "battle-path-icon-above-markers"
+                  )
+               ),
+               (Html.Attributes.class "battle-tiled"),
+               (Html.Attributes.class
+                  (
+                     "battle-path-icon-"
+                     ++
+                     (Struct.Direction.to_string curr_dir)
+                     ++
+                     (Struct.Direction.to_string next_dir)
+                  )
+               ),
+               (Html.Events.onClick
+                  (Struct.Event.CharacterOrTileSelected
+                     (Struct.Location.get_ref curr_loc)
+                  )
+               ),
+               (Html.Attributes.style
+                  [
+                     (
+                        "top",
+                        (
+                           (toString (curr_loc.y * Constants.UI.tile_size))
+                           ++
+                           "px"
+                        )
+                     ),
+                     (
+                        "left",
+                        (
+                           (toString (curr_loc.x * Constants.UI.tile_size))
+                           ++
+                           "px"
+                        )
+                     )
+                  ]
+               )
+            ]
+            [
+            ]
+         )
+         ::
+         curr_nodes
+      )
+   )
+
+mark_the_spot : (
+      Struct.Location.Type ->
+      Struct.Direction.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+mark_the_spot loc origin_dir =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-path-icon"),
+         (Html.Attributes.class "battle-path-icon-above-markers"),
+         (Html.Attributes.class "battle-tiled"),
+         (Html.Attributes.class
+            (
+               "battle-path-icon-mark"
+               ++
+               (Struct.Direction.to_string origin_dir)
+            )
+         ),
+         (Html.Events.onClick
+            (Struct.Event.CharacterOrTileSelected (Struct.Location.get_ref loc))
+         ),
+         (Html.Attributes.style
+            [
+               (
+                  "top",
+                  ((toString (loc.y * Constants.UI.tile_size)) ++ "px")
+               ),
+               (
+                  "left",
+                  ((toString (loc.x * Constants.UI.tile_size)) ++ "px")
+               )
+            ]
+         )
+      ]
+      [
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Navigator.Summary ->
+      Bool ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_html nav_summary is_interactive =
+   if (is_interactive)
+   then
+      (
+         (List.map (marker_get_html True) nav_summary.markers)
+         ++
+         (
+            let
+               (final_loc, final_dir, path_node_htmls) =
+                  (List.foldr
+                     (path_node_get_html nav_summary.locked_path)
+                     (nav_summary.starting_location, Struct.Direction.None, [])
+                     nav_summary.path
+                  )
+            in
+               ((mark_the_spot final_loc final_dir) :: path_node_htmls)
+         )
+      )
+   else
+      (List.map (marker_get_html False) nav_summary.markers)
diff --git a/src/battle/src/View/Map/Tile.elm b/src/battle/src/View/Map/Tile.elm
new file mode 100644
index 0000000..600e26d
--- /dev/null
+++ b/src/battle/src/View/Map/Tile.elm
@@ -0,0 +1,69 @@
+module View.Map.Tile exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Constants.UI
+import Constants.IO
+
+import Struct.Event
+import Struct.Location
+import Struct.Tile
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Tile.Instance ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html tile =
+   let
+      tile_loc = (Struct.Tile.get_location tile)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-tile-icon"),
+            (Html.Attributes.class "battle-tiled"),
+            (Html.Attributes.class
+               (
+                  "battle-tile-variant-"
+                  ++ (toString (Struct.Tile.get_variant_id tile))
+               )
+            ),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.TileSelected (Struct.Location.get_ref tile_loc))
+            ),
+            (Html.Attributes.style
+               [
+                  (
+                     "top",
+                     ((toString (tile_loc.y * Constants.UI.tile_size)) ++ "px")
+                  ),
+                  (
+                     "left",
+                     ((toString (tile_loc.x * Constants.UI.tile_size)) ++ "px")
+                  ),
+                  (
+                     "background-image",
+                     (
+                        "url("
+                        ++ Constants.IO.tile_assets_url
+                        ++ (Struct.Tile.get_icon_id tile)
+                        ++".svg)"
+                     )
+                  )
+               ]
+            )
+         ]
+         [
+         ]
+      )
diff --git a/src/battle/src/View/MessageBoard.elm b/src/battle/src/View/MessageBoard.elm
new file mode 100644
index 0000000..736f938
--- /dev/null
+++ b/src/battle/src/View/MessageBoard.elm
@@ -0,0 +1,30 @@
+module View.MessageBoard exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+
+-- Struct.Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+
+import View.MessageBoard.Animator
+import View.MessageBoard.Error
+import View.MessageBoard.Help
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   case (model.error) of
+      (Just error) -> (View.MessageBoard.Error.get_html model error)
+      Nothing ->
+         case model.animator of
+            (Just animator) ->
+               (View.MessageBoard.Animator.get_html model animator)
+
+            Nothing -> (View.MessageBoard.Help.get_html model)
diff --git a/src/battle/src/View/MessageBoard/Animator.elm b/src/battle/src/View/MessageBoard/Animator.elm
new file mode 100644
index 0000000..49bb83a
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Animator.elm
@@ -0,0 +1,57 @@
+module View.MessageBoard.Animator exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+import Struct.TurnResult
+import Struct.TurnResultAnimator
+
+import Util.Html
+
+import View.MessageBoard.Animator.Attack
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_turn_result_html : (
+      Struct.Model.Type ->
+      Struct.TurnResult.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_turn_result_html model turn_result =
+   case turn_result of
+      (Struct.TurnResult.Attacked attack) ->
+         (View.MessageBoard.Animator.Attack.get_html
+            model
+            (Struct.TurnResult.get_actor_index turn_result)
+            (Struct.TurnResult.get_attack_defender_index attack)
+            (Struct.TurnResult.maybe_get_attack_next_step attack)
+         )
+
+      _ -> (Util.Html.nothing)
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.TurnResultAnimator.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model animator =
+   case (Struct.TurnResultAnimator.get_current_animation animator) of
+      (Struct.TurnResultAnimator.TurnResult turn_result) ->
+         (get_turn_result_html model turn_result)
+
+      (Struct.TurnResultAnimator.AttackSetup (attacker_id, defender_id)) ->
+         (View.MessageBoard.Animator.Attack.get_html
+            model
+            attacker_id
+            defender_id
+            Nothing
+         )
+
+      _ -> (Util.Html.nothing)
diff --git a/src/battle/src/View/MessageBoard/Animator/Attack.elm b/src/battle/src/View/MessageBoard/Animator/Attack.elm
new file mode 100644
index 0000000..437a76d
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Animator/Attack.elm
@@ -0,0 +1,297 @@
+module View.MessageBoard.Animator.Attack exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Attack
+import Struct.Character
+import Struct.Event
+import Struct.Model
+
+import View.Controlled.CharacterCard
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_effect_text : Struct.Attack.Type -> String
+get_effect_text attack =
+   (
+      (
+         case attack.precision of
+            Struct.Attack.Hit -> " hit for "
+            Struct.Attack.Graze -> " grazed for "
+            Struct.Attack.Miss -> " missed."
+      )
+      ++
+      (
+         if (attack.precision == Struct.Attack.Miss)
+         then
+            ""
+         else
+            (
+               ((toString attack.damage) ++ " damage")
+               ++
+               (
+                  if (attack.critical)
+                  then " (Critical Hit)."
+                  else "."
+               )
+            )
+      )
+   )
+
+get_empty_attack_html : (Html.Html Struct.Event.Type)
+get_empty_attack_html =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-message-attack-text")
+      ]
+      []
+   )
+
+get_attack_html : (
+      Struct.Character.Type ->
+      Struct.Character.Type ->
+      Struct.Attack.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_attack_html attacker defender attack =
+   let
+      attacker_name = (Struct.Character.get_name attacker)
+      defender_name = (Struct.Character.get_name defender)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-message-attack-text")
+         ]
+         [
+            (Html.text
+               (
+                  case (attack.order, attack.parried) of
+                     (Struct.Attack.Counter, True) ->
+                        (
+                           defender_name
+                           ++ " attempted to strike back, but "
+                           ++ attacker_name
+                           ++ " parried, and "
+                           ++ (get_effect_text attack)
+                        )
+
+                     (Struct.Attack.Counter, _) ->
+                        (
+                           defender_name
+                           ++ " striked back, and "
+                           ++ (get_effect_text attack)
+                        )
+
+                     (_, True) ->
+                        (
+                           attacker_name
+                           ++ " attempted a hit, but "
+                           ++ defender_name
+                           ++ " parried, and "
+                           ++ (get_effect_text attack)
+                        )
+
+                     (_, _) ->
+                        (attacker_name ++ " " ++ (get_effect_text attack))
+               )
+            )
+         ]
+      )
+
+get_attack_animation_class : (
+      Struct.Attack.Type ->
+      Struct.Character.Type ->
+      String
+   )
+get_attack_animation_class attack char =
+   if (attack.critical)
+   then
+      "battle-animated-portrait-attack-critical"
+   else
+      "battle-animated-portrait-attacks"
+
+get_defense_animation_class : (
+      Struct.Attack.Type ->
+      Struct.Character.Type ->
+      String
+   )
+get_defense_animation_class attack char =
+   if (attack.damage == 0)
+   then
+      if (attack.precision == Struct.Attack.Miss)
+      then
+         "battle-animated-portrait-dodges"
+      else
+         "battle-animated-portrait-undamaged"
+   else if ((Struct.Character.get_current_health char) > 0)
+   then
+      if (attack.precision == Struct.Attack.Graze)
+      then
+         "battle-animated-portrait-grazed-damage"
+      else
+         "battle-animated-portrait-damaged"
+   else
+      if (attack.precision == Struct.Attack.Graze)
+      then
+         "battle-animated-portrait-grazed-death"
+      else
+         "battle-animated-portrait-dies"
+
+get_attacker_card : (
+      (Maybe Struct.Attack.Type) ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_attacker_card maybe_attack char =
+   (Html.div
+      (case maybe_attack of
+         Nothing ->
+            if ((Struct.Character.get_current_health char) > 0)
+            then
+               [
+                  (Html.Attributes.class "battle-animated-portrait")
+               ]
+            else
+               [
+                  (Html.Attributes.class "battle-animated-portrait-absent"),
+                  (Html.Attributes.class "battle-animated-portrait")
+               ]
+
+         (Just attack) ->
+            [
+               (Html.Attributes.class
+                  (case (attack.order, attack.parried) of
+                     (Struct.Attack.Counter, True) ->
+                        (get_attack_animation_class attack char)
+
+                     (Struct.Attack.Counter, _) ->
+                        (get_defense_animation_class attack char)
+
+                     (_, True) ->
+                        (get_defense_animation_class attack char)
+
+                     (_, _) ->
+                        (get_attack_animation_class attack char)
+                  )
+               ),
+               (Html.Attributes.class "battle-animated-portrait")
+            ]
+      )
+      [
+         (View.Controlled.CharacterCard.get_minimal_html
+            (Struct.Character.get_player_ix char)
+            char
+         )
+      ]
+   )
+
+get_defender_card : (
+      (Maybe Struct.Attack.Type) ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_defender_card maybe_attack char =
+   (Html.div
+      (case maybe_attack of
+         Nothing ->
+            if ((Struct.Character.get_current_health char) > 0)
+            then
+               [
+                  (Html.Attributes.class "battle-animated-portrait")
+               ]
+            else
+               [
+                  (Html.Attributes.class "battle-animated-portrait-absent"),
+                  (Html.Attributes.class "battle-animated-portrait")
+               ]
+
+         (Just attack) ->
+            [
+               (Html.Attributes.class
+                  (case (attack.order, attack.parried) of
+                     (Struct.Attack.Counter, True) ->
+                        (get_defense_animation_class attack char)
+
+                     (Struct.Attack.Counter, _) ->
+                        (get_attack_animation_class attack char)
+
+                     (_, True) ->
+                        (get_attack_animation_class attack char)
+
+                     (_, _) ->
+                        (get_defense_animation_class attack char)
+                  )
+               ),
+               (Html.Attributes.class "battle-animated-portrait")
+            ]
+      )
+      [
+         (View.Controlled.CharacterCard.get_minimal_html -1 char)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_placeholder_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      Int ->
+      (Maybe Struct.Attack.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_placeholder_html characters attacker_ix defender_ix maybe_attack =
+   case
+      (
+         (Array.get attacker_ix characters),
+         (Array.get defender_ix characters)
+      )
+   of
+      ((Just atkchar), (Just defchar)) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-message-board"),
+               (Html.Attributes.class "battle-message-attack")
+            ]
+            (
+               [
+                  (get_attacker_card maybe_attack atkchar),
+                  (
+                     case maybe_attack of
+                        (Just attack) ->
+                           (get_attack_html atkchar defchar attack)
+
+                        Nothing ->
+                           (get_empty_attack_html)
+                  ),
+                  (get_defender_card maybe_attack defchar)
+               ]
+            )
+         )
+
+      _ ->
+         (Html.div
+            [
+            ]
+            [
+               (Html.text "Error: Attack with unknown characters")
+            ]
+         )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Int ->
+      Int ->
+      (Maybe Struct.Attack.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model attacker_ix defender_ix maybe_attack =
+   (get_placeholder_html model.characters attacker_ix defender_ix maybe_attack)
diff --git a/src/battle/src/View/MessageBoard/Error.elm b/src/battle/src/View/MessageBoard/Error.elm
new file mode 100644
index 0000000..797d89f
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Error.elm
@@ -0,0 +1,33 @@
+module View.MessageBoard.Error exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Error
+import Struct.Event
+import Struct.Model
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.Error.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model error =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-message-board"),
+         (Html.Attributes.class "battle-error")
+      ]
+      [
+         (Html.text (Struct.Error.to_string error))
+      ]
+   )
diff --git a/src/battle/src/View/MessageBoard/Help.elm b/src/battle/src/View/MessageBoard/Help.elm
new file mode 100644
index 0000000..6c20bbc
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Help.elm
@@ -0,0 +1,37 @@
+module View.MessageBoard.Help exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.HelpRequest
+import Struct.Model
+
+import View.MessageBoard.Help.Guide
+import View.MessageBoard.Help.Rank
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-message-board"),
+         (Html.Attributes.class "battle-message-board-help")
+      ]
+      (
+         case model.help_request of
+            Struct.HelpRequest.None ->
+               (View.MessageBoard.Help.Guide.get_html_contents model)
+
+            (Struct.HelpRequest.HelpOnRank rank) ->
+               (View.MessageBoard.Help.Rank.get_html_contents rank)
+      )
+   )
diff --git a/src/battle/src/View/MessageBoard/Help/Guide.elm b/src/battle/src/View/MessageBoard/Help/Guide.elm
new file mode 100644
index 0000000..0a41e91
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Help/Guide.elm
@@ -0,0 +1,100 @@
+module View.MessageBoard.Help.Guide exposing (get_html_contents)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.Model
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_header_html : (String -> (Html.Html Struct.Event.Type))
+get_header_html title =
+   (Html.h1
+      []
+      [
+         (Html.div
+            [(Html.Attributes.class "battle-help-guide-icon")]
+            []
+         ),
+         (Html.text title)
+      ]
+   )
+
+get_selected_character_html_contents : (List (Html.Html Struct.Event.Type))
+get_selected_character_html_contents =
+   [
+      (get_header_html "Controlling a Character"),
+      (Html.text
+         (
+            "Click on a target tile to select a path or use the manual"
+            ++ " controls (on the left panel) to make your own. Click on the"
+            ++ " destination tile again to confirm (this can be reverted)."
+         )
+      )
+   ]
+
+get_moved_character_html_contents : (List (Html.Html Struct.Event.Type))
+get_moved_character_html_contents =
+   [
+      (get_header_html "Selecting a Target"),
+      (Html.text
+         (
+            "You can now choose a target in range. Dashed tiles indicate"
+            ++ " where your character will not be able to defend themselves"
+            ++ " against counter attacks."
+         )
+      )
+   ]
+
+get_chose_target_html_contents : (List (Html.Html Struct.Event.Type))
+get_chose_target_html_contents =
+   [
+      (get_header_html "Finalizing the Character's Turn"),
+      (Html.text
+         (
+            "If you are satisfied with your choices, you can end this"
+            ++ " character's turn and see the results unfold. Otherwise, click"
+            ++ " on the abort button to undo it all."
+         )
+      )
+   ]
+
+get_default_html_contents : (List (Html.Html Struct.Event.Type))
+get_default_html_contents =
+   [
+      (get_header_html "Selecting a Character"),
+      (Html.text
+         (
+            "Click once on a character to focus them. This will show you"
+            ++ " their stats, equipment, and other infos. If they are in"
+            ++ " your team and active (the pulsating characters),"
+            ++ " clicking on them again will let you take control."
+         )
+      )
+   ]
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html_contents : (
+      Struct.Model.Type ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_html_contents model =
+   case (Struct.CharacterTurn.get_state model.char_turn) of
+      Struct.CharacterTurn.SelectedCharacter ->
+         (get_selected_character_html_contents)
+
+      Struct.CharacterTurn.MovedCharacter ->
+         (get_moved_character_html_contents)
+
+      Struct.CharacterTurn.ChoseTarget ->
+         (get_chose_target_html_contents)
+
+      _ ->
+         (get_default_html_contents)
diff --git a/src/battle/src/View/MessageBoard/Help/Rank.elm b/src/battle/src/View/MessageBoard/Help/Rank.elm
new file mode 100644
index 0000000..4a01e75
--- /dev/null
+++ b/src/battle/src/View/MessageBoard/Help/Rank.elm
@@ -0,0 +1,97 @@
+module View.MessageBoard.Help.Rank exposing (get_html_contents)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Map -------------------------------------------------------------------
+import Struct.Character
+import Struct.Event
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_guide_icon_html : (Html.Html Struct.Event.Type)
+get_guide_icon_html =
+   (Html.div
+      [(Html.Attributes.class "battle-help-guide-icon")]
+      []
+   )
+
+get_header_with_icon_html : String -> String -> (Html.Html Struct.Event.Type)
+get_header_with_icon_html title rank_name =
+   (Html.h1
+      []
+      [
+         (get_guide_icon_html),
+         (Html.text (title ++ " - ")),
+         (Html.div
+            [
+               (Html.Attributes.class
+                  "battle-message-board-help-figure"
+               ),
+               (Html.Attributes.class
+                  ("battle-character-card-" ++ rank_name ++ "-status")
+               )
+            ]
+            []
+         )
+      ]
+   )
+
+get_target_help_message : (List (Html.Html Struct.Event.Type))
+get_target_help_message =
+   [
+      (get_header_with_icon_html "Protected Character" "target"),
+      (Html.text
+         (
+            "Players that lose all of their Protected Characters are"
+            ++ " eliminated."
+         )
+      )
+   ]
+
+get_commander_help_message : (List (Html.Html Struct.Event.Type))
+get_commander_help_message =
+   [
+      (get_header_with_icon_html "Critical Character" "commander"),
+      (Html.text
+         (
+            "Players that lose any of their Critical Characters are"
+            ++ " eliminated."
+         )
+      )
+   ]
+
+get_optional_help_message : (List (Html.Html Struct.Event.Type))
+get_optional_help_message =
+   [
+      (Html.h1
+         []
+         [
+            (get_guide_icon_html),
+            (Html.text "Reinforcement Character")
+         ]
+      ),
+      (Html.text
+         (
+            "Unless it is their very last character, losing a"
+            ++ " Reinforcement characters never causes a player to be"
+            ++ " eliminated."
+         )
+      )
+   ]
+
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html_contents : (
+      Struct.Character.Rank ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_html_contents rank =
+   case rank of
+      Struct.Character.Target -> (get_target_help_message)
+      Struct.Character.Commander -> (get_commander_help_message)
+      Struct.Character.Optional -> (get_optional_help_message)
diff --git a/src/battle/src/View/SubMenu.elm b/src/battle/src/View/SubMenu.elm
new file mode 100644
index 0000000..e661b9c
--- /dev/null
+++ b/src/battle/src/View/SubMenu.elm
@@ -0,0 +1,85 @@
+module View.SubMenu exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+import Html.Lazy
+
+-- Map -------------------------------------------------------------------
+import Struct.CharacterTurn
+import Struct.Event
+import Struct.Model
+import Struct.UI
+
+import Util.Html
+
+import View.Controlled.CharacterCard
+
+import View.SubMenu.Characters
+import View.SubMenu.Settings
+import View.SubMenu.Status
+import View.SubMenu.Timeline
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_inner_html : (
+      Struct.Model.Type ->
+      Struct.UI.Tab ->
+      (Html.Html Struct.Event.Type)
+   )
+get_inner_html model tab =
+   case tab of
+      Struct.UI.StatusTab ->
+         (View.SubMenu.Status.get_html model)
+
+      Struct.UI.CharactersTab ->
+         (Html.Lazy.lazy2
+            (View.SubMenu.Characters.get_html)
+            model.characters
+            model.player_ix
+         )
+
+      Struct.UI.SettingsTab ->
+         (View.SubMenu.Settings.get_html model)
+
+      Struct.UI.TimelineTab ->
+         (View.SubMenu.Timeline.get_html model)
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   case (Struct.UI.try_getting_displayed_tab model.ui) of
+      (Just tab) ->
+         (Html.div
+            [(Html.Attributes.class "battle-sub-menu")]
+            [(get_inner_html model tab)]
+         )
+
+      Nothing ->
+         case (Struct.CharacterTurn.try_getting_target model.char_turn) of
+            (Just char_ref) ->
+               case (Array.get char_ref model.characters) of
+                  (Just char) ->
+                     (Html.div
+                        [(Html.Attributes.class "battle-sub-menu")]
+                        [
+                           (Html.text "Targeting:"),
+                           (Html.Lazy.lazy3
+                              (View.Controlled.CharacterCard.get_summary_html)
+                              model.char_turn
+                              model.player_ix
+                              char
+                           )
+                        ]
+                     )
+
+                  Nothing ->
+                     (Util.Html.nothing)
+
+            Nothing ->
+               (Util.Html.nothing)
diff --git a/src/battle/src/View/SubMenu/Characters.elm b/src/battle/src/View/SubMenu/Characters.elm
new file mode 100644
index 0000000..396dbee
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Characters.elm
@@ -0,0 +1,69 @@
+module View.SubMenu.Characters exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array 
+
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Character
+import Struct.Event
+
+import View.Controlled.CharacterCard
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_character_element_html : (
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_character_element_html player_ix char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-characters-element"),
+         (
+            if (Struct.Character.is_alive char)
+            then
+               (Html.Attributes.class "clickable")
+            else
+               (Html.Attributes.class "")
+         ),
+         (Html.Events.onClick
+            (Struct.Event.LookingForCharacter (Struct.Character.get_index char))
+         ),
+         (
+            if (Struct.Character.is_enabled char)
+            then
+               (Html.Attributes.class "battle-characters-element-active")
+            else
+               (Html.Attributes.class "battle-characters-element-inactive")
+         )
+      ]
+      [
+         (View.Controlled.CharacterCard.get_minimal_html player_ix char)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html characters player_ix =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tabmenu-content"),
+         (Html.Attributes.class "battle-tabmenu-characters-tab")
+      ]
+      (List.map
+         (get_character_element_html player_ix)
+         (Array.toList characters)
+      )
+   )
diff --git a/src/battle/src/View/SubMenu/Settings.elm b/src/battle/src/View/SubMenu/Settings.elm
new file mode 100644
index 0000000..e0ad4d7
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Settings.elm
@@ -0,0 +1,59 @@
+module View.SubMenu.Settings exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+scale_button : Float -> String -> (Html.Html Struct.Event.Type)
+scale_button mod label =
+   (Html.button
+      [
+         (Html.Events.onClick
+            (Struct.Event.ScaleChangeRequested mod)
+         )
+      ]
+      [ (Html.text label) ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tabmenu-content"),
+         (Html.Attributes.class "battle-tabmenu-settings-tab")
+      ]
+      [
+         (scale_button (0.75) "Zoom -"),
+         (scale_button 0 "Zoom Reset"),
+         (scale_button (1.15) "Zoom +"),
+         (Html.button
+            [
+               (Html.Events.onClick Struct.Event.DebugTeamSwitchRequest)
+            ]
+            [ (Html.text "[DEBUG] Switch team") ]
+         ),
+         (Html.button
+            [
+               (Html.Events.onClick Struct.Event.DebugLoadBattleRequest)
+            ]
+            [ (Html.text "[DEBUG] Load map") ]
+         ),
+         (Html.button
+            [
+               (Html.Events.onClick Struct.Event.DebugTestAnimation)
+            ]
+            [ (Html.text "[DEBUG] Test animations") ]
+         )
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Status.elm b/src/battle/src/View/SubMenu/Status.elm
new file mode 100644
index 0000000..485704e
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Status.elm
@@ -0,0 +1,55 @@
+module View.SubMenu.Status exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+import Html.Lazy
+
+-- Struct.Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.Location
+import Struct.Model
+import Struct.UI
+
+import View.SubMenu.Status.CharacterInfo
+import View.SubMenu.Status.TileInfo
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-footer-tabmenu-content"),
+         (Html.Attributes.class "battle-footer-tabmenu-content-status")
+      ]
+      [
+         (case (Struct.UI.get_previous_action model.ui) of
+            (Just (Struct.UI.SelectedLocation loc)) ->
+               (View.SubMenu.Status.TileInfo.get_html
+                  model
+                  (Struct.Location.from_ref loc)
+               )
+
+            (Just (Struct.UI.SelectedCharacter target_char)) ->
+               case (Array.get target_char model.characters) of
+                  (Just char) ->
+                     (Html.Lazy.lazy2
+                        (View.SubMenu.Status.CharacterInfo.get_html)
+                        model.player_ix
+                        char
+                     )
+
+                  _ -> (Html.text "Error: Unknown character selected.")
+
+            _ ->
+               (Html.text "Nothing is being focused.")
+         )
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Status/CharacterInfo.elm b/src/battle/src/View/SubMenu/Status/CharacterInfo.elm
new file mode 100644
index 0000000..814ce5f
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Status/CharacterInfo.elm
@@ -0,0 +1,34 @@
+module View.SubMenu.Status.CharacterInfo exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Struct.Map -------------------------------------------------------------------
+import Struct.Character
+import Struct.Event
+
+import View.Controlled.CharacterCard
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Int ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html player_ix char =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tabmenu-character-info")
+      ]
+      [
+         (Html.text ("Focusing:")),
+         (View.Controlled.CharacterCard.get_full_html player_ix char)
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Status/TileInfo.elm b/src/battle/src/View/SubMenu/Status/TileInfo.elm
new file mode 100644
index 0000000..7448247
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Status/TileInfo.elm
@@ -0,0 +1,142 @@
+module View.SubMenu.Status.TileInfo exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Dict
+
+import Html
+import Html.Attributes
+
+-- Struct.Map -------------------------------------------------------------------
+import Constants.IO
+import Constants.Movement
+
+import Struct.Map
+import Struct.Event
+import Struct.Location
+import Struct.Model
+import Struct.Tile
+
+import Util.Html
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_icon : (Struct.Tile.Instance -> (Html.Html Struct.Event.Type))
+get_icon tile =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tile-card-icon"),
+         (Html.Attributes.class
+            (
+               "battle-tile-variant-"
+               ++ (toString (Struct.Tile.get_variant_id tile))
+            )
+         ),
+         (Html.Attributes.style
+            [
+               (
+                  "background-image",
+                  (
+                     "url("
+                     ++ Constants.IO.tile_assets_url
+                     ++ (Struct.Tile.get_icon_id tile)
+                     ++".svg)"
+                  )
+               )
+            ]
+         )
+      ]
+      [
+      ]
+   )
+
+get_name : (
+      Struct.Model.Type ->
+      Struct.Tile.Instance ->
+      (Html.Html Struct.Event.Type)
+   )
+get_name model tile =
+   case (Dict.get (Struct.Tile.get_type_id tile) model.tiles) of
+      Nothing -> (Util.Html.nothing)
+      (Just tile_type) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-tile-card-name")
+            ]
+            [
+               (Html.text (Struct.Tile.get_name tile_type))
+            ]
+         )
+
+get_cost : (Struct.Tile.Instance -> (Html.Html Struct.Event.Type))
+get_cost tile =
+   let
+      cost = (Struct.Tile.get_instance_cost tile)
+      text =
+         if (cost > Constants.Movement.max_points)
+         then
+            "Obstructed"
+         else
+            ("Cost: " ++ (toString cost))
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-tile-card-cost")
+         ]
+         [
+            (Html.text text)
+         ]
+      )
+
+get_location : (Struct.Tile.Instance -> (Html.Html Struct.Event.Type))
+get_location tile =
+   let
+      tile_location = (Struct.Tile.get_location tile)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "battle-tile-card-location")
+         ]
+         [
+            (Html.text
+               (
+                  "{x: "
+                  ++ (toString tile_location.x)
+                  ++ "; y: "
+                  ++ (toString tile_location.y)
+                  ++ "}"
+               )
+            )
+         ]
+      )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.Model.Type ->
+      Struct.Location.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html model loc =
+   case (Struct.Map.try_getting_tile_at loc model.map) of
+      (Just tile) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-tile-card")
+            ]
+            [
+               (get_name model tile),
+               (Html.div
+                  [
+                     (Html.Attributes.class "battle-tile-card-top")
+                  ]
+                  [
+                     (get_icon tile),
+                     (get_location tile),
+                     (get_cost tile)
+                  ]
+               )
+            ]
+         )
+
+      Nothing -> (Html.text "Error: Unknown tile location selected.")
diff --git a/src/battle/src/View/SubMenu/Timeline.elm b/src/battle/src/View/SubMenu/Timeline.elm
new file mode 100644
index 0000000..7fb1813
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline.elm
@@ -0,0 +1,95 @@
+module View.SubMenu.Timeline exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+--import Html.Events
+import Html.Lazy
+
+-- Map -------------------------------------------------------------------
+import Struct.Character
+import Struct.Event
+import Struct.TurnResult
+import Struct.Model
+
+import View.SubMenu.Timeline.Attack
+import View.SubMenu.Timeline.Movement
+import View.SubMenu.Timeline.WeaponSwitch
+import View.SubMenu.Timeline.PlayerVictory
+import View.SubMenu.Timeline.PlayerDefeat
+import View.SubMenu.Timeline.PlayerTurnStart
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_turn_result_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      Struct.TurnResult.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_turn_result_html characters player_ix turn_result =
+   case turn_result of
+      (Struct.TurnResult.Moved movement) ->
+         (View.SubMenu.Timeline.Movement.get_html
+            characters
+            player_ix
+            movement
+         )
+
+      (Struct.TurnResult.Attacked attack) ->
+         (View.SubMenu.Timeline.Attack.get_html
+            characters
+            player_ix
+            attack
+         )
+
+      (Struct.TurnResult.SwitchedWeapon weapon_switch) ->
+         (View.SubMenu.Timeline.WeaponSwitch.get_html
+            characters
+            player_ix
+            weapon_switch
+         )
+
+      (Struct.TurnResult.PlayerWon pvict) ->
+         (View.SubMenu.Timeline.PlayerVictory.get_html pvict)
+
+      (Struct.TurnResult.PlayerLost pdefeat) ->
+         (View.SubMenu.Timeline.PlayerDefeat.get_html pdefeat)
+
+      (Struct.TurnResult.PlayerTurnStarted pturns) ->
+         (View.SubMenu.Timeline.PlayerTurnStart.get_html pturns)
+
+true_get_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      (Array.Array Struct.TurnResult.Type) ->
+      (Html.Html Struct.Event.Type)
+   )
+true_get_html characters player_ix turn_results =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-tabmenu-content"),
+         (Html.Attributes.class "battle-tabmenu-timeline-tab")
+      ]
+      (Array.toList
+         (Array.map
+            (get_turn_result_html characters player_ix)
+            turn_results
+         )
+      )
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
+get_html model =
+   (Html.Lazy.lazy3
+      (true_get_html)
+      model.characters
+      model.player_ix
+      model.timeline
+   )
diff --git a/src/battle/src/View/SubMenu/Timeline/Attack.elm b/src/battle/src/View/SubMenu/Timeline/Attack.elm
new file mode 100644
index 0000000..682540d
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/Attack.elm
@@ -0,0 +1,164 @@
+module View.SubMenu.Timeline.Attack exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Attack
+import Struct.Event
+import Struct.TurnResult
+import Struct.Character
+
+import View.Character
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_title_html : (
+      Struct.Character.Type ->
+      Struct.Character.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_title_html attacker defender =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-timeline-attack-title")
+      ]
+      [
+         (Html.text
+            (
+               (Struct.Character.get_name attacker)
+               ++ " attacked "
+               ++ (Struct.Character.get_name defender)
+               ++ "!"
+            )
+         )
+      ]
+   )
+
+get_effect_text : Struct.Attack.Type -> String
+get_effect_text attack =
+   (
+      (
+         case attack.precision of
+            Struct.Attack.Hit -> " hit for "
+            Struct.Attack.Graze -> " grazed for "
+            Struct.Attack.Miss -> " missed."
+      )
+      ++
+      (
+         if (attack.precision == Struct.Attack.Miss)
+         then
+            ""
+         else
+            (
+               ((toString attack.damage) ++ " damage")
+               ++
+               (
+                  if (attack.critical)
+                  then " (Critical Hit)."
+                  else "."
+               )
+            )
+      )
+   )
+
+get_attack_html : (
+      Struct.Character.Type ->
+      Struct.Character.Type ->
+      Struct.Attack.Type ->
+      (Html.Html Struct.Event.Type)
+   )
+get_attack_html attacker defender attack =
+   let
+      attacker_name = (Struct.Character.get_name attacker)
+      defender_name = (Struct.Character.get_name defender)
+   in
+   (Html.div
+      []
+      [
+         (Html.text
+            (
+               case (attack.order, attack.parried) of
+                  (Struct.Attack.Counter, True) ->
+                     (
+                        defender_name
+                        ++ " attempted to strike back, but "
+                        ++ attacker_name
+                        ++ " parried, and "
+                        ++ (get_effect_text attack)
+                     )
+
+                  (Struct.Attack.Counter, _) ->
+                     (
+                        defender_name
+                        ++ " striked back, and "
+                        ++ (get_effect_text attack)
+                     )
+
+                  (_, True) ->
+                     (
+                        attacker_name
+                        ++ " attempted a hit, but "
+                        ++ defender_name
+                        ++ " parried, and "
+                        ++ (get_effect_text attack)
+                     )
+
+                  (_, _) ->
+                     (attacker_name ++ " " ++ (get_effect_text attack))
+            )
+         )
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      Struct.TurnResult.Attack ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html characters player_ix attack =
+   case
+      (
+         (Array.get attack.attacker_index characters),
+         (Array.get attack.defender_index characters)
+      )
+   of
+      ((Just atkchar), (Just defchar)) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-attack")
+            ]
+            (
+               [
+                  (View.Character.get_portrait_html player_ix atkchar),
+                  (View.Character.get_portrait_html player_ix defchar),
+                  (get_title_html atkchar defchar)
+               ]
+               ++
+               (List.map
+                  (get_attack_html atkchar defchar)
+                  attack.sequence
+               )
+            )
+         )
+
+      _ ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-attack")
+            ]
+            [
+               (Html.text "Error: Attack with unknown characters")
+            ]
+         )
diff --git a/src/battle/src/View/SubMenu/Timeline/Movement.elm b/src/battle/src/View/SubMenu/Timeline/Movement.elm
new file mode 100644
index 0000000..0746f1f
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/Movement.elm
@@ -0,0 +1,62 @@
+module View.SubMenu.Timeline.Movement exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.TurnResult
+import Struct.Character
+
+import View.Character
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      Struct.TurnResult.Movement ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html characters player_ix movement =
+   case (Array.get movement.character_index characters) of
+      (Just char) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-movement")
+            ]
+            [
+               (View.Character.get_portrait_html player_ix char),
+               (Html.text
+                  (
+                     (Struct.Character.get_name char)
+                     ++ " moved to ("
+                     ++ (toString movement.destination.x)
+                     ++ ", "
+                     ++ (toString movement.destination.y)
+                     ++ ")."
+                  )
+               )
+            ]
+         )
+
+      _ ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-movement")
+            ]
+            [
+               (Html.text "Error: Moving with unknown character")
+            ]
+         )
diff --git a/src/battle/src/View/SubMenu/Timeline/PlayerDefeat.elm b/src/battle/src/View/SubMenu/Timeline/PlayerDefeat.elm
new file mode 100644
index 0000000..db5e023
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/PlayerDefeat.elm
@@ -0,0 +1,38 @@
+module View.SubMenu.Timeline.PlayerDefeat exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.TurnResult
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.TurnResult.PlayerDefeat ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html pdefeat =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-timeline-element"),
+         (Html.Attributes.class "battle-timeline-player-defeat")
+      ]
+      [
+         (Html.text
+            (
+               "Player "
+               ++ (toString pdefeat.player_index)
+               ++ " has been eliminated."
+            )
+         )
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Timeline/PlayerTurnStart.elm b/src/battle/src/View/SubMenu/Timeline/PlayerTurnStart.elm
new file mode 100644
index 0000000..a6486fa
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/PlayerTurnStart.elm
@@ -0,0 +1,38 @@
+module View.SubMenu.Timeline.PlayerTurnStart exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.TurnResult
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.TurnResult.PlayerTurnStart ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html pturns =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-timeline-element"),
+         (Html.Attributes.class "battle-timeline-turn-start")
+      ]
+      [
+         (Html.text
+            (
+               "Player "
+               ++ (toString pturns.player_index)
+               ++ "'s turn has started."
+            )
+         )
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Timeline/PlayerVictory.elm b/src/battle/src/View/SubMenu/Timeline/PlayerVictory.elm
new file mode 100644
index 0000000..4d47f62
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/PlayerVictory.elm
@@ -0,0 +1,38 @@
+module View.SubMenu.Timeline.PlayerVictory exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.TurnResult
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      Struct.TurnResult.PlayerVictory ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html pvict =
+   (Html.div
+      [
+         (Html.Attributes.class "battle-timeline-element"),
+         (Html.Attributes.class "battle-timeline-player-victory")
+      ]
+      [
+         (Html.text
+            (
+               "Player "
+               ++ (toString pvict.player_index)
+               ++ " has won the map."
+            )
+         )
+      ]
+   )
diff --git a/src/battle/src/View/SubMenu/Timeline/WeaponSwitch.elm b/src/battle/src/View/SubMenu/Timeline/WeaponSwitch.elm
new file mode 100644
index 0000000..499e0c3
--- /dev/null
+++ b/src/battle/src/View/SubMenu/Timeline/WeaponSwitch.elm
@@ -0,0 +1,58 @@
+module View.SubMenu.Timeline.WeaponSwitch exposing (get_html)
+
+-- Elm -------------------------------------------------------------------------
+import Array
+
+import Html
+import Html.Attributes
+--import Html.Events
+
+-- Map -------------------------------------------------------------------
+import Struct.Event
+import Struct.TurnResult
+import Struct.Character
+
+import View.Character
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html : (
+      (Array.Array Struct.Character.Type) ->
+      Int ->
+      Struct.TurnResult.WeaponSwitch ->
+      (Html.Html Struct.Event.Type)
+   )
+get_html characters player_ix weapon_switch =
+   case (Array.get weapon_switch.character_index characters) of
+      (Just char) ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-weapon-switch")
+            ]
+            [
+               (View.Character.get_portrait_html player_ix char),
+               (Html.text
+                  (
+                     (Struct.Character.get_name char)
+                     ++ " switched weapons."
+                  )
+               )
+            ]
+         )
+
+      _ ->
+         (Html.div
+            [
+               (Html.Attributes.class "battle-timeline-element"),
+               (Html.Attributes.class "battle-timeline-weapon-switch")
+            ]
+            [
+               (Html.text "Error: Unknown character switched weapons")
+            ]
+         )