Heardle – Maisie Peters Edition

A daily “Heardle”‑style music‑guessing game built with SvelteKit, Tailwind CSS, and the SoundCloud Widget API. Each day, a 2‑second snippet of a Maisie Peters track is unlocked with skips and wrong guesses revealing longer segments until you either guess the song or run out of tries.

Made to be modifiable, so you can play this game for any artists you like!

---

Table of Contents

1. Demo
2. Features
3. Tech Stack
4. Getting Started
   • Prerequisites
   • Installation
   • Running Locally
   • Building for Production
   • Deploying to Netlify
5. Configuration
6. Project Structure
7. Contributing
8. License

---

Demo

See it in action:

https://maisie-peters-heardle.joshpatra.me'

---

Features

• 🎧 Daily Track: A new Maisie Peters song every day, chosen deterministically by date.
• ⏱ Progressive Snippets: Starts with a 2 s snippet, then 1 s, 2 s, 3 s, 4 s, and finally 5 s until the full track.
• ❌ Skips & Wrong Guesses: Skip to unlock the next snippet; wrong guesses also unlock more audio.
• ⏳ Countdown: Live countdown timer until the next daily track.
• 🌙 Dark Mode: Auto‑detects system preference and can be toggled manually.
• 💾 No Data Collection: No analytics or personal data stored.

---

Tech Stack

• SvelteKit
• Tailwind CSS
• SoundCloud Widget API
• Svelte Hero Icons
• Moment.js

---

Getting Started

Prerequisites

• Node.js v16+
• npm v8+

Installation

git clone https://github.com/joshpatra/maisie-peters-heardle.git
cd maisie-peters-heardle
npm install

Running Locally

npm run dev -- --open

Visit http://localhost:5173 in your browser. The game will load the SoundCloud widget and pre‑warm the daily snippet.

Building for Production

npm run build && npm run preview

Deploying to Netlify

1. Connect your Netlify project to a Git repository and connect to Netlify.
2. Use the below build settings:

---

Configuration

• Artist & User
  In src/lib/HeardleGame.svelte:

  const ARTIST_NAME = 'Maisie Peters';
  const SC_USER     = 'maisie-peters';
  

• Track List
  Edit const TRACKS_DATA: TrackData[] = [...] to add, remove, or comment out tracks. I'm putting together a way to make this easier, but it's still going to require a lot of manual labor to do.
• Segment Increments
  Adjust const SEGMENT_INCREMENTS = [2,1,2,3,4,5]; to change snippet lengths.

---

Project Structure

.
├── src
│   ├── lib
│   │   └── HeardleGame.svelte   # Main game component
│   ├── routes
│   │   ├── +layout.svelte       # App layout & global head
│   │   └── +page.svelte         # Root page slot
│   └── app.css                  # Tailwind imports & custom styles
├── netlify.toml                 # (Optional) Netlify configuration
├── package.json
└── README.md

---

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/YourFeature
3. Commit changes: git commit -m "Add awesome feature"
4. Push: git push origin feature/YourFeature
5. Open a Pull Request

---

License

This project is licensed under the GNU General Public License v3.0.