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

17
components/Card.tsx
View File

@@ -1,18 +1,22 @@
'use client'; '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'; import tarokkaCards from '@/constants/tarokkaCards';
const cardBack = tarokkaCards.find((card) => card.back)!; const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = { type CardProps = {
card: StandardGameCard | TarokkaGameCard; card: TarokkaGameCard;
position: { text: string }; position: { text: string };
flipAction: () => void; 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 [showTooltip, setShowTooltip] = useState(false);
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 }); const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
const longPressTimeout = useRef<NodeJS.Timeout | null>(null); const longPressTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -71,13 +75,14 @@ export default function Card({ card: { aria, flipped, url }, position, flipActio
</div> </div>
</div> </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={{ style={{
top: `${tooltipPos.y + 20}px`, top: `${tooltipPos.y + 20}px`,
left: `${tooltipPos.x + 20}px`, left: `${tooltipPos.x + 20}px`,
}} }}
> >
{position.text} {!flipped && position.text}
{flipped && description}
</div> </div>
</> </>
); );