diff --git a/leaky-ships/package.json b/leaky-ships/package.json index a266127..d793ddd 100644 --- a/leaky-ships/package.json +++ b/leaky-ships/package.json @@ -37,7 +37,6 @@ "socket.io-client": "^4.7.2", "solid-js": "^1.7.11", "solid-start": "^0.3.5", - "solid-zustand": "^1.7.0", "unique-names-generator": "^4.7.1", "zod": "3.21.1" }, diff --git a/leaky-ships/pnpm-lock.yaml b/leaky-ships/pnpm-lock.yaml index 65d07b5..26cf682 100644 --- a/leaky-ships/pnpm-lock.yaml +++ b/leaky-ships/pnpm-lock.yaml @@ -87,9 +87,6 @@ dependencies: solid-start: specifier: ^0.3.5 version: 0.3.5(@solidjs/meta@0.28.6)(@solidjs/router@0.8.3)(solid-js@1.7.11)(solid-start-node@0.3.5)(vite@4.4.9) - solid-zustand: - specifier: ^1.7.0 - version: 1.7.0(solid-js@1.7.11)(zustand@4.4.1) unique-names-generator: specifier: ^4.7.1 version: 4.7.1 @@ -5115,16 +5112,6 @@ packages: - '@nuxt/kit' - supports-color - /solid-zustand@1.7.0(solid-js@1.7.11)(zustand@4.4.1): - resolution: {integrity: sha512-BWLSYIUOr7qhAdY+IFh1fA3+s6LvqQuxmHgzuZ8BQHHBcoq/a1S+lgDbWQmFF8fhmJyXHbSbp/WlPJgvdjmSiw==} - peerDependencies: - solid-js: ^1.6.0 - zustand: ^4.3.0 - dependencies: - solid-js: 1.7.11 - zustand: 4.4.1(react@18.2.0) - dev: false - /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} @@ -5494,14 +5481,6 @@ packages: punycode: 2.3.0 dev: true - /use-sync-external-store@1.2.0(react@18.2.0): - resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true @@ -5721,22 +5700,3 @@ packages: /zod@3.21.1: resolution: {integrity: sha512-+dTu2m6gmCbO9Ahm4ZBDapx2O6ZY9QSPXst2WXjcznPMwf2YNpn3RevLx4KkZp1OPW/ouFcoBtBzFz/LeY69oA==} - - /zustand@4.4.1(react@18.2.0): - resolution: {integrity: sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==} - engines: {node: '>=12.7.0'} - peerDependencies: - '@types/react': '>=16.8' - immer: '>=9.0' - react: '>=16.8' - peerDependenciesMeta: - '@types/react': - optional: true - immer: - optional: true - react: - optional: true - dependencies: - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) - dev: false diff --git a/leaky-ships/src/components/Gamefield/EventBar.tsx b/leaky-ships/src/components/Gamefield/EventBar.tsx index 152ad28..8b164a8 100644 --- a/leaky-ships/src/components/Gamefield/EventBar.tsx +++ b/leaky-ships/src/components/Gamefield/EventBar.tsx @@ -50,7 +50,7 @@ import { EventBarModes } from "../../interfaces/frontend" import Item from "./Item" function EventBar(props: { clear: () => void }) { - const { shouldHide, color } = useDrawProps() + const { shouldHide, setShouldHide, setEnable, color } = useDrawProps const { selfIndex, isActiveIndex, selfUser, ships } = useSession() const navigator = useNavigate() @@ -186,12 +186,12 @@ function EventBar(props: { clear: () => void }) { ], draw: [ { icon: faBroomWide, text: "Clear", callback: props.clear }, - { icon: faPalette, text: "Color", iconColor: color }, + { icon: faPalette, text: "Color", iconColor: color() }, { - icon: shouldHide ? faEye : faEyeSlash, - text: shouldHide ? "Show" : "Hide", + icon: shouldHide() ? faEye : faEyeSlash, + text: shouldHide() ? "Show" : "Hide", callback: () => { - useDrawProps.setState({ shouldHide: !shouldHide }) + setShouldHide((e) => !e) }, }, ], @@ -262,7 +262,7 @@ function EventBar(props: { clear: () => void }) { }) createEffect(() => { - useDrawProps.setState({ enable: menu() === "draw" }) + setEnable(menu() === "draw") }) // createEffect(() => { diff --git a/leaky-ships/src/components/Gamefield/Gamefield.tsx b/leaky-ships/src/components/Gamefield/Gamefield.tsx index bb8187f..f2205fb 100644 --- a/leaky-ships/src/components/Gamefield/Gamefield.tsx +++ b/leaky-ships/src/components/Gamefield/Gamefield.tsx @@ -36,7 +36,7 @@ function Gamefield() { const navigator = useNavigate() const { isConnected } = useSocket() const usingDraw = useDraw() - const { enable, color, shouldHide } = useDrawProps() + const { enable, color, shouldHide } = useDrawProps createEffect(() => { if ( @@ -119,9 +119,9 @@ function Gamefield() { void - node?: JSX.Element + children?: JSX.Element nodeWhen?: boolean disabled?: boolean }) { return ( - + + ) } diff --git a/leaky-ships/src/hooks/useDraw.ts b/leaky-ships/src/hooks/useDraw.ts index 0c9faa7..bde1e0b 100644 --- a/leaky-ships/src/hooks/useDraw.ts +++ b/leaky-ships/src/hooks/useDraw.ts @@ -28,7 +28,7 @@ export const useDraw = () => { let canvasRef: HTMLCanvasElement let prevPoint: null | Point - const { color } = useDrawProps() + const { color } = useDrawProps const onMouseDown = () => setMouseDown(true) @@ -53,7 +53,7 @@ export const useDraw = () => { const ctx = canvasRef?.getContext("2d") if (!ctx || !currentPoint) return - drawLine({ ctx, currentPoint, prevPoint: prevPoint, color }) + drawLine({ ctx, currentPoint, prevPoint: prevPoint, color: color() }) prevPoint = currentPoint } diff --git a/leaky-ships/src/hooks/useDrawProps.ts b/leaky-ships/src/hooks/useDrawProps.ts index 17c16e4..35a9070 100644 --- a/leaky-ships/src/hooks/useDrawProps.ts +++ b/leaky-ships/src/hooks/useDrawProps.ts @@ -1,26 +1,19 @@ -import create from "solid-zustand" +import { createSignal } from "solid-js" -const initialState: { - enable: boolean - shouldHide: boolean - color: string -} = { - enable: false, - shouldHide: false, - color: "#b32aa9", -} +const [enable, setEnable] = createSignal(false) +const [shouldHide, setShouldHide] = createSignal(false) +const [color, setColor] = createSignal("#b32aa9") -export type State = typeof initialState - -export type Action = { - setColor: (color: string) => void - reset: () => void -} - -export const useDrawProps = create()((set) => ({ - ...initialState, - setColor: (color) => set((state) => ({ ...state, color })), +export const useDrawProps = { + enable, + setEnable, + shouldHide, + setShouldHide, + color, + setColor, reset: () => { - set(initialState) + setEnable(false) + setShouldHide(false) + setColor("#b32aa9") }, -})) +} diff --git a/leaky-ships/src/routes/start.tsx b/leaky-ships/src/routes/start.tsx index a0a5745..1e6afaa 100644 --- a/leaky-ships/src/routes/start.tsx +++ b/leaky-ships/src/routes/start.tsx @@ -52,13 +52,17 @@ export default function Start() { const [searchParams] = useSearchParams() const query = () => { - switch (searchParams["q"]) { - case "join": - return { join: true } - case "watch": - return { watch: true } - default: - return {} + const q = searchParams["q"] + return { + get join() { + return q === "join" + }, + get watch() { + return q === "watch" + }, + get available() { + return !!q + }, } } @@ -182,23 +186,17 @@ export default function Start() { icon={faUserPlus} disabled={!session()} nodeWhen={query().join && !!session()} - node={ - setOtp(e.target.value)} /> - - // -} - // renderInput={(props) => } - // /> - } - /> + > + + setOtp((otp) => { + const value = e.target.value + return /^\d{0,4}$/.test(value) ? value : otp + }) + } + /> + - { - // -} - // renderInput={(props) => } - // /> - } - - } - /> + > + + setOtp((otp) => { + const value = e.target.value + return /^\d{0,4}$/.test(value) ? value : otp + }) + } + /> +