From e633fbda58688436c4119d6866fce2c8d66ba019 Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Tue, 31 Mar 2026 14:17:23 -0700
Subject: [PATCH] add wavy oval login button in header, reduce fly spawn to
 10s-2min

---
 src/lib/FlySpawner.svelte  |   4 +-
 src/lib/FrogHeader.svelte  |  12 ++++
 src/lib/LoginButton.svelte | 123 +++++++++++++++++++++++++++++++++++++
 3 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/LoginButton.svelte

diff --git a/src/lib/FlySpawner.svelte b/src/lib/FlySpawner.svelte
index b5f9e8c..4191813 100644
--- a/src/lib/FlySpawner.svelte
+++ b/src/lib/FlySpawner.svelte
@@ -8,8 +8,8 @@
 	import { onMount, onDestroy } from 'svelte';
 
 	const MAX_FLIES = 5;
-	const MIN_SPAWN_MS = 1000;
-	const MAX_SPAWN_MS = 5000;
+	const MIN_SPAWN_MS = 10000;
+	const MAX_SPAWN_MS = 120000;
 
 	interface Fly {
 		id: number;
diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index 00ab6ee..c6cd382 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import LoginButton from './LoginButton.svelte';
+
 	let { onHomeClick }: { onHomeClick?: () => void } = $props();
 
 	function handleClick(e: MouseEvent) {
@@ -10,6 +12,9 @@
 </script>
 
 <header class="frog-header">
+	<div class="login-area">
+		<LoginButton onclick={() => { /* TODO: implement login */ }} />
+	</div>
 	<div class="title-area">
 		<a href="/" class="logo-link" onclick={handleClick}><h1 class="logo-text">vod frog</h1></a>
 		<img src="/froggie.png" alt="A cute frog" class="header-frog" />
@@ -26,6 +31,13 @@
 		position: relative;
 	}
 
+	.login-area {
+		position: absolute;
+		top: 30px;
+		right: 20px;
+		z-index: 10;
+	}
+
 	.title-area {
 		position: relative;
 		display: inline-block;
diff --git a/src/lib/LoginButton.svelte b/src/lib/LoginButton.svelte
new file mode 100644
index 0000000..53d86c7
--- /dev/null
+++ b/src/lib/LoginButton.svelte
@@ -0,0 +1,123 @@
+<!--
+	LoginButton: An oval wavy button with "login" text.
+	Uses the same sine-wave wobble approach as WavyCircle but stretched into an oval.
+-->
+<script lang="ts">
+	import { seededRandom } from './theme';
+
+	let { onclick }: { onclick?: () => void } = $props();
+
+	const seed = 'login-btn';
+	const { svgPath, clipPolygon } = generateWavyOval(seed);
+
+	function generateWavyOval(s: string): { svgPath: string; clipPolygon: string } {
+		const cx = 50, cy = 50;
+		const rx = 44; // horizontal radius
+		const ry = 36; // vertical radius — squished for oval
+		const amp = 3;
+		const points = 48;
+
+		const phase1 = seededRandom(s, 1) * Math.PI * 2;
+		const phase2 = seededRandom(s, 2) * Math.PI * 2;
+		const freq1 = 3 + seededRandom(s, 3) * 3;
+		const freq2 = 6 + seededRandom(s, 4) * 4;
+		const ampScale = 0.7 + seededRandom(s, 5) * 0.5;
+
+		const pts: [number, number][] = [];
+
+		for (let i = 0; i < points; i++) {
+			const angle = (i / points) * Math.PI * 2;
+			const w1 = Math.sin(angle * freq1 + phase1) * amp * 0.7;
+			const w2 = Math.sin(angle * freq2 + phase2) * amp * 0.3;
+			const wobble = (w1 + w2) * ampScale;
+			pts.push([
+				cx + Math.cos(angle) * (rx + wobble),
+				cy + Math.sin(angle) * (ry + wobble)
+			]);
+		}
+
+		// SVG path with Catmull-Rom splines
+		let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+		for (let i = 0; i < pts.length; i++) {
+			const p0 = pts[(i - 1 + pts.length) % pts.length];
+			const p1 = pts[i];
+			const p2 = pts[(i + 1) % pts.length];
+			const p3 = pts[(i + 2) % pts.length];
+			const tension = 0.25;
+			const cp1x = p1[0] + (p2[0] - p0[0]) * tension;
+			const cp1y = p1[1] + (p2[1] - p0[1]) * tension;
+			const cp2x = p2[0] - (p3[0] - p1[0]) * tension;
+			const cp2y = p2[1] - (p3[1] - p1[1]) * tension;
+			d += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+		}
+		d += ' Z';
+
+		const clipPts = pts.map(([x, y]) => `${x.toFixed(2)}% ${y.toFixed(2)}%`).join(', ');
+		return { svgPath: d, clipPolygon: `polygon(${clipPts})` };
+	}
+</script>
+
+<button class="login-btn" {onclick}>
+	<div class="btn-clipped" style="clip-path: {clipPolygon};">
+		<div class="btn-fill"></div>
+		<span class="btn-text">login</span>
+	</div>
+	<svg class="btn-stroke" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" overflow="visible">
+		<path
+			d={svgPath}
+			fill="none"
+			stroke="#0A182B"
+			stroke-width="2"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</button>
+
+<style>
+	.login-btn {
+		all: unset;
+		position: relative;
+		width: clamp(100px, 12vw, 140px);
+		height: clamp(44px, 5vw, 56px);
+		cursor: pointer;
+		transition: transform 0.15s ease;
+	}
+
+	.login-btn:hover {
+		transform: scale(1.05);
+	}
+
+	.btn-clipped {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.btn-fill {
+		position: absolute;
+		inset: 0;
+		background: #0A182B;
+	}
+
+	.btn-text {
+		position: relative;
+		z-index: 1;
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: clamp(1rem, 1.5vw, 1.3rem);
+		color: #FFDEED;
+		letter-spacing: 1px;
+	}
+
+	.btn-stroke {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 2;
+		pointer-events: none;
+		overflow: visible;
+	}
+</style>
-- 
2.51.2