Zakaria/FancyWordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Version (Beta): login + leaderboard

Browse Source
This commit is contained in:
Zakaria
2026-05-12 19:00:46 -04:00
parent 3175a4dbf1
commit 66f8207985
10 changed files with 17132 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+67 -1
View File
@@ -10,7 +10,7 @@
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="word-data.js?v=5" defer></script>
<script src="supabase-config.js?v=1" defer></script>
<script src="script.js?v=6" defer></script>
<script src="script.js?v=7" defer></script>
</head>
<body>
<div class="app-shell">
@@ -30,6 +30,10 @@
<button class="icon-button" type="button" id="Stats-button" aria-label="Open stats and share" title="Stats and share">
<span aria-hidden="true">↗</span>
</button>
<button class="icon-button" type="button" id="leaderboard-button" aria-label="Open hourly leaderboard" title="Hourly leaderboard">
<span aria-hidden="true">♛</span>
</button>
<button class="auth-button" type="button" id="auth-button" aria-label="Sign in to sync stats">Sign in</button>
<a class="icon-button" href="https://www.youtube.com/watch?v=UkOKCWDJ4iA" target="_blank" rel="noopener noreferrer" aria-label="Open the original love note" title="Original love note">
<span aria-hidden="true">♡</span>
</a>
@@ -66,12 +70,74 @@
<button class="icon-button close-button" type="submit" aria-label="Close stats">×</button>
</div>
<div class="stats-grid" id="stats-grid"></div>
<div class="stats-note" id="stats-note"></div>
<div class="guess-bars" id="guess-bars" aria-label="Guess distribution"></div>
<div class="history-panel">
<h3>Recent history</h3>
<div class="history-list" id="history-list"></div>
</div>
<menu class="modal-actions">
<button type="button" class="button secondary" id="reset-stats">Reset stats</button>
<button type="button" class="button primary" id="share-results">Share result</button>
</menu>
</form>
</dialog>
<dialog class="stats-modal" id="leaderboard-modal" aria-labelledby="leaderboard-title">
<form method="dialog" class="stats-card leaderboard-card">
<div class="modal-head">
<div>
<p class="eyebrow">This hour</p>
<h2 id="leaderboard-title">Leaderboard</h2>
</div>
<button class="icon-button close-button" type="submit" aria-label="Close leaderboard">×</button>
</div>
<div class="leaderboard-tabs" role="tablist" aria-label="Leaderboard scope">
<button type="button" class="leaderboard-tab active" data-leaderboard-scope="hour">This Hour</button>
<button type="button" class="leaderboard-tab" data-leaderboard-scope="today">Today</button>
<button type="button" class="leaderboard-tab" data-leaderboard-scope="all">All Time</button>
</div>
<p class="leaderboard-countdown" id="leaderboard-countdown">Next word unlocks soon.</p>
<div class="leaderboard-list" id="leaderboard-list" aria-live="polite"></div>
</form>
</dialog>
<dialog class="stats-modal auth-modal" id="auth-modal" aria-labelledby="auth-title">
<form method="dialog" class="stats-card auth-card">
<div class="modal-head">
<div>
<p class="eyebrow">Account</p>
<h2 id="auth-title">Sign in</h2>
</div>
<button class="icon-button close-button" type="submit" aria-label="Close account">×</button>
</div>
<p class="auth-status" id="auth-status">Sign in with your email and password. If we cannot find your account, you can create one here.</p>
<div class="account-summary" id="account-summary" hidden></div>
<div id="auth-form" class="auth-form">
<label for="auth-email">Email address</label>
<input type="email" id="auth-email" autocomplete="email" placeholder="you@example.com">
<label for="auth-password">Password</label>
<input type="password" id="auth-password" autocomplete="current-password" placeholder="At least 6 characters" minlength="6">
<div class="auth-create-fields" id="auth-create-fields" hidden>
<label for="auth-username">Username</label>
<input type="text" id="auth-username" autocomplete="username" placeholder="wordsmith" maxlength="24">
</div>
<div class="auth-button-row">
<button type="button" class="button primary" id="auth-sign-in">Sign in</button>
<button type="button" class="button secondary" id="auth-sign-up" hidden>Create account</button>
</div>
<button type="button" class="link-button" id="auth-forgot-password">Forgot password?</button>
<div class="auth-reset-fields" id="auth-reset-fields" hidden>
<label for="auth-new-password">New password</label>
<input type="password" id="auth-new-password" autocomplete="new-password" placeholder="New password" minlength="6">
<button type="button" class="button secondary full-width" id="auth-update-password">Update password</button>
</div>
</div>
<menu class="modal-actions auth-actions">
<button type="button" class="button secondary" id="auth-guest">Continue as guest</button>
<button type="button" class="button secondary" id="auth-sign-out" hidden>Sign out</button>
</menu>
</form>
</dialog>
</body>
</html>