Fixed targetPreview

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -9,9 +9,26 @@ import { useSession } from "next-auth/react"
 import { useRouter } from "next/router"
 import { Fragment, useEffect, useState } from "react"
 
+function WithDots({ children }: { children: string }) {
+  const [dots, setDots] = useState(3)
+
+  useEffect(() => {
+    const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
+    return () => clearInterval(interval)
+  }, [])
+  return (
+    <>
+      {children + " "}
+      {Array.from(Array(dots), () => ".").join("")}
+      {Array.from(Array(3 - dots), (_, i) => (
+        <Fragment key={i}>&nbsp;</Fragment>
+      ))}
+    </>
+  )
+}
+
 function LobbyFrame({ openSettings }: { openSettings: () => void }) {
   const { payload, full, leave, reset } = useGameProps()
-  const [dots, setDots] = useState(3)
   const { isConnected } = useSocket()
   const router = useRouter()
   const { data: session } = useSession()
@@ -21,12 +38,6 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
     socket.emit("update", full)
   }, [full, payload?.game?.id, isConnected])
 
-  useEffect(() => {
-    if (payload?.player2) return
-    const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
-    return () => clearInterval(interval)
-  }, [payload?.player2])
-
   return (
     <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
       <div className="flex items-center justify-between border-b-2 border-slate-900">
@@ -58,11 +69,9 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
           />
         ) : (
           <p className="font-farro w-96 text-center text-4xl font-medium">
-            Warte auf {isConnected ? "Spieler 2" : "Verbindung"}{" "}
-            {Array.from(Array(dots), () => ".").join("")}
-            {Array.from(Array(3 - dots), (_, i) => (
-              <Fragment key={i}>&nbsp;</Fragment>
-            ))}
+            <WithDots>
+              {"Warte auf " + (isConnected ? "Spieler 2" : "Verbindung")}
+            </WithDots>
           </p>
         )}
       </div>