aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/ui/src/components/HomeView.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src/components/HomeView.svelte')
-rw-r--r--ui/src/components/HomeView.svelte70
1 files changed, 68 insertions, 2 deletions
diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
index 7bb7e44..2fa8390 100644
--- a/ui/src/components/HomeView.svelte
+++ b/ui/src/components/HomeView.svelte
@@ -3,6 +3,7 @@
import { gameState } from '../stores/game.svelte';
import { releasesState } from '../stores/releases.svelte';
import { Calendar, ExternalLink } from 'lucide-svelte';
+ import { getSaturnEffect } from './ParticleBackground.svelte';
type Props = {
mouseX: number;
@@ -10,6 +11,60 @@
};
let { mouseX = 0, mouseY = 0 }: Props = $props();
+ // Saturn effect mouse interaction handlers
+ function handleSaturnMouseDown(e: MouseEvent) {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleMouseDown(e.clientX);
+ }
+ }
+
+ function handleSaturnMouseMove(e: MouseEvent) {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleMouseMove(e.clientX);
+ }
+ }
+
+ function handleSaturnMouseUp() {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleMouseUp();
+ }
+ }
+
+ function handleSaturnMouseLeave() {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleMouseUp();
+ }
+ }
+
+ function handleSaturnTouchStart(e: TouchEvent) {
+ if (e.touches.length === 1) {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleTouchStart(e.touches[0].clientX);
+ }
+ }
+ }
+
+ function handleSaturnTouchMove(e: TouchEvent) {
+ if (e.touches.length === 1) {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleTouchMove(e.touches[0].clientX);
+ }
+ }
+ }
+
+ function handleSaturnTouchEnd() {
+ const effect = getSaturnEffect();
+ if (effect) {
+ effect.handleTouchEnd();
+ }
+ }
+
onMount(() => {
releasesState.loadReleases();
});
@@ -65,6 +120,7 @@
// Formatting helper
const formatLine = (text: string) => text
.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>')
+ .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em class="text-zinc-400 italic">$1</em>')
.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>');
@@ -103,8 +159,18 @@
<!-- Scrollable Container -->
<div class="relative z-10 h-full {releasesState.isLoading ? '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">
+ <!-- Hero Section (Full Height) - Interactive area for Saturn rotation -->
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
+ <div
+ class="min-h-full flex flex-col justify-end p-12 pb-32 cursor-grab active:cursor-grabbing select-none"
+ onmousedown={handleSaturnMouseDown}
+ onmousemove={handleSaturnMouseMove}
+ onmouseup={handleSaturnMouseUp}
+ onmouseleave={handleSaturnMouseLeave}
+ ontouchstart={handleSaturnTouchStart}
+ ontouchmove={handleSaturnTouchMove}
+ ontouchend={handleSaturnTouchEnd}
+ >
<!-- 3D Floating Hero Text -->
<div
class="transition-transform duration-200 ease-out origin-bottom-left"