Convert to webp, cleanup, fix the cursor · kandake.africa/vod-jam-earl@9f51e40

-1

README.md

··· 29 29 │ ├── WavyBorder.svelte # Rectangular wavy border: SVG stroke + CSS clip-path polygon 30 30 │ ├── WavyCircle.svelte # Circular wavy border for avatars 31 31 │ ├── MeshBackground.svelte # Layered SVG radial gradient background 32 - │ ├── PlantOverlay.svelte # Fern leaves photo overlay with multiply blend 33 32 │ ├── VodjamHeader.svelte # Header with ToeJam & Earl illustration 34 33 │ ├── VideoCard.svelte # Video thumbnail card with scrub preview and hopping vodjam sprite 35 34 │ └── VideoPlayer.svelte # Custom HLS video player with vodjam scrub bar and ship fullscreen

+3 -3

src/app.html

··· 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 - <link rel="icon" href="/earl-favicon.png" /> 5 + <link rel="icon" href="/earl-favicon.webp" /> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 7 <meta property="og:title" content="VoD Jam" /> 8 8 <meta property="og:description" content="VoD Jam" /> 9 - <meta property="og:image" content="/opengraph.png" /> 9 + <meta property="og:image" content="/opengraph.webp" /> 10 10 <meta property="og:type" content="website" /> 11 11 <meta name="twitter:card" content="summary_large_image" /> 12 12 <meta name="twitter:title" content="VoD Jam" /> 13 13 <meta name="twitter:description" content="VoD Jam" /> 14 - <meta name="twitter:image" content="/opengraph.png" /> 14 + <meta name="twitter:image" content="/opengraph.webp" /> 15 15 <meta name="description" content="VoD Jam" /> 16 16 <title>VoD Jam</title> 17 17 %sveltekit.head%

+39 -19

src/lib/AnimatedCursor.svelte

··· 3 3 let y = $state(0); 4 4 let visible = $state(false); 5 5 6 - const FRAME_COUNT = 3; 7 - const SPRITE_SRC = '/toe-jam-standing.png'; 8 - // toe-jam-standing.png: 85×27, 3 frames at x=0 (22px), x=31 (22px), x=62 (23px) 9 - const FRAME_WIDTH = 23; 10 - const FRAME_HEIGHT = 27; 6 + const FRAMES = [ 7 + '/toe-jam-standing-1.webp', 8 + '/toe-jam-standing-2.webp', 9 + '/toe-jam-standing-3.webp', 10 + ]; 11 + // Ping-pong: 0,1,2,1,0,1,2,1,... 12 + const SEQUENCE = [0, 1, 2, 1]; 11 13 const SCALE = 2; 14 + const FPS = 4; 15 + 16 + let cursorEl: HTMLImageElement | undefined = $state(); 17 + let seqIndex = 0; 18 + 19 + $effect(() => { 20 + if (!cursorEl) return; 21 + 22 + const frameDuration = 1000 / FPS; 23 + let lastTime = performance.now(); 24 + let raf: number; 25 + 26 + function tick(now: number) { 27 + if (now - lastTime >= frameDuration) { 28 + lastTime = now - ((now - lastTime) % frameDuration); 29 + seqIndex = (seqIndex + 1) % SEQUENCE.length; 30 + cursorEl!.src = FRAMES[SEQUENCE[seqIndex]]; 31 + } 32 + raf = requestAnimationFrame(tick); 33 + } 34 + 35 + cursorEl.src = FRAMES[SEQUENCE[seqIndex]]; 36 + raf = requestAnimationFrame(tick); 37 + 38 + return () => cancelAnimationFrame(raf); 39 + }); 12 40 13 41 $effect(() => { 14 42 function onMove(e: MouseEvent) { ··· 46 74 </svelte:head> 47 75 48 76 {#if visible} 49 - <div 77 + <img 78 + bind:this={cursorEl} 50 79 class="animated-cursor" 51 - style="left: {x}px; top: {y}px; width: {FRAME_WIDTH * SCALE}px; height: {FRAME_HEIGHT * SCALE}px;" 52 - ></div> 80 + alt="" 81 + style="left: {x}px; top: {y}px;" 82 + /> 53 83 {/if} 54 84 55 85 <style> ··· 58 88 pointer-events: none; 59 89 z-index: 99999; 60 90 transform: translate(-50%, -50%); 61 - background-image: url('/toe-jam-standing.png'); 62 - background-size: 85px 27px; 63 - background-repeat: no-repeat; 64 91 image-rendering: pixelated; 65 - animation: cursor-anim 0.4s steps(1) infinite; 66 - } 67 - 68 - /* Frames at x=0, x=31, x=62 (non-uniform widths) */ 69 - @keyframes cursor-anim { 70 - 0% { background-position-x: 0; } 71 - 33.333% { background-position-x: -31px; } 72 - 66.667% { background-position-x: -62px; } 92 + scale: 2; 73 93 } 74 94 </style>

+1 -1

src/lib/MeshBackground.svelte

··· 5 5 position: fixed; 6 6 inset: 0; 7 7 z-index: -2; 8 - background: url('/background.gif') repeat; 8 + background: url('/background.webp') repeat; 9 9 background-size: 256px 256px; 10 10 image-rendering: pixelated; 11 11 }

-32

src/lib/PlantOverlay.svelte

··· 1 - <script lang="ts"> 2 - // Fern leaves overlay using a real photo with transparent background 3 - </script> 4 - 5 - <div class="plant-overlay"> 6 - <img src="/leaves.png" alt="" class="leaves" /> 7 - </div> 8 - 9 - <style> 10 - .plant-overlay { 11 - position: fixed; 12 - inset: 0; 13 - z-index: -1; 14 - pointer-events: none; 15 - overflow: hidden; 16 - mix-blend-mode: multiply; 17 - } 18 - 19 - .leaves { 20 - position: absolute; 21 - inset: 0; 22 - width: 100%; 23 - height: 100%; 24 - object-fit: cover; 25 - } 26 - 27 - @media (max-width: 768px) { 28 - .plant-overlay { 29 - display: none; 30 - } 31 - } 32 - </style>

+2 -2

src/lib/SpriteTime.svelte

··· 2 2 let { time, height = 20 }: { time: string; height?: number } = $props(); 3 3 4 4 function charToSrc(ch: string): string | null { 5 - if (ch >= '0' && ch <= '9') return `/num-${ch}.png`; 6 - if (ch === ':') return '/colon.png'; 5 + if (ch >= '0' && ch <= '9') return `/num-${ch}.webp`; 6 + if (ch === ':') return '/colon.webp'; 7 7 return null; 8 8 } 9 9

+4 -4

src/lib/VideoCard.svelte

··· 132 132 let earlDirection = $state<'right' | 'left'>('right'); 133 133 134 134 const FLOATY_FRAMES = 7; 135 - const FLOATY_RIGHT_SRC = '/earl-floaty-right.png'; 136 - const FLOATY_LEFT_SRC = '/earl-floaty-left.png'; 135 + const FLOATY_RIGHT_SRC = '/earl-floaty-right.webp'; 136 + const FLOATY_LEFT_SRC = '/earl-floaty-left.webp'; 137 137 138 138 function onMouseEnter() { scrubbing = true; initScrub(); } 139 139 function onMouseMove(e: MouseEvent) { ··· 154 154 </script> 155 155 156 156 <button class="card" style={cardStyle} onclick={() => onSelect(video)}> 157 - <WavyBorder seed={rkey} fillImage="/border.png" strokeColor="#0B0E17" strokeWidth={2.2} padding="clamp(24px, 4vw, 36px)"> 157 + <WavyBorder seed={rkey} fillImage="/border.webp" strokeColor="#0B0E17" strokeWidth={2.2} padding="clamp(24px, 4vw, 36px)"> 158 158 <div class="card-inner"> 159 159 <span class="duration-badge"><SpriteTime time={formatDuration(video.value.duration)} height={22} /></span> 160 160 <div class="thumb-wrapper"> ··· 220 220 } 221 221 222 222 .card-inner { 223 - background: url('/space.png') center / cover no-repeat; 223 + background: url('/space.webp') center / cover no-repeat; 224 224 padding: 10px; 225 225 border-radius: 2px; 226 226 }

+3 -3

src/lib/VideoPlayer.svelte

··· 29 29 30 30 // Earl floaty sprite sheet config 31 31 const FLOATY_FRAMES = 7; 32 - const FLOATY_RIGHT_SRC = '/earl-floaty-right.png'; 33 - const FLOATY_LEFT_SRC = '/earl-floaty-left.png'; 32 + const FLOATY_RIGHT_SRC = '/earl-floaty-right.webp'; 33 + const FLOATY_LEFT_SRC = '/earl-floaty-left.webp'; 34 34 35 35 // Fullscreen 36 36 let isFullscreen = $state(false); ··· 320 320 onclick={toggleFullscreen} 321 321 title={isFullscreen ? "Exit fullscreen" : "Fullscreen"} 322 322 > 323 - <img src="/ship.png" alt="fullscreen" class="ship-icon" /> 323 + <img src="/ship.webp" alt="fullscreen" class="ship-icon" /> 324 324 </button> 325 325 326 326

+2 -2

src/lib/VodjamHeader.svelte

··· 11 11 12 12 <header class="vodjam-header"> 13 13 <div class="title-area"> 14 - <a href="/" class="logo-link" onclick={handleClick}><img src="/vod-jam.png" alt="VoD Jam" class="logo-img" /></a> 15 - <img src="/toe-jam-earl.png" alt="ToeJam & Earl" class="header-vodjam" /> 14 + <a href="/" class="logo-link" onclick={handleClick}><img src="/vod-jam.webp" alt="VoD Jam" class="logo-img" /></a> 15 + <img src="/toe-jam-earl.webp" alt="ToeJam & Earl" class="header-vodjam" /> 16 16 </div> 17 17 <div class="subtitle-lines"> 18 18 <p class="subtitle">an exploration by</p>

+1 -1

src/lib/game/CompletionScreen.svelte

··· 32 32 33 33 <div class="completion-screen"> 34 34 <div class="completion-content"> 35 - <img src="/sprites/ship/ship.png" alt="Ship" class="ship-sprite" /> 35 + <img src="/sprites/ship/ship.webp" alt="Ship" class="ship-sprite" /> 36 36 37 37 <h1 class="congrats-title"><span class="congrats-text">You Found Them All!</span></h1> 38 38

+1 -1

src/lib/game/GameWorld.svelte

··· 182 182 presents[i].speakerName = speaker.name; 183 183 if (speaker.id) { 184 184 presents[i].speakerHandle = speaker.id; 185 - presents[i].speakerAvatarSprite = `/sprites/speakers/${speaker.id}.png`; 185 + presents[i].speakerAvatarSprite = `/sprites/speakers/${speaker.id}.webp`; 186 186 } 187 187 } 188 188 }

+9 -9

src/lib/game/IntroSequence.svelte

··· 224 224 {#if phase === 'pre-crash'} 225 225 <div class="dialog-scene"> 226 226 <div class="dialog-frame"> 227 - <img src="/shuttle-dialog.png" alt="Shuttle cockpit" class="dialog-bg" /> 227 + <img src="/shuttle-dialog.webp" alt="Shuttle cockpit" class="dialog-bg" /> 228 228 <div class="boris-portrait boris-talking"></div> 229 229 </div> 230 230 <p class="dialog-text">{typewriterText}<span class="cursor-blink">_</span></p> ··· 233 233 234 234  235 235 {#if isCrashPhase} 236 - <div class="starfield" style="background-image: url('/space.png')"></div> 236 + <div class="starfield" style="background-image: url('/space.webp')"></div> 237 237 238 238 <div 239 239 class="ship" 240 240 class:shaking={crashPhaseNum >= 1 && crashPhaseNum < 2} 241 241 class:spiraling={crashPhaseNum >= 2} 242 242 > 243 - <img src="/sprites/ship/ship.png" alt="Ship" /> 243 + <img src="/sprites/ship/ship.webp" alt="Ship" /> 244 244 </div> 245 245 246 246 {#each particles as p (p.id)} ··· 257 257  258 258 {#if isDialogPhase} 259 259 <div class="post-crash-scene"> 260 - <div class="space-bg" style="background-image: url('/space.png')"></div> 260 + <div class="space-bg" style="background-image: url('/space.webp')"></div> 261 261 <div class="dialog-frame"> 262 - <img src="/dialogue-screen-background.png" alt="" class="dialogue-screen dialogue-screen-bg" /> 262 + <img src="/dialogue-screen-background.webp" alt="" class="dialogue-screen dialogue-screen-bg" /> 263 263 {#if phase === 'post-silent'} 264 264 <div class="boris-portrait boris-silent"></div> 265 265 {:else} 266 266 <div class="boris-portrait boris-angry"></div> 267 267 {/if} 268 - <img src="/dialogue-screen-window.png" alt="Dialogue screen" class="dialogue-screen dialogue-screen-window" /> 268 + <img src="/dialogue-screen-window.webp" alt="Dialogue screen" class="dialogue-screen dialogue-screen-window" /> 269 269 </div> 270 270 <p class="dialog-text">{typewriterText}<span class="cursor-blink">_</span></p> 271 271 ··· 380 380 381 381 /* boris-talking.png: 125×86, 2 frames (61px each), frame 1 at x=64 */ 382 382 .boris-talking { 383 - background-image: url('/boris-talking.png'); 383 + background-image: url('/boris-talking.webp'); 384 384 background-size: 204.918% 100%; /* 125/61 × 100% */ 385 385 animation: boris-talk 0.4s step-end infinite; 386 386 } 387 387 388 388 /* boris-silent.png: 61×86, single frame */ 389 389 .boris-silent { 390 - background-image: url('/boris-silent.png'); 390 + background-image: url('/boris-silent.webp'); 391 391 background-size: 100% 100%; 392 392 } 393 393 394 394 /* boris-talking-angry.png: 125×86, 2 frames (61px each), frame 1 at x=64 */ 395 395 /* Loop mouth 5 times (0.4s × 5 = 2s), then hold on frame 2 (mouth open) + shake */ 396 396 .boris-angry { 397 - background-image: url('/boris-talking-angry.png'); 397 + background-image: url('/boris-talking-angry.webp'); 398 398 background-size: 204.918% 100%; 399 399 background-position-x: 100%; /* holds frame 2 after talk animation ends */ 400 400 animation:

+1 -1

src/lib/game/Present.svelte

··· 9 9 onselect?: (present: WorldPresent) => void; 10 10 } = $props(); 11 11 12 - const colors = ['closed.png', 'closed-blue.png', 'closed-green.png']; 12 + const colors = ['closed.webp', 'closed-blue.webp', 'closed-green.webp']; 13 13 14 14 let colorIndex = $derived( 15 15 present.id.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0) % colors.length

+1 -1

src/lib/game/PresentDetail.svelte

··· 17 17 let handle = $state<string | null>(null); 18 18 let thumbnailUrl = $state<string | null>(present.thumbnailUrl ?? null); 19 19 20 - const colors = ['closed.png', 'closed-blue.png', 'closed-green.png']; 20 + const colors = ['closed.webp', 'closed-blue.webp', 'closed-green.webp']; 21 21 let colorIndex = present.id.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0) % colors.length; 22 22 let fallbackSprite = `/sprites/present/${colors[colorIndex]}`; 23 23 let spriteSrc = $state(present.speakerAvatarSprite ?? fallbackSprite);

+35 -36

src/lib/game/SpriteAnimator.ts

··· 1 1 type Direction = { x: number; y: number }; 2 2 type AnimationState = 'idle' | 'walk-up' | 'walk-down' | 'walk-left' | 'walk-right'; 3 3 4 - const WALK_STATES: AnimationState[] = ['walk-up', 'walk-down', 'walk-left', 'walk-right']; 4 + const SHEET_STATES: AnimationState[] = ['idle', 'walk-up', 'walk-down', 'walk-left', 'walk-right']; 5 5 6 6 /** 7 7 * Hardcoded per-frame boundaries for each walk sprite sheet. 8 8 * Derived from pixel-level transparent-column scanning — these files won't change. 9 9 */ 10 10 const SHEET_CONFIG: Record<string, { src: string; frameStarts: number[]; frameWidths: number[]; height: number }> = { 11 + 'idle': { 12 + src: '/sprites/earl/idle.webp', 13 + // 79×33, 3 frames 14 + frameStarts: [0, 28, 56], 15 + frameWidths: [23, 24, 23], 16 + height: 33, 17 + }, 11 18 'walk-right': { 12 - src: '/earl-walking-right.png', 19 + src: '/earl-walking-right.webp', 13 20 // 236×39, 7 frames 14 21 frameStarts: [0, 30, 66, 108, 135, 165, 204], 15 22 frameWidths: [25, 32, 32, 22, 25, 37, 32], 16 23 height: 39, 17 24 }, 18 25 'walk-left': { 19 - src: '/earl-walking-left.png', 26 + src: '/earl-walking-left.webp', 20 27 // 236×39, 7 frames 21 28 frameStarts: [0, 31, 66, 109, 138, 165, 204], 22 29 frameWidths: [26, 32, 32, 22, 25, 37, 32], 23 30 height: 39, 24 31 }, 25 32 'walk-up': { 26 - src: '/earl-walking-up.png', 33 + src: '/earl-walking-up.webp', 27 34 // 194×39, 7 frames 28 35 frameStarts: [0, 33, 63, 90, 120, 144, 173], 29 36 frameWidths: [21, 21, 21, 24, 19, 23, 21], 30 37 height: 39, 31 38 }, 32 39 'walk-down': { 33 - src: '/earl-walking-down.png', 40 + src: '/earl-walking-down.webp', 34 41 // 187×39, 6 frames 35 42 frameStarts: [0, 32, 65, 100, 132, 168], 36 43 frameWidths: [22, 22, 21, 21, 24, 19], ··· 67 74 private readonly walkFps: number; 68 75 private readonly idleFps: number; 69 76 70 - /** Idle is still individual images (no sprite sheet provided) */ 71 - private readonly idleFrames: HTMLImageElement[] = []; 72 - /** Walk directions use sprite sheets */ 77 + /** All animations use sprite sheets */ 73 78 private readonly sheets: Map<AnimationState, SheetData> = new Map(); 74 79 75 80 private state: AnimationState = 'idle'; 76 81 private frameIndex = 0; 82 + private pingPongPos = 0; 77 83 private elapsed = 0; 78 84 private loaded = false; 79 85 ··· 84 90 this.walkFps = options?.walkFps ?? 8; 85 91 this.idleFps = options?.idleFps ?? 2; 86 92 87 - // Load idle frames individually 88 - for (let i = 1; i <= 2; i++) { 89 - const img = new Image(); 90 - img.src = `/sprites/earl/idle-${i}.png`; 91 - this.idleFrames.push(img); 92 - } 93 + 93 94 } 94 95 95 96 async preload(): Promise<void> { 96 97 const imgPromises: Promise<void>[] = []; 97 98 98 - // Preload idle frames 99 - for (const img of this.idleFrames) { 100 - imgPromises.push(this.loadImage(img)); 101 - } 102 - 103 - // Preload sprite sheets 104 - for (const walkState of WALK_STATES) { 105 - const config = SHEET_CONFIG[walkState]; 99 + // Preload all sprite sheets (idle + walk) 100 + for (const sheetState of SHEET_STATES) { 101 + const config = SHEET_CONFIG[sheetState]; 106 102 const img = new Image(); 107 103 img.src = config.src; 108 104 imgPromises.push( 109 105 this.loadImage(img).then(() => { 110 - this.sheets.set(walkState, { 106 + this.sheets.set(sheetState, { 111 107 image: img, 112 108 frameCount: config.frameStarts.length, 113 109 frameStarts: config.frameStarts, ··· 120 116 121 117 await Promise.all(imgPromises); 122 118 123 - // Cache dimensions from idle (used for canvas sizing) 124 - const first = this.idleFrames[0]; 125 - this._frameWidth = first.naturalWidth; 126 - this._frameHeight = first.naturalHeight; 119 + // Cache dimensions from idle sheet (used for canvas sizing) 120 + const idleSheet = this.sheets.get('idle')!; 121 + this._frameWidth = idleSheet.frameWidths[0]; 122 + this._frameHeight = idleSheet.frameHeight; 127 123 128 124 this.loaded = true; 129 125 } ··· 145 141 if (next !== this.state) { 146 142 this.state = next; 147 143 this.frameIndex = 0; 144 + this.pingPongPos = 0; 148 145 this.elapsed = 0; 149 146 } 150 147 ··· 156 153 while (this.elapsed >= frameDuration) { 157 154 this.elapsed -= frameDuration; 158 155 const count = this.getFrameCount(); 159 - this.frameIndex = (this.frameIndex + 1) % count; 156 + if (this.state === 'idle' && count > 2) { 157 + // Ping-pong: 0,1,2,1,0,1,2,1,... — cycle length is (count-1)*2 158 + const cycle = (count - 1) * 2; 159 + this.pingPongPos = (this.pingPongPos + 1) % cycle; 160 + this.frameIndex = this.pingPongPos < count 161 + ? this.pingPongPos 162 + : cycle - this.pingPongPos; 163 + } else { 164 + this.frameIndex = (this.frameIndex + 1) % count; 165 + } 160 166 } 161 167 } 162 168 163 169 private getFrameCount(): number { 164 - if (this.state === 'idle') return this.idleFrames.length; 165 170 return this.sheets.get(this.state)!.frameCount; 166 171 } 167 172 168 173 /** 169 174 * Draw the current animation frame onto the given canvas context. 170 - * Uses source rectangles for sprite sheets, full image for idle. 175 + * Uses source rectangles from sprite sheets for all states. 171 176 */ 172 177 drawCurrentFrame(ctx: CanvasRenderingContext2D, dx: number, dy: number, dw: number, dh: number): void { 173 - if (this.state === 'idle') { 174 - const frame = this.idleFrames[this.frameIndex]; 175 - ctx.drawImage(frame, dx, dy, dw, dh); 176 - return; 177 - } 178 - 179 178 const sheet = this.sheets.get(this.state)!; 180 179 const sx = sheet.frameStarts[this.frameIndex]; 181 180 const sw = sheet.frameWidths[this.frameIndex];

+4 -1

src/routes/+layout.svelte

··· 1 1 <script lang="ts"> 2 + import AnimatedCursor from '$lib/AnimatedCursor.svelte'; 3 + 2 4 let { children } = $props(); 3 5 </script> 4 6 5 7 <svelte:head> 6 - <link rel="icon" href="/earl-favicon.png" /> 8 + <link rel="icon" href="/earl-favicon.webp" /> 7 9 <style> 8 10 @font-face { 9 11 font-family: 'ToeJamEarl1'; ··· 28 30 </svelte:head> 29 31 30 32 {@render children()} 33 + <AnimatedCursor /> 31 34 32 35 <style> 33 36 :global(html, body) {

+1 -1

src/routes/+page.svelte

··· 281 281 282 282 {#if loading} 283 283 <div class="loading-screen"> 284 - <img src="/ship.png" alt="Loading..." class="loading-ship" /> 284 + <img src="/ship.webp" alt="Loading..." class="loading-ship" /> 285 285 <p class="loading-text">Loading VoDs...</p> 286 286 </div> 287 287 {:else if error}

static/background.gif