8-bit Loading Screen

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import { Progress } from "@/components/ui/8bit/progress";
8 
9const DEFAULT_TIPS = [
10  "Press any key to continue...",
11  "Did you know? Saving often prevents lost progress!",
12  "Tip: Explore every corner for hidden treasures.",
13  "Remember to take breaks during long gaming sessions!",
14  "Pro tip: Read the manual for secret moves.",
15];
16 
17export interface LoadingScreenProps extends React.ComponentProps<"div"> {
18  title?: string;
19  tips?: string[];
20  progress?: number;
21  showPercentage?: boolean;
22  tipInterval?: number;
23  variant?: "default" | "fullscreen";
24  autoProgress?: boolean;
25  autoProgressDuration?: number;
26}
27 
28export default function LoadingScreen({
29  className,
30  title = "LOADING",
31  tips = DEFAULT_TIPS,
32  progress = 0,
33  showPercentage = true,
34  tipInterval = 3000,
35  variant = "default",
36  autoProgress = false,
37  autoProgressDuration = 5000,
38  ...props
39}: LoadingScreenProps) {
40  const [currentTipIndex, setCurrentTipIndex] = useState(0);
41  const [showCursor, setShowCursor] = useState(true);
42  const [internalProgress, setInternalProgress] = useState(
43    autoProgress ? 0 : progress
44  );
45 
46  useEffect(() => {
47    if (!autoProgress) {
48      setInternalProgress(progress);
49      return;
50    }
51 
52    setInternalProgress(0);
53    const step = 5;
54    const steps = 100 / step;
55    const intervalTime = autoProgressDuration / steps;
56 
57    const timer = setInterval(() => {
58      setInternalProgress((prev) => {
59        const next = prev + step;
60        if (next >= 100) {
61          clearInterval(timer);
62          return 100;
63        }
64        return next;
65      });
66    }, intervalTime);
67 
68    return () => clearInterval(timer);
69  }, [autoProgress, autoProgressDuration, progress]);
70 
71  useEffect(() => {
72    if (tips.length === 0) return;
73 
74    const tipTimer = setInterval(() => {
75      setCurrentTipIndex((prev) => (prev + 1) % tips.length);
76    }, tipInterval);
77 
78    return () => clearInterval(tipTimer);
79  }, [tips, tipInterval]);
80 
81  useEffect(() => {
82    const cursorTimer = setInterval(() => {
83      setShowCursor((prev) => !prev);
84    }, 530);
85 
86    return () => clearInterval(cursorTimer);
87  }, []);
88 
89  const isFullscreen = variant === "fullscreen";
90  const displayProgress = autoProgress ? internalProgress : progress;
91 
92  const content = (
93    <div className="flex flex-col items-center justify-center gap-6 p-8">
94      {/* Title */}
95      <h2
96        className={cn(
97// … truncated