feat: add overlay while websocket connects

2026-06-19 04:00:04 -03:00
parent d15930a1c3
commit 79f6748a35
3 changed files with 136 additions and 6 deletions
@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useWebsocketStore } from "../store/useWebsocketStore";
+import styles from "../styles/AppContainer.module.css";
+
+export default function AppContainer({ children }: { children: React.ReactNode }) {
+    const { connect, isConnected } = useWebsocketStore();
+    const [showHelp, setShowHelp] = useState(false);
+
+    useEffect(() => {
+        connect();
+
+        const timer = setTimeout(() => {
+            setShowHelp(true);
+        }, 3000);
+
+        return () => clearTimeout(timer);
+    }, [connect]);
+
+    if (!isConnected) {
+        return (
+            <div className={styles.overlay}>
+                <div className={styles.card}>
+                    <h1 className={styles.title}>Hex: Unlocked</h1>
+                    <p className={styles.subtitle}>Awaiting unlocker connection</p>
+
+                    <div className={styles.spinner}></div>
+
+                    {showHelp && (
+                        <div className={styles.helpText}>
+                            <p style={{ marginBottom: '0.5rem' }}>Make sure the client is running.</p>
+                            <p>
+                                Don't have it? Download it <a href="https://git.neru.rip/neru/HexUnlocked" target="_blank" rel="noreferrer" className={styles.link}>here</a>
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return <>{children}</>;
+}