From a1dbdc5b43a4f3cac110b1fdfb7c3bef21e47e95 Mon Sep 17 00:00:00 2001
From: Ebo <ebo@ebomike.com>
Date: Sun, 24 Mar 2024 16:42:31 -0700
Subject: [PATCH] On mobile, show all columns but make the table scrollable.
 This is still a bit ugly, but it works.

---
 assets/html/game/laserball.html | 228 +++++++++++++++++---------------
 1 file changed, 125 insertions(+), 103 deletions(-)

diff --git a/assets/html/game/laserball.html b/assets/html/game/laserball.html
index e785adc..d305554 100644
--- a/assets/html/game/laserball.html
+++ b/assets/html/game/laserball.html
@@ -54,6 +54,18 @@
         background-color: #252525;
     }
 
+    tr:nth-child(even) > td:nth-child(1) {
+        background-color: #252525;
+    }
+
+    tr:nth-child(odd) > td:nth-child(1) {
+        background-color: #000000;
+    }
+
+    tr > th:nth-child(1) {
+        background-color: #000000;
+    }
+
     body {
         height: 130vh;
     }
@@ -102,22 +114,24 @@
 
         table {
             table-layout: auto;
+            width: 100%;
         }
 
-        table tr td:nth-child(n+9) {
-            display: none;
-        }
-        
-        table tr th:nth-child(n+9) {
-            display: none;
+        .fixed-column {
+            position: sticky;
+            z-index: 1;
+            left: 0px;
         }
 
-        table tr td:nth-child(2) {
-            display: none;
+        .outer-scrolling-table {
+            width: 100%;
         }
-        
-        table tr th:nth-child(2) {
-            display: none;
+
+        .inner-scrolling-table {
+            position: relative;
+            overflow: auto;
+            border: 1px solid black;
+            white-space: nowrap;
         }
 
         .team {
@@ -258,104 +272,112 @@
             <div id="fire_team" class="team">
                 <h2 style="font-size: 20px; color: orangered;" class="team_score">Fire Team: {{ fire_score }}</h2>
 
-                <table id="fire_table">
-                    <th><p>Codename</p></th>
-                    <th><p title="Score = (Goals + Assists) * 10000 + Steals * 100 + Blocks">Score</p></th>
-                    {% if game.ranked %}
-                        <th><p>Current Rating</p></th>
-                    {% endif %}
-                    <th><p>Goals</p></th>
-                    <th><p>Assists</p></th>
-                    <th><p>Steals</p></th>
-                    <th><p>Clears</p></th>
-                    <th><p>Passes</p></th>
-                    <th><p>Blocks</p></th>
-                    <th><p>Stolen</p></th>
-                    <th><p>Blocked</p></th>
-                    <th><p title="Goal = 1, Assist = 0.75, Steal = 0.5, Clear = 0.25, Block = 0.3">MVP Points</p></th>
-                    <th><p>Accuracy</p></th>
-                    <th><p>K/D</p></th>
-                    {% for entity in game.entity_starts %}
-                        {% if entity.type == "player" and entity.team.index == 0 %}
-                            {% set entity_end = get_entity_end(entity) %}
-                            {% set laserball_stats = get_laserballstats(entity) %}
-                            <tr>
-                                {% if entity.entity_id.startswith("@") %}
-                                    <td><p>{{ entity.name }}</p></td>
-                                    <td><p>{{ laserball_stats.score }}</p></td>
-                                {% else %}
-                                    <td><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></a></td>
-                                    <td><a href="/game/laserball/{{game.id}}/scorecard/{{entity_end.id}}">{{ laserball_stats.score }}</a></td>
+                <div class="outer-scrolling-table">
+                    <div class="inner-scrolling-table">
+                        <table id="fire_table">
+                            <th class="fixed-column"><p>Codename</p></th>
+                            <th><p title="Score = (Goals + Assists) * 10000 + Steals * 100 + Blocks">Score</p></th>
+                            {% if game.ranked %}
+                                <th><p>Current Rating</p></th>
+                            {% endif %}
+                            <th><p>Goals</p></th>
+                            <th><p>Assists</p></th>
+                            <th><p>Steals</p></th>
+                            <th><p>Clears</p></th>
+                            <th><p>Passes</p></th>
+                            <th><p>Blocks</p></th>
+                            <th><p>Stolen</p></th>
+                            <th><p>Blocked</p></th>
+                            <th><p title="Goal = 1, Assist = 0.75, Steal = 0.5, Clear = 0.25, Block = 0.3">MVP Points</p></th>
+                            <th><p>Accuracy</p></th>
+                            <th><p>K/D</p></th>
+                            {% for entity in game.entity_starts %}
+                                {% if entity.type == "player" and entity.team.index == 0 %}
+                                    {% set entity_end = get_entity_end(entity) %}
+                                    {% set laserball_stats = get_laserballstats(entity) %}
+                                    <tr>
+                                        {% if entity.entity_id.startswith("@") %}
+                                            <td class="fixed-column"><p>{{ entity.name }}</p></td>
+                                            <td><p>{{ laserball_stats.score }}</p></td>
+                                        {% else %}
+                                            <td class="fixed-column"><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></a></td>
+                                            <td><a href="/game/laserball/{{game.id}}/scorecard/{{entity_end.id}}">{{ laserball_stats.score }}</a></td>
+                                        {% endif %}
+                                        {% if entity_end.current_rating_mu and game.ranked %}
+                                            <td title="mu: {{ entity_end.current_rating_mu|round(2) }}, sigma: {{ entity_end.current_rating_sigma|round(2) }}">{{ (entity_end.current_rating_mu - 3 * entity_end.current_rating_sigma)|round(2) }}</td>
+                                        {% endif %}
+                                        <td><p>{{ laserball_stats.goals }}</p></td>
+                                        <td><p>{{ laserball_stats.assists }}</p></td>
+                                        <td><p>{{ laserball_stats.steals }}</p></td>
+                                        <td><p>{{ laserball_stats.clears }}</p></td>
+                                        <td><p>{{ laserball_stats.passes }}</p></td>
+                                        <td><p>{{ laserball_stats.blocks }}</p></td>
+                                        <td><p>{{ laserball_stats.times_stolen }}</p></td>
+                                        <td><p>{{ laserball_stats.times_blocked }}</p></td>
+                                        <td><p>{{ "%.2f" % (laserball_stats.mvp_points|round(2)) }}</p></td>
+                                        <td title="{{laserball_stats.shots_hit}}/{{laserball_stats.shots_fired}}"><p>{{ laserball_stats.shots_fired and "%.2f" % (((laserball_stats.shots_hit/laserball_stats.shots_fired)*100)|round(2)) }}%</p></td>
+                                        <td title="{{laserball_stats.blocks}}/{{laserball_stats.times_blocked}}"><p>{{  laserball_stats.times_blocked and "%.2f" % ((laserball_stats.blocks/laserball_stats.times_blocked) | round(2)) }}</p></td>
+                                    </tr>
                                 {% endif %}
-                                {% if entity_end.current_rating_mu and game.ranked %}
-                                    <td title="mu: {{ entity_end.current_rating_mu|round(2) }}, sigma: {{ entity_end.current_rating_sigma|round(2) }}">{{ (entity_end.current_rating_mu - 3 * entity_end.current_rating_sigma)|round(2) }}</td>
-                                {% endif %}
-                                <td><p>{{ laserball_stats.goals }}</p></td>
-                                <td><p>{{ laserball_stats.assists }}</p></td>
-                                <td><p>{{ laserball_stats.steals }}</p></td>
-                                <td><p>{{ laserball_stats.clears }}</p></td>
-                                <td><p>{{ laserball_stats.passes }}</p></td>
-                                <td><p>{{ laserball_stats.blocks }}</p></td>
-                                <td><p>{{ laserball_stats.times_stolen }}</p></td>
-                                <td><p>{{ laserball_stats.times_blocked }}</p></td>
-                                <td><p>{{ "%.2f" % (laserball_stats.mvp_points|round(2)) }}</p></td>
-                                <td title="{{laserball_stats.shots_hit}}/{{laserball_stats.shots_fired}}"><p>{{ laserball_stats.shots_fired and "%.2f" % (((laserball_stats.shots_hit/laserball_stats.shots_fired)*100)|round(2)) }}%</p></td>
-                                <td title="{{laserball_stats.blocks}}/{{laserball_stats.times_blocked}}"><p>{{  laserball_stats.times_blocked and "%.2f" % ((laserball_stats.blocks/laserball_stats.times_blocked) | round(2)) }}</p></td>
-                            </tr>
-                        {% endif %}
-                    {% endfor %}
-                </table>
+                            {% endfor %}
+                        </table>
+                    </div>
+                </div>
             </div>
             <div id="ice_team" class="team">
                 <h2 style="font-size: 20px; color: #0096FF;" class="team_score">Ice Team: {{ ice_score }}</h2>
 
-                <table id="ice_table">
-                    <th><p>Codename</p></th>
-                    <th><p title="Score = (Goals + Assists) * 10000 + Steals * 100 + Blocks">Score</p></th>
-                    {% if game.ranked %}
-                        <th><p>Current Rating</p></th>
-                    {% endif %}
-                    <th><p>Goals</p></th>
-                    <th><p>Assists</p></th>
-                    <th><p>Steals</p></th>
-                    <th><p>Clears</p></th>
-                    <th><p>Passes</p></th>
-                    <th><p>Blocks</p></th>
-                    <th><p>Stolen</p></th>
-                    <th><p>Blocked</p></th>
-                    <th><p title="Goal = 1, Assist = 0.75, Steal = 0.5, Clear = 0.25, Block = 0.3">MVP Points</p></th>
-                    <th><p>Accuracy</p></th>
-                    <th><p>K/D</p></th>
-                    {% for entity in game.entity_starts %}
-                        {% if entity.type == "player" and entity.team.index == 1 %}
-                            {% set entity_end = get_entity_end(entity) %}
-                            {% set laserball_stats = get_laserballstats(entity) %}
-                            <tr>
-                                {% if entity.entity_id.startswith("@") %}
-                                    <td><p>{{ entity.name }}</p></td>
-                                    <td><p>{{ laserball_stats.score }}</p></td>
-                                {% else %}
-                                    <td><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></a></td>
-                                    <td><a href="/game/laserball/{{game.id}}/scorecard/{{entity_end.id}}">{{ laserball_stats.score }}</a></td>
-                                {% endif %}
-                                {% if entity_end.current_rating_mu and game.ranked %}
-                                    <td title="mu: {{ entity_end.current_rating_mu|round(2) }}, sigma: {{ entity_end.current_rating_sigma|round(2) }}">{{ (entity_end.current_rating_mu - 3 * entity_end.current_rating_sigma)|round(2) }}</td>
+                <div class="outer-scrolling-table">
+                    <div class="inner-scrolling-table">
+                        <table id="ice_table">
+                            <th class="fixed-column"><p>Codename</p></th>
+                            <th><p title="Score = (Goals + Assists) * 10000 + Steals * 100 + Blocks">Score</p></th>
+                            {% if game.ranked %}
+                                <th><p>Current Rating</p></th>
+                            {% endif %}
+                            <th><p>Goals</p></th>
+                            <th><p>Assists</p></th>
+                            <th><p>Steals</p></th>
+                            <th><p>Clears</p></th>
+                            <th><p>Passes</p></th>
+                            <th><p>Blocks</p></th>
+                            <th><p>Stolen</p></th>
+                            <th><p>Blocked</p></th>
+                            <th><p title="Goal = 1, Assist = 0.75, Steal = 0.5, Clear = 0.25, Block = 0.3">MVP Points</p></th>
+                            <th><p>Accuracy</p></th>
+                            <th><p>K/D</p></th>
+                            {% for entity in game.entity_starts %}
+                                {% if entity.type == "player" and entity.team.index == 1 %}
+                                    {% set entity_end = get_entity_end(entity) %}
+                                    {% set laserball_stats = get_laserballstats(entity) %}
+                                    <tr>
+                                        {% if entity.entity_id.startswith("@") %}
+                                            <td class="fixed-column"><p>{{ entity.name }}</p></td>
+                                            <td><p>{{ laserball_stats.score }}</p></td>
+                                        {% else %}
+                                            <td class="fixed-column"><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></a></td>
+                                            <td><a href="/game/laserball/{{game.id}}/scorecard/{{entity_end.id}}">{{ laserball_stats.score }}</a></td>
+                                        {% endif %}
+                                        {% if entity_end.current_rating_mu and game.ranked %}
+                                            <td title="mu: {{ entity_end.current_rating_mu|round(2) }}, sigma: {{ entity_end.current_rating_sigma|round(2) }}">{{ (entity_end.current_rating_mu - 3 * entity_end.current_rating_sigma)|round(2) }}</td>
+                                        {% endif %}
+                                        <td><p>{{ laserball_stats.goals }}</p></td>
+                                        <td><p>{{ laserball_stats.assists }}</p></td>
+                                        <td><p>{{ laserball_stats.steals }}</p></td>
+                                        <td><p>{{ laserball_stats.clears }}</p></td>
+                                        <td><p>{{ laserball_stats.passes }}</p></td>
+                                        <td><p>{{ laserball_stats.blocks }}</p></td>
+                                        <td><p>{{ laserball_stats.times_stolen }}</p></td>
+                                        <td><p>{{ laserball_stats.times_blocked }}</p></td>
+                                        <td><p>{{ "%.2f" % (laserball_stats.mvp_points|round(2)) }}</p></td>
+                                        <td title="{{laserball_stats.shots_hit}}/{{laserball_stats.shots_fired}}"><p>{{ laserball_stats.shots_fired and "%.2f" % (((laserball_stats.shots_hit/laserball_stats.shots_fired)*100)|round(2)) }}%</p></td>
+                                        <td title="{{laserball_stats.blocks}}/{{laserball_stats.times_blocked}}"><p>{{ laserball_stats.times_blocked and  (laserball_stats.blocks/laserball_stats.times_blocked) | round(2) }}</p></td>
+                                    </tr>
                                 {% endif %}
-                                <td><p>{{ laserball_stats.goals }}</p></td>
-                                <td><p>{{ laserball_stats.assists }}</p></td>
-                                <td><p>{{ laserball_stats.steals }}</p></td>
-                                <td><p>{{ laserball_stats.clears }}</p></td>
-                                <td><p>{{ laserball_stats.passes }}</p></td>
-                                <td><p>{{ laserball_stats.blocks }}</p></td>
-                                <td><p>{{ laserball_stats.times_stolen }}</p></td>
-                                <td><p>{{ laserball_stats.times_blocked }}</p></td>
-                                <td><p>{{ "%.2f" % (laserball_stats.mvp_points|round(2)) }}</p></td>
-                                <td title="{{laserball_stats.shots_hit}}/{{laserball_stats.shots_fired}}"><p>{{ laserball_stats.shots_fired and "%.2f" % (((laserball_stats.shots_hit/laserball_stats.shots_fired)*100)|round(2)) }}%</p></td>
-                                <td title="{{laserball_stats.blocks}}/{{laserball_stats.times_blocked}}"><p>{{ laserball_stats.times_blocked and  (laserball_stats.blocks/laserball_stats.times_blocked) | round(2) }}</p></td>
-                            </tr>
-                        {% endif %}
-                    {% endfor %}
-                </table>
+                            {% endfor %}
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
         <div id="stats">