[ISSUE-8] Redesign life counter page with responsive layout and card backgrounds #9

matthieu · 2025-10-27T12:10:15+01:00

matthieu commented

2025-10-27 12:10:15 +01:00

Summary

Removed initial configuration form, starting directly with 2 players
Implemented responsive grid layout (2-8 players, 1-4 columns depending on screen size)
Added dynamic player count configuration with instant updates
Created customizable backgrounds using Scryfall card illustrations
Integrated card search modal for background selection

Technical Details

New Components:
- PlayerLifeCounter (87 lines)
- CardSearchModal (118 lines)
Complete Rewrite: LifeCounter component (209 lines)
Mobile-first design with Tailwind breakpoints (sm, md, lg)
Full TypeScript typing
Integration with existing Scryfall API service
Features: name editing, starting life (20/30/40), global reset

Testing

Build successful
No linting errors

Resolves: #8

## Summary - Removed initial configuration form, starting directly with 2 players - Implemented responsive grid layout (2-8 players, 1-4 columns depending on screen size) - Added dynamic player count configuration with instant updates - Created customizable backgrounds using Scryfall card illustrations - Integrated card search modal for background selection ## Technical Details - **New Components**: - `PlayerLifeCounter` (87 lines) - `CardSearchModal` (118 lines) - **Complete Rewrite**: `LifeCounter` component (209 lines) - Mobile-first design with Tailwind breakpoints (sm, md, lg) - Full TypeScript typing - Integration with existing Scryfall API service - Features: name editing, starting life (20/30/40), global reset ## Testing - Build successful - No linting errors Resolves: #8

matthieu added 1 commit 2025-10-27 12:10:15 +01:00

[ISSUE-8] Redesign life counter page with responsive layout and card backgrounds d354622e39

Changements détaillés:
- Suppression du formulaire de configuration initiale, démarrage direct avec 2 joueurs
- Implémentation d'une grille responsive (2-8 joueurs, 1-4 colonnes selon l'écran)
- Ajout de la configuration dynamique du nombre de joueurs avec mise à jour instantanée
- Création de fonds personnalisables utilisant les illustrations de cartes Scryfall
- Intégration d'une modale de recherche de cartes par nom

Détails techniques:
- Nouveaux composants: PlayerLifeCounter (87 lignes), CardSearchModal (118 lignes)
- Réécriture complète de LifeCounter (209 lignes)
- Design mobile-first avec breakpoints Tailwind (sm, md, lg)
- TypeScript avec typage complet
- Intégration avec le service Scryfall API existant
- Fonctionnalités: édition des noms, vie de départ (20/30/40), reset global

Tests: Build réussi, pas d'erreurs de linting

Resolves: #8

This pull request has changes conflicting with the target branch.

src/components/LifeCounter.tsx

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin bugfix/ticket-ISSUE-8:bugfix/ticket-ISSUE-8

git checkout bugfix/ticket-ISSUE-8

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: matthieu/deckerr#9