Skip to content

Commit

Permalink
Merge pull request #28 from EboMike/scorecard
Browse files Browse the repository at this point in the history 
Make the SM5 game table scrollable.
  • Loading branch information
@spookybear0
spookybear0 authored Mar 26, 2024
2 parents 6850a47 + ed85564 commit 21cde26
Showing 1 changed file with 153 additions and 114 deletions.
267 changes: 153 additions & 114 deletions assets/html/game/sm5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,6 @@
max-width: 30%;
}

@media screen and (max-width: 1200px) {
table tr td:nth-child(n+11) {
display: none;
}

table tr th:nth-child(n+11) {
display: none;
}
}

@media screen and (max-width: 991px) {
.userlist {
background: none;
Expand All @@ -106,14 +96,54 @@

table {
table-layout: auto;
width: 100%;
}

table tr td:nth-child(n+6) {
display: none;
tr:nth-child(even) > td:nth-child(1) {
background-color: #252525;
}

table tr th:nth-child(n+6) {
display: none;

tr:nth-child(odd) > td:nth-child(1) {
background-color: #000000;
}

tr:nth-child(even) > td:nth-child(2) {
background-color: #252525;
}

tr:nth-child(odd) > td:nth-child(2) {
background-color: #000000;
}

tr > th:nth-child(1) {
background-color: #000000;
}

tr > th:nth-child(2) {
background-color: #000000;
}

.fixed-column {
position: sticky;
z-index: 1;
left: 0px;
}

.second-fixed-column {
position: sticky;
z-index: 1;
left: 75px;
}

.outer-scrolling-table {
width: 100%;
}

.inner-scrolling-table {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}

.team {
Expand All @@ -130,6 +160,7 @@

.role {
width: 75px;
min-width: 75px;
}

.desktop_notif {
Expand Down Expand Up @@ -246,111 +277,119 @@
<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 class="role"><p>Role</p></th>
<th><p>Codename</p></th>
{% if game.ranked %}
<th title="Current rating after game has been played"><p>Rating</p></th>
{% endif %}
<th><p>Score</p></th>
<th><p>Lives</p></th>
<th><p>Shots</p></th>
<th><p>Accuracy</p></th>
<th><p>K/D</p></th>
<th><p>Missiled Other</p></th>
<th><p>Missiled</p></th>
<th><p>Shot Team</p></th>
<th><p>Missiled Team</p></th>
<th><p>Medic Hits</p></th>
<th><a href="https://lfstats.com/pages/aboutSM5#:~:text=Lose%203%20lives-,MVP%20Points,-All%20Players" target="_blank"><p>MVP Points</p></a></th>
{% for entity in game.entity_starts %}
{% if entity.type == "player" and entity.team.index == 0 %}
{% set entity_end = get_entity_end(entity) %}
{% set sm5_stats = get_sm5stats(entity) %}

<tr>
<td style="width: 30px"><p><img src="/assets/sm5/roles/{{entity.role|string|lower}}.png" alt="role image" width="30" height="30"></p></td>
{% if entity.entity_id.startswith("@") %}
<td><p>{{ entity.name }}</p></td>
{% else %}
<td><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></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="fire_table">
<th class="role fixed-column"><p>Role</p></th>
<th class="second-fixed-column"><p>Codename</p></th>
{% if game.ranked %}
<th title="Current rating after game has been played"><p>Rating</p></th>
{% endif %}
<th><p>Score</p></th>
<th><p>Lives</p></th>
<th><p>Shots</p></th>
<th><p>Accuracy</p></th>
<th><p>K/D</p></th>
<th><p>Missiled Other</p></th>
<th><p>Missiled</p></th>
<th><p>Shot Team</p></th>
<th><p>Missiled Team</p></th>
<th><p>Medic Hits</p></th>
<th><a href="https://lfstats.com/pages/aboutSM5#:~:text=Lose%203%20lives-,MVP%20Points,-All%20Players" target="_blank"><p>MVP Points</p></a></th>
{% for entity in game.entity_starts %}
{% if entity.type == "player" and entity.team.index == 0 %}
{% set entity_end = get_entity_end(entity) %}
{% set sm5_stats = get_sm5stats(entity) %}

<tr>
<td class="role fixed-column" style="width: 30px"><p><img src="/assets/sm5/roles/{{entity.role|string|lower}}.png" alt="role image" width="30" height="30"></p></td>
{% if entity.entity_id.startswith("@") %}
<td class="second-fixed-column"><p>{{ entity.name }}</p></td>
{% else %}
<td class="second-fixed-column"><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></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 %}
{% if entity.entity_id.startswith("@") %}
<td>{{ entity_end.score }}</td>
{% else %}
<td title="Scorecard"><a href="/game/sm5/{{game.id}}/scorecard/{{entity_end.id}}">{{ entity_end.score }}</a></td>
{% endif %}
<td><p>{{ sm5_stats.lives_left }}</p></td>
<td><p>{{ sm5_stats.shots_left }}</p></td>
<td title="{{sm5_stats.shots_hit}}/{{sm5_stats.shots_fired}}"><p>{{ sm5_stats.shots_fired and "%.2f" % (((sm5_stats.shots_hit/sm5_stats.shots_fired)*100)|round(2)) }}%</p></td>
<td title="{{sm5_stats.shot_opponent}}/{{sm5_stats.times_zapped}}"><p>{{ sm5_stats.times_zapped and "%.2f" % ((sm5_stats.shot_opponent/sm5_stats.times_zapped)|round(2)) }}</p></td>
<td><p>{{ sm5_stats.missiled_opponent }}</p></td>
<td><p>{{ sm5_stats.times_missiled }}</p></td>
<td><p>{{ sm5_stats.shot_team }}</p></td>
<td><p>{{ sm5_stats.missiled_team }}</p></td>
<td><p>{{ sm5_stats.medic_hits }}</p></td>
<td><p>{{ "%.2f" % (sm5_stats.mvp_points()|round(2)) }}</p></td>
</tr>
{% endif %}
{% if entity.entity_id.startswith("@") %}
<td>{{ entity_end.score }}</td>
{% else %}
<td title="Scorecard"><a href="/game/sm5/{{game.id}}/scorecard/{{entity_end.id}}">{{ entity_end.score }}</a></td>
{% endif %}
<td><p>{{ sm5_stats.lives_left }}</p></td>
<td><p>{{ sm5_stats.shots_left }}</p></td>
<td title="{{sm5_stats.shots_hit}}/{{sm5_stats.shots_fired}}"><p>{{ sm5_stats.shots_fired and "%.2f" % (((sm5_stats.shots_hit/sm5_stats.shots_fired)*100)|round(2)) }}%</p></td>
<td title="{{sm5_stats.shot_opponent}}/{{sm5_stats.times_zapped}}"><p>{{ sm5_stats.times_zapped and "%.2f" % ((sm5_stats.shot_opponent/sm5_stats.times_zapped)|round(2)) }}</p></td>
<td><p>{{ sm5_stats.missiled_opponent }}</p></td>
<td><p>{{ sm5_stats.times_missiled }}</p></td>
<td><p>{{ sm5_stats.shot_team }}</p></td>
<td><p>{{ sm5_stats.missiled_team }}</p></td>
<td><p>{{ sm5_stats.medic_hits }}</p></td>
<td><p>{{ "%.2f" % (sm5_stats.mvp_points()|round(2)) }}</p></td>
</tr>
{% endif %}
{% endfor %}
</table>
{% endfor %}
</table>
</div>
</div>
</div>
<div id="earth_team" class="team">
<h2 style="font-size: 20px; color: greenyellow;" class="team_score">Earth Team: {{ earth_score }}</h2>

<table id="earth_table">
<th class="role"><p>Role</p></th>
<th><p>Codename</p></th>
{% if game.ranked %}
<th title="Current rating after game has been played"><p>Rating</p></th>
{% endif %}
<th><p>Score</p></th>
<th><p>Lives</p></th>
<th><p>Shots</p></th>
<th><p>Accuracy</p></th>
<th><p>K/D</p></th>
<th><p>Missiled Other</p></th>
<th><p>Missiled</p></th>
<th><p>Shot Team</p></th>
<th><p>Missiled Team</p></th>
<th><p>Medic Hits</p></th>
<th><a href="https://lfstats.com/pages/aboutSM5#:~:text=Lose%203%20lives-,MVP%20Points,-All%20Players" target="_blank"><p>MVP Points</p></a></th>
{% for entity in game.entity_starts %}
{% if entity.type == "player" and entity.team.index == 1 %}
{% set entity_end = get_entity_end(entity) %}
{% set sm5_stats = get_sm5stats(entity) %}
<tr>
<td><p><img src="/assets/sm5/roles/{{entity.role|string|lower}}.png" alt="role image" width="30" height="30"></p></td>
{% if entity.entity_id.startswith("@") %}
<td><p>{{ entity.name }}</p></td>
{% else %}
<td><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></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 %}
{% if entity.entity_id.startswith("@") %}
<td>{{ entity_end.score }}</td>
{% else %}
<td title="Scorecard"><a href="/game/sm5/{{game.id}}/scorecard/{{entity_end.id}}">{{ entity_end.score }}</a></td>
<div class="outer-scrolling-table">
<div class="inner-scrolling-table">
<table id="earth_table">
<th class="role fixed-column"><p>Role</p></th>
<th class="second-fixed-column"><p>Codename</p></th>
{% if game.ranked %}
<th title="Current rating after game has been played"><p>Rating</p></th>
{% endif %}
<th><p>Score</p></th>
<th><p>Lives</p></th>
<th><p>Shots</p></th>
<th><p>Accuracy</p></th>
<th><p>K/D</p></th>
<th><p>Missiled Other</p></th>
<th><p>Missiled</p></th>
<th><p>Shot Team</p></th>
<th><p>Missiled Team</p></th>
<th><p>Medic Hits</p></th>
<th><a href="https://lfstats.com/pages/aboutSM5#:~:text=Lose%203%20lives-,MVP%20Points,-All%20Players" target="_blank"><p>MVP Points</p></a></th>
{% for entity in game.entity_starts %}
{% if entity.type == "player" and entity.team.index == 1 %}
{% set entity_end = get_entity_end(entity) %}
{% set sm5_stats = get_sm5stats(entity) %}
<tr>
<td class="role fixed-column"><p><img src="/assets/sm5/roles/{{entity.role|string|lower}}.png" alt="role image" width="30" height="30"></p></td>
{% if entity.entity_id.startswith("@") %}
<td class="second-fixed-column"><p>{{ entity.name }}</p></td>
{% else %}
<td class="second-fixed-column"><a href="/player/{{entity.name}}"><p>{{ entity.name }}</p></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 %}
{% if entity.entity_id.startswith("@") %}
<td>{{ entity_end.score }}</td>
{% else %}
<td title="Scorecard"><a href="/game/sm5/{{game.id}}/scorecard/{{entity_end.id}}">{{ entity_end.score }}</a></td>
{% endif %}
<td><p>{{ sm5_stats.lives_left }}</p></td>
<td><p>{{ sm5_stats.shots_left }}</p></td>
<td title="{{sm5_stats.shots_hit}}/{{sm5_stats.shots_fired}}"><p>{{ sm5_stats.shots_fired and "%.2f" % (((sm5_stats.shots_hit/sm5_stats.shots_fired)*100)|round(2)) }}%</p></td>
<td title="{{sm5_stats.shot_opponent}}/{{sm5_stats.times_zapped}}"><p>{{ sm5_stats.times_zapped and "%.2f" % ((sm5_stats.shot_opponent/sm5_stats.times_zapped)|round(2)) }}</p></td>
<td><p>{{ sm5_stats.missiled_opponent }}</p></td>
<td><p>{{ sm5_stats.times_missiled }}</p></td>
<td><p>{{ sm5_stats.shot_team }}</p></td>
<td><p>{{ sm5_stats.missiled_team }}</p></td>
<td><p>{{ sm5_stats.medic_hits }}</p></td>
<td><p>{{ "%.2f" % (sm5_stats.mvp_points()|round(2)) }}</p></td>
</tr>
{% endif %}
<td><p>{{ sm5_stats.lives_left }}</p></td>
<td><p>{{ sm5_stats.shots_left }}</p></td>
<td title="{{sm5_stats.shots_hit}}/{{sm5_stats.shots_fired}}"><p>{{ sm5_stats.shots_fired and "%.2f" % (((sm5_stats.shots_hit/sm5_stats.shots_fired)*100)|round(2)) }}%</p></td>
<td title="{{sm5_stats.shot_opponent}}/{{sm5_stats.times_zapped}}"><p>{{ sm5_stats.times_zapped and "%.2f" % ((sm5_stats.shot_opponent/sm5_stats.times_zapped)|round(2)) }}</p></td>
<td><p>{{ sm5_stats.missiled_opponent }}</p></td>
<td><p>{{ sm5_stats.times_missiled }}</p></td>
<td><p>{{ sm5_stats.shot_team }}</p></td>
<td><p>{{ sm5_stats.missiled_team }}</p></td>
<td><p>{{ sm5_stats.medic_hits }}</p></td>
<td><p>{{ "%.2f" % (sm5_stats.mvp_points()|round(2)) }}</p></td>
</tr>
{% endif %}
{% endfor %}
</table>
{% endfor %}
</table>
</div>
</div>
</div>
</div>
<div id="stats">
Expand Down

0 comments on commit 21cde26

Please sign in to comment.