Synthetic changes based on coding preferences

leaky-ships/components/Gamefield/BorderTiles.tsx

@@ -141,7 +141,7 @@ function BorderTiles() {
                     : true),
               })
             }
-          ></div>
+          />
         )
       })}
     </>

leaky-ships/components/Gamefield/EventBar.tsx

@@ -329,7 +329,7 @@ function EventBar({ clear }: { clear: () => void }) {
 
   return (
     <div className="event-bar">
-      {menu !== "main" && (
+      {menu !== "main" ? (
         <Item
           props={{
             icon: faReply,
@@ -339,13 +339,13 @@ function EventBar({ clear }: { clear: () => void }) {
               useGameProps.setState({ menu: "main" })
             },
           }}
-        ></Item>
-      )}
+        />
+      ) : null}
       {items[menu].map((e, i) => {
         if (!isActiveIndex && menu === "main" && i === 1) return
         return <Item key={i} props={e} />
       })}
-      {menu === "moves" && (
+      {menu === "moves" ? (
         <Item
           props={{
             icon:
@@ -362,29 +362,32 @@ function EventBar({ clear }: { clear: () => void }) {
               payload?.game?.state === "running" && mode >= 0 && target.show,
             callback: () => {
               if (selfIndex < 0) return
-              if (payload?.game?.state === "starting") {
-                const isReady = !userStates[selfIndex].isReady
-                setIsReady({ isReady, i: selfIndex })
-                socket.emit("isReady", isReady)
-              }
-              if (payload?.game?.state === "running") {
-                const i = (selfUser?.moves ?? [])
-                  .map((e) => e.index)
-                  .reduce((prev, curr) => (curr > prev ? curr : prev), 0)
-                const props = {
-                  type: modes[mode].type,
-                  x: target.x,
-                  y: target.y,
-                  orientation: target.orientation,
-                  index: (selfUser?.moves ?? []).length ? i + 1 : 0,
-                }
-                socket.emit("dispatchMove", props)
-                setTarget((t) => ({ ...t, show: false }))
+              switch (payload?.game?.state) {
+                case "starting":
+                  const isReady = !userStates[selfIndex].isReady
+                  setIsReady({ isReady, i: selfIndex })
+                  socket.emit("isReady", isReady)
+                  break
+
+                case "running":
+                  const i = (selfUser?.moves ?? [])
+                    .map((e) => e.index)
+                    .reduce((prev, curr) => (curr > prev ? curr : prev), 0)
+                  const props = {
+                    type: modes[mode].type,
+                    x: target.x,
+                    y: target.y,
+                    orientation: target.orientation,
+                    index: (selfUser?.moves ?? []).length ? i + 1 : 0,
+                  }
+                  socket.emit("dispatchMove", props)
+                  setTarget((t) => ({ ...t, show: false }))
+                  break
               }
             },
           }}
-        ></Item>
-      )}
+        />
+      ) : null}
     </div>
   )
 }

leaky-ships/components/Gamefield/Gamefield.tsx

@@ -20,7 +20,7 @@ import Ships from "./Ships"
 export const count = 12
 
 function Gamefield() {
-  const { isActiveIndex, selfUser } = useIndex()
+  const { selfUser } = useIndex()
   const router = useRouter()
   const {
     userStates,
@@ -110,17 +110,15 @@ function Gamefield() {
           setMouseCursor((e) => ({ ...e, shouldShow: false }))
         }
       >
-        {/* Bordes */}
         <BorderTiles />
 
         {/* Collumn lettes and row numbers */}
         <Labeling />
 
-        {/* Ships */}
-        <HitElems />
-        {(payload?.game?.state !== "running" || !isActiveIndex) && <Ships />}
+        <Ships />
+
+        <HitElems />
 
-        {/* Fog images */}
         {/* <FogImages /> */}
 
         <Targets />

leaky-ships/components/Gamefield/Item.tsx

@@ -40,9 +40,7 @@ function Item({
         >
           <HexColorPicker color={color} onChange={setColor} />
         </div>
-      ) : (
-        <></>
-      )}
+      ) : null}
       <div
         className={classNames("container", {
           amount: typeof amount !== "undefined",

leaky-ships/components/Gamefield/Ships.tsx

@@ -1,8 +1,12 @@
+import { useGameProps } from "@hooks/useGameProps"
 import useIndex from "@hooks/useIndex"
 import Ship from "./Ship"
 
 function Ships() {
-  const { selfUser } = useIndex()
+  const { payload } = useGameProps()
+  const { isActiveIndex, selfUser } = useIndex()
+
+  if (payload?.game?.state === "running" && isActiveIndex) return null
 
   return (
     <>{selfUser?.ships.map((props, i) => <Ship key={i} props={props} />)}</>

leaky-ships/components/Gamefield/Targets.tsx

@@ -15,52 +15,57 @@ function Targets() {
   const { payload, target, targetPreview, mode } = useGameProps()
   const { ships } = useShips()
 
-  if (payload?.game?.state === "running")
-    return (
-      <>
-        {[
-          ...composeTargetTiles(target, mode, activeUser?.hits ?? []).map(
-            (props, i) => <GamefieldPointer key={"t" + i} props={props} />,
-          ),
-          ...composeTargetTiles(
-            targetPreview,
-            mode,
-            activeUser?.hits ?? [],
-          ).map((props, i) => (
-            <GamefieldPointer key={"p" + i} props={props} preview />
-          )),
-        ]}
-      </>
-    )
+  switch (payload?.game?.state) {
+    case "running":
+      return (
+        <>
+          {[
+            ...composeTargetTiles(target, mode, activeUser?.hits ?? []).map(
+              (props, i) => <GamefieldPointer key={"t" + i} props={props} />,
+            ),
+            ...composeTargetTiles(
+              targetPreview,
+              mode,
+              activeUser?.hits ?? [],
+            ).map((props, i) => (
+              <GamefieldPointer key={"p" + i} props={props} preview />
+            )),
+          ]}
+        </>
+      )
 
-  if (payload?.game?.state === "starting" && mode >= 0 && targetPreview.show) {
-    const ship = shipProps(ships, mode, targetPreview)
-    const { fields, borders, score } = intersectingShip(ships, ship)
-    return (
-      <>
-        <Ship
-          preview
-          warn={score > 0}
-          color={fields.length ? "red" : borders.length ? "orange" : undefined}
-          key={targetPreview.orientation}
-          props={ship}
-        />
-        <HitElems
-          props={{
-            hits: fields.map((e, i) => ({ ...e, i, hit: true })),
-          }}
-        />
-        <HitElems
-          props={{
-            hits: borders.map((e, i) => ({ ...e, i, hit: true })),
-            colorOverride: "orange",
-          }}
-        />
-      </>
-    )
+    case "starting":
+      if (mode < 0 && !targetPreview.show) return null
+      const ship = shipProps(ships, mode, targetPreview)
+      const { fields, borders, score } = intersectingShip(ships, ship)
+      return (
+        <>
+          <Ship
+            preview
+            warn={score > 0}
+            color={
+              fields.length ? "red" : borders.length ? "orange" : undefined
+            }
+            key={targetPreview.orientation}
+            props={ship}
+          />
+          <HitElems
+            props={{
+              hits: fields.map((e, i) => ({ ...e, i, hit: true })),
+            }}
+          />
+          <HitElems
+            props={{
+              hits: borders.map((e, i) => ({ ...e, i, hit: true })),
+              colorOverride: "orange",
+            }}
+          />
+        </>
+      )
+
+    default:
+      return null
   }
-
-  return <></>
 }
 
 export default Targets

leaky-ships/components/Grid.tsx

@@ -86,7 +86,7 @@ function Grid() {
           className={classNames("tile", { active: active })}
           style={{ "--delay": pos + "s" } as CSSProperties}
           onClick={() => doEffect(x, y)}
-        ></div>
+        />
       )
     }
 

leaky-ships/components/Grid2.tsx

@@ -87,7 +87,7 @@ function Grid2() {
           className={classNames("tile", active ? "active" : "inactive")}
           style={{ "--delay": pos + "s" } as CSSProperties}
           onClick={() => doEffect(x, y)}
-        ></div>
+        />
       )
     }
 

leaky-ships/components/Lobby/Player.tsx

@@ -78,9 +78,7 @@ function Player({
               icon={faCaretDown}
             />
           </button>
-        ) : (
-          <></>
-        )}
+        ) : null}
       </div>
       <Button
         type={isConnected ? (isReady ? "green" : "orange") : "gray"}

leaky-ships/pages/game.tsx

@@ -38,7 +38,7 @@ export default function Game() {
 
   return (
     <div className="h-full bg-theme">
-      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly"></div>
+      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly" />
     </div>
   )
 }

leaky-ships/pages/lobby.tsx

@@ -33,7 +33,7 @@ export default function Lobby() {
         <LobbyFrame openSettings={() => setSettings(true)} />
       </div>
       <BurgerMenu blur={settings} />
-      {settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
+      {settings ? <Settings closeSettings={() => setSettings(false)} /> : null}
     </div>
   )
 }

leaky-ships/pages/signin.tsx

@@ -129,19 +129,21 @@ function Login() {
             </button>
           </div>
         </div>
-        {errorType && <hr className="mt-8 border-gray-400" />}
-        {errorType && (
-          <div className="flex flex-col items-center">
-            <button
-              id="back"
-              onClick={() => router.push("/")}
-              className="mt-10 rounded-lg border-2 border-gray-400 bg-gray-500 bg-opacity-75 px-16 py-2 text-white shadow-inner drop-shadow-md backdrop-blur-md transition-colors duration-300 hover:border-blue-600"
-            >
-              <FontAwesomeIcon icon={faLeftLong} />
-              <span className="mx-4 font-bold">Return</span>
-            </button>
-          </div>
-        )}
+        {errorType ? (
+          <>
+            <hr className="mt-8 border-gray-400" />
+            <div className="flex flex-col items-center">
+              <button
+                id="back"
+                onClick={() => router.push("/")}
+                className="mt-10 rounded-lg border-2 border-gray-400 bg-gray-500 bg-opacity-75 px-16 py-2 text-white shadow-inner drop-shadow-md backdrop-blur-md transition-colors duration-300 hover:border-blue-600"
+              >
+                <FontAwesomeIcon icon={faLeftLong} />
+                <span className="mx-4 font-bold">Return</span>
+              </button>
+            </div>
+          </>
+        ) : null}
       </div>
     </div>
   )