From d6fb76eb3ebdc7e46758b1c70192cab425b34f4a Mon Sep 17 00:00:00 2001
From: dnviti <dnviti@gmail.com>
Date: Mon, 22 Dec 2025 23:21:38 +0100
Subject: [PATCH] feat: group and stack land cards by name on the battlefield
 display.

---
 src/client/src/modules/game/GameView.tsx | 31 +++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/client/src/modules/game/GameView.tsx b/src/client/src/modules/game/GameView.tsx
index 2fdf88c..e322605 100644
--- a/src/client/src/modules/game/GameView.tsx
+++ b/src/client/src/modules/game/GameView.tsx
@@ -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 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) => {
@@ -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>
                             </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>
                       </>
                     );