Further fixes for solidJS

leaky-ships/src/components/Gamefield/Gamefield.tsx

@@ -1,7 +1,7 @@
 // import Bluetooth from "./Bluetooth"
 // import FogImages from "./FogImages"
 // import { toast } from "react-toastify"
-import { createEffect } from "solid-js"
+import { createEffect, onCleanup } from "solid-js"
 import { useNavigate } from "solid-start"
 import BorderTiles from "~/components/Gamefield/BorderTiles"
 import EventBar from "~/components/Gamefield/EventBar"
@@ -81,9 +81,9 @@ function Gamefield() {
           setMode(mode() === 1 ? 2 : 1)
       }
       document.addEventListener("keydown", handleKeyPress)
-      return () => {
+      onCleanup(() => {
         document.removeEventListener("keydown", handleKeyPress)
-      }
+      })
     }
   })
 

leaky-ships/src/components/Gamefield/Item.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal } from "solid-js"
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 // import { useDrawProps } from "~/hooks/useDrawProps"
 // import { HexColorPicker } from "react-colorful"
@@ -21,9 +21,9 @@ function Item(props: ItemProps) {
     setTimeout(() => window.addEventListener("click", inActive), 200)
 
     // Remove event listeners
-    return () => {
+    onCleanup(() => {
       window.removeEventListener("click", inActive)
-    }
+    })
   })
 
   return (

leaky-ships/src/components/Gamefield/Ship.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames"
 import { createEffect } from "solid-js"
+import { useSession } from "~/hooks/useSession"
 import { ShipProps } from "../../interfaces/frontend"
 
 const sizes: { [n: number]: number } = {
@@ -15,7 +16,11 @@ function Ship(
     color?: string
   },
 ) {
-  const filename = () => `ship_blue_${props.size}x_${props.variant}.gif`
+  const { selfIndex } = useSession()
+  const filename = () =>
+    `ship_${selfIndex() > 0 ? "red" : "blue"}_${props.size}x_${
+      props.variant
+    }.gif`
   let canvasRef: HTMLCanvasElement
 
   createEffect(() => {

leaky-ships/src/components/Gamefield/Targets.tsx

@@ -14,7 +14,7 @@ function Targets() {
   const { activeUser, ships } = useSession()
 
   const ship = () => shipProps(ships(), mode(), targetPreview())
-  const { fields, borders, score } = intersectingShip(ships(), ship())
+  const intersectionProps = () => intersectingShip(ships(), ship())
 
   return (
     <Switch>
@@ -38,12 +38,28 @@ function Targets() {
         <Ship
           {...ship()}
           preview
-          warn={score > 0}
+          warn={intersectionProps().score > 0}
-          color={fields.length ? "red" : borders.length ? "orange" : undefined}
+          color={
+            intersectionProps().fields.length
+              ? "red"
+              : intersectionProps().borders.length
+              ? "orange"
+              : undefined
+          }
         />
-        <HitElems hits={fields.map((e, i) => ({ ...e, i, hit: true }))} />
         <HitElems
-          hits={borders.map((e, i) => ({ ...e, i, hit: true }))}
+          hits={intersectionProps().fields.map((e, i) => ({
+            ...e,
+            i,
+            hit: true,
+          }))}
+        />
+        <HitElems
+          hits={intersectionProps().borders.map((e, i) => ({
+            ...e,
+            i,
+            hit: true,
+          }))}
           colorOverride={"orange"}
         />
       </Match>

leaky-ships/src/components/Grid.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames"
-import { For, createEffect, createSignal } from "solid-js"
+import { For, createEffect, createSignal, onCleanup } from "solid-js"
 
 function Grid() {
   function floorClient(number: number) {
@@ -34,7 +34,7 @@ function Grid() {
         quantity: columns() * rows(),
       })
     }, 500)
-    return () => clearTimeout(timeout)
+    onCleanup(() => clearTimeout(timeout))
   })
 
   function Tile(props: { index: number }) {

leaky-ships/src/components/Grid2.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames"
-import { For, createEffect, createSignal } from "solid-js"
+import { For, createEffect, createSignal, onCleanup } from "solid-js"
 
 function Grid2() {
   function floorClient(number: number) {
@@ -35,7 +35,7 @@ function Grid2() {
         quantity: columns() * rows(),
       })
     }, 500)
-    return () => clearTimeout(timeout)
+    onCleanup(() => clearTimeout(timeout))
   })
 
   const sentences = [

leaky-ships/src/components/Lobby/LobbyFrame.tsx

@@ -2,7 +2,7 @@ import {
   faRightFromBracket,
   faSpinnerThird,
 } from "@fortawesome/pro-solid-svg-icons"
-import { JSX, Show, createEffect, createSignal } from "solid-js"
+import { JSX, Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { useNavigate } from "solid-start"
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import {
@@ -26,7 +26,7 @@ function WithDots(props: { children: JSX.Element }) {
 
   createEffect(() => {
     const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
-    return () => clearInterval(interval)
+    onCleanup(() => clearInterval(interval))
   })
 
   return (
@@ -60,7 +60,7 @@ function LobbyFrame(props: { openSettings: () => void }) {
       setLaunchTime((e) => e - 1)
     }, 1000)
 
-    return () => clearTimeout(timeout)
+    onCleanup(() => clearTimeout(timeout))
   })
 
   createEffect(() => {

leaky-ships/src/components/Lobby/Player.tsx

@@ -8,7 +8,7 @@ import {
 } from "@fortawesome/pro-solid-svg-icons"
 import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
 import classNames from "classnames"
-import { Show, createEffect, createSignal } from "solid-js"
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { setIsReadyFor, users } from "~/hooks/useGameProps"
 import { socket } from "~/lib/socket"
@@ -19,7 +19,7 @@ function HourGlass() {
 
   createEffect(() => {
     const interval = setInterval(() => setCount((e) => (e + 1) % 4), 1000)
-    return () => clearInterval(interval)
+    onCleanup(() => clearInterval(interval))
   })
 
   const icon = () => {

leaky-ships/src/hooks/useDraw.ts

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from "solid-js"
+import { createEffect, createSignal, onCleanup } from "solid-js"
 import { socket } from "~/lib/socket"
 import { Draw, DrawLineProps, PlayerEvent, Point } from "../interfaces/frontend"
 import { useDrawProps } from "./useDrawProps"
@@ -75,10 +75,10 @@ export const useDraw = () => {
     window.addEventListener("mouseup", mouseUpHandler)
 
     // Remove event listeners
-    return () => {
+    onCleanup(() => {
       canvas.removeEventListener("mousemove", handler)
       window.removeEventListener("mouseup", mouseUpHandler)
-    }
+    })
   })
 
   createEffect(() => {
@@ -113,12 +113,12 @@ export const useDraw = () => {
     socket.on("draw-line", socketDrawLine)
     socket.on("canvas-clear", clear)
 
-    return () => {
+    onCleanup(() => {
       socket.off("playerEvent", playerEvent)
       socket.off("canvas-state-from-server", canvasStateFromServer)
       socket.off("draw-line", socketDrawLine)
       socket.off("canvas-clear", clear)
-    }
+    })
   })
 
   return { canvasRef: canvasRef!, onMouseDown, clear }

leaky-ships/src/hooks/useSocket.ts

@@ -1,6 +1,6 @@
 import status from "http-status"
 // import { toast } from "react-toastify"
-import { createEffect, createSignal } from "solid-js"
+import { createEffect, createSignal, onCleanup } from "solid-js"
 import { useNavigate } from "solid-start"
 import { socket } from "~/lib/socket"
 import { GamePropsSchema } from "~/lib/zodSchemas"
@@ -134,7 +134,7 @@ function useSocket() {
     socket.on("ships", setShips)
     socket.on("disconnect", disconnect)
 
-    return () => {
+    onCleanup(() => {
       socket.off("connect", connect)
       socket.off("connect_error", connectError)
       socket.off("gameSetting", gameSetting)
@@ -144,7 +144,7 @@ function useSocket() {
       socket.off("dispatchMove", DispatchMove)
       socket.off("ships", setShips)
       socket.off("disconnect", disconnect)
-    }
+    })
   })
 
   createEffect(() => {

leaky-ships/src/routes/api/ws.ts

@@ -243,6 +243,7 @@ export async function GET({
         })
 
         if (!user_Game) return
+        await db.delete(ships).where(eq(ships.user_game_id, user_Game.id))
         await db.insert(ships).values(
           shipsData.map((ship) => ({
             id: createId(),