joshpatra/maisie-heardle
1
0
Fork 0
mirror of https://github.com/SoPat712/maisie-heardle.git synced 2025-08-21 18:28:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Colors cleaner, fixed dropdown, new design, etc

Browse Source
This commit is contained in:
Josh Patra
2025-04-20 01:37:16 -04:00
parent 9ad4dfded1
commit e0bf332de9
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/HeardleGame.svelte
View File

@@ -18,7 +18,7 @@
const COLORS = { const COLORS = {
background: '#ffffff', background: '#ffffff',
text: '#050315', text: '#121212',
primary: '#83D4FD', primary: '#83D4FD',
secondary: '#F484C1', secondary: '#F484C1',
accent: '#F0440E' accent: '#F0440E'
@@ -245,14 +245,12 @@
if (!gameOver) { if (!gameOver) {
snippetTimeout = setTimeout(() => { snippetTimeout = setTimeout(() => {
widget.pause(); widget.pause();
// snap exactly to the end of this snippet
currentPosition = segmentDurations[attemptCount]; currentPosition = segmentDurations[attemptCount];
}, segmentDurations[attemptCount]); }, segmentDurations[attemptCount]);
} }
}); });
widget.bind(SC.Widget.Events.PAUSE, stopAllTimers); widget.bind(SC.Widget.Events.PAUSE, stopAllTimers);
widget.bind(SC.Widget.Events.FINISH, () => { widget.bind(SC.Widget.Events.FINISH, () => {
// ensure we hit the very end
currentPosition = gameOver ? fullDuration : segmentDurations[attemptCount]; currentPosition = gameOver ? fullDuration : segmentDurations[attemptCount];
stopAllTimers(); stopAllTimers();
}); });
@@ -309,7 +307,6 @@
if (selectedTrack.title.toLowerCase() === ans) { if (selectedTrack.title.toLowerCase() === ans) {
attemptInfos = [...attemptInfos, { status: 'correct', title: currentTrack.title }]; attemptInfos = [...attemptInfos, { status: 'correct', title: currentTrack.title }];
gameOver = true; gameOver = true;
// include try count in winning message
message = `✅ Correct! It was “${currentTrack.title}.” You got it in ${attemptCount} ${attemptCount === 1 ? 'try' : 'tries'}.`; message = `✅ Correct! It was “${currentTrack.title}.” You got it in ${attemptCount} ${attemptCount === 1 ? 'try' : 'tries'}.`;
widget.pause(); widget.pause();
} else { } else {
@@ -343,10 +340,9 @@
userInput = s.title; userInput = s.title;
suggestions = []; suggestions = [];
inputEl.blur(); inputEl.blur();
window.scrollTo({ top: 0, behavior: 'smooth' });
} }
// update suggestions reactively, but hide once a track is selected // update suggestions reactively, hide once a track is selected
$: suggestions = $: suggestions =
userInput && !selectedTrack userInput && !selectedTrack
? tracks.filter((t) => t.title.toLowerCase().includes(userInput.toLowerCase())).slice(0, 5) ? tracks.filter((t) => t.title.toLowerCase().includes(userInput.toLowerCase())).slice(0, 5)
@@ -427,9 +423,10 @@
Heardle – {ARTIST_NAME} Heardle – {ARTIST_NAME}
</h1> </h1>
<button on:click={() => (showHowTo = true)}> <button on:click={() => (showHowTo = true)}>
<Icon src={QuestionMarkCircle} class="h-6 w-6" style="color:{COLORS.accent}" /> <Icon src={QuestionMarkCircle} class="h-6 w-6" style="color:{COLORS.secondary}" />
</button> </button>
</div> </div>
<hr class="mx-4 my-3" style="border-color:{darkMode ? COLORS.background : COLORS.text}" /> <hr class="mx-4 my-3" style="border-color:{darkMode ? COLORS.background : COLORS.text}" />
<!-- Attempts --> <!-- Attempts -->
@@ -506,7 +503,7 @@
> >
<div <div
class="absolute top-0 left-0 h-full transition-[width] duration-100" class="absolute top-0 left-0 h-full transition-[width] duration-100"
style="width:{fillPercent}%;background:{COLORS.primary}" style="width:{fillPercent}%;background:{COLORS.accent}"
></div> ></div>
{#if !gameOver} {#if !gameOver}
{#each boundaries as b} {#each boundaries as b}
@@ -529,9 +526,9 @@
<button <button
on:click={togglePlayPause} on:click={togglePlayPause}
class="flex h-16 w-16 items-center justify-center rounded-full border-2 disabled:opacity-50" class="flex h-16 w-16 items-center justify-center rounded-full border-2 disabled:opacity-50"
style="border-color:{COLORS.primary}" style="border-color:{COLORS.accent}"
> >
<Icon src={isPlaying ? Pause : Play} class="h-8 w-8" style="color:{COLORS.primary}" /> <Icon src={isPlaying ? Pause : Play} class="h-8 w-8" style="color:{COLORS.accent}" />
</button> </button>
</div> </div>
@@ -544,6 +541,9 @@
placeholder="Type song title…" placeholder="Type song title…"
bind:value={userInput} bind:value={userInput}
on:keydown={onInputKeydown} on:keydown={onInputKeydown}
on:focus={() => {
selectedTrack = null;
}}
class="w-full rounded border px-3 py-2" class="w-full rounded border px-3 py-2"
style="border-color:{COLORS.primary};background:{darkMode style="border-color:{COLORS.primary};background:{darkMode
? COLORS.text ? COLORS.text
@@ -587,7 +587,7 @@
<button <button
on:click={submitGuess} on:click={submitGuess}
class="rounded px-4 py-2 font-semibold" class="rounded px-4 py-2 font-semibold"
style="background:{COLORS.accent};color:{COLORS.background}" style="background:{COLORS.secondary};color:{COLORS.background}"
disabled={!selectedTrack} disabled={!selectedTrack}
> >
Submit Submit