Add saved starter words for signed-in players

Players can save up to 3 favorite opening words and tap one to fill the
current row. Words are stored on profiles.starter_words and saved through
the set_starter_words RPC, which validates them against the dictionary.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Zakaria
2026-10-28 10:39:32 -04:00
parent e4d0d3b55c
commit 6daf3237e8
5 changed files with 427 additions and 4 deletions
+22 -2
View File
@@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f7efe6">
<title>Fancy Wordle</title>
<link rel="stylesheet" href="CSS/styles.css?v=9">
<link rel="stylesheet" href="CSS/styles.css?v=10">
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<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=11" defer></script>
<script src="script.js?v=13" defer></script>
</head>
<body class="intro-active dark-theme">
<section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
@@ -61,6 +61,26 @@
<p class="eyebrow">Hourly challenge</p>
<h1 id="game-title">Guess the word in six tries.</h1>
<p class="deck">Play one five-letter word per hour. Valid words reveal with smooth flips, warm feedback, confetti, sound, and a definition at the end.</p>
<aside class="starter-panel" id="starter-panel" aria-labelledby="starter-title" hidden>
<div class="starter-head">
<p class="eyebrow" id="starter-title">Starter words</p>
<button type="button" class="link-button" id="starter-edit">Edit</button>
</div>
<div class="starter-chips" id="starter-chips"></div>
<form class="starter-editor" id="starter-editor" hidden>
<div class="starter-inputs">
<input type="text" class="starter-input" aria-label="Starter word 1" maxlength="5" autocomplete="off" autocapitalize="characters" spellcheck="false">
<input type="text" class="starter-input" aria-label="Starter word 2" maxlength="5" autocomplete="off" autocapitalize="characters" spellcheck="false">
<input type="text" class="starter-input" aria-label="Starter word 3" maxlength="5" autocomplete="off" autocapitalize="characters" spellcheck="false">
</div>
<div class="starter-editor-actions">
<button type="button" class="button secondary" id="starter-cancel">Cancel</button>
<button type="submit" class="button primary" id="starter-save">Save</button>
</div>
</form>
<p class="starter-hint" id="starter-hint" aria-live="polite"></p>
</aside>
</section>
<section class="board-panel" aria-label="Wordle game board">