j.brandenburger/helldivers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: major redesign — ELO system, 4 practice modes, history view, mobile nav

Browse Source 
- 4 practice modes: Timed (SVG ring), Endless (3 lives), Category Drill, Speed Run
- Practice settings modal (timer duration, difficulty) with localStorage persistence
- History view: paginated table, SVG score chart, best-times-per-stratagem
- ELO rating system with server-side K=32 calculation and rank tiers PRIVATE–GENERAL
- Post-match result modal with ELO delta and round history
- Challenge modal showing challenger name + ELO (replaces toast)
- Dashboard hero card with ELO rank icon and daily sequence preview
- Leaderboard tabs: Practice Score / ELO / Speed Run
- Mobile hamburger nav drawer with slide-in animation
- DB migration: elo column, mode column, stratagem_stats table
- WS lobby-update now sends {name, elo, rank} objects
- View fade transitions, danger vignette at ≤5s, streak fire glow, combo badge
- Esc/Enter keyboard shortcuts for modals and practice
This commit is contained in:
Jeremy Brandenburger
2026-03-30 18:31:46 +02:00
parent 7de283a8e1
commit 0d971745a6
5 changed files with 1226 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+17 -17
View File
@@ -26,7 +26,7 @@
</div>
<div class="nav-user">
<span class="nav-username" id="nav-username"></span>
<button class="btn btn-muted btn-sm" onclick="logout()">Logout</button>
<button class="btn btn-muted btn-sm" id="btn-logout">Logout</button>
</div>
</nav>
@@ -122,7 +122,7 @@
<div class="daily-best">
Best time: <span id="dash-daily-best">—</span>
</div>
<button class="btn btn-accent" onclick="startDailyChallenge()">Practice this stratagem</button>
<button class="btn btn-accent" id="btn-daily-challenge">Practice this stratagem</button>
</div>
</div>
@@ -161,7 +161,7 @@
<!-- Idle (start screen) -->
<div id="practice-idle" class="practice-idle">
<div class="idle-hint">Select categories above, then start training</div>
<button class="btn btn-accent btn-lg" onclick="startPractice()">⚡ START TRAINING</button>
<button class="btn btn-accent btn-lg" id="btn-start-practice">⚡ START TRAINING</button>
</div>
<!-- Active training -->
@@ -189,21 +189,21 @@
</div>
<!-- D-Pad (mobile) -->
<div class="dpad">
<div class="dpad" id="practice-dpad">
<div class="dpad-row">
<button class="dpad-btn dpad-up" onclick="dpadInput('up')">↑</button>
<button class="dpad-btn dpad-up" data-dir="up">↑</button>
</div>
<div class="dpad-row">
<button class="dpad-btn dpad-left" onclick="dpadInput('left')">←</button>
<button class="dpad-btn dpad-left" data-dir="left">←</button>
<div class="dpad-center"></div>
<button class="dpad-btn dpad-right" onclick="dpadInput('right')">→</button>
<button class="dpad-btn dpad-right" data-dir="right">→</button>
</div>
<div class="dpad-row">
<button class="dpad-btn dpad-down" onclick="dpadInput('down')">↓</button>
<button class="dpad-btn dpad-down" data-dir="down">↓</button>
</div>
</div>
<button class="btn btn-muted" onclick="stopPracticeUI()">Stop Training</button>
<button class="btn btn-muted" id="btn-stop-practice">Stop Training</button>
</div>
</div>
@@ -257,24 +257,24 @@
</div>
</div>
<!-- D-Pad (mobile) -->
<div class="dpad">
<div class="dpad" id="match-dpad">
<div class="dpad-row">
<button class="dpad-btn dpad-up" onclick="dpadInput('up')">↑</button>
<button class="dpad-btn dpad-up" data-dir="up">↑</button>
</div>
<div class="dpad-row">
<button class="dpad-btn dpad-left" onclick="dpadInput('left')">←</button>
<button class="dpad-btn dpad-left" data-dir="left">←</button>
<div class="dpad-center"></div>
<button class="dpad-btn dpad-right" onclick="dpadInput('right')">→</button>
<button class="dpad-btn dpad-right" data-dir="right">→</button>
</div>
<div class="dpad-row">
<button class="dpad-btn dpad-down" onclick="dpadInput('down')">↓</button>
<button class="dpad-btn dpad-down" data-dir="down">↓</button>
</div>
</div>
</div>
<div class="match-actions">
<button class="btn btn-accent hidden" id="match-ready-btn" onclick="setReady()">READY</button>
<button class="btn btn-muted btn-sm" onclick="leaveMatch()">Leave Match</button>
<button class="btn btn-accent hidden" id="match-ready-btn">READY</button>
<button class="btn btn-muted btn-sm" id="btn-leave-match">Leave Match</button>
</div>
</div>
@@ -325,7 +325,7 @@
</select>
</div>
<p id="admin-error" class="error hidden"></p>
<button class="btn btn-accent" onclick="createUser()">Create User</button>
<button class="btn btn-accent" id="btn-create-user">Create User</button>
<div id="new-pw-display" class="pw-display hidden"></div>
</div>