Polish share page hierarchy and styling.
Align /play colors with main (green accents), simplify copy and metadata, reduce timestamp prominence, and improve title cleaning to avoid filename-like artifacts with optional artist subline.
This commit is contained in:
b1rdmania
@@ -4,11 +4,11 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
<title>Check out this Gameboy tune — MOTIF</title>
|
||||
<meta name="description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
|
||||
<meta name="description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
|
||||
|
||||
<!-- OpenGraph / Social Media Preview -->
|
||||
<meta property="og:title" content="Check out this Gameboy tune" />
|
||||
<meta property="og:description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
|
||||
<meta property="og:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
|
||||
<meta property="og:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
@@ -18,7 +18,7 @@
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Check out this Gameboy tune" />
|
||||
<meta name="twitter:description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
|
||||
<meta name="twitter:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
|
||||
<meta name="twitter:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
|
||||
<style>
|
||||
:root {
|
||||
@@ -140,22 +140,22 @@
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--color-accent-secondary);
|
||||
background: var(--color-accent-primary);
|
||||
color: #000;
|
||||
border-color: rgba(255, 170, 68, 0.6);
|
||||
border-color: rgba(0, 255, 136, 0.55);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
button.primary:hover:not(:disabled) {
|
||||
box-shadow: var(--glow-secondary), var(--shadow-md);
|
||||
box-shadow: var(--glow-primary), var(--shadow-md);
|
||||
}
|
||||
|
||||
.motif-stage {
|
||||
background: var(--color-surface-elevated);
|
||||
padding: calc(var(--spacing-unit) * 3);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(255, 170, 68, 0.2);
|
||||
box-shadow: var(--shadow-lg), var(--glow-secondary);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.motif-grid {
|
||||
@@ -222,7 +222,7 @@
|
||||
.progress-container {
|
||||
margin-top: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 170, 68, 0.15);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -231,7 +231,11 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.85em;
|
||||
color: #8f8f8f;
|
||||
color: rgba(255,255,255,0.22);
|
||||
transition: color 120ms ease;
|
||||
}
|
||||
.progress-time.active {
|
||||
color: rgba(255,255,255,0.55);
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
@@ -267,9 +271,9 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent-secondary);
|
||||
background: var(--color-accent-primary);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm);
|
||||
margin-top: -7px;
|
||||
transition: transform 100ms ease;
|
||||
}
|
||||
@@ -288,10 +292,10 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent-secondary);
|
||||
background: var(--color-accent-primary);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
@@ -300,41 +304,59 @@
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, var(--color-accent-secondary), rgba(255, 170, 68, 0.5));
|
||||
background: linear-gradient(90deg, rgba(0,255,136,0.95), rgba(0,255,136,0.45));
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
width: 0%;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.meta-block {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.58);
|
||||
line-height: 1.45;
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
.volume-row {
|
||||
margin-top: 14px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.volume-row label {
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="motif-stage" style="border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg);">
|
||||
<div class="motif-stage">
|
||||
<div class="motif-grid" style="gap: 14px;">
|
||||
<!-- 1. Source Song Title -->
|
||||
<h1 id="songTitle" style="margin:0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--color-text); letter-spacing: 0.01em;">
|
||||
Loading…
|
||||
</h1>
|
||||
<div id="songArtist" style="display:none; margin-top: -4px; font-size: 14px; color: rgba(255,255,255,0.62);"></div>
|
||||
|
||||
<!-- 2. Transformation Description -->
|
||||
<p id="transformLine" style="margin:0; color: rgba(255,255,255,0.72); font-size: 14px;">
|
||||
Re-synthesised as NES-era chiptune using Motif
|
||||
Reimagined as classic game-console music
|
||||
</p>
|
||||
|
||||
<!-- 3. Single Play/Pause Control -->
|
||||
<div style="display:flex; justify-content:center; margin-top: 6px;">
|
||||
<button id="playToggleBtn" class="primary" disabled style="min-width: 220px; padding: 14px 18px; font-size: 15px;">
|
||||
<div style="display:flex; justify-content:center; margin-top: 16px; margin-bottom: 16px;">
|
||||
<button id="playToggleBtn" class="primary" disabled style="min-width: 240px; padding: 14px 18px; font-size: 15px;">
|
||||
Play
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 4. Progress Bar -->
|
||||
<div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
<div class="progress-time">
|
||||
<div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px;">
|
||||
<div class="progress-time" id="playTimeRow">
|
||||
<span id="playCurrentTime">0:00</span>
|
||||
<span id="playDuration">0:00</span>
|
||||
<span id="playDuration"></span>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper" style="padding: 10px 0;">
|
||||
<input id="playProgressBar" class="progress-bar" type="range" min="0" max="100" value="0" step="0.1" />
|
||||
@@ -342,25 +364,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. Status Text Replacement (static, non-interactive) -->
|
||||
<div style="margin-top: 2px; font-size: 13px; color: rgba(255,255,255,0.72);">
|
||||
Procedural playback · No samples · Deterministic
|
||||
</div>
|
||||
|
||||
<!-- 6. Minimal metadata line (secondary, low contrast) -->
|
||||
<div style="font-size: 12px; color: rgba(255,255,255,0.52); display:flex; gap: 14px; flex-wrap: wrap;">
|
||||
<span>Engine: Wario (Game Boy / NES)</span>
|
||||
<span>Source: MIDI structure</span>
|
||||
<!-- 5/6. Metadata (quiet block) -->
|
||||
<div class="meta-block" id="metaBlock">
|
||||
Procedural playback from MIDI structure.<br />
|
||||
Rendered using Motif’s Wario game-console engine.
|
||||
</div>
|
||||
|
||||
<!-- Optional volume (acceptable) -->
|
||||
<div class="volume-control" style="min-width: 0; margin-top: 4px; opacity: 0.85;">
|
||||
<div class="volume-control volume-row" style="min-width: 0;">
|
||||
<label for="volume" style="min-width: auto;">Volume</label>
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.7" />
|
||||
</div>
|
||||
|
||||
<!-- 7. Primary CTA (single) -->
|
||||
<div style="margin-top: 10px;">
|
||||
<div style="margin-top: 18px;">
|
||||
<a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;">
|
||||
Generate your own →
|
||||
</a>
|
||||
|
||||
+86
-22
@@ -55,32 +55,78 @@ function cleanLooseTitle(raw: string): string {
|
||||
.trim();
|
||||
}
|
||||
|
||||
function formatDisplayTitle(raw: string): { display: string; prefill: string } {
|
||||
function stripJunkTokens(s: string): string {
|
||||
const tokens = (s || '').split(/\s+/g).filter(Boolean);
|
||||
const drop = new Set(['MID', 'MIDI', 'K']);
|
||||
const out: string[] = [];
|
||||
for (const t of tokens) {
|
||||
const up = t.toUpperCase();
|
||||
if (drop.has(up)) continue;
|
||||
// drop single-letter suffix tokens (common filename artefacts)
|
||||
if (/^[A-Z]$/i.test(t)) continue;
|
||||
out.push(t);
|
||||
}
|
||||
return out.join(' ');
|
||||
}
|
||||
|
||||
function scoreTitleLike(part: string): number {
|
||||
const words = (part || '').split(/\s+/g).filter(Boolean);
|
||||
let score = 0;
|
||||
for (const w of words) {
|
||||
const isCaps = w.length >= 3 && w === w.toUpperCase() && /[A-Z]/.test(w);
|
||||
const isWordy = w.length >= 3;
|
||||
if (isWordy && !isCaps) score += 2;
|
||||
if (isCaps) score -= 2;
|
||||
if (w.length === 1) score -= 1;
|
||||
}
|
||||
score += Math.min(6, words.length);
|
||||
return score;
|
||||
}
|
||||
|
||||
function splitOnSeparators(raw: string): string[] {
|
||||
const normalized = (raw || '')
|
||||
.replace(/[–—]/g, '-') // normalize en/em-dash to hyphen
|
||||
.replace(/\s*-\s*/g, ' - ');
|
||||
return normalized
|
||||
.split(/\s+-\s+/g)
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function pickShareTitle(raw: string): { title: string; artist: string | null; prefill: string } {
|
||||
const cleaned = cleanLooseTitle(raw);
|
||||
// If we have common separators "Artist - Title" or "Artist — Title", invert to "Title — Artist"
|
||||
const sepMatch = cleaned.match(/^(.+?)\s*(?:—|-)\s*(.+)$/);
|
||||
if (sepMatch) {
|
||||
const left = titleCase(sepMatch[1].trim());
|
||||
const right = titleCase(sepMatch[2].trim());
|
||||
// Heuristic: if left looks like an artist, invert (most common file naming)
|
||||
const display = `${right} — ${left}`;
|
||||
return { display, prefill: `${right} ${left}`.trim() };
|
||||
const parts = splitOnSeparators(cleaned);
|
||||
|
||||
// Default: use best-looking part and avoid guessing artist unless very confident.
|
||||
let chosen = cleaned;
|
||||
let artist: string | null = null;
|
||||
|
||||
if (parts.length >= 2) {
|
||||
const a = parts[0];
|
||||
const b = parts.slice(1).join(' - ');
|
||||
const scoreA = scoreTitleLike(a);
|
||||
const scoreB = scoreTitleLike(b);
|
||||
chosen = scoreB > scoreA ? b : a;
|
||||
if (scoreA === scoreB) chosen = b; // default to "Artist - Title" pattern
|
||||
|
||||
// Only show artist if the other side looks confidently like a human name/titlecase.
|
||||
const other = chosen === a ? b : a;
|
||||
const otherTC = titleCase(stripJunkTokens(other));
|
||||
const chosenTC = titleCase(stripJunkTokens(chosen));
|
||||
const looksLikeName = otherTC.split(/\s+/).length >= 2 && otherTC !== otherTC.toUpperCase();
|
||||
if (looksLikeName && chosenTC && chosenTC.length >= 3) {
|
||||
// Only accept if other isn't screaming filename (no digits, no extensions)
|
||||
if (!/[0-9]/.test(otherTC)) artist = otherTC;
|
||||
}
|
||||
}
|
||||
|
||||
// Dot-prefix heuristic: "ARTIST.Title" becomes "Title — Artist"
|
||||
const dotPrefix = raw.match(/^([A-Za-z]{2,20})[._\s]+(.+)$/);
|
||||
if (dotPrefix && dotPrefix[1] && dotPrefix[2]) {
|
||||
const artist = titleCase(cleanLooseTitle(dotPrefix[1]));
|
||||
const title = titleCase(cleanLooseTitle(dotPrefix[2]));
|
||||
if (artist && title) return { display: `${title} — ${artist}`, prefill: `${title} ${artist}`.trim() };
|
||||
}
|
||||
|
||||
const t = titleCase(cleaned || 'Shared Motif');
|
||||
return { display: t, prefill: t };
|
||||
const title = titleCase(stripJunkTokens(chosen)).trim();
|
||||
return { title: title || 'Shared Motif', artist, prefill: title || cleaned || 'Shared Motif' };
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
const titleEl = qs('songTitle');
|
||||
const artistEl = qs('songArtist');
|
||||
const playBtn = qs('playToggleBtn') as HTMLButtonElement;
|
||||
const volumeEl = qs('volume') as HTMLInputElement;
|
||||
const generateOwn = qs('generateOwn') as HTMLAnchorElement;
|
||||
@@ -89,14 +135,21 @@ async function main(): Promise<void> {
|
||||
const progressFill = qs('playProgressFill') as HTMLElement;
|
||||
const currentTimeEl = qs('playCurrentTime') as HTMLElement;
|
||||
const durationEl = qs('playDuration') as HTMLElement;
|
||||
const timeRow = qs('playTimeRow') as HTMLElement;
|
||||
|
||||
const { midiUrl: u, title } = buildMidiUrlFromParams();
|
||||
|
||||
const formatted = formatDisplayTitle(title);
|
||||
titleEl.textContent = formatted.display;
|
||||
const picked = pickShareTitle(title);
|
||||
titleEl.textContent = picked.title;
|
||||
if (picked.artist) {
|
||||
artistEl.textContent = picked.artist;
|
||||
(artistEl as HTMLElement).style.display = 'block';
|
||||
} else {
|
||||
(artistEl as HTMLElement).style.display = 'none';
|
||||
}
|
||||
|
||||
// Set CTA back to home, prefilling search if we have a title.
|
||||
generateOwn.href = formatted.prefill ? `/?song=${encodeURIComponent(formatted.prefill)}` : '/';
|
||||
generateOwn.href = picked.prefill ? `/?song=${encodeURIComponent(picked.prefill)}` : '/';
|
||||
|
||||
if (!u) {
|
||||
playBtn.disabled = true;
|
||||
@@ -113,6 +166,7 @@ async function main(): Promise<void> {
|
||||
let resumeProgress = 0;
|
||||
let playStartMs: number | null = null; // performance.now() at audio time=0 (minus offset)
|
||||
let playOffsetSec = 0; // last known playback position in seconds
|
||||
let timeRowTimeout: number | null = null;
|
||||
|
||||
try {
|
||||
const buf = await midiService.fetchMIDI(u);
|
||||
@@ -163,6 +217,12 @@ async function main(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
function showTimeRow(): void {
|
||||
timeRow.classList.add('active');
|
||||
if (timeRowTimeout) window.clearTimeout(timeRowTimeout);
|
||||
timeRowTimeout = window.setTimeout(() => timeRow.classList.remove('active'), 900);
|
||||
}
|
||||
|
||||
function startProgressUpdates(): void {
|
||||
stopProgressUpdates();
|
||||
progressInterval = window.setInterval(updateProgress, 100);
|
||||
@@ -181,6 +241,7 @@ async function main(): Promise<void> {
|
||||
});
|
||||
|
||||
const seekHandler = (e: Event) => {
|
||||
showTimeRow();
|
||||
const p = Number.parseFloat((e.target as HTMLInputElement).value) / 100;
|
||||
if (!isGenerated) {
|
||||
resumeProgress = p;
|
||||
@@ -208,6 +269,7 @@ async function main(): Promise<void> {
|
||||
|
||||
// Pause (implemented as stop + remembered position)
|
||||
if (isPlaying) {
|
||||
showTimeRow();
|
||||
const current = getLocalCurrentTime();
|
||||
resumeProgress = durationSec > 0 ? current / durationSec : 0;
|
||||
playOffsetSec = current;
|
||||
@@ -234,6 +296,7 @@ async function main(): Promise<void> {
|
||||
isGenerated = true;
|
||||
// If user scrubbed before play, carry that into seconds now that we know duration.
|
||||
playOffsetSec = resumeProgress * durationSec;
|
||||
showTimeRow();
|
||||
}
|
||||
|
||||
setUiPlaying(true);
|
||||
@@ -246,6 +309,7 @@ async function main(): Promise<void> {
|
||||
// Local progress tracking
|
||||
playStartMs = performance.now() - playOffsetSec * 1000;
|
||||
startProgressUpdates();
|
||||
showTimeRow();
|
||||
} catch (e) {
|
||||
setUiPlaying(false);
|
||||
playStartMs = null;
|
||||
|
||||
Reference in New Issue
Block a user