diff --git a/src/dataLoader.ts b/src/dataLoader.ts index 6d3ed38..e8a6d86 100644 --- a/src/dataLoader.ts +++ b/src/dataLoader.ts @@ -25,15 +25,15 @@ type GameMap = Record< } > -const songFiles = import.meta.globEager('./Data/*/*/Songs/*.mp3') as Record< - string, - { default: string } -> +const songFiles = { + ...import.meta.globEager('./Data/*/*/Songs/*.mp3'), + ...import.meta.globEager('./Data/*/*/songs/*.mp3') +} as Record -const answerFiles = import.meta.globEager('./Data/*/*/Answers/*.mp3') as Record< - string, - { default: string } -> +const answerFiles = { + ...import.meta.globEager('./Data/*/*/Answers/*.mp3'), + ...import.meta.globEager('./Data/*/*/answers/*.mp3') +} as Record const getParts = (path: string) => { const normalized = path.replace(/\\/g, '/') @@ -67,7 +67,9 @@ const addEntry = (target: GameMap, info: ReturnType, url: strin clues: [] } } - const bucket = type === 'Songs' ? 'songs' : 'answers' + const normalizedType = type?.toLowerCase() + if (normalizedType !== 'songs' && normalizedType !== 'answers') return + const bucket = normalizedType === 'songs' ? 'songs' : 'answers' target[game].categories[category][bucket][number] = url } diff --git a/src/styles.css b/src/styles.css index ab073d1..3f9b3b3 100644 --- a/src/styles.css +++ b/src/styles.css @@ -445,21 +445,41 @@ audio.hidden-audio { .pulse-rays { position: absolute; - inset: -10%; + inset: -5%; border-radius: 50%; background: - radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.45) 0%, transparent 45%), - radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.35) 0%, transparent 60%), - radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.25) 0%, transparent 72%), - radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.2) 0%, transparent 85%); - opacity: calc(0.15 + var(--ray, 0) * 0.7); - filter: blur(calc(10px - var(--ray, 0) * 3px)); - transform: scale(calc(0.95 + var(--ray, 0) * 0.7)); + radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.35) 0%, transparent 40%), + radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.25) 0%, transparent 55%), + radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.2) 0%, transparent 68%), + radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.16) 0%, transparent 80%), + radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 30%); + opacity: calc(0.18 + var(--ray, 0) * 0.65); + filter: blur(calc(10px - var(--ray, 0) * 4px)); + transform: scale(calc(0.85 + var(--ray, 0) * 0.9)); transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out; mix-blend-mode: screen; z-index: 1; } +.pulse-rays::before, +.pulse-rays::after { + content: ''; + position: absolute; + inset: 8%; + border-radius: 50%; + border: 2px solid hsla(var(--ray-hue, 200), 90%, 70%, 0.25); + opacity: calc(0.1 + var(--ray, 0) * 0.6); + transform: scale(calc(0.7 + var(--ray, 0) * 0.9)); + filter: blur(calc(2px + var(--ray, 0) * 2px)); +} + +.pulse-rays::after { + inset: 20%; + border-width: 3px; + opacity: calc(0.08 + var(--ray, 0) * 0.55); + transform: scale(calc(0.8 + var(--ray, 0) * 1.1)); +} + @keyframes pulseGlow { 0%,