Adds some help for stats & attributes.

10 files changed, 672 insertions, 38 deletions

diff --git a/src/battle/src/View/Controlled/CharacterCard.elm b/src/battle/src/View/Controlled/CharacterCard.elm
index 19155f3..2416323 100644
--- a/src/battle/src/View/Controlled/CharacterCard.elm
+++ b/src/battle/src/View/Controlled/CharacterCard.elm
@@ -75,7 +75,17 @@ get_health_bar char =
       (Battle.View.Gauge.get_html
          ("HP: " ++ (String.fromInt current) ++ "/" ++ (String.fromInt max))
          (100.0 * ((toFloat current)/(toFloat max)))
-         [(Html.Attributes.class "character-card-health")]
+         [
+            (Html.Attributes.class "character-card-health"),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.RequestedHelp
+                  (Struct.HelpRequest.Statistic
+                     Battle.Struct.Statistics.MaxHealth
+                  )
+               )
+            )
+         ]
          []
          []
       )
@@ -145,7 +155,17 @@ get_active_movement_bar maybe_navigator char =
       (Battle.View.Gauge.get_html
          ("MP: " ++ (String.fromInt current) ++ "/" ++ (String.fromInt max))
          (100.0 * ((toFloat current)/(toFloat max)))
-         [(Html.Attributes.class "character-card-movement")]
+         [
+            (Html.Attributes.class "character-card-movement"),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.RequestedHelp
+                  (Struct.HelpRequest.Statistic
+                     Battle.Struct.Statistics.MovementPoints
+                  )
+               )
+            )
+         ]
          []
          []
       )
@@ -166,7 +186,17 @@ get_inactive_movement_bar char =
       (Battle.View.Gauge.get_html
          ( "MP: " ++ (String.fromInt max))
          100.0
-         [(Html.Attributes.class "character-card-movement")]
+         [
+            (Html.Attributes.class "character-card-movement"),
+            (Html.Attributes.class "clickable"),
+            (Html.Events.onClick
+               (Struct.Event.RequestedHelp
+                  (Struct.HelpRequest.Statistic
+                     Battle.Struct.Statistics.MovementPoints
+                  )
+               )
+            )
+         ]
          []
          []
       )
diff --git a/src/battle/src/View/MessageBoard/Help.elm b/src/battle/src/View/MessageBoard/Help.elm
index 68d6136..9511f96 100644
--- a/src/battle/src/View/MessageBoard/Help.elm
+++ b/src/battle/src/View/MessageBoard/Help.elm
@@ -4,6 +4,10 @@ module View.MessageBoard.Help exposing (get_html)
 import Html
 import Html.Attributes
 
+-- Battle ----------------------------------------------------------------------
+import Battle.View.Help.Attribute
+import Battle.View.Help.Statistic
+
 -- Local Module ----------------------------------------------------------------
 import Struct.Event
 import Struct.HelpRequest
@@ -34,6 +38,12 @@ get_html model =
             (Struct.HelpRequest.Rank rank) ->
                (View.MessageBoard.Help.Rank.get_html_contents rank)
 
+            (Struct.HelpRequest.Attribute att_cat) ->
+               (Battle.View.Help.Attribute.get_html_contents att_cat)
+
+            (Struct.HelpRequest.Statistic stat_cat) ->
+               (Battle.View.Help.Statistic.get_html_contents stat_cat)
+
             _ -> [(Html.text "Help is not available for this, yet.")]
       )
    )
diff --git a/src/css/src/shared/battle-view/message-board/help.scss b/src/css/src/shared/battle-view/message-board/help.scss
index bb66c33..e6ba2cb 100644
--- a/src/css/src/shared/battle-view/message-board/help.scss
+++ b/src/css/src/shared/battle-view/message-board/help.scss
@@ -31,3 +31,7 @@
    vertical-align: middle;
 }
 
+.tooltip-reference
+{
+   display: inline-block;
+}
diff --git a/src/map-editor/src/View/MessageBoard/Help/Guide.elm b/src/map-editor/src/View/MessageBoard/Help/Guide.elm
index e4aff37..d2d445b 100644
--- a/src/map-editor/src/View/MessageBoard/Help/Guide.elm
+++ b/src/map-editor/src/View/MessageBoard/Help/Guide.elm
@@ -27,15 +27,8 @@ get_header_html title =
 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."
-         )
-      )
+      (get_header_html "Modifying a Map"),
+      (Html.text "The guide for this module is not yet available.")
    ]
 
 --------------------------------------------------------------------------------
diff --git a/src/roster-editor/src/View/CharacterCard.elm b/src/roster-editor/src/View/CharacterCard.elm
index 7febc9f..f7c9513 100644
--- a/src/roster-editor/src/View/CharacterCard.elm
+++ b/src/roster-editor/src/View/CharacterCard.elm
@@ -30,6 +30,7 @@ import BattleCharacters.Struct.GlyphBoard
 -- Local Module ----------------------------------------------------------------
 import Struct.Character
 import Struct.Event
+import Struct.HelpRequest
 import Struct.UI
 
 import View.Character
@@ -80,7 +81,15 @@ get_health_bar char_stats =
          (String.fromInt (Battle.Struct.Statistics.get_max_health char_stats))
       )
       100.0
-      [(Html.Attributes.class "character-card-health")]
+      [
+         (Html.Attributes.class "character-card-health"),
+         (Html.Attributes.class "clickable"),
+         (Html.Events.onClick
+            (Struct.Event.RequestedHelp
+               (Struct.HelpRequest.Statistic Battle.Struct.Statistics.MaxHealth)
+            )
+         )
+      ]
       []
       []
    )
@@ -112,7 +121,17 @@ get_movement_bar char_stats =
          )
       )
       100.0
-      [(Html.Attributes.class "character-card-movement")]
+      [
+         (Html.Attributes.class "character-card-movement"),
+         (Html.Attributes.class "clickable"),
+         (Html.Events.onClick
+            (Struct.Event.RequestedHelp
+               (Struct.HelpRequest.Statistic
+                  Battle.Struct.Statistics.MovementPoints
+               )
+            )
+         )
+      ]
       []
       []
    )
@@ -315,16 +334,16 @@ get_glyph_board_details : (
 get_glyph_board_details damage_modifier board =
    (Html.div
       [
-         (Html.Attributes.class "character-card-glyph-board"),
-         (Html.Attributes.class "clickable"),
-         (Html.Events.onClick
-            (Struct.Event.TabSelected Struct.UI.GlyphBoardSelectionTab)
-         )
+         (Html.Attributes.class "character-card-glyph-board")
       ]
       [
          (Html.div
             [
-               (Html.Attributes.class "character-card-glyph-board-name")
+               (Html.Attributes.class "character-card-glyph-board-name"),
+               (Html.Attributes.class "clickable"),
+               (Html.Events.onClick
+                  (Struct.Event.TabSelected Struct.UI.GlyphBoardSelectionTab)
+               )
             ]
             [
                (Html.text (BattleCharacters.Struct.GlyphBoard.get_name board))
@@ -333,6 +352,17 @@ get_glyph_board_details damage_modifier board =
          (Battle.View.Omnimods.get_html_with_modifier
             damage_modifier
             (BattleCharacters.Struct.GlyphBoard.get_omnimods board)
+         ),
+         (Html.div
+            [
+               (Html.Attributes.class "clickable"),
+               (Html.Events.onClick
+                  (Struct.Event.TabSelected Struct.UI.GlyphManagementTab)
+               )
+            ]
+            [
+               (Html.text "[PH] Select Glyphs")
+            ]
          )
       ]
    )
@@ -345,10 +375,7 @@ get_relevant_stats stats =
    (Html.div
       [
          (Html.Attributes.class "character-card-stats"),
-         (Html.Attributes.class "clickable"),
-         (Html.Events.onClick
-            (Struct.Event.TabSelected Struct.UI.GlyphManagementTab)
-         )
+         (Html.Attributes.class "clickable")
       ]
       (Battle.View.Statistic.get_all_but_gauges_html stats)
    )
@@ -360,11 +387,7 @@ get_attributes : (
 get_attributes atts =
    (Html.div
       [
-         (Html.Attributes.class "character-card-atts"),
-         (Html.Attributes.class "clickable"),
-         (Html.Events.onClick
-            (Struct.Event.TabSelected Struct.UI.GlyphManagementTab)
-         )
+         (Html.Attributes.class "character-card-atts")
       ]
       (Battle.View.Attribute.get_all_html atts)
    )
diff --git a/src/roster-editor/src/View/MessageBoard/Help.elm b/src/roster-editor/src/View/MessageBoard/Help.elm
index dbd0412..dde800c 100644
--- a/src/roster-editor/src/View/MessageBoard/Help.elm
+++ b/src/roster-editor/src/View/MessageBoard/Help.elm
@@ -4,6 +4,10 @@ module View.MessageBoard.Help exposing (get_html)
 import Html
 import Html.Attributes
 
+-- Battle ----------------------------------------------------------------------
+import Battle.View.Help.Attribute
+import Battle.View.Help.Statistic
+
 -- Local Module ----------------------------------------------------------------
 import Struct.Event
 import Struct.HelpRequest
@@ -30,6 +34,12 @@ get_html model =
             Struct.HelpRequest.None ->
                (View.MessageBoard.Help.Guide.get_html_contents model)
 
+            (Struct.HelpRequest.Attribute att_cat) ->
+               (Battle.View.Help.Attribute.get_html_contents att_cat)
+
+            (Struct.HelpRequest.Statistic stat_cat) ->
+               (Battle.View.Help.Statistic.get_html_contents stat_cat)
+
             _ -> (View.MessageBoard.Help.Guide.get_html_contents model)
       )
    )
diff --git a/src/roster-editor/src/View/MessageBoard/Help/Guide.elm b/src/roster-editor/src/View/MessageBoard/Help/Guide.elm
index c271f78..bc95510 100644
--- a/src/roster-editor/src/View/MessageBoard/Help/Guide.elm
+++ b/src/roster-editor/src/View/MessageBoard/Help/Guide.elm
@@ -28,15 +28,8 @@ get_header_html title =
 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."
-         )
-      )
+      (get_header_html "Modifying the Character Roster"),
+      (Html.text "The guide for this module is not yet available.")
    ]
 
 --------------------------------------------------------------------------------
diff --git a/src/shared/battle/Battle/Lang/English.elm b/src/shared/battle/Battle/Lang/English.elm
new file mode 100644
index 0000000..15109a3
--- /dev/null
+++ b/src/shared/battle/Battle/Lang/English.elm
@@ -0,0 +1,447 @@
+module Battle.Lang.English exposing (..)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+import Html.Events
+
+-- Battle ----------------------------------------------------------------------
+import Battle.Struct.Attributes
+import Battle.Struct.Statistics
+
+-- Local Module ----------------------------------------------------------------
+import Struct.Event
+import Struct.HelpRequest
+
+--------------------------------------------------------------------------------
+-- TYPES -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+-- Nouns -----------------------------------------------------------------------
+---- Attributes ----------------------------------------------------------------
+constitution : String
+constitution = "Constitution"
+
+dexterity : String
+dexterity = "Dexterity"
+
+intelligence : String
+intelligence = "Intelligence"
+
+mind : String
+mind = "Mind"
+
+speed : String
+speed = "Speed"
+
+strength : String
+strength = "Strength"
+
+---- Statistics ----------------------------------------------------------------
+max_health : String
+max_health = "Max. Health"
+
+movement_points : String
+movement_points = "Movement Points"
+
+dodges : String
+dodges = "Dodge Chance"
+
+parries : String
+parries = "Parry Chance"
+
+accuracy : String
+accuracy = "Accuracy"
+
+double_hits : String
+double_hits = "Double Hit Chance"
+
+critical_hits : String
+critical_hits = "Critical Hit Chance"
+
+-- Help ------------------------------------------------------------------------
+---- Attributes ----------------------------------------------------------------
+constitution_help : (Html.Html Struct.Event.Type)
+constitution_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Constitution influences "),
+         (get_stats_reference_html Battle.Struct.Statistics.MaxHealth),
+         (Html.text " (75%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.MovementPoints),
+         (Html.text " (~33%).")
+      ]
+   )
+
+dexterity_help : (Html.Html Struct.Event.Type)
+dexterity_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Dexterity influences "),
+         (get_stats_reference_html Battle.Struct.Statistics.Accuracy),
+         (Html.text " (100%), "),
+         (get_stats_reference_html Battle.Struct.Statistics.Dodges),
+         (Html.text " (~33%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.Parries),
+         (Html.text " (25%).")
+      ]
+   )
+
+intelligence_help : (Html.Html Struct.Event.Type)
+intelligence_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Intelligence influences "),
+         (get_stats_reference_html Battle.Struct.Statistics.CriticalHits),
+         (Html.text " (100%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.Parries),
+         (Html.text " (25%).")
+      ]
+   )
+
+mind_help : (Html.Html Struct.Event.Type)
+mind_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Mind influences "),
+         (get_stats_reference_html Battle.Struct.Statistics.DoubleHits),
+         (Html.text " (50%), "),
+         (get_stats_reference_html Battle.Struct.Statistics.Dodges),
+         (Html.text " (~33%), "),
+         (get_stats_reference_html Battle.Struct.Statistics.MaxHealth),
+         (Html.text " (25%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.MovementPoints),
+         (Html.text " (~16%).")
+      ]
+   )
+
+speed_help : (Html.Html Struct.Event.Type)
+speed_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Speed influences "),
+         (get_stats_reference_html Battle.Struct.Statistics.MovementPoints),
+         (Html.text " (50%), "),
+         (get_stats_reference_html Battle.Struct.Statistics.DoubleHits),
+         (Html.text " (50%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.Dodges),
+         (Html.text " (~33%).")
+      ]
+   )
+
+strength_help : (Html.Html Struct.Event.Type)
+strength_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text "Strength influences attack damage (100%), and "),
+         (get_stats_reference_html Battle.Struct.Statistics.Parries),
+         (Html.text " (25%).")
+      ]
+   )
+
+---- Statistics ----------------------------------------------------------------
+max_health_help : (Html.Html Struct.Event.Type)
+max_health_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Maximum Health is the maximum amount of hit points the character can
+            have. It is based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Constitution),
+         (Html.text " (75%), and "),
+         (get_atts_reference_html Battle.Struct.Attributes.Mind),
+         (Html.text " (25%).")
+      ]
+   )
+
+movement_points_help : (Html.Html Struct.Event.Type)
+movement_points_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Movement Points are an indication of how much this character can
+            move every turn. They are based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Speed),
+         (Html.text " (50%), "),
+         (get_atts_reference_html Battle.Struct.Attributes.Constitution),
+         (Html.text " (~33%), and "),
+         (get_atts_reference_html Battle.Struct.Attributes.Mind),
+         (Html.text " (~16%).")
+      ]
+   )
+
+dodges_help : (Html.Html Struct.Event.Type)
+dodges_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Dodge Chance is the base chance for this character to completely
+            avoid an incoming attack. The actual chance is Dodge Chance minus
+            the opponent's
+            """
+         ),
+         (get_stats_reference_html Battle.Struct.Statistics.Accuracy),
+         (Html.text
+            """. Multiply by two to get the chance of avoiding partially (taking
+            only half damage) an attack. Dodge Chance is based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Dexterity),
+         (Html.text " (~33%), "),
+         (get_atts_reference_html Battle.Struct.Attributes.Mind),
+         (Html.text " (~33%), and "),
+         (get_atts_reference_html Battle.Struct.Attributes.Speed),
+         (Html.text " (~33%).")
+      ]
+   )
+
+parries_help : (Html.Html Struct.Event.Type)
+parries_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Parry Chance indicates how likely it is for this characters to void
+            an incoming attack and replace it by one of their own. It is
+            based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Dexterity),
+         (Html.text " (25%), "),
+         (get_atts_reference_html Battle.Struct.Attributes.Intelligence),
+         (Html.text " (25%), "),
+         (get_atts_reference_html Battle.Struct.Attributes.Speed),
+         (Html.text " (25%), and "),
+         (get_atts_reference_html Battle.Struct.Attributes.Strength),
+         (Html.text " (25%).")
+      ]
+   )
+
+accuracy_help : (Html.Html Struct.Event.Type)
+accuracy_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Accuracy lower the target's chance to evade an incoming blow, as it
+            is subtracted to their
+            an incoming attack and replace it by one of their own. It is
+            based on their
+            """
+         ),
+         (get_stats_reference_html Battle.Struct.Statistics.Dodges),
+         (Html.text ". Accuracy is based on "),
+         (get_atts_reference_html Battle.Struct.Attributes.Dexterity),
+         (Html.text " (100%).")
+      ]
+   )
+
+double_hits_help : (Html.Html Struct.Event.Type)
+double_hits_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Double Hit Chance indicate how likely this character is to perform
+            a follow-up attack (which takes place after their target's
+            retaliation, if there is any). It is based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Mind),
+         (Html.text " (50%), and "),
+         (get_atts_reference_html Battle.Struct.Attributes.Speed),
+         (Html.text " (50%).")
+      ]
+   )
+
+critical_hits_help : (Html.Html Struct.Event.Type)
+critical_hits_help =
+   (Html.div
+      [
+      ]
+      [
+         (Html.text
+            """
+            Critical Hit Chance indicate how likely this character is to perform
+            an attack with double the damage. It is based on
+            """
+         ),
+         (get_atts_reference_html Battle.Struct.Attributes.Intelligence),
+         (Html.text " (100%).")
+      ]
+   )
+
+get_stats_reference_html : (
+      Battle.Struct.Statistics.Category ->
+      (Html.Html Struct.Event.Type)
+   )
+get_stats_reference_html cat =
+   (Html.div
+      [
+         (Html.Attributes.class "tooltip-reference"),
+         (Html.Events.onClick
+            (Struct.Event.RequestedHelp
+               (Struct.HelpRequest.Statistic cat)
+            )
+         )
+      ]
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "omnimod-icon"),
+               (Html.Attributes.class
+                  (
+                     "omnimod-icon-"
+                     ++ (Battle.Struct.Statistics.encode_category cat)
+                  )
+               )
+            ]
+            [
+            ]
+         ),
+         (Html.text (get_statistic_name cat))
+      ]
+   )
+
+get_atts_reference_html : (
+      Battle.Struct.Attributes.Category ->
+      (Html.Html Struct.Event.Type)
+   )
+get_atts_reference_html cat =
+   (Html.div
+      [
+         (Html.Attributes.class "tooltip-reference"),
+         (Html.Events.onClick
+            (Struct.Event.RequestedHelp
+               (Struct.HelpRequest.Attribute cat)
+            )
+         )
+      ]
+      [
+         (Html.div
+            [
+               (Html.Attributes.class "omnimod-icon"),
+               (Html.Attributes.class
+                  (
+                     "omnimod-icon-"
+                     ++ (Battle.Struct.Attributes.encode_category cat)
+                  )
+               )
+            ]
+            [
+            ]
+         ),
+         (Html.text (get_attribute_name cat))
+      ]
+   )
+
+get_attribute_name : Battle.Struct.Attributes.Category -> String
+get_attribute_name cat =
+   case cat of
+      Battle.Struct.Attributes.Constitution -> (constitution)
+      Battle.Struct.Attributes.Dexterity -> (dexterity)
+      Battle.Struct.Attributes.Intelligence -> (intelligence)
+      Battle.Struct.Attributes.Mind -> (mind)
+      Battle.Struct.Attributes.Speed -> (speed)
+      Battle.Struct.Attributes.Strength -> (strength)
+
+get_statistic_name : Battle.Struct.Statistics.Category -> String
+get_statistic_name cat =
+   case cat of
+      Battle.Struct.Statistics.MaxHealth -> (max_health)
+      Battle.Struct.Statistics.MovementPoints -> (movement_points)
+      Battle.Struct.Statistics.Dodges -> (dodges)
+      Battle.Struct.Statistics.Parries -> (parries)
+      Battle.Struct.Statistics.Accuracy -> (accuracy)
+      Battle.Struct.Statistics.DoubleHits -> (double_hits)
+      Battle.Struct.Statistics.CriticalHits -> (critical_hits)
+
+get_attribute_category_help : (
+      Battle.Struct.Attributes.Category ->
+      (String, (Html.Html Struct.Event.Type))
+   )
+get_attribute_category_help cat =
+   case cat of
+      Battle.Struct.Attributes.Constitution ->
+         ((constitution), (constitution_help))
+
+      Battle.Struct.Attributes.Dexterity ->
+         ((dexterity), (dexterity_help))
+
+      Battle.Struct.Attributes.Intelligence ->
+         ((intelligence), (intelligence_help))
+
+      Battle.Struct.Attributes.Mind ->
+         ((mind), (mind_help))
+
+      Battle.Struct.Attributes.Speed ->
+         ((speed), (speed_help))
+
+      Battle.Struct.Attributes.Strength ->
+         ((strength), (strength_help))
+
+get_statistic_category_help : (
+      Battle.Struct.Statistics.Category ->
+      (String, (Html.Html Struct.Event.Type))
+   )
+get_statistic_category_help cat =
+   case cat of
+      Battle.Struct.Statistics.MaxHealth ->
+         ((max_health), (max_health_help))
+
+      Battle.Struct.Statistics.MovementPoints ->
+         ((movement_points), (movement_points_help))
+
+      Battle.Struct.Statistics.Dodges ->
+         ((dodges), (dodges_help))
+
+      Battle.Struct.Statistics.Parries ->
+         ((parries), (parries_help))
+
+      Battle.Struct.Statistics.Accuracy ->
+         ((accuracy), (accuracy_help))
+
+      Battle.Struct.Statistics.DoubleHits ->
+         ((double_hits), (double_hits_help))
+
+      Battle.Struct.Statistics.CriticalHits ->
+         ((critical_hits), (critical_hits_help))
diff --git a/src/shared/battle/Battle/View/Help/Attribute.elm b/src/shared/battle/Battle/View/Help/Attribute.elm
new file mode 100644
index 0000000..f7bd9e1
--- /dev/null
+++ b/src/shared/battle/Battle/View/Help/Attribute.elm
@@ -0,0 +1,62 @@
+module Battle.View.Help.Attribute exposing (get_html_contents)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Battle ----------------------------------------------------------------------
+import Battle.Struct.Attributes
+import Battle.Lang.English
+
+-- Local Module ----------------------------------------------------------------
+import Struct.Event
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_header_html : (
+      Battle.Struct.Attributes.Category ->
+      String ->
+      (Html.Html Struct.Event.Type)
+   )
+get_header_html cat name =
+   (Html.h1
+      []
+      [
+         (Html.div
+            [(Html.Attributes.class "help-guide-icon")]
+            []
+         ),
+         (Html.text " "),
+         (Html.div
+            [
+               (Html.Attributes.class "omnimod-icon"),
+               (Html.Attributes.class
+                  (
+                     "omnimod-icon-"
+                     ++ (Battle.Struct.Attributes.encode_category cat)
+                  )
+               )
+            ]
+            [
+            ]
+         ),
+         (Html.text name)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html_contents : (
+      Battle.Struct.Attributes.Category ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_html_contents cat =
+   let
+      (name, tooltip) = (Battle.Lang.English.get_attribute_category_help cat)
+   in
+   [
+      (get_header_html cat name),
+      tooltip
+   ]
diff --git a/src/shared/battle/Battle/View/Help/Statistic.elm b/src/shared/battle/Battle/View/Help/Statistic.elm
new file mode 100644
index 0000000..0e1f056
--- /dev/null
+++ b/src/shared/battle/Battle/View/Help/Statistic.elm
@@ -0,0 +1,62 @@
+module Battle.View.Help.Statistic exposing (get_html_contents)
+
+-- Elm -------------------------------------------------------------------------
+import Html
+import Html.Attributes
+
+-- Battle ----------------------------------------------------------------------
+import Battle.Struct.Statistics
+import Battle.Lang.English
+
+-- Local Module ----------------------------------------------------------------
+import Struct.Event
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_header_html : (
+      Battle.Struct.Statistics.Category ->
+      String ->
+      (Html.Html Struct.Event.Type)
+   )
+get_header_html cat name =
+   (Html.h1
+      []
+      [
+         (Html.div
+            [(Html.Attributes.class "help-guide-icon")]
+            []
+         ),
+         (Html.text " "),
+         (Html.div
+            [
+               (Html.Attributes.class "omnimod-icon"),
+               (Html.Attributes.class
+                  (
+                     "omnimod-icon-"
+                     ++ (Battle.Struct.Statistics.encode_category cat)
+                  )
+               )
+            ]
+            [
+            ]
+         ),
+         (Html.text name)
+      ]
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+get_html_contents : (
+      Battle.Struct.Statistics.Category ->
+      (List (Html.Html Struct.Event.Type))
+   )
+get_html_contents cat =
+   let
+      (name, tooltip) = (Battle.Lang.English.get_statistic_category_help cat)
+   in
+   [
+      (get_header_html cat name),
+      tooltip
+   ]