feat: player summary

[manuartero]

This pull request introduces a significant refactor and enhancement of the round-summary component by replacing the PlayerSummary component with a new PlayerCard component. The changes improve the structure, styling, and functionality of player-related UI elements. Additionally, a reusable Avatar component has been introduced to handle player and enemy avatars more effectively.

Component Refactor and Replacement:

• Replaced the PlayerSummary component with the new PlayerCard component, which provides a more structured and visually enhanced representation of player information. (src/components/round-summary/player-card.tsx, [1]; src/components/round-summary/round-summary.tsx, [2] [3]
• Removed the old PlayerSummary component and its associated styles. (src/components/round-summary/player-summary.tsx, [1]; src/components/round-summary/player-summary.module.css, [2]

Avatar Component Introduction:

• Added a new reusable Avatar component to render player and enemy avatars dynamically, along with associated assets and styles. (src/components/round-summary/avatar/avatar.tsx, [1]; src/components/round-summary/avatar/assets/index.ts, [2]; src/components/round-summary/avatar/avatar.module.css, [3]
• Added unit tests and snapshots for the Avatar component to ensure proper rendering and functionality. (src/components/round-summary/avatar/avatar.test.tsx, [1]; src/components/round-summary/avatar/__snapshots__/avatar.test.tsx.snap, [2]

Styling Enhancements:

• Updated styles for the PlayerCard component to improve layout, interactivity, and visual hierarchy. (src/components/round-summary/player-card.module.css, src/components/round-summary/player-card.module.cssR1-R67)
• Enhanced the round-summary layout by introducing hover effects and layered card stacking for better user interaction. (src/components/round-summary/round-summary.module.css, src/components/round-summary/round-summary.module.cssR8-R64)

Testing and Snapshots:

• Added unit tests and snapshots for the PlayerCard component to verify its rendering and behavior. (src/components/round-summary/player-card.test.tsx, [1]; src/components/round-summary/__snapshots__/player-card.test.tsx.snap, [2]

These changes collectively improve the maintainability, reusability, and user experience of the round-summary component.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
storming	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 22, 2025 11:20am

[Copilot]

Pull Request Overview

This PR refactors the player summary component by replacing PlayerSummary with a new PlayerCard component, introducing a more modern card-based design with overlapping layout and hover animations.

• Replaces PlayerSummary component with PlayerCard component featuring card-based UI
• Adds new Avatar component with player-specific assets for visual representation
• Implements overlapping card layout with hover animations and scaling effects

Reviewed Changes

Copilot reviewed 13 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/round-summary/round-summary.tsx	Updates import and usage from PlayerSummary to PlayerCard
src/components/round-summary/round-summary.module.css	Adds card overlap styling and hover animations for stacked card layout
src/components/round-summary/player-summary.tsx	Removes old PlayerSummary component
src/components/round-summary/player-summary.module.css	Removes old PlayerSummary styles
src/components/round-summary/player-card.tsx	Adds new PlayerCard component with improved accessibility and card design
src/components/round-summary/player-card.test.tsx	Adds unit tests for PlayerCard component
src/components/round-summary/player-card.module.css	Adds styling for new card design with player-specific theming
src/components/round-summary/avatar/avatar.tsx	Adds Avatar component for player visual representation
src/components/round-summary/avatar/avatar.test.tsx	Adds unit tests for Avatar component
src/components/round-summary/avatar/avatar.module.css	Adds Avatar component styling
src/components/round-summary/avatar/assets/index.ts	Exports avatar asset imports

[Copilot]

The !important declaration should be avoided. Consider restructuring the CSS to achieve the desired z-index without using !important.

Suggested change

	z-index: 5 !important; /* FIXME */
	z-index: 5; /* Adjusted to avoid !important */

[Copilot]

[nitpick] The negative margin approach for card overlap creates a maintenance concern as noted in the comment. Consider using CSS Grid or flexbox with absolute positioning for more maintainable card stacking.

Suggested change

	& article {
	/* XXX card overlap: is it possible to use some flex magic instead? */
	margin-top: -4vh;
	transition: transform 0.3s ease-in-out;
	}
	& article:first-child {
	margin-top: 0;
	}
	& article:nth-child(1) {
	z-index: 4;
	}
	& article:nth-child(2) {
	z-index: 3;
	}
	& article:nth-child(3) {
	z-index: 2;
	display: grid;
	grid-template-rows: repeat(3, auto);
	position: relative;
	& article {
	grid-row: 1;
	position: absolute;
	width: 100%;
	transition: transform 0.3s ease-in-out;
	}
	& article:nth-child(1) {
	z-index: 4;
	top: 0;
	}
	& article:nth-child(2) {
	z-index: 3;
	top: 6vh;
	}
	& article:nth-child(3) {
	z-index: 2;
	top: 12vh;

[Copilot]

The commented-out CSS code for player-specific colors should be removed if it's not needed, or uncommented and implemented if it's intended functionality.

Suggested change

/*