Compare commits

...

2 Commits

Author SHA1 Message Date
semantic-release-bot
debf786ed9 chore(release): 2.17.0 [skip ci]
## [2.17.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.7...v2.17.0) (2025-10-10)

### Features

* hide hover avatar when card is flipped to reveal value ([a2aada2](a2aada2e69))
2025-10-10 13:18:37 +00:00
Thomas Hallock
a2aada2e69 feat: hide hover avatar when card is flipped to reveal value
Avatar now fades out when the card it's hovering over is flipped, ensuring
all users can clearly see revealed card values.

Changes:
- Add isCardFlipped prop to HoverAvatar component
- Check if hovered card is in flippedCards array or matched
- Update opacity calculation to hide avatar when card is flipped
- Avatar smoothly fades out via react-spring when card reveals

This ensures remote players' consideration doesn't obscure card values
during gameplay.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 08:17:37 -05:00
3 changed files with 18 additions and 2 deletions

View File

@@ -1,3 +1,10 @@
## [2.17.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.7...v2.17.0) (2025-10-10)
### Features
* hide hover avatar when card is flipped to reveal value ([a2aada2](https://github.com/antialias/soroban-abacus-flashcards/commit/a2aada2e6922fb3af363e0d191275e06b8f8f040))
## [2.16.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.6...v2.16.7) (2025-10-10)

View File

@@ -88,11 +88,13 @@ function HoverAvatar({
playerInfo,
cardElement,
isPlayersTurn,
isCardFlipped,
}: {
playerId: string
playerInfo: { emoji: string; name: string; color?: string }
cardElement: HTMLElement | null
isPlayersTurn: boolean
isCardFlipped: boolean
}) {
const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
const isFirstRender = useRef(true)
@@ -116,7 +118,8 @@ function HoverAvatar({
const springProps = useSpring({
x: position?.x ?? 0,
y: position?.y ?? 0,
opacity: position && isPlayersTurn && cardElement ? 1 : 0,
// Hide avatar if: no position, not player's turn, no card element, OR card is flipped
opacity: position && isPlayersTurn && cardElement && !isCardFlipped ? 1 : 0,
config: {
tension: 280,
friction: 60,
@@ -392,6 +395,11 @@ export function MemoryGrid() {
const cardElement = cardId ? cardRefs.current.get(cardId) : null
// Check if it's this player's turn
const isPlayersTurn = state.currentPlayer === playerId
// Check if the card being hovered is flipped
const hoveredCard = cardId ? state.gameCards.find((c) => c.id === cardId) : null
const isCardFlipped = hoveredCard
? state.flippedCards.some((c) => c.id === hoveredCard.id) || hoveredCard.matched
: false
if (!playerInfo) return null
@@ -403,6 +411,7 @@ export function MemoryGrid() {
playerInfo={playerInfo}
cardElement={cardElement}
isPlayersTurn={isPlayersTurn}
isCardFlipped={isCardFlipped}
/>
)
})}

View File

@@ -1,6 +1,6 @@
{
"name": "soroban-monorepo",
"version": "2.16.7",
"version": "2.17.0",
"private": true,
"description": "Beautiful Soroban Flashcard Generator - Monorepo",
"workspaces": [