From ce29ab72ae6e22b45e940758dd0c4306cfa12bbc Mon Sep 17 00:00:00 2001 From: Daniel McCrystal Date: Wed, 3 Sep 2025 21:11:43 -0400 Subject: [PATCH] scaling --- .gitignore | 2 ++ deploy | 7 +++++ package.json | 2 +- pkg/client/src/components/Card.tsx | 13 +++++++--- pkg/client/src/components/FannedHand.tsx | 2 +- pkg/client/src/components/Game.tsx | 8 +++++- pkg/client/src/components/Pile.tsx | 33 +++++++++++++----------- pkg/client/src/components/Player.tsx | 4 ++- pkg/client/src/components/Table.tsx | 6 ++++- pkg/client/src/components/toolbox.tsx | 5 ++-- 10 files changed, 55 insertions(+), 27 deletions(-) create mode 100755 deploy diff --git a/.gitignore b/.gitignore index 652716d..3b7453d 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,8 @@ .vinxi *.db +.DS_STORE + # ---> Node # Logs logs diff --git a/deploy b/deploy new file mode 100755 index 0000000..f0b8143 --- /dev/null +++ b/deploy @@ -0,0 +1,7 @@ +#!/bin/bash +branch=$(git branch --show-current) + +git switch prod +git merge $branch +git push +git switch $brnach \ No newline at end of file diff --git a/package.json b/package.json index 159a47a..b1f8bfe 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "games", "type": "module", - "version": "0.0.8", + "version": "0.0.9", "scripts": { "dev": "pnpm --parallel dev", "build": "pnpm run -F client build", diff --git a/pkg/client/src/components/Card.tsx b/pkg/client/src/components/Card.tsx index 5df8859..88de1a8 100644 --- a/pkg/client/src/components/Card.tsx +++ b/pkg/client/src/components/Card.tsx @@ -1,7 +1,7 @@ import { Component, Suspense } from "solid-js"; import type { Card } from "@games/shared/cards"; -import { Clickable, Sizable, Stylable } from "./toolbox"; +import { Clickable, Scalable, Stylable } from "./toolbox"; const cardToSvgFilename = (card: Card) => { if (card.kind == "joker") { @@ -17,7 +17,12 @@ const cardToSvgFilename = (card: Card) => { }`; }; +export const CARD_RATIO = 1.456730769; +export const BASE_CARD_WIDTH = 100; + export default ((props) => { + const width = () => BASE_CARD_WIDTH * (props.scale ?? 1); + const height = () => width() * CARD_RATIO; return ( { draggable={false} class={props.class} style={props.style} - width={props.width ?? "100px"} - height={props.height} + width={`${width()}px`} + height={`${height()}px`} src={ props.face == "down" ? "/views/back.svg" @@ -45,5 +50,5 @@ export default ((props) => { ) & Stylable & Clickable & - Sizable + Scalable >; diff --git a/pkg/client/src/components/FannedHand.tsx b/pkg/client/src/components/FannedHand.tsx index 14dac15..48df972 100644 --- a/pkg/client/src/components/FannedHand.tsx +++ b/pkg/client/src/components/FannedHand.tsx @@ -10,7 +10,7 @@ export default (props: { handCount: number }) => { return ( { submitAction({ type: "draw" })} /> @@ -58,11 +59,16 @@ export default () => { > Quit - + + table.players().includes(key) + )} + > {([playerKey, handCount], i) => ( { + console.log("Setting hand ref"); const midOffset = i() + 0.5 - Object.values(view().playerHandCounts).length / 2; diff --git a/pkg/client/src/components/Pile.tsx b/pkg/client/src/components/Pile.tsx index 5b21a6f..5d28865 100644 --- a/pkg/client/src/components/Pile.tsx +++ b/pkg/client/src/components/Pile.tsx @@ -1,17 +1,19 @@ import { Component, createMemo, For, JSX, Show } from "solid-js"; -import Card from "./Card"; +import Card, { BASE_CARD_WIDTH, CARD_RATIO } from "./Card"; import { desaturate } from "color2k"; -import { Clickable, hashColor, Stylable } from "./toolbox"; -const cardWidth = 100; -const cardHeight = 145; -const cardOffset = 0.3; // Small offset for the stack effect +import { Clickable, hashColor, Scalable, Stylable } from "./toolbox"; + +const cardOffset = 0.35; // Small offset for the stack effect export default ((props) => { const cards = createMemo(() => { const numCards = Math.max(0, props.count - 1); // Subtract 1 for the top card return Array.from({ length: numCards }, (_, i) => i).toReversed(); }); + const width = () => BASE_CARD_WIDTH * (props.scale ?? 1); + const height = () => width() * CARD_RATIO; + const offset = () => cardOffset * (props.scale ?? 1); return ( 0}>
{ > {(i) => { - const xOffset = (i * cardOffset) / 2; - const yOffset = i * cardOffset; + const xOffset = (i * offset()) / 2; + const yOffset = i * offset(); const color = desaturate(hashColor(i), 0.9); return ( { }} - +
); @@ -56,5 +58,6 @@ export default ((props) => { { count: number; } & Stylable & - Clickable + Clickable & + Scalable >; diff --git a/pkg/client/src/components/Player.tsx b/pkg/client/src/components/Player.tsx index 01f76df..fab7398 100644 --- a/pkg/client/src/components/Player.tsx +++ b/pkg/client/src/components/Player.tsx @@ -1,4 +1,4 @@ -import { createSignal, useContext } from "solid-js"; +import { createSignal, onMount, useContext } from "solid-js"; import { playerColor } from "~/profile"; import { TableContext } from "./Table"; import { Stylable } from "./toolbox"; @@ -16,6 +16,8 @@ export default (props: { playerKey: string } & Stylable) => { const game = useContext(GameContext); + onMount(() => console.log("Player mounted")); + return (
void; wsEvents: Stream; playerNames: Store<{ [key: string]: string }>; + players: Accessor; }>(); export default (props: { tableKey: string }) => { @@ -75,7 +76,9 @@ export default (props: { tableKey: string }) => { createEffect(() => sendWs({ ready: ready() })); createEffect(() => sendWs({ name: name() })); - const view = createObservable(gameEvents.map((evt) => evt.view)); + const viewProp = gameEvents.map((evt) => evt.view).toProperty(); + viewProp.log(); + const view = createObservable(viewProp); const results = createObservable( merge([ gameEvents @@ -92,6 +95,7 @@ export default (props: { tableKey: string }) => { wsEvents, view, playerNames, + players, }} >
diff --git a/pkg/client/src/components/toolbox.tsx b/pkg/client/src/components/toolbox.tsx index 0d9e842..c098aa5 100644 --- a/pkg/client/src/components/toolbox.tsx +++ b/pkg/client/src/components/toolbox.tsx @@ -16,9 +16,8 @@ export type Clickable = { | undefined; }; -export type Sizable = { - width?: string; - height?: string; +export type Scalable = { + scale?: number; }; export const hashColor = (obj: NotUndefined) => `#${hash(obj).substring(0, 6)}`;