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,12 +362,14 @@ function EventBar({ clear }: { clear: () => void }) {
               payload?.game?.state === "running" && mode >= 0 && target.show,
             callback: () => {
               if (selfIndex < 0) return
-              if (payload?.game?.state === "starting") {
+              switch (payload?.game?.state) {
+                case "starting":
                   const isReady = !userStates[selfIndex].isReady
                   setIsReady({ isReady, i: selfIndex })
                   socket.emit("isReady", isReady)
-              }
+                  break
-              if (payload?.game?.state === "running") {
+
+                case "running":
                   const i = (selfUser?.moves ?? [])
                     .map((e) => e.index)
                     .reduce((prev, curr) => (curr > prev ? curr : prev), 0)
@@ -380,11 +382,12 @@ function EventBar({ clear }: { clear: () => void }) {
                   }
                   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 */}
+        <Ships />
-        <HitElems />
+
-        {(payload?.game?.state !== "running" || !isActiveIndex) && <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,7 +15,8 @@ function Targets() {
   const { payload, target, targetPreview, mode } = useGameProps()
   const { ships } = useShips()
 
-  if (payload?.game?.state === "running")
+  switch (payload?.game?.state) {
+    case "running":
       return (
         <>
           {[
@@ -33,7 +34,8 @@ function Targets() {
         </>
       )
 
-  if (payload?.game?.state === "starting" && mode >= 0 && targetPreview.show) {
+    case "starting":
+      if (mode < 0 && !targetPreview.show) return null
       const ship = shipProps(ships, mode, targetPreview)
       const { fields, borders, score } = intersectingShip(ships, ship)
       return (
@@ -41,7 +43,9 @@ function Targets() {
           <Ship
             preview
             warn={score > 0}
-          color={fields.length ? "red" : borders.length ? "orange" : undefined}
+            color={
+              fields.length ? "red" : borders.length ? "orange" : undefined
+            }
             key={targetPreview.orientation}
             props={ship}
           />
@@ -58,9 +62,10 @@ function Targets() {
           />
         </>
       )
-  }
 
-  return <></>
+    default:
+      return null
+  }
 }
 
 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,8 +129,9 @@ function Login() {
             </button>
           </div>
         </div>
-        {errorType && <hr className="mt-8 border-gray-400" />}
+        {errorType ? (
-        {errorType && (
+          <>
+            <hr className="mt-8 border-gray-400" />
             <div className="flex flex-col items-center">
               <button
                 id="back"
@@ -141,7 +142,8 @@ function Login() {
                 <span className="mx-4 font-bold">Return</span>
               </button>
             </div>
-        )}
+          </>
+        ) : null}
       </div>
     </div>
   )