feat: Enhance HomeView component with release loading, markdown parsing, and improved UI elements

1 files changed, 175 insertions, 29 deletions

diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
index 9cd8014..2794712 100644
--- a/ui/src/components/HomeView.svelte
+++ b/ui/src/components/HomeView.svelte
@@ -1,47 +1,193 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  import { gameState } from '../stores/game.svelte';
+  import { releasesState } from '../stores/releases.svelte';
+  import { Calendar, ExternalLink } from 'lucide-svelte';
+
   type Props = {
     mouseX: number;
     mouseY: number;
   };
   let { mouseX = 0, mouseY = 0 }: Props = $props();
-</script>
 
-<div class="absolute inset-0 z-0 overflow-hidden">
-  <!-- Parallax Background Layers -->
+  onMount(() => {
+    releasesState.loadReleases();
+  });
+
+  function formatDate(dateString: string) {
+    return new Date(dateString).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
   
-  <div class="absolute inset-0 bg-gradient-to-t from-[#09090b] via-[#09090b]/40 to-transparent"></div>
+  // Enhanced markdown parser with Emoji and GitHub specific features
+  function formatBody(body: string) {
+      if (!body) return '';
+      
+      // Emoji map (common GitHub emojis)
+      const emojiMap: Record<string, string> = {
+          ':tada:': '🎉', ':sparkles:': '✨', ':bug:': '🐛', ':memo:': '📝',
+          ':rocket:': '🚀', ':white_check_mark:': '✅', ':construction:': '🚧',
+          ':recycle:': '♻️', ':wrench:': '🔧', ':package:': '📦',
+          ':arrow_up:': '⬆️', ':arrow_down:': '⬇️', ':warning:': '⚠️',
+          ':fire:': '🔥', ':heart:': '❤️', ':star:': '⭐', ':zap:': '⚡',
+          ':art:': '🎨', ':lipstick:': '💄', ':globe_with_meridians:': '🌐'
+      };
+
+      // Replace emojis
+      let processed = body.replace(/:[a-z0-9_]+:/g, (match) => emojiMap[match] || match);
+
+      // GitHub commit hash linking (simple version for 7-40 hex chars inside backticks)
+      processed = processed.replace(/`([0-9a-f]{7,40})`/g, (match, hash) => {
+          return `<a href="https://github.com/HsiangNianian/DropOut/commit/${hash}" target="_blank" class="text-emerald-500 hover:underline font-mono bg-emerald-500/10 px-1 rounded text-[10px] py-0.5 transition-colors border border-emerald-500/20 hover:border-emerald-500/50">${hash.substring(0, 7)}</a>`;
+      });
+      
+      // Auto-link users (@user)
+      processed = processed.replace(/@([a-zA-Z0-9-]+)/g, '<a href="https://github.com/$1" target="_blank" class="text-zinc-300 hover:text-white hover:underline font-medium">@$1</a>');
+
+      return processed.split('\n').map(line => {
+          line = line.trim();
+          
+          // Formatting helper
+          const formatLine = (text: string) => text
+              .replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>')
+              .replace(/`([^`]+)`/g, '<code class="bg-zinc-800 px-1 py-0.5 rounded text-xs text-zinc-300 font-mono border border-white/5 break-all whitespace-normal">$1</code>')
+              .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" class="text-indigo-400 hover:text-indigo-300 hover:underline decoration-indigo-400/30 break-all">$1</a>');
+
+          // Lists
+          if (line.startsWith('- ') || line.startsWith('* ')) {
+              return `<li class="ml-4 list-disc marker:text-zinc-600 mb-1 pl-1 text-zinc-400">${formatLine(line.substring(2))}</li>`;
+          }
+          
+          // Headers
+          if (line.startsWith('##')) {
+               return `<h3 class="text-sm font-bold mt-6 mb-3 text-zinc-100 flex items-center gap-2 border-b border-white/5 pb-2 uppercase tracking-wide">${line.replace(/^#+\s+/, '')}</h3>`;
+          }
+          if (line.startsWith('#')) {
+               return `<h3 class="text-base font-bold mt-6 mb-3 text-white">${line.replace(/^#+\s+/, '')}</h3>`;
+          }
+          
+          // Blockquotes
+          if (line.startsWith('> ')) {
+              return `<blockquote class="border-l-2 border-zinc-700 pl-4 py-1 my-2 text-zinc-500 italic bg-white/5 rounded-r-sm">${formatLine(line.substring(2))}</blockquote>`;
+          }
+          
+          // Empty lines
+          if (line === '') return '<div class="h-2"></div>';
+          
+          // Paragraphs
+          return `<p class="mb-1.5 leading-relaxed">${formatLine(line)}</p>`;
+      }).join('');
+  }
+</script>
+
+<div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
+  <!-- Fixed Background -->
+  <div class="absolute inset-0 bg-gradient-to-t from-[#09090b] via-[#09090b]/60 to-transparent"></div>
 </div>
 
-<div class="relative z-10 h-full flex flex-col justify-end p-12 pb-24">
-  <!-- 3D Floating Hero Text -->
-  <div 
-    class="transition-transform duration-200 ease-out origin-bottom-left"
-    style:transform={`perspective(1000px) rotateX(${mouseY * -2}deg) rotateY(${mouseX * 2}deg)`}
-  >
-    <h1
-      class="text-8xl font-black tracking-tighter dark:text-white text-gray-900 drop-shadow-2xl mb-4"
-      style:text-shadow="0 10px 30px rgba(0,0,0,0.5)"
-    >
-      MINECRAFT
-    </h1>
-    
-    <div class="flex items-center gap-4">
+<!-- Scrollable Container -->
+<div class="relative z-10 h-full {releasesState.isLoading || releasesState.releases.length === 0 ? 'overflow-hidden' : 'overflow-y-auto custom-scrollbar scroll-smooth'}">
+  
+  <!-- Hero Section (Full Height) -->
+  <div class="min-h-full flex flex-col justify-end p-12 pb-32">
+     <!-- 3D Floating Hero Text -->
       <div 
-        class="bg-white/10 dark:bg-white/10 bg-black/5 backdrop-blur-md border dark:border-white/10 border-black/10 px-4 py-1.5 rounded-full text-sm font-bold uppercase tracking-widest text-emerald-500 dark:text-emerald-400 shadow-xl"
+        class="transition-transform duration-200 ease-out origin-bottom-left"
+        style:transform={`perspective(1000px) rotateX(${mouseY * -1}deg) rotateY(${mouseX * 1}deg)`}
       >
-        Java Edition
+        <div class="flex items-center gap-3 mb-6">
+           <div class="h-px w-12 bg-white/50"></div>
+           <span class="text-xs font-mono font-bold tracking-[0.2em] text-white/50 uppercase">Launcher Active</span>
+        </div>
+
+        <h1
+          class="text-8xl font-black tracking-tighter text-white mb-6 leading-none"
+        >
+          MINECRAFT
+        </h1>
+        
+        <div class="flex items-center gap-4">
+          <div 
+            class="bg-white/10 backdrop-blur-md border border-white/10 px-3 py-1 rounded-sm text-xs font-bold uppercase tracking-widest text-white shadow-sm"
+          >
+            Java Edition
+          </div>
+          <div class="h-4 w-px bg-white/20"></div>
+          <div class="text-xl font-light text-zinc-400">
+            Latest Release <span class="text-white font-medium">{gameState.latestRelease?.id || '...'}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Area -->
+      <div class="mt-8 flex gap-4">
+        <div class="text-zinc-500 text-sm font-mono">
+          > Ready to launch session.
+        </div>
       </div>
-      <div class="text-2xl font-light dark:text-zinc-300 text-gray-600">
-        Latest Release 1.21
+
+      <!-- Scroll Hint -->
+      {#if !releasesState.isLoading && releasesState.releases.length > 0}
+      <div class="absolute bottom-10 left-12 animate-bounce text-zinc-600 flex flex-col items-center gap-2 w-fit opacity-50 hover:opacity-100 transition-opacity">
+          <span class="text-[10px] font-mono uppercase tracking-widest">Scroll for Updates</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg>
       </div>
-    </div>
+      {/if}
   </div>
 
-  <!-- Action Area -->
-  <div class="mt-8 flex gap-4">
-    <!-- Quick Play Button (Visual only here, logic is in BottomBar usually) -->
-    <div class="dark:text-zinc-400 text-gray-500 text-sm italic">
-      Ready to play. Select version below or hit Launch.
-    </div>
+  <!-- Changelog / Updates Section -->
+  <div class="bg-[#09090b] relative z-20 px-12 pb-24 pt-12 border-t border-white/5 min-h-[50vh]">
+      <div class="max-w-4xl">
+          <h2 class="text-2xl font-bold text-white mb-10 flex items-center gap-3">
+              <span class="w-1.5 h-8 bg-emerald-500 rounded-sm"></span>
+              LATEST UPDATES
+          </h2>
+
+          {#if releasesState.isLoading}
+            <div class="flex flex-col gap-8">
+                {#each Array(3) as _}
+                    <div class="h-48 bg-white/5 rounded-sm animate-pulse border border-white/5"></div>
+                {/each}
+            </div>
+          {:else if releasesState.error}
+             <div class="p-6 border border-red-500/20 bg-red-500/10 text-red-400 rounded-sm">
+                 Failed to load updates: {releasesState.error}
+             </div>
+          {:else if releasesState.releases.length === 0}
+             <div class="text-zinc-500 italic">No releases found.</div>
+          {:else}
+             <div class="space-y-12">
+                 {#each releasesState.releases as release}
+                    <div class="group relative pl-8 border-l border-white/10 pb-4 last:pb-0 last:border-l-0">
+                        <!-- Timeline Dot -->
+                        <div class="absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full bg-zinc-800 border border-zinc-600 group-hover:bg-emerald-500 group-hover:border-emerald-400 transition-colors"></div>
+                        
+                        <div class="flex items-baseline gap-4 mb-3">
+                             <h3 class="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">
+                                {release.name || release.tag_name}
+                             </h3>
+                             <div class="text-xs font-mono text-zinc-500 flex items-center gap-2">
+                                <Calendar size={12} />
+                                {formatDate(release.published_at)}
+                             </div>
+                        </div>
+
+                        <div class="bg-zinc-900/50 border border-white/5 hover:border-white/10 rounded-sm p-6 text-zinc-400 text-sm leading-relaxed transition-colors overflow-hidden">
+                            <div class="prose prose-invert prose-sm max-w-none prose-p:text-zinc-400 prose-headings:text-zinc-200 prose-ul:my-2 prose-li:my-0 break-words whitespace-normal">
+                                {@html formatBody(release.body)}
+                            </div>
+                        </div>
+                        
+                        <a href={release.html_url} target="_blank" class="inline-flex items-center gap-2 mt-3 text-[10px] font-bold uppercase tracking-wider text-zinc-600 hover:text-white transition-colors">
+                            View full changelog on GitHub <ExternalLink size={10} />
+                        </a>
+                    </div>
+                 {/each}
+             </div>
+          {/if}
+      </div>
   </div>
 </div>