Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191<!-- CreditsButton: A lilypad button in the bottom-left that opens a credits modal.--><script lang="ts"> import WavyBorder from './WavyBorder.svelte'; import { playCroak } from './croak';
let showModal = $state(false);
function open() { playCroak(); showModal = true; }
function close() { showModal = false; }
function onBackdropClick(e: MouseEvent) { if (e.target === e.currentTarget) close(); }
function onKeyDown(e: KeyboardEvent) { if (e.key === 'Escape') close(); }</script>
<svelte:window onkeydown={onKeyDown} />
<button class="credits-btn" onclick={open} title="Credits"> <img src="/lilymenu.svg" alt="Credits" class="lilypad-img" /> <span class="credits-label">credits</span></button>
{#if showModal} <!-- svelte-ignore a11y_no_static_element_interactions --> <div class="modal-backdrop" onclick={onBackdropClick}> <div class="modal-content"> <WavyBorder seed="credits-modal" fill="#39FF44" strokeColor="#0A182B" strokeWidth={2.5} padding={48}> <div class="credits-body"> <h2 class="credits-title">credits</h2>
<div class="credit-item"> <p class="credit-label">Frog Croaking</p> <p class="credit-author">by DrinkingWindGames</p> <a href="https://freesound.org/s/848549/" target="_blank" class="credit-link"> freesound.org/s/848549/ </a> <p class="credit-license">License: Attribution 4.0</p> </div>
<button class="close-btn" onclick={close}> close </button> </div> </WavyBorder> </div> </div>{/if}
<style> .credits-btn { all: unset; position: fixed; bottom: 16px; left: 16px; z-index: 100; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.credits-btn:hover { transform: scale(1.1) rotate(-5deg); }
@media (max-width: 600px) { .credits-btn { display: none; } }
.lilypad-img { width: clamp(70px, 10vw, 100px); height: auto; filter: drop-shadow(2px 3px 4px rgba(10, 24, 43, 0.3)); }
.credits-label { position: absolute; font-family: 'PicNic', cursive, system-ui; font-size: clamp(0.7rem, 1.2vw, 0.9rem); color: #0A182B; pointer-events: none; margin-top: 2px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 24, 43, 0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-content { width: min(500px, 90vw); }
.credits-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.credits-title { font-family: 'PicNic', cursive, system-ui; font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: #0A182B; margin: 0; }
.credit-item { display: flex; flex-direction: column; gap: 4px; }
.credit-label { font-family: 'PicNic', cursive, system-ui; font-size: 1.1rem; color: #0A182B; margin: 0; font-weight: bold; }
.credit-author { font-family: 'Fang', system-ui, sans-serif; font-size: 0.95rem; color: #0A182B; margin: 0; opacity: 0.8; }
.credit-link { font-family: 'Fang', system-ui, sans-serif; font-size: 0.9rem; color: #0A182B; text-decoration: underline; text-decoration-color: #FF3992; transition: color 0.15s; }
.credit-link:hover { color: #FF3992; }
.credit-license { font-family: 'Fang', system-ui, sans-serif; font-size: 0.8rem; color: #0A182B; opacity: 0.65; margin: 0; font-style: italic; }
.close-btn { all: unset; font-family: 'PicNic', cursive, system-ui; font-size: 1rem; color: #FFDEED; background: #0A182B; padding: 8px 28px; border-radius: 30px; cursor: pointer; margin-top: 8px; transition: transform 0.15s ease; }
.close-btn:hover { transform: scale(1.05); }</style>