import { Link } from '@inertiajs/react';
import { Tv } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Button } from '@/components/ui/button';
import { useTranslation } from '@/contexts/LanguageContext';
import type { GameSummary } from '@/types/games';
interface Props {
games: GameSummary[];
}
/**
* Arcade TV brand color — a vivid indigo that lives between the existing
* Flash red (#e3232c) and Featured red (#d60000) banner colors. Used as
* the on-button text color to anchor the band's identity.
*/
const ARCADE_TV_COLOR = '#4338ca';
/**
* Banner backdrop — a layered gradient that sweeps from a deep indigo
* (left) through the brand indigo into a violet/fuchsia accent (right),
* with a soft radial glow over the right side so the marquee gets a
* natural pool of light.
*/
const ARCADE_TV_GRADIENT = [
'radial-gradient(circle at 82% 50%, rgba(192, 132, 252, 0.35) 0%, transparent 55%)',
'linear-gradient(120deg, #1e1b4b 0%, #4338ca 45%, #7e22ce 100%)',
].join(', ');
/**
* Home-page promo banner for the Arcade TV experience. The marquee track
* sits BEHIND the text content and spans the full section width, so the
* cards peek through both halves of the banner. A dark scrim from the
* left side keeps the headline and CTA legible on top of the moving
* thumbnails.
*
* Rendered between the Flash Games strip and the Tournaments section
* in default Home.tsx, gated by the `arcadeTvEnabled` prop (driven by
* `Plugin::hasActive('arcade-tv')` in HomeController).
*/
export default function ArcadeTvBanner({ games }: Props) {
const { t } = useTranslation();
return (
{/* CRT scanline overlay — faint horizontal stripes for the
"TV" register. */}
{/* Dot-grid texture for tactile depth. */}
{/* Decorative blurred orb in the bottom-left for asymmetric weight. */}
{/* Full-width marquee layer — sits BEHIND the text. Cards are
taller than the band so they peek through, with the top
portion of each card clipped by the section's overflow. */}
{/* Scrim covering the text area so the headline + CTA stay
legible over the moving cards. Holds higher opacity for
~70% of the width (matching the text container) before
fading away to let the cards take over the right edge. */}
{/* Foreground content — heading, subhead, CTA. Sized larger
and given a wider container since the marquee fills the
rest of the banner — this is the only text in the top layer. */}
{t('Arcade TV')}
{t('Play on the big screen')}
{t('Play games on your TV\'s browser with your phone as a single-player controller. Or gather friends for multiplayer nights with select titles — up to 8 players in the same room, no extra hardware needed.')}
);
}
/**
* Horizontal marquee of TV-flagged game thumbnails styled as a row of
* tilted, oversized cards that peek through the band. The track contains
* the catalog twice and translates from 0 to -50% so it loops seamlessly.
* Pause-on-hover is disabled because the layer is `pointer-events-none`
* (cards aren't clickable — the Start Playing CTA owns interaction).
*
* Renders nothing when no games are available; the banner still works on
* the strength of the headline + CTA alone.
*/
function ArcadeTvMarquee({ games }: { games: GameSummary[] }) {
const reducedMotion = useReducedMotion();
const tiles = pickTiles(games, 10);
// Random rotation/y-offset/peek-depth per tile, generated once per
// mount and reused for the duplicated set so both halves of the
// marquee remain identical (preserving the seamless loop). Random
// values stay stable across re-renders within a single mount.
const variations = useTileVariations(tiles.length);
if (tiles.length === 0) return null;
// Pixel step between card lefts. Cards are 180px wide, step is 155px,
// so each new card overlaps the previous by 25px — enough to read as
// "stacked" without crowding the row.
const STEP = 155;
// Duplicate so the marquee loops seamlessly — the second set lands
// exactly where the first set started after a -50% translate.
const trackTiles = [...tiles, ...tiles];
const trackWidth = trackTiles.length * STEP;
return (
{trackTiles.map((tile, i) => {
const idxInSet = i % tiles.length;
const v = variations[idxInSet];
return (
);
}
// Prefer the upstream-provided animated preview when available — falls
// back to the static thumbnail when the game ships without one or the
// user prefers reduced motion.
const showVideo = !reducedMotion && !!tile.preview_video && !!tile.thumbnail;
return (
{showVideo ? (
) : tile.thumbnail ? (
) : (
)}
);
}
/**
* Generate a random rotation + y-offset per unique tile slot, stable for
* the lifetime of the component mount. Returned as an array so the
* marquee's duplicated set can index into the same values (`i % len`)
* and preserve the seamless loop. Re-runs only when `count` changes,
* so a server-side game shuffle that swaps catalog entries but keeps
* the same length doesn't disturb the visual rhythm.
*/
// Deterministic, pure pseudo-random in [0,1) from an integer seed — stable across renders.
function seededRand(seed: number): number {
const x = Math.sin(seed * 12.9898) * 43758.5453;
return x - Math.floor(x);
}
function useTileVariations(count: number): { rotate: number; yOffset: number }[] {
return useMemo(() => {
return Array.from({ length: count }, (_, i) => ({
rotate: -10 + seededRand(i + 1) * 20, // -10°…+10°
yOffset: seededRand(i + 101) * 20, // 0–20px additional peek
}));
}, [count]);
}
/**
* Subscribes to `prefers-reduced-motion` so the marquee tiles can fall
* back to static thumbnails for users who opt out of motion. Mirrors the
* pattern used in HoverPreviewVideo.
*/
function useReducedMotion(): boolean {
const [reduced, setReduced] = useState(false);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const m = window.matchMedia('(prefers-reduced-motion: reduce)');
const update = () => setReduced(m.matches);
update();
m.addEventListener('change', update);
return () => m.removeEventListener('change', update);
}, []);
return reduced;
}
/**
* Use only real games — never pad with duplicates. The marquee adds its
* own duplicate set for the seamless loop, so padding here would cause
* the same thumbnail to appear too close to itself in the visible window.
* Returns an empty array when zero games are available — the caller then
* renders nothing (banner still has headline + CTA).
*/
function pickTiles(games: GameSummary[], max: number): GameSummary[] {
return games.slice(0, max);
}