feat: group and stack land cards by name on the battlefield display.
This commit is contained in:
@@ -672,6 +672,13 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
|
|||||||
const allLands = myBattlefield.filter(c => c.types?.includes('Land') && !c.types?.includes('Creature'));
|
const allLands = myBattlefield.filter(c => c.types?.includes('Land') && !c.types?.includes('Creature'));
|
||||||
const others = myBattlefield.filter(c => !c.types?.includes('Creature') && !c.types?.includes('Land'));
|
const others = myBattlefield.filter(c => !c.types?.includes('Creature') && !c.types?.includes('Land'));
|
||||||
|
|
||||||
|
const landGroups = allLands.reduce((acc, card) => {
|
||||||
|
const key = card.name || 'Unknown Land';
|
||||||
|
if (!acc[key]) acc[key] = [];
|
||||||
|
acc[key].push(card);
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, CardInstance[]>);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const renderCard = (card: CardInstance) => {
|
const renderCard = (card: CardInstance) => {
|
||||||
@@ -797,7 +804,29 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
|
|||||||
<span className="text-white text-xs font-bold uppercase tracking-widest">Lands</span>
|
<span className="text-white text-xs font-bold uppercase tracking-widest">Lands</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{allLands.map(renderCard)}
|
{Object.entries(landGroups).map(([name, group]) => (
|
||||||
|
<div
|
||||||
|
key={name}
|
||||||
|
className="relative w-24 transition-all duration-300"
|
||||||
|
style={{
|
||||||
|
height: `${96 + (group.length - 1) * 25}px`, // 96px base + 25px offset per card
|
||||||
|
marginBottom: '0.5rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{group.map((card, index) => (
|
||||||
|
<div
|
||||||
|
key={card.instanceId}
|
||||||
|
className="absolute left-0 w-full"
|
||||||
|
style={{
|
||||||
|
top: `${index * 25}px`,
|
||||||
|
zIndex: index
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{renderCard(card)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user