change to double click and fix some issues

src/components/cards/SizableCard.module.scss

@@ -9,6 +9,7 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
+  transition: 250ms;
 
   &[data-cardcolor="black"] {
     background-color: black;

src/components/cards/SizableCard.tsx

@@ -1,4 +1,4 @@
-import {createRef, CSSProperties, MouseEventHandler, TouchEventHandler, useEffect, useState} from "react";
+import React, {createRef, CSSProperties, MouseEventHandler, TouchEventHandler, useEffect, useState} from "react";
 import s from "./SizableCard.module.scss"
 
 export const CardSize = {
@@ -20,6 +20,8 @@ export type SizableCardProps = {
     style?: CSSProperties,
     onMouseDown?: MouseEventHandler,
     onMouseUp?: MouseEventHandler,
+    onDoubleClick?: MouseEventHandler,
+    doubleClickScale?: boolean
 }
 
 export default function SizableCard({
@@ -33,11 +35,27 @@ export default function SizableCard({
                                         style,
                                         onMouseDown,
                                         onMouseUp,
+                                        onDoubleClick,
+    doubleClickScale
                                     }: SizableCardProps) {
     const [cardScale, setCardScale] = useState(1);
     const [fontScale, setFontScale] = useState(1);
+    const [previouslyClicked, setPreviouslyClicked] = useState(false);
     const cardRef = createRef<HTMLDivElement>();
 
+    function internalMouseDown(ev: React.MouseEvent<HTMLDivElement>) {
+      onMouseDown?.(ev)
+      console.log("was clicked")
+      setPreviouslyClicked((prev) => {
+        if (prev) {
+          onDoubleClick?.(ev)
+          return false
+        } else {
+          return true;
+        }
+      });
+    }
+
     useEffect(() => {
 
         setCardScale(CardSize[size]);
@@ -48,8 +66,30 @@ export default function SizableCard({
         setFontScale(Math.max((-1 / (Math.PI * 120) * (content.replace("{{fill}}", "_____").length - 40) + 1), 0.5) * CardSize[size]);
     }, [content, size]);
 
+    useEffect(() => {
+      function windowClicked (ev: React.MouseEvent<HTMLElement>){
+        if (cardRef.current && !cardRef.current.contains(ev.target)) {
+          console.log("was not clicked")
+          setPreviouslyClicked(false)
+        }
+      }
+      document.addEventListener("mousedown", windowClicked);
+
+      return () => document.removeEventListener("mousedown", windowClicked);
+    }, [cardRef]);
+
+  useEffect(() => {
+    if (previouslyClicked && doubleClickScale) {
+      setCardScale(CardSize[size] + 0.1);
+      setFontScale(Math.max((-1 / (Math.PI * 120) * (content.replace("{{fill}}", "_____").length - 40) + 1), 0.5) * (CardSize[size] + 0.1));
+    } else {
+      setCardScale(CardSize[size]);
+      setFontScale(Math.max((-1 / (Math.PI * 120) * (content.replace("{{fill}}", "_____").length - 40) + 1), 0.5) * CardSize[size]);
+    }
+  }, [previouslyClicked, doubleClickScale]);
+
     return (
-        <div onClick={onClick} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onTouchStart={onMouseDown as unknown as TouchEventHandler} onTouchEnd={onMouseUp as unknown as TouchEventHandler} ref={cardRef} className={[s["sizable-card"], className].join(" ")} data-cardcolor={color}
+        <div onClick={onClick} onMouseDown={internalMouseDown} onMouseUp={onMouseUp} onTouchStart={onMouseDown as unknown as TouchEventHandler} onTouchEnd={onMouseUp as unknown as TouchEventHandler} ref={cardRef} className={[s["sizable-card"], className].join(" ")} data-cardcolor={color}
              style={{
                  ["--sizable-card-scale" as string]: cardScale,
                  ["--sizable-card-font-scale" as string]: fontScale,

src/views/ActionScreen.tsx

@@ -2,7 +2,6 @@ import {useContext, useEffect, useState} from "react";
 import {ConnectionScreen} from "../components/ConnectionScreen.tsx";
 import s from "./ActionScreen.module.scss"
 import SizableCard from "../components/cards/SizableCard.tsx";
-import {PressAndHold} from "../components/PressAndHold.tsx";
 import {useNavigate} from "react-router";
 import {createPacket, handlePacket, handlers, Player} from "../sockets.ts";
 import useWebSocket, {ReadyState} from "react-use-websocket";
@@ -33,7 +32,7 @@ export function ActionScreen () {
 
     const navigate = useNavigate()
 
-    const { sendMessage, lastMessage, readyState } = useWebSocket(`ws://localhost:8080/live/join-game/${gameContext.channel.current}`, {
+    const { sendMessage, lastMessage, readyState } = useWebSocket(`ws://192.168.0.99:8080/live/join-game/${gameContext.channel.current}`, {
         reconnectAttempts: 5,
         retryOnError: true,
         reconnectInterval: (lastAttemptNumber) => lastAttemptNumber * 6000
@@ -111,12 +110,12 @@ export function ActionScreen () {
         }
 
         if (data.screen == "playing-card") {
-            setInstruction("Press and hold a card of your choosing")
+            setInstruction("Double click a card of your choosing")
         }
 
         if (data.screen == "picking-card") {
             setActionState("picking-card")
-            setInstruction("Press and hold the funniest card.")
+            setInstruction("Double click the funniest card.")
             setPlayedWhiteCards(new Map(Object.entries(data.cards!)))
             return
         }
@@ -158,7 +157,9 @@ export function ActionScreen () {
         }
     }, [readyState])
 
+    useEffect(() => {
         gameContext.isVip.current = false
+    }, []);
 
     return (
         <div key={updateScreen} className={s["game-container"]}>
@@ -194,31 +195,25 @@ export function ActionScreen () {
                     {actionState == "playing-card" && (
                         <div className={s["cards-list"]}>
                             {gameContext.me.current?.availableCards.map((card) => (
-                                <PressAndHold key={card} onPressAndHold={() => {
+                                <SizableCard doubleClickScale={true} key={card} onDoubleClick={() => {
-                                    console.log("Held for 500ms")
                                     setActionState("default");
                                     setInstruction(randomWaitingPrompts[Math.floor(Math.random() * randomWaitingPrompts.length)])
                                     sendMessage(ser(createPacket("game.action.playCard", {
                                         cardValue: card
                                     })))
-                                }} holdTime={1500} render={(onMouseDown, onMouseUp) => (
+                                }} size={"lg"} content={card} color={"white"} />
-                                    <SizableCard onMouseDown={onMouseDown} onMouseUp={onMouseUp} size={"lg"} content={card} color={"white"} />
-                                )} />
                             ))}
                         </div>
                     )}
                     {actionState == "picking-card" && (
                         <div className={s["cards-list"]}>
                             {[...playedWhiteCards.entries()].map(([player, card]) => (
-                                <PressAndHold key={card} onPressAndHold={() => {
+                                    <SizableCard doubleClickScale={true} key={card} onDoubleClick={() => {
-                                    console.log("Held for 500ms")
                                         sendMessage(ser(createPacket("game.action.pickCard", {
                                             uuid: player
                                         })))
-                                }} holdTime={1500} render={(onMouseDown, onMouseUp) => (
+                                    }} size={"lg"}
-                                    <SizableCard onMouseDown={onMouseDown} onMouseUp={onMouseUp} size={"lg"}
                                                  content={card} color={"white"}/>
-                                )}/>
                             ))}
                         </div>
                     )}