From efcb61b1edacbc2c36b20e4aa9b0d8334c902ff3 Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 8 Sep 2023 19:55:33 +0200 Subject: [PATCH] user states improvements and fixes --- leaky-ships/package.json | 2 + leaky-ships/pnpm-lock.yaml | 20 ++ .../src/components/Gamefield/BorderTiles.tsx | 174 ++++++++++-------- .../src/components/Gamefield/EventBar.tsx | 14 +- .../src/components/Gamefield/HitElems.tsx | 5 +- leaky-ships/src/components/Gamefield/Ship.tsx | 2 +- .../src/components/Gamefield/Ships.tsx | 4 +- .../src/components/Gamefield/Targets.tsx | 4 +- .../src/components/Lobby/LobbyFrame.tsx | 17 +- leaky-ships/src/components/Lobby/Player.tsx | 10 +- .../Lobby/SettingsFrame/Setting.tsx | 18 +- leaky-ships/src/hooks/useGameProps.ts | 132 ++++++++----- leaky-ships/src/hooks/useSession.tsx | 35 ++-- leaky-ships/src/hooks/useSocket.ts | 47 ++--- leaky-ships/src/interfaces/ApiSocket.ts | 7 +- leaky-ships/src/lib/getPayloadwithChecksum.ts | 5 +- leaky-ships/src/lib/utils/helpers.ts | 19 +- leaky-ships/src/routes/api/game/running.ts | 17 +- leaky-ships/src/routes/api/ws.ts | 50 +++-- 19 files changed, 309 insertions(+), 273 deletions(-) diff --git a/leaky-ships/package.json b/leaky-ships/package.json index d793ddd..067db5a 100644 --- a/leaky-ships/package.json +++ b/leaky-ships/package.json @@ -30,6 +30,7 @@ "drizzle-orm": "^0.28.6", "drizzle-zod": "^0.5.1", "http-status": "^1.7.0", + "json-stable-stringify": "^1.0.2", "nodemailer": "^6.9.5", "object-hash": "^3.0.0", "postgres": "^3.3.5", @@ -44,6 +45,7 @@ "devDependencies": { "@playwright/test": "^1.37.1", "@total-typescript/ts-reset": "^0.4.2", + "@types/json-stable-stringify": "^1.0.34", "@types/node": "^20.5.9", "@types/nodemailer": "^6.4.9", "@types/object-hash": "^3.0.4", diff --git a/leaky-ships/pnpm-lock.yaml b/leaky-ships/pnpm-lock.yaml index 26cf682..f531c4d 100644 --- a/leaky-ships/pnpm-lock.yaml +++ b/leaky-ships/pnpm-lock.yaml @@ -66,6 +66,9 @@ dependencies: http-status: specifier: ^1.7.0 version: 1.7.0 + json-stable-stringify: + specifier: ^1.0.2 + version: 1.0.2 nodemailer: specifier: ^6.9.5 version: 6.9.5 @@ -101,6 +104,9 @@ devDependencies: '@total-typescript/ts-reset': specifier: ^0.4.2 version: 0.4.2 + '@types/json-stable-stringify': + specifier: ^1.0.34 + version: 1.0.34 '@types/node': specifier: ^20.5.9 version: 20.5.9 @@ -2050,6 +2056,10 @@ packages: resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==} dev: true + /@types/json-stable-stringify@1.0.34: + resolution: {integrity: sha512-s2cfwagOQAS8o06TcwKfr9Wx11dNGbH2E9vJz1cqV+a/LOyhWNLUNd6JSRYNzvB4d29UuJX2M0Dj9vE1T8fRXw==} + dev: true + /@types/ms@0.7.31: resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==} @@ -4008,6 +4018,12 @@ packages: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} dev: true + /json-stable-stringify@1.0.2: + resolution: {integrity: sha512-eunSSaEnxV12z+Z73y/j5N37/In40GK4GmsSy+tEHJMxknvqnA7/djeYtAgW0GsWHUfg+847WJjKaEylk2y09g==} + dependencies: + jsonify: 0.0.1 + dev: false + /json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} @@ -4020,6 +4036,10 @@ packages: optionalDependencies: graceful-fs: 4.2.11 + /jsonify@0.0.1: + resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==} + dev: false + /jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} diff --git a/leaky-ships/src/components/Gamefield/BorderTiles.tsx b/leaky-ships/src/components/Gamefield/BorderTiles.tsx index 2dcab34..75ed04d 100644 --- a/leaky-ships/src/components/Gamefield/BorderTiles.tsx +++ b/leaky-ships/src/components/Gamefield/BorderTiles.tsx @@ -31,43 +31,104 @@ type TilesType = { y: number } -function BorderTiles() { - const { selfIndex, ships } = useSession() - - const settingTarget = (isGameTile: boolean, x: number, y: number) => { - const sIndex = selfIndex() - if (sIndex === -1) return - if (gameProps.gameState === "running") { - const list = targetList(targetPreview(), gameProps.mode) - if ( - !isGameTile || - !list.filter( - ({ x, y }) => !isAlreadyHit(x, y, compiledHits(sIndex === 0 ? 1 : 0)), - ).length - ) - return - if (!overlapsWithAnyBorder(targetPreview(), gameProps.mode)) - setTarget({ - show: true, - x, - y, - orientation: targetPreview().orientation, - }) - } else if ( - gameProps.gameState === "starting" && - targetPreview().show && - !intersectingShip( - ships(), - shipProps(ships(), gameProps.mode, targetPreview()), - ).score - ) { - setMouseCursor((e) => ({ ...e, shouldShow: false })) - setShips( - [...ships(), shipProps(ships(), gameProps.mode, targetPreview())], - sIndex, - ) +function settingTarget( + isGameTile: boolean, + x: number, + y: number, + index: 0 | 1, + { + activeIndex, + ships, + }: Pick, "activeIndex" | "ships">, +) { + if (gameProps.gameState === "running") { + const list = targetList(targetPreview(), gameProps.mode) + if ( + !isGameTile || + !list.filter( + ({ x, y }) => !isAlreadyHit(x, y, compiledHits(activeIndex())), + ).length + ) + return + if (!overlapsWithAnyBorder(targetPreview(), gameProps.mode)) + setTarget({ + show: true, + x, + y, + orientation: targetPreview().orientation, + }) + } else if ( + gameProps.gameState === "starting" && + targetPreview().show && + !intersectingShip( + ships(), + shipProps(ships(), gameProps.mode, targetPreview()), + ).score + ) { + setMouseCursor((e) => ({ ...e, shouldShow: false })) + setShips( + [...ships(), shipProps(ships(), gameProps.mode, targetPreview())], + index, + ) + } +} +function onClick( + props: TilesType, + { selfIndex, activeIndex, ships }: ReturnType, +) { + const sIndex = selfIndex() + if (!sIndex) return + if (gameProps.gameState === "running") { + settingTarget(props.isGameTile, props.x, props.y, sIndex.i, { + activeIndex, + ships, + }) + } else if (gameProps.gameState === "starting") { + const { index } = intersectingShip(ships(), { + ...mouseCursor(), + size: 1, + variant: 0, + orientation: "h", + }) + if (typeof index === "undefined") + settingTarget(props.isGameTile, props.x, props.y, sIndex.i, { + activeIndex, + ships, + }) + else { + const ship = ships()[index] + setGameProps("mode", ship.size - 2) + removeShip(ship, sIndex.i) + setMouseCursor((e) => ({ ...e, shouldShow: true })) } } +} + +function onMouseEnter( + props: TilesType, + { ships }: ReturnType, +) { + setMouseCursor({ + x: props.x, + y: props.y, + shouldShow: + props.isGameTile && + (gameProps.gameState === "starting" + ? intersectingShip( + ships(), + shipProps(ships(), gameProps.mode, { + x: props.x, + y: props.y, + orientation: targetPreview().orientation, + }), + true, + ).score < 2 + : true), + }) +} + +function BorderTiles() { + const sessionProps = useSession() const tilesProperties: TilesType[] = [] @@ -97,47 +158,8 @@ function BorderTiles() {
{ - const sIndex = selfIndex() - if (sIndex === -1) return - if (gameProps.gameState === "running") { - settingTarget(props.isGameTile, props.x, props.y) - } else if (gameProps.gameState === "starting") { - const { index } = intersectingShip(ships(), { - ...mouseCursor(), - size: 1, - variant: 0, - orientation: "h", - }) - if (typeof index === "undefined") - settingTarget(props.isGameTile, props.x, props.y) - else { - const ship = ships()[index] - setGameProps("mode", ship.size - 2) - removeShip(ship, sIndex) - setMouseCursor((e) => ({ ...e, shouldShow: true })) - } - } - }} - onMouseEnter={() => - setMouseCursor({ - x: props.x, - y: props.y, - shouldShow: - props.isGameTile && - (gameProps.gameState === "starting" - ? intersectingShip( - ships(), - shipProps(ships(), gameProps.mode, { - x: props.x, - y: props.y, - orientation: targetPreview().orientation, - }), - true, - ).score < 2 - : true), - }) - } + onClick={() => onClick(props, sessionProps)} + onMouseEnter={() => onMouseEnter(props, sessionProps)} /> )} diff --git a/leaky-ships/src/components/Gamefield/EventBar.tsx b/leaky-ships/src/components/Gamefield/EventBar.tsx index 80d3a1d..377d323 100644 --- a/leaky-ships/src/components/Gamefield/EventBar.tsx +++ b/leaky-ships/src/components/Gamefield/EventBar.tsx @@ -44,7 +44,7 @@ import Item from "./Item" function EventBar(props: { clear: () => void }) { const { shouldHide, setShouldHide, setEnable, color } = useDrawProps - const { selfIndex, isActiveIndex, selfUser, ships } = useSession() + const { selfIndex, selfIsActiveIndex, selfUser, ships } = useSession() const navigator = useNavigate() const items = (): EventBarModes => ({ @@ -260,7 +260,7 @@ function EventBar(props: { clear: () => void }) { // if (gameProps.gameState !== "running") return // const toastId = "otherPlayer" - // if (isActiveIndex) toast.dismiss(toastId) + // if (selfIsActiveIndex) toast.dismiss(toastId) // else // toast.info("Waiting for other player...", { // toastId, @@ -299,7 +299,7 @@ function EventBar(props: { clear: () => void }) { {(e, i) => ( @@ -319,12 +319,12 @@ function EventBar(props: { clear: () => void }) { gameProps.mode >= 0 && target().show, callback: () => { - const i = selfIndex() - if (i === -1) return + const sIndex = selfIndex() + if (!sIndex) return switch (gameProps.gameState) { case "starting": - const isReady = !users[i]?.isReady - setIsReadyFor({ isReady, i }) + const isReady = !users[sIndex.i]?.isReady + setIsReadyFor({ isReady, i: sIndex.i }) socket.emit("isReady", isReady) break diff --git a/leaky-ships/src/components/Gamefield/HitElems.tsx b/leaky-ships/src/components/Gamefield/HitElems.tsx index eca91ce..177a64b 100644 --- a/leaky-ships/src/components/Gamefield/HitElems.tsx +++ b/leaky-ships/src/components/Gamefield/HitElems.tsx @@ -2,15 +2,16 @@ import { faBurst, faXmark } from "@fortawesome/pro-solid-svg-icons" import { For } from "solid-js" import { FontAwesomeIcon } from "~/components/FontAwesomeIcon" import { useSession } from "~/hooks/useSession" +import { compiledHits } from "~/lib/utils/helpers" import { Hit } from "../../interfaces/frontend" function HitElems(props: { hits?: Hit[]; colorOverride?: string }) { - const { activeUser } = useSession() + const { activeIndex } = useSession() const hits = () => props?.hits const colorOverride = () => props?.colorOverride return ( - + {(props) => (
- `ship_${selfIndex() > 0 ? "red" : "blue"}_${props.size}x_${ + `ship_${selfIndex()?.i === 1 ? "red" : "blue"}_${props.size}x_${ props.variant }.gif` let canvasRef: HTMLCanvasElement diff --git a/leaky-ships/src/components/Gamefield/Ships.tsx b/leaky-ships/src/components/Gamefield/Ships.tsx index 76235ac..a86fdfd 100644 --- a/leaky-ships/src/components/Gamefield/Ships.tsx +++ b/leaky-ships/src/components/Gamefield/Ships.tsx @@ -4,10 +4,10 @@ import { useSession } from "~/hooks/useSession" import Ship from "./Ship" function Ships() { - const { isActiveIndex, selfUser } = useSession() + const { selfIsActiveIndex, selfUser } = useSession() return ( - + {(props) => } ) diff --git a/leaky-ships/src/components/Gamefield/Targets.tsx b/leaky-ships/src/components/Gamefield/Targets.tsx index d1f255f..2283c9b 100644 --- a/leaky-ships/src/components/Gamefield/Targets.tsx +++ b/leaky-ships/src/components/Gamefield/Targets.tsx @@ -24,7 +24,7 @@ function Targets() { each={composeTargetTiles( target(), gameProps.mode, - compiledHits(activeIndex() === 0 ? 1 : 0), + compiledHits(activeIndex()), )} > {(props) => } @@ -33,7 +33,7 @@ function Targets() { each={composeTargetTiles( targetPreview(), gameProps.mode, - compiledHits(activeIndex() === 0 ? 1 : 0), + compiledHits(activeIndex()), )} > {(props) => } diff --git a/leaky-ships/src/components/Lobby/LobbyFrame.tsx b/leaky-ships/src/components/Lobby/LobbyFrame.tsx index d0d5c8c..0f31b8d 100644 --- a/leaky-ships/src/components/Lobby/LobbyFrame.tsx +++ b/leaky-ships/src/components/Lobby/LobbyFrame.tsx @@ -103,17 +103,18 @@ function LobbyFrame(props: { openSettings: () => void }) {

} > - <> - -

VS

- {users[1] ? ( - - ) : ( + +

VS

+ Warte auf Spieler 2

- )} - + } + > + +
diff --git a/leaky-ships/src/components/Lobby/Player.tsx b/leaky-ships/src/components/Lobby/Player.tsx index 6d3b768..a5ea923 100644 --- a/leaky-ships/src/components/Lobby/Player.tsx +++ b/leaky-ships/src/components/Lobby/Player.tsx @@ -74,25 +74,25 @@ function Player(props: { src: string; i: 0 | 1; userId?: string }) {