From c8866c6052401edcc465f58ae5917ba522da70cc Mon Sep 17 00:00:00 2001
From: JulianusIV <ivjulianus@gmail.com>
Date: Tue, 4 Jun 2024 01:57:41 +0200
Subject: [PATCH] update info page

---
 XDefiantWeaponStats/Pages/Home.razor   |  12 +--
 XDefiantWeaponStats/Pages/Info.razor   | 121 ++++++++++++++++++-------
 XDefiantWeaponStats/wwwroot/index.html |   2 +-
 3 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/XDefiantWeaponStats/Pages/Home.razor b/XDefiantWeaponStats/Pages/Home.razor
index d84a2e0..718b606 100644
--- a/XDefiantWeaponStats/Pages/Home.razor
+++ b/XDefiantWeaponStats/Pages/Home.razor
@@ -6,10 +6,6 @@
 
 @inject IJSRuntime JS
 
-<script>
-    document.getElementsByTagName('body')[0].style = 'max-width: none;';
-</script>
-
 <div style="display: flex; flex: 1 1 auto; min-height: 0">
     <div style="width: 250px; overflow: auto; min-height: 0; margin-right: 1rem; padding: 1rem; border: 1px solid var(--nc-bg-3); border-radius: 10px; flex: 0 1 auto;">
         @foreach(var weaponClass in GunlistModel.JsonObject)
@@ -74,25 +70,25 @@
                 <div>
                     <input class="custom-check-input" type="checkbox" id="basettk_checkbox" @bind="showBaseTTK" />
                     <label class="custom-check-content" for="basettk_checkbox">
-                        Base TTK
+                        @(ttkSelected ? "Base TTK" : "Base STK")
                     </label>
                 </div>
                 <div>
                     <input class="custom-check-input" type="checkbox" id="basephantomttk_checkbox" @bind="showBasePhantomTTK" />
                     <label class="custom-check-content" for="basephantomttk_checkbox">
-                        Base Phantom TTK
+                        @(ttkSelected ? "Base Phantom TTK" : "Base Phantom STK")
                     </label>
                 </div>
                 <div>
                     <input class="custom-check-input" type="checkbox" id="critttk__checkbox" @bind="showCritTTK" />
                     <label class="custom-check-content" for="critttk__checkbox">
-                        Optimal TTK
+                        @(ttkSelected ? "Optimal TTK" : "Optimal STK")
                     </label>
                 </div>
                 <div>
                     <input class="custom-check-input" type="checkbox" id="critphantomttk_checkbox" @bind="showCritPhantomTTK" />
                     <label class="custom-check-content" for="critphantomttk_checkbox">
-                        Optimal Phantom TTK
+                        @(ttkSelected ? "Optimal Phantom TTK" : "Optimal Phantom STK")
                     </label>
                 </div>
             }
diff --git a/XDefiantWeaponStats/Pages/Info.razor b/XDefiantWeaponStats/Pages/Info.razor
index c3aac2d..6b3165b 100644
--- a/XDefiantWeaponStats/Pages/Info.razor
+++ b/XDefiantWeaponStats/Pages/Info.razor
@@ -1,38 +1,91 @@
 @page "/info"
 
-<script>
-    document.getElementsByTagName('body')[0].style = '';
-</script>
-
-<h1>Damage multiplier mechanics</h1>
-<p>
-    In XDefiant hits to the limbs do not do reduced damage, 
-    in fact with most guns the damage is the same no matter where you hit (outside of headshots).
-</p>
-<p style="margin-bottom: 0;">
-    This works a bit different on marksman rifles and sniper rifles:
-</p>
-<p style="margin-bottom: 0;">
-    Hits to the lower body or limbs deal the baseline damage,
-    that you can find in the weapon's in game stat page.
-</p>
-<p>
-    Hits to the upper body, (in and slightly below the neck) will deal an increased amount of damage,
-    and headshots obviously deal the most damage.
-</p>
-<p>
-    This behaviour is (currently) only found on marksman rifles and snipers.
-</p>
-<h3 style="text-align: center;">Increased damage areas:</h3>
-<div style="display: flex; justify-content: center; margin-top: 1rem;">
-    <div style="display: flex; flex-direction: column; align-items: center; margin-right: 4rem;">
-        <p style="text-align: center;">M44 + marksman rifles</p>
-        <img src="images/m44.png" height="255" width="152" />
-    </div>
-    <div style="display: flex; flex-direction:column; align-items: center;">
-        <p style="text-align: center;">TAC-50</p>
-        <img src="images/tac-50.png" height="255" width="152"/>
+<div style="max-width: 750px; align-self: center">
+    <h1>Damage multiplier mechanics</h1>
+    <p>
+        In XDefiant hits to the limbs do not do reduced damage, 
+        in fact with most guns the damage is the same no matter where you hit (outside of headshots).
+    </p>
+    <p style="margin-bottom: 0;">
+        This works a bit different on marksman rifles and sniper rifles:
+    </p>
+    <p style="margin-bottom: 0;">
+        Hits to the lower body or limbs deal the baseline damage,
+        that you can find in the weapon's in game stat page.
+    </p>
+    <p>
+        Hits to the upper body, (in and slightly below the neck) will deal an increased amount of damage,
+        and headshots obviously deal the most damage.
+    </p>
+    <p>
+        This behaviour is (currently) only found on marksman rifles and snipers.
+    </p>
+    <h3 style="text-align: center;">Increased damage areas:</h3>
+    <div style="display: flex; justify-content: center; margin-top: 1rem;">
+        <div style="display: flex; flex-direction: column; align-items: center; margin-right: 4rem;">
+            <p style="text-align: center;">M44 + marksman rifles</p>
+            <img src="images/m44.png" height="255" width="152" />
+        </div>
+        <div style="display: flex; flex-direction:column; align-items: center;">
+            <p style="text-align: center;">TAC-50</p>
+            <img src="images/tac-50.png" height="255" width="152"/>
+        </div>
     </div>
-</div>
 
-<h1 style="text-align: center; margin-top: 2rem;">WIP...</h1>
\ No newline at end of file
+    <h1 style="margin-top: 2rem">The stats displayed on this page</h1>
+    <h2>Damage</h2>
+    <p>
+        This graph displays the damage to the body that the selected weapon does (Base Damage),
+        as well as the damage the weapon(s) deal when hitting the head (Crit Damage).
+    </p>
+    <p>
+        The damage graph does not (yet?) include the increased damage marksman rifles deal to the upper body, which is explained in more detail above.
+    </p>
+    <p>
+        Both graphs can be toggled on or off via the buttons at the bottom of the page.
+    </p>
+    <h2 style="border:none; margin-bottom: 0;">STK - Shots To Kill</h2>
+    <h2>TTK - Time To Kill</h2>
+    <p>
+        These graphs display the amount of shots it takes for the selected weapon(s) to kill a target, and the time it takes, using the weapons default firerate.
+    </p>
+    <ul>
+        <li>Base STK/TTK: Bodyshots only vs 100hp target</li>
+        <li>Base Phantom STK/TTK: Bodyshots only vs 120hp target</li>
+        <li>Optimal STK/TTK: Headshots only vs 100hp target</li>
+        <li>Optimal Phantom STK/TTK: Headshots only vs 120hp target</li>
+    </ul>
+    <p>
+        Each graph can again be toggled on or off using the buttons at the bottom of the page.
+    </p>
+    <p>
+        When selecting a burst fire weapon the amount of shots it fires per burst will also be marked in the STK plot using dotted, horizontal lines.
+    </p>
+    <p>
+        The time it takes for a burst fire weapon to fully fire a burst is currently not included in the TTK calculation, this is planned to be included.
+    </p>
+
+    <h1>
+        Attachments and faction abilities
+    </h1>
+    <p>
+        I plan on adding the attachments that change range, damage and firerate as additional options to select,
+        but due to the UI getting a bit crowded already this might take a bit.
+    </p>
+    <p>
+        Similarly I also plan to include faction abilities that have an effect on the displayed stats (currently only Cleaners burn damage), 
+        in this case here the calculation gets a bit tricky, as the mechanics are a bit odd, with damage ticking 4 times on a single shot,
+        ticking 5 times on a burst, and ticking more often if there is sufficient delay between the shots.
+    </p>
+    <h1>
+        Other plans
+    </h1>
+    <p>
+        I want to also include a graph to view accuracy adjusted STK/TTK values, meaning how many shots you have to hit, 
+        if you only hit for example 30% headshots, and what the time to kill with this lower than optimal accuracy would be.
+        I already have the algorithm for this, as i did something similar before, 
+        I just need to figure out how to properly take the user input and display the graphs.
+    </p>
+
+    <h1 style="text-align: center; margin-top: 2rem;">WIP...</h1>
+</div>
\ No newline at end of file
diff --git a/XDefiantWeaponStats/wwwroot/index.html b/XDefiantWeaponStats/wwwroot/index.html
index bcd4a56..ee96f92 100644
--- a/XDefiantWeaponStats/wwwroot/index.html
+++ b/XDefiantWeaponStats/wwwroot/index.html
@@ -22,7 +22,7 @@
     <script type="text/javascript" src="//code.jquery.com/jquery-2.0.0.js"></script>
 </head>
 
-<body>
+<body style="max-width: none;">
     <div id="app" style="display: flex; flex-direction: column; height: calc(100vh - 64px)">
         <svg class="loading-progress">
             <circle r="40%" cx="50%" cy="50%" />