Neo/InhumaneClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change to double click and fix some issues

Browse Source
This commit is contained in:
Neo 2025-05-18 20:13:57 -04:00
parent b07dff18ab
commit 5157720499
3 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/cards/SizableCard.module.scss
View File

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

44
src/components/cards/SizableCard.tsx
View File

@ -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,

31
src/views/ActionScreen.tsx
View File

@ -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])
gameContext.isVip.current = false
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={() => {
console.log("Held for 500ms")
<SizableCard doubleClickScale={true} key={card} onDoubleClick={() => {
setActionState("default");
setInstruction(randomWaitingPrompts[Math.floor(Math.random() * randomWaitingPrompts.length)])
sendMessage(ser(createPacket("game.action.playCard", {
cardValue: card
})))
}} holdTime={1500} render={(onMouseDown, onMouseUp) => (
<SizableCard onMouseDown={onMouseDown} onMouseUp={onMouseUp} size={"lg"} content={card} color={"white"} />
)} />
}} size={"lg"} content={card} color={"white"} />
))}
</div>
)}
{actionState == "picking-card" && (
<div className={s["cards-list"]}>
{[...playedWhiteCards.entries()].map(([player, card]) => (
<PressAndHold key={card} onPressAndHold={() => {
console.log("Held for 500ms")
sendMessage(ser(createPacket("game.action.pickCard", {
uuid: player
})))
}} holdTime={1500} render={(onMouseDown, onMouseUp) => (
<SizableCard onMouseDown={onMouseDown} onMouseUp={onMouseUp} size={"lg"}
<SizableCard doubleClickScale={true} key={card} onDoubleClick={() => {
sendMessage(ser(createPacket("game.action.pickCard", {
uuid: player
})))
}} size={"lg"}
content={card} color={"white"}/>
)}/>
))}
</div>
)}