From 71762c07f8146ae4e6cd3fadd7fd74be9d3d5b85 Mon Sep 17 00:00:00 2001 From: b1rdmania <102524336+b1rdmania@users.noreply.github.com> Date: Mon, 29 Dec 2025 12:38:37 +0000 Subject: [PATCH] Switch to light Game Boy palette and fix search/results UX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Flip from dark to light authentic Game Boy LCD palette - Update both main app (index.html) and share page (play.html) - Light background (#C8D8B0) with dark text (#1D2A1D) - Keep results interactive after selecting a song - Remove search locking so users can always search or pick different results 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- index.html | 303 ++++++++++++++++++++++++---------------------------- play.html | 91 ++++++++-------- src/main.ts | 16 +-- 3 files changed, 184 insertions(+), 226 deletions(-) diff --git a/index.html b/index.html index bd85cff..fb21356 100644 --- a/index.html +++ b/index.html @@ -29,29 +29,28 @@ @@ -1083,7 +1054,7 @@
Search for a song, then choose a source to use.
-
+
Some MIDI files work better than others. If the result sounds off, try another source.
diff --git a/play.html b/play.html index 508879a..d9fb6f3 100644 --- a/play.html +++ b/play.html @@ -28,18 +28,19 @@ diff --git a/src/main.ts b/src/main.ts index ae49d4c..70b6cb2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -16,7 +16,6 @@ class MotifApp { private searchBtn!: HTMLButtonElement; private songInput!: HTMLInputElement; private status!: HTMLElement; - private controlsEl!: HTMLElement; private resultsSection!: HTMLElement; private resultsBody!: HTMLElement; @@ -106,8 +105,7 @@ class MotifApp { this.searchBtn = document.getElementById('searchBtn') as HTMLButtonElement; this.songInput = document.getElementById('songInput') as HTMLInputElement; this.status = document.getElementById('status')!; - this.controlsEl = document.querySelector('.controls') as HTMLElement; - + this.resultsSection = document.getElementById('resultsSection')!; this.resultsBody = document.getElementById('resultsBody')!; this.playerSection = document.getElementById('playerSection')!; @@ -767,16 +765,10 @@ class MotifApp { this.copyLinkBtn.style.display = state === 'generated' ? 'inline-block' : 'none'; this.copyLinkBtn.disabled = !(state === 'generated' && this.hasGenerated); - // collapse results when selected/generated - this.resultsSection.classList.toggle('collapsed', state === 'selected'); + // Dim results when selected/generated, but keep them interactive + this.resultsSection.classList.toggle('collapsed', state === 'selected' || state === 'generated'); - // Keep search visible so you can scroll back up, but lock it during generated mode. - const lockSearch = state === 'generated'; - this.controlsEl.classList.toggle('locked', lockSearch); - this.songInput.disabled = lockSearch; - this.searchBtn.disabled = lockSearch; - // Keep status visible for layout continuity; just de-emphasize content in generated mode. - if (lockSearch) this.status.textContent = ''; + // Never lock search - users should always be able to search or pick different results // Selected pre-generation content const showPreGen = state === 'selected';