gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Gavin McDonald
2025-06-26 14:39:04 -04:00
parent 12ae8dd6d8
commit 2c2e93649c
3 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/AppContext.tsx
View File

@@ -33,10 +33,11 @@ export interface AppContext {
} }
export function AppProvider({ children }: { children: ReactNode }) { export function AppProvider({ children }: { children: ReactNode }) {
const [gameData, setGameData] = useState<GameUpdate>(gameStart);
const [gameID, setGameID] = useState(''); const [gameID, setGameID] = useState('');
const [noGame, setNoGame] = useState(false); const [noGame, setNoGame] = useState(false);
const [selectCardIndex, setSelectCardIndex] = useState(-1); const [selectCardIndex, setSelectCardIndex] = useState(-1);
const [gameData, setGameData] = useState<GameUpdate>(gameStart); const [tilts, setTilts] = useState<Tilt[]>([]);
const { flipCard, redraw, select, handleSettings } = useSocket({ const { flipCard, redraw, select, handleSettings } = useSocket({
gameID, gameID,
@@ -44,8 +45,6 @@ export function AppProvider({ children }: { children: ReactNode }) {
setNoGame, setNoGame,
}); });
const [tilts, setTilts] = useState<Tilt[]>([]);
const handleSelect = (cardID: string) => { const handleSelect = (cardID: string) => {
setSelectCardIndex(-1); setSelectCardIndex(-1);

23
components/Card.tsx
View File

@@ -11,32 +11,33 @@ import getURL from '@/tools/getURL';
import tarokkaCards from '@/constants/tarokkaCards'; import tarokkaCards from '@/constants/tarokkaCards';
import { layout } from '@/constants/tarokka'; import { layout } from '@/constants/tarokka';
import { Settings, TarokkaGameCard } from '@/types'; import { TarokkaGameCard } from '@/types';
const cardBack = tarokkaCards.find((card) => card.back)!; const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = { type CardProps = {
dm: boolean;
card: TarokkaGameCard; card: TarokkaGameCard;
cardIndex: number; cardIndex: number;
settings: Settings;
}; };
export default function Card({ dm, card, cardIndex, settings }: CardProps) { export default function Card({ card, cardIndex }: CardProps) {
const [tooltip, setTooltip] = useState<React.ReactNode>(null); const [tooltip, setTooltip] = useState<React.ReactNode>(null);
const { flipCard, redraw, setSelectCardIndex } = useAppContext(); const { flipCard, gameData, redraw, setSelectCardIndex } = useAppContext();
const { dmID, settings } = gameData;
const isDM = !!dmID;
const { aria, flipped } = card; const { aria, flipped } = card;
const position = layout[cardIndex]; const position = layout[cardIndex];
const handleClick = () => { const handleClick = () => {
if (dm) { if (isDM) {
flipCard(cardIndex); flipCard(cardIndex);
} }
}; };
const getTooltip = () => { const getTooltip = () => {
const text = getCardInfo(card, position, dm, settings); const text = getCardInfo(card, position, isDM, settings);
return text.length ? ( return text.length ? (
<> <>
@@ -53,7 +54,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
return ( return (
<ToolTip content={tooltip || getTooltip()}> <ToolTip content={tooltip || getTooltip()}>
<TiltCard <TiltCard
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${dm ? 'cursor-pointer' : ''} `} className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
cardID={position.id} cardID={position.id}
> >
<div <div
@@ -61,7 +62,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
onClick={handleClick} onClick={handleClick}
> >
<div className="absolute inset-0 group backface-hidden"> <div className="absolute inset-0 group backface-hidden">
{dm && ( {isDM && (
<> <>
<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" /> <img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
<img <img
@@ -74,9 +75,9 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
<img <img
src={getURL(cardBack as TarokkaGameCard, settings)} src={getURL(cardBack as TarokkaGameCard, settings)}
alt="Card Back" alt="Card Back"
className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`} className={`absolute rounded-lg ${isDM ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
/> />
{dm && !flipped && ( {isDM && !flipped && (
<StackTheDeck <StackTheDeck
onRedraw={() => redraw(cardIndex)} onRedraw={() => redraw(cardIndex)}
onSelect={() => setSelectCardIndex(cardIndex)} onSelect={() => setSelectCardIndex(cardIndex)}

6
components/TarokkaGrid.tsx
View File

@@ -7,9 +7,7 @@ import type {} from '@/types';
export default function TarokkaGrid() { export default function TarokkaGrid() {
const { gameData } = useAppContext(); const { gameData } = useAppContext();
const { cards } = gameData;
const { dmID, cards, settings } = gameData;
const isDM = !!dmID;
// map our five Tarokka cards to their proper locations in a 3x3 grid // map our five Tarokka cards to their proper locations in a 3x3 grid
// common deck cards: left, top, and right // common deck cards: left, top, and right
@@ -22,7 +20,7 @@ export default function TarokkaGrid() {
.map(arrangeCards) .map(arrangeCards)
.map((card, index) => ( .map((card, index) => (
<div key={index} className="aspect-[2/3]}"> <div key={index} className="aspect-[2/3]}">
{card && <Card dm={isDM} card={card} cardIndex={cardMap[index]} settings={settings} />} {card && <Card card={card} cardIndex={cardMap[index]} />}
</div> </div>
))} ))}
</div> </div>