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

tooltip tweaks

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-14 08:22:48 -04:00
parent 0eb0060a81
commit a1e4241c41
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/[gameID]/page.tsx
View File

@@ -7,13 +7,13 @@ import { socket } from '@/socket';
import Card from '@/components/Card';
import { cardMap, layout } from '@/constants/tarokka';
import type { GameUpdate, ClientUpdate, StandardGameCard, TarokkaGameCard } from '@/types';
import type { GameUpdate, ClientUpdate, TarokkaGameCard } from '@/types';
export default function GamePage() {
const { gameID: gameIDParam } = useParams();
const [gameID, setGameID] = useState('');
const [cards, setCards] = useState<StandardGameCard[] | TarokkaGameCard[]>([]);
const [cards, setCards] = useState<TarokkaGameCard[]>([]);
useEffect(() => {
if (gameIDParam) {

17
components/Card.tsx
View File

@@ -1,18 +1,22 @@
'use client';
import { useState, useEffect, useRef } from 'react';
import { useState, useRef } from 'react';
import { StandardGameCard, TarokkaGameCard } from '@/types';
import { TarokkaGameCard } from '@/types';
import tarokkaCards from '@/constants/tarokkaCards';
const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = {
card: StandardGameCard | TarokkaGameCard;
card: TarokkaGameCard;
position: { text: string };
flipAction: () => void;
};
export default function Card({ card: { aria, flipped, url }, position, flipAction }: CardProps) {
export default function Card({
card: { aria, description, flipped, url },
position,
flipAction,
}: CardProps) {
const [showTooltip, setShowTooltip] = useState(false);
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
const longPressTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -71,13 +75,14 @@ export default function Card({ card: { aria, flipped, url }, position, flipActio
</div>
</div>
<div
className={`fixed w-[20vh] pointer-events-none duration-300 ease-in z-50 text-xs bg-black text-white rounded border border-gray-300 px-2 py-1 rounded transition-opacity ${showTooltip ? 'opacity-100' : 'opacity-0'}`}
className={`fixed w-[25vh] pointer-events-none duration-300 ease-in z-50 text-xs bg-black text-white rounded border border-gray-300 px-2 py-1 rounded transition-opacity ${showTooltip ? 'opacity-100' : 'opacity-0'}`}
style={{
top: `${tooltipPos.y + 20}px`,
left: `${tooltipPos.x + 20}px`,
}}
>
{position.text}
{!flipped && position.text}
{flipped && description}
</div>
</>
);