src/frontend/shared/StarWarsEffect.svelte

<!-- StarWarsEffect.svelte -->

<script lang="ts">
    import { onMount, onDestroy } from 'svelte';

    /**
     * Props for the StarWarsEffect component.
     * @typedef {Object} Props
     * @property {Array<{title?: string, name?: string, section_title?: string}>} credits - List of credits, can include sections.
     * @property {number} speed - Animation speed in seconds (default: 40).
     * @property {number} base_font_size - Base font size in rem (default: 1.5).
     * @property {string | null} background_color - Background color (default: black).
     * @property {string | null} title_color - Title text color (default: #feda4a).
     * @property {string | null} name_color - Name text color (default: #feda4a).
     * @property {string | null} intro_title - Optional intro title.
     * @property {string | null} intro_subtitle - Optional intro subtitle.
     * @property {"stacked" | "two-column"} layout_style - Layout for credits.
     * @property {boolean} title_uppercase - Transform title to uppercase.
     * @property {boolean} name_uppercase - Transform name to uppercase.
     * @property {boolean} section_title_uppercase - Transform section title to uppercase.
     * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
     * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.
     * @property {string} scroll_logo_height - Height of the scrolling logo.
     */
    export let credits: Props['credits'];
    export let speed: number = 40;
    export let base_font_size: number = 1.5;
    export let background_color: string | null = null;
    export let title_color: string | null = null;
    export let name_color: string | null = null;
    export let intro_title: string | null = null;
    export let intro_subtitle: string | null = null;   
    export let layout_style: "stacked" | "two-column" = "stacked";
    export let title_uppercase: boolean = false;
    export let name_uppercase: boolean = false;
    export let section_title_uppercase: boolean = true;
    export let swap_font_sizes_on_two_column: boolean = false;
    export let scroll_logo_path: { url: string | null } | null = null;
    export let scroll_logo_height: string = "120px";
    
    // Reactive styles
    $: title_style = (is_intro: boolean) => `color: ${title_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem;`;
    $: name_style = (is_intro: boolean) => `color: ${name_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.7}rem;`;
    $: section_title_style = `color: ${title_color || '#feda4a'}; font-size: ${base_font_size * 1.2}rem;`;

    // Combine intro and credits for display
    $: display_items = (() => {
        const items = [];
        if (intro_title || intro_subtitle) {
            items.push({
                title: intro_title || '',
                name: intro_subtitle || '',
                is_intro: true
            });
        }
        return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
    })();

    let crawlElement: HTMLElement | null;

    function resetAnimation() {
        if (crawlElement) {
            crawlElement.style.animation = 'none';
            void crawlElement.offsetHeight; // Trigger reflow
            crawlElement.style.animation = '';
        }
    }

    onMount(resetAnimation);
    onDestroy(() => { crawlElement = null; });

    // Trigger reset on prop changes
    $: credits, speed, layout_style, resetAnimation();

    // Generate star shadows for background
    const generate_star_shadows = (count: number, size: string) => {
        let shadows = Array.from({ length: count }, () => `${Math.random() * 2000}px ${Math.random() * 2000}px ${size} white`).join(', ');
        return shadows;
    };
    const small_stars = generate_star_shadows(200, '1px');
    const medium_stars = generate_star_shadows(100, '2px');
    const large_stars = generate_star_shadows(50, '3px');
</script>

<div class="viewport" style:background={background_color || 'black'}>
    <div class="stars small" style="box-shadow: {small_stars};"></div>
    <div class="stars medium" style="box-shadow: {medium_stars};"></div>
    <div class="stars large" style="box-shadow: {large_stars};"></div>

    <div class="crawl" bind:this={crawlElement} style="--animation-duration: {speed}s;">
        {#if scroll_logo_path?.url}
                <div class="scroll-logo-container">
                <img src={scroll_logo_path.url} alt="Scrolling Logo" style:height={scroll_logo_height} />
                </div>
        {/if}
        {#each display_items as item}
            <!-- Render Section Title -->
            {#if item.section_title}
                <div class="section-title" style={section_title_style} class:uppercase={section_title_uppercase}>
                    {item.section_title}
                </div>
            <!-- Render Credit or Intro -->
            {:else}
                {#if layout_style === 'two-column' && !item.is_intro}
                    <!-- Two-Column Layout -->
                    <div class="credit-two-column">
                        <span style={swap_font_sizes_on_two_column ? name_style(false) : title_style(false)} class:uppercase={title_uppercase}>{item.title}</span>
                        <span class="spacer"></span>
                        <span style={swap_font_sizes_on_two_column ? title_style(false) : name_style(false)} class:uppercase={name_uppercase}>{item.name}</span>
                    </div>
                {:else}
                    <!-- Stacked Layout -->
                    <div class="credit" class:intro-block={item.is_intro}>
                        <h2 style={title_style(item.is_intro)} class:uppercase={title_uppercase && !item.is_intro}>{item.title}</h2>
                        {#if item.name}<p style={name_style(item.is_intro)} class:uppercase={name_uppercase && !item.is_intro}>{item.name}</p>{/if}
                    </div>
                {/if}
            {/if}
        {/each}
    </div>
</div>

<style>
    
    .viewport {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        perspective: 400px;
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        font-family: "Droid Sans", sans-serif;
        font-weight: bold;
    }
    .stars {
        position: absolute; top: 0; left: 0;
        width: 1px; height: 1px;
        background: transparent; z-index: 0;
        animation: twinkle 10s linear infinite;
    }
    .stars.small { animation-duration: 10s; }
    .stars.medium { animation-duration: 15s; }
    .stars.large { animation-duration: 20s; }
    @keyframes twinkle { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
    
    .crawl {
        position: absolute; width: 100%; bottom: 0;
        transform-origin: 50% 100%;
        animation: crawl-animation var(--animation-duration) linear infinite;
        z-index: 1; text-align: center;
    }
    @keyframes crawl-animation {
        0% { transform: rotateX(60deg) translateY(100%) translateZ(100px); }
        100% { transform: rotateX(60deg) translateY(-150%) translateZ(-1200px); }
    }
    
    /* STYLES */
    .scroll-logo-container {
        text-align: center;
        margin-bottom: 2rem;
    }
    .scroll-logo-container img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 70%;
        object-fit: contain;    
        filter: grayscale(1) sepia(100%) hue-rotate(15deg) saturate(8) brightness(1.2);
    }
    .uppercase { text-transform: uppercase; }
    
    .section-title {
        margin-top: 5rem;
        margin-bottom: 3rem;
        font-weight: bold;
    }

    .credit.intro-block { margin-bottom: 5rem; }
    .credit { margin-bottom: 2rem; }
    .credit h2, .credit p { margin: 0.5rem 0; padding: 0; white-space: nowrap; }

    .credit-two-column {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 0.8rem auto;
        width: 90%;
        white-space: nowrap;
    }
    .credit-two-column .spacer {
        flex-grow: 1;
        border-bottom: 1px dotted rgba(254, 218, 74, 0.3);
        margin: 0 1em;
        transform: translateY(-0.5em);
    }
</style>