Organize public assets (#22)

* Organize public assets into subdirectories

Group 80+ flat files into images/, textures/, pdf/, and audio/ subdirectories
for easier navigation. Update all references across 14 source files.

* Add apple-touch-icon

index.html

@@ -16,12 +16,12 @@
     <meta name="twitter:url" content="https://isle.pizza/">
     <meta name="twitter:title" content="LEGO® Island - Online Web Port">
     <meta name="twitter:description" content="Play the classic 1997 PC game LEGO® Island directly in your web browser!">
-    <meta name="twitter:image" content="https://isle.pizza/island.webp">
+    <meta name="twitter:image" content="https://isle.pizza/images/island.webp">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://isle.pizza/">
     <meta property="og:title" content="LEGO® Island - Online Web Port">
     <meta property="og:description" content="Play the classic 1997 PC game LEGO® Island directly in your web browser!">
-    <meta property="og:image" content="https://isle.pizza/island.webp">
+    <meta property="og:image" content="https://isle.pizza/images/island.webp">
     <meta property="og:site_name" content="LEGO Island Web Port">
 
     <link rel="manifest" href="manifest.json">

src/App.svelte

@@ -119,7 +119,7 @@
 
 <!-- Audio element outside page routing so it persists across navigation -->
 <audio id="install-audio" loop preload="none">
-    <source src="install.mp3" type="audio/mpeg">
+    <source src="audio/install.mp3" type="audio/mpeg">
 </audio>
 
 <GoodbyePopup />

src/lib/CanvasWrapper.svelte

@@ -4,7 +4,7 @@
 
 <div id="canvas-wrapper">
     <div id="loading-gif-overlay">
-        <img src="cdspin.gif" alt="Loading game...">
+        <img src="images/cdspin.gif" alt="Loading game...">
         <div class="quote-block">
             <p class="quote-text">"Whoops! You have to put the CD in your computer"</p>
             <p class="quote-attribution">- The Infomaniac (1997)</p>

src/lib/ConfigurePage.svelte

@@ -196,7 +196,7 @@
     {/if}
     <div class="page-inner-content config-layout">
         <div class="config-art-panel">
-            <img src="shark.webp" alt="LEGO Island Shark and Brickster">
+            <img src="images/shark.webp" alt="LEGO Island Shark and Brickster">
         </div>
         <div class="config-main">
             <div class="config-presets">

src/lib/Controls.svelte

@@ -8,11 +8,11 @@
     let rendererValue = "0 0x682656f3 0x0 0x0 0x4000000"; // WebGL default
 
     const buttons = [
-        { id: 'run-game-btn', off: 'run_game_off.webp', on: 'run_game_on.webp', alt: 'Run Game', width: 135, height: 164, action: handleRunGame },
+        { id: 'run-game-btn', off: 'images/run_game_off.webp', on: 'images/run_game_on.webp', alt: 'Run Game', width: 135, height: 164, action: handleRunGame },
-        { id: 'configure-btn', off: 'configure_off.webp', on: 'configure_on.webp', alt: 'Configure', width: 130, height: 147, action: () => navigateTo('configure') },
+        { id: 'configure-btn', off: 'images/configure_off.webp', on: 'images/configure_on.webp', alt: 'Configure', width: 130, height: 147, action: () => navigateTo('configure') },
-        { id: 'free-stuff-btn', off: 'free_stuff_off.webp', on: 'free_stuff_on.webp', alt: 'Free Stuff', width: 134, height: 149, action: () => navigateTo('free-stuff') },
+        { id: 'free-stuff-btn', off: 'images/free_stuff_off.webp', on: 'images/free_stuff_on.webp', alt: 'Free Stuff', width: 134, height: 149, action: () => navigateTo('free-stuff') },
-        { id: 'read-me-btn', off: 'read_me_off.webp', on: 'read_me_on.webp', alt: 'Read Me', width: 134, height: 149, action: () => navigateTo('read-me') },
+        { id: 'read-me-btn', off: 'images/read_me_off.webp', on: 'images/read_me_on.webp', alt: 'Read Me', width: 134, height: 149, action: () => navigateTo('read-me') },
-        { id: 'cancel-btn', off: 'cancel_off.webp', on: 'cancel_on.webp', alt: 'Cancel', width: 93, height: 145, action: () => showGoodbyePopup.set(true) }
+        { id: 'cancel-btn', off: 'images/cancel_off.webp', on: 'images/cancel_on.webp', alt: 'Cancel', width: 93, height: 145, action: () => showGoodbyePopup.set(true) }
     ];
 
     function handleRunGame() {

src/lib/FreeStuffPage.svelte

@@ -11,7 +11,7 @@
         { href: 'https://github.com/isledecomp/LEGOIslandRebuilder', title: 'LEGO Island Rebuilder', desc: 'A powerful launcher and tool for patching and modding the original 1997 PC version of LEGO Island. Essential for play and modding.' },
         { href: 'https://github.com/isledecomp/SIEdit', title: 'SIEdit', desc: 'A suite of tools developed by the decompilation team for viewing and editing the ".si" script and resource files from the original game.' },
         { href: 'https://www.legoisland.org/wiki/The_Making_of_LEGO_Island', title: 'The Making of LEGO Island, a memoir by Wes Jenkins', desc: 'Read the fascinating, incomplete memoir from Creative Director Wes Jenkins, detailing the development process and the team behind the game.' },
-        { href: '/poster.pdf', title: 'LEGO Island: Free Poster', desc: 'Download a copy of the iconic poster that was originally included with the retail release of the game.' },
+        { href: '/pdf/poster.pdf', title: 'LEGO Island: Free Poster', desc: 'Download a copy of the iconic poster that was originally included with the retail release of the game.' },
         { href: 'https://brickstobytes.org/games/lego-island', title: 'Development Materials Archive', desc: 'Explore a collection of development materials, concept art, and other historical assets from the creation of LEGO Island.' },
         { href: 'https://le717.github.io/LEGO-Island-VGF/legoisland/#interview', title: 'Video Game Flashback: An Interview with Wes Jenkins', desc: 'A detailed interview with LEGO Island\'s Creative Director, Wes Jenkins, offering unique insights into the game\'s production.' },
         { href: 'https://www.youtube.com/watch?v=fodBG_QylVM', title: 'LEGO Island - Behind the Scenes', desc: 'Watch a rare promotional video created during the game\'s development, showcasing its progress and vision at the time.' },
@@ -26,7 +26,7 @@
         <div class="resource-list">
             <div class="quote-panel">
                 <div class="quote-panel-art">
-                    <img src="congrats.webp" alt="LEGO Island characters celebrating">
+                    <img src="images/congrats.webp" alt="LEGO Island characters celebrating">
                 </div>
                 <blockquote class="quote-panel-content">
                     <p>"In November of 2010, after all was said and done, I started getting emails from a few kids

src/lib/GoodbyePopup.svelte

@@ -54,6 +54,6 @@
                 </div>
             </div>
         </div>
-        <img src="later.webp" alt="Goodbye" class="update-character" width="150" height="187">
+        <img src="images/later.webp" alt="Goodbye" class="update-character" width="150" height="187">
     </div>
 {/if}

src/lib/ReadMePage.svelte

@@ -12,11 +12,11 @@
     }
 
     const tabs = [
-        { id: 'about', label: 'About', icon: 'register.webp' },
+        { id: 'about', label: 'About', icon: 'images/register.webp' },
-        { id: 'system', label: 'System', icon: 'sysinfo.webp' },
+        { id: 'system', label: 'System', icon: 'images/sysinfo.webp' },
-        { id: 'faq', label: 'FAQ', icon: 'getinfo.webp' },
+        { id: 'faq', label: 'FAQ', icon: 'images/getinfo.webp' },
-        { id: 'changelog', label: 'Changelog', icon: 'callfail.webp' },
+        { id: 'changelog', label: 'Changelog', icon: 'images/callfail.webp' },
-        { id: 'manual', label: 'Manual', icon: 'bonus.webp' }
+        { id: 'manual', label: 'Manual', icon: 'images/bonus.webp' }
     ];
 
     const faqItems = [
@@ -240,7 +240,7 @@
             <div class="tab-panel" class:active={activeTab === 'manual'} id="tab-manual">
                 <div class="manual-container">
                     <p class="manual-description">The original 15-page instruction manual from the 1997 CD-ROM release.</p>
-                    <a href="comic.pdf" target="_blank" rel="noopener" class="manual-open-btn">Open Manual in New Tab</a>
+                    <a href="pdf/comic.pdf" target="_blank" rel="noopener" class="manual-open-btn">Open Manual in New Tab</a>
                 </div>
             </div>
 

src/lib/SaveEditorPage.svelte

@@ -43,11 +43,11 @@
 
     // Character icons mapping
     const characterIcons = {
-        [Actor.PEPPER]: { normal: 'pepper.webp', selected: 'pepper-selected.webp' },
+        [Actor.PEPPER]: { normal: 'images/pepper.webp', selected: 'images/pepper-selected.webp' },
-        [Actor.MAMA]: { normal: 'mama.webp', selected: 'mama-selected.webp' },
+        [Actor.MAMA]: { normal: 'images/mama.webp', selected: 'images/mama-selected.webp' },
-        [Actor.PAPA]: { normal: 'papa.webp', selected: 'papa-selected.webp' },
+        [Actor.PAPA]: { normal: 'images/papa.webp', selected: 'images/papa-selected.webp' },
-        [Actor.NICK]: { normal: 'nick.webp', selected: 'nick-selected.webp' },
+        [Actor.NICK]: { normal: 'images/nick.webp', selected: 'images/nick-selected.webp' },
-        [Actor.LAURA]: { normal: 'laura.webp', selected: 'laura-selected.webp' }
+        [Actor.LAURA]: { normal: 'images/laura.webp', selected: 'images/laura-selected.webp' }
     };
 
     // Carousel state (bound from Carousel component)
@@ -253,7 +253,7 @@
     <BackButton />
     <div class="page-inner-content config-layout">
         <div class="config-art-panel">
-            <img src="save.webp" alt="LEGO Island Save Editor">
+            <img src="images/save.webp" alt="LEGO Island Save Editor">
         </div>
         <div class="config-main">
             {#if loading || error || existingSlots.length > 0}
@@ -271,7 +271,7 @@
                                 onclick={() => handleSlotSelect(slot.slotNumber)}
                             >
                                 <img
-                                    src={characterIcons[slot.header?.actorId]?.selected || 'pepper-selected.webp'}
+                                    src={characterIcons[slot.header?.actorId]?.selected || 'images/pepper-selected.webp'}
                                     alt={ActorNames[slot.header?.actorId] || 'Character'}
                                     class="slot-character-icon"
                                     draggable="false"
@@ -285,7 +285,7 @@
 
             {#if !loading && !error && existingSlots.length === 0}
                 <div class="no-saves-state">
-                    <img src="callfail.webp" alt="" class="no-saves-image" />
+                    <img src="images/callfail.webp" alt="" class="no-saves-image" />
                     <span class="no-saves-title">No save files found</span>
                     <p class="no-saves-description">
                         Start playing LEGO Island and your save will appear here automatically.
@@ -293,7 +293,7 @@
                 </div>
             {:else if !loading && !error && existingSlots.length > 0 && !currentSlot}
                 <div class="no-saves-state">
-                    <img src="register.webp" alt="" class="no-saves-image" />
+                    <img src="images/register.webp" alt="" class="no-saves-image" />
                     <span class="no-saves-title">Select a save file above</span>
                     <p class="no-saves-description">
                         Choose a save slot to view and edit your player name, character, and high scores.

src/lib/TopContent.svelte

@@ -68,7 +68,7 @@
 
 <div id="top-content">
     <div class="video-container">
-        <img id="install-video" width="260" height="260" src="install.webp" alt="Install Game">
+        <img id="install-video" width="260" height="260" src="images/install.webp" alt="Install Game">
         <span
             id="sound-toggle-emoji"
             title={$soundEnabled ? 'Pause Audio' : 'Play Audio'}
@@ -85,7 +85,7 @@
             id="island-logo-img"
             width="567"
             height="198"
-            src={$debugEnabled ? 'ogel.webp' : 'island.webp'}
+            src={$debugEnabled ? 'images/ogel.webp' : 'images/island.webp'}
             alt={$debugEnabled ? 'OGEL Mode Enabled' : 'Lego Island Logo'}
         >
     </button>

src/lib/UpdatePopup.svelte

@@ -19,6 +19,6 @@
             <button class="update-reload-btn" onclick={reload}>Reload Now</button>
         </div>
     </div>
-    <img src="bonus.webp" alt="Pepper" class="update-character" width="150" height="187">
+    <img src="images/bonus.webp" alt="Pepper" class="update-character" width="150" height="187">
 </div>
 {/if}

src/lib/config/ExtrasTab.svelte

@@ -64,16 +64,16 @@
                     {:else if $installState.installed}
                         <ImageButton
                             id="uninstall-btn"
-                            offSrc="uninstall_off.webp"
+                            offSrc="images/uninstall_off.webp"
-                            onSrc="uninstall_on.webp"
+                            onSrc="images/uninstall_on.webp"
                             alt="Uninstall Game"
                             onclick={handleUninstall}
                         />
                     {:else}
                         <ImageButton
                             id="install-btn"
-                            offSrc="install_off.webp"
+                            offSrc="images/install_off.webp"
-                            onSrc="install_on.webp"
+                            onSrc="images/install_on.webp"
                             alt="Install Game"
                             onclick={handleInstall}
                         />

src/lib/save-editor/LightPositionEditor.svelte

@@ -41,7 +41,7 @@
                 title="Position {position}"
             >
                 <img
-                    src="globe{position + 1}.webp"
+                    src="images/globe{position + 1}.webp"
                     alt="Light position {position}"
                 />
             </button>

src/lib/save-editor/VehicleEditor.svelte

@@ -224,7 +224,7 @@
 
     async function preloadDefaultTextures(info) {
         const results = await Promise.all(info.texFiles.map(async (texFile) => {
-            const response = await fetch(`/${texFile}.tex`);
+            const response = await fetch(`/textures/${texFile}.tex`);
             if (!response.ok) return null;
             const buffer = await response.arrayBuffer();
             const parsed = parseTex(buffer);