From 8e4c11570ab01b2b49023568b3a2c87243494963 Mon Sep 17 00:00:00 2001 From: aronmal Date: Mon, 4 Sep 2023 09:51:28 +0200 Subject: [PATCH] Further fixes for solidJS --- .../src/components/Gamefield/Gamefield.tsx | 6 ++--- leaky-ships/src/components/Gamefield/Item.tsx | 6 ++--- leaky-ships/src/components/Gamefield/Ship.tsx | 7 ++++- .../src/components/Gamefield/Targets.tsx | 26 +++++++++++++++---- leaky-ships/src/components/Grid.tsx | 4 +-- leaky-ships/src/components/Grid2.tsx | 4 +-- .../src/components/Lobby/LobbyFrame.tsx | 6 ++--- leaky-ships/src/components/Lobby/Player.tsx | 4 +-- leaky-ships/src/hooks/useDraw.ts | 10 +++---- leaky-ships/src/hooks/useSocket.ts | 6 ++--- leaky-ships/src/routes/api/ws.ts | 1 + 11 files changed, 51 insertions(+), 29 deletions(-) diff --git a/leaky-ships/src/components/Gamefield/Gamefield.tsx b/leaky-ships/src/components/Gamefield/Gamefield.tsx index b89c465..bb8187f 100644 --- a/leaky-ships/src/components/Gamefield/Gamefield.tsx +++ b/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) - } + }) } }) diff --git a/leaky-ships/src/components/Gamefield/Item.tsx b/leaky-ships/src/components/Gamefield/Item.tsx index cfed8de..c26daf2 100644 --- a/leaky-ships/src/components/Gamefield/Item.tsx +++ b/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 ( diff --git a/leaky-ships/src/components/Gamefield/Ship.tsx b/leaky-ships/src/components/Gamefield/Ship.tsx index 8daab30..092e0af 100644 --- a/leaky-ships/src/components/Gamefield/Ship.tsx +++ b/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(() => { diff --git a/leaky-ships/src/components/Gamefield/Targets.tsx b/leaky-ships/src/components/Gamefield/Targets.tsx index 327c575..d4dab9b 100644 --- a/leaky-ships/src/components/Gamefield/Targets.tsx +++ b/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 ( @@ -38,12 +38,28 @@ function Targets() { 0} - color={fields.length ? "red" : borders.length ? "orange" : undefined} + warn={intersectionProps().score > 0} + color={ + intersectionProps().fields.length + ? "red" + : intersectionProps().borders.length + ? "orange" + : undefined + } /> - ({ ...e, i, hit: true }))} /> ({ ...e, i, hit: true }))} + hits={intersectionProps().fields.map((e, i) => ({ + ...e, + i, + hit: true, + }))} + /> + ({ + ...e, + i, + hit: true, + }))} colorOverride={"orange"} /> diff --git a/leaky-ships/src/components/Grid.tsx b/leaky-ships/src/components/Grid.tsx index 5b279b0..20e7df7 100644 --- a/leaky-ships/src/components/Grid.tsx +++ b/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 }) { diff --git a/leaky-ships/src/components/Grid2.tsx b/leaky-ships/src/components/Grid2.tsx index 95b9087..ef467a3 100644 --- a/leaky-ships/src/components/Grid2.tsx +++ b/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 = [ diff --git a/leaky-ships/src/components/Lobby/LobbyFrame.tsx b/leaky-ships/src/components/Lobby/LobbyFrame.tsx index bd936de..d22c0c4 100644 --- a/leaky-ships/src/components/Lobby/LobbyFrame.tsx +++ b/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(() => { diff --git a/leaky-ships/src/components/Lobby/Player.tsx b/leaky-ships/src/components/Lobby/Player.tsx index 85d990a..f8ca028 100644 --- a/leaky-ships/src/components/Lobby/Player.tsx +++ b/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 = () => { diff --git a/leaky-ships/src/hooks/useDraw.ts b/leaky-ships/src/hooks/useDraw.ts index f323c33..0c9faa7 100644 --- a/leaky-ships/src/hooks/useDraw.ts +++ b/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 } diff --git a/leaky-ships/src/hooks/useSocket.ts b/leaky-ships/src/hooks/useSocket.ts index 2880de4..d4e543c 100644 --- a/leaky-ships/src/hooks/useSocket.ts +++ b/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(() => { diff --git a/leaky-ships/src/routes/api/ws.ts b/leaky-ships/src/routes/api/ws.ts index 280a493..5abdd5c 100644 --- a/leaky-ships/src/routes/api/ws.ts +++ b/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(),