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

SC widget api preloaded?

Browse Source
This commit is contained in:
Josh Patra
2025-04-20 13:56:25 -04:00
parent d8a1068294
commit b619e6acb5
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/HeardleGame.svelte
View File

@@ -158,7 +158,7 @@
let iframeElement: HTMLIFrameElement; let iframeElement: HTMLIFrameElement;
let widget: any; let widget: any;
let widgetReady = false; let widgetReady = false;
let loading = true; // ← disable play until preload let loading = true; // ← stay disabled until probe finishes
let artworkUrl = ''; let artworkUrl = '';
let isPlaying = false; let isPlaying = false;
let currentPosition = 0; let currentPosition = 0;
@@ -225,23 +225,25 @@
} }
onMount(() => { onMount(() => {
// dark‑mode listener
window window
.matchMedia('(prefers-color-scheme: dark)') .matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => (darkMode = e.matches)); .addEventListener('change', (e) => (darkMode = e.matches));
// countdown
updateTime(); updateTime();
countdownInterval = setInterval(updateTime, 1000); countdownInterval = setInterval(updateTime, 1000);
// SoundCloud widget
widget = SC.Widget(iframeElement); widget = SC.Widget(iframeElement);
// bind READY right away, then “warm up” the widget after a short delay // bind READY immediately
widget.bind(SC.Widget.Events.READY, () => { widget.bind(SC.Widget.Events.READY, () => {
// grab duration & artwork
widget.getDuration((d: number) => (fullDuration = d)); widget.getDuration((d: number) => (fullDuration = d));
widget.getCurrentSound((sound: any) => { widget.getCurrentSound((sound: any) => {
artworkUrl = sound.artwork_url || ''; artworkUrl = sound.artwork_url || '';
}); });
// warm‑up probe after 1 s
// wait 2s for Netlify load, then probe
setTimeout(() => { setTimeout(() => {
widget.play(); widget.play();
widget.pause(); widget.pause();
@@ -308,24 +310,19 @@
} }
function submitGuess() { function submitGuess() {
if (!widgetReady || gameOver) return; if (!widgetReady || gameOver || !userInput) return;
if (!selectedTrack && suggestions.length) { if (!selectedTrack && suggestions.length) {
selectedTrack = selectedTrack =
suggestions.find((t) => t.title.toLowerCase() === userInput.toLowerCase()) || suggestions.find((t) => t.title.toLowerCase() === userInput.toLowerCase()) ||
suggestions[0]; suggestions[0];
} }
if (!selectedTrack) return; if (!selectedTrack) return;
attemptCount++; attemptCount++;
const ans = currentTrack.title.toLowerCase(); const ans = currentTrack.title.toLowerCase();
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;
message = `✅ Correct! It was “${currentTrack.title}.” You ${ message = `✅ Correct! It was “${currentTrack.title}.” You got it in ${attemptCount} ${attemptCount === 1 ? 'try' : 'tries'}.`;
attemptCount === maxAttempts
? 'nailed it on the last try!'
: `got it in ${attemptCount} ${attemptCount === 1 ? 'try' : 'tries'}.`
}`;
widget.pause(); widget.pause();
} else { } else {
attemptInfos = [...attemptInfos, { status: 'wrong', title: selectedTrack.title }]; attemptInfos = [...attemptInfos, { status: 'wrong', title: selectedTrack.title }];
@@ -361,6 +358,12 @@
: []; : [];
</script> </script>
<!-- src/lib/HeardleGame.svelte -->
<svelte:head>
<!-- always load the SC Widget API, even on Netlify -->
<script src="https://w.soundcloud.com/player/api.js" async defer></script>
</svelte:head>
<!-- How to Play Modal --> <!-- How to Play Modal -->
{#if showHowTo} {#if showHowTo}
<div class="fixed inset-0 z-50 flex items-center justify-center"> <div class="fixed inset-0 z-50 flex items-center justify-center">