Table draft ui now shows other players, direction of passing, and who has chosen card already

gemp-lotr/gemp-lotr-async/src/main/java/com/gempukku/lotro/async/handler/TableDraftRequestHandler.java

@@ -197,6 +197,8 @@ public class TableDraftRequestHandler extends LotroServerRequestHandler implemen
             Element rootElement = doc.createElement("draftStatus");
             doc.appendChild(rootElement);
 
+            appendPlayersInfo(doc, rootElement);
+
             if (draftPlayer.getCollection() != null) {
                 appendPickedCards(doc, rootElement);
             }
@@ -215,6 +217,22 @@ public class TableDraftRequestHandler extends LotroServerRequestHandler implemen
             return doc;
         }
 
+        private void appendPlayersInfo(Document doc, Element rootElement) {
+            TableDraft.TableStatus tableStatus = draftPlayer.getTableStatus();
+
+            for (TableDraft.PlayerStatus playerStatus : tableStatus.getPlayerStatuses()) {
+                Element playerElement = doc.createElement("player");
+                playerElement.setAttribute("name", playerStatus.getName());
+                playerElement.setAttribute("hasChosen", String.valueOf(playerStatus.hasChosenCard()));
+                rootElement.appendChild(playerElement);
+            }
+
+            Element pickOrder = doc.createElement("pickOrderAscending");
+            pickOrder.setAttribute("value", String.valueOf(tableStatus.isPickOrderAscending()));
+            rootElement.appendChild(pickOrder);
+        }
+
+
         private void appendTimeRemaining(Document doc, Element rootElement, int timeRemaining) {
             Element time = doc.createElement("timeRemaining");
             time.setAttribute("value", "" + timeRemaining);

gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/tableDraftUi.js

@@ -24,6 +24,7 @@ var GempLotrTableDraftUI = Class.extend({
         this.bottomDiv = $("#bottomDiv");
 
         this.messageDiv = $("#messageDiv");
+        this.tableStatusDiv = $("#tableStatusDiv");
         this.picksDiv = $("#picksDiv");
         this.draftedDiv = $("#draftedDiv");
 
@@ -95,6 +96,8 @@ var GempLotrTableDraftUI = Class.extend({
             var pickedCards = root.getElementsByTagName("pickedCard");
             var availablePicks = root.getElementsByTagName("availablePick");
             var timeRemainingElements = root.getElementsByTagName("timeRemaining");
+            var playerElements = root.getElementsByTagName("player");
+            var pickOrderAscendingElements = root.getElementsByTagName("pickOrderAscending");
 
             // Get time remaining
             var timeRemaining = null; // Default to null
@@ -211,6 +214,34 @@ var GempLotrTableDraftUI = Class.extend({
                 }
             }
 
+            // Read player statuses
+            let players = [];
+            for (let i = 0; i < playerElements.length; i++) {
+                let name = playerElements[i].getAttribute("name");
+                let hasChosen = playerElements[i].getAttribute("hasChosen") === "true";
+                players.push({ name, hasChosen });
+            }
+
+            // Read pick order direction
+            let pickOrderAscending = pickOrderAscendingElements.length == 0 ||
+                                     pickOrderAscendingElements[0].getAttribute("value") === "true";
+
+            // Clear previous table status
+            that.tableStatusDiv.empty();
+
+            // Generate player order display
+            let separator = pickOrderAscending ? " > " : " < ";
+            let tableStatusText = players.map(player => {
+                let nameSpan = $("<span>").text(player.name);
+                if (player.hasChosen) {
+                    nameSpan.addClass("player-chosen"); // Add class to indicate a chosen card
+                }
+                return nameSpan.prop("outerHTML");
+            }).join(separator);
+
+            // Append to the table status div
+            that.tableStatusDiv.html(tableStatusText);
+
             // Function to format time in m:ss
             function formatTime(seconds) {
                 let minutes = Math.floor(seconds / 60);
@@ -349,6 +380,7 @@ var GempLotrTableDraftUI = Class.extend({
     layoutUI:function (layoutDivs) {
         if (layoutDivs) {
             var messageHeight = 40;
+            var statusHeight = 20;
             var padding = 5;
 
             var topWidth = this.topDiv.width();
@@ -357,8 +389,16 @@ var GempLotrTableDraftUI = Class.extend({
             var bottomWidth = this.bottomDiv.width();
             var bottomHeight = this.bottomDiv.height();
 
-            this.picksDiv.css({position:"absolute", left:padding, top:messageHeight+padding, width:topWidth-padding*2, height:topHeight-messageHeight-padding*2});
-            this.picksCardGroup.setBounds(0, 0, topWidth-padding*2, topHeight-messageHeight-padding*2);
+            this.tableStatusDiv.css({
+                position: "absolute",
+                top: messageHeight + padding,
+                left: padding,
+                width: topWidth - padding * 2,
+                height: topHeight - messageHeight - statusHeight - padding * 2,
+            });
+
+            this.picksDiv.css({position:"absolute", left:padding, top:messageHeight+statusHeight+padding*2, width:topWidth-padding*2, height:topHeight-messageHeight-statusHeight-padding*2});
+            this.picksCardGroup.setBounds(0, 0, topWidth-padding*2, topHeight-messageHeight-statusHeight-padding*2);
 
             this.draftedDiv.css({position:"absolute", left:padding, top:padding, width:bottomWidth-padding*2, height:bottomHeight-padding*2});
             this.draftedCardGroup.setBounds(0, 0, bottomWidth-padding*2, bottomHeight-padding*2);

gemp-lotr/gemp-lotr-async/src/main/web/src/TableDraft/index.css

@@ -2,4 +2,14 @@
     border: 2px solid red; /* Red border to indicate selection */
     background-color: rgba(255, 0, 0, 0.2); /* Light red background */
     box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Optional: Glowing effect for extra visibility */
+}
+
+#tableStatusDiv {
+    color: #ffffff;
+    font-size: 120%;
+    text-align: center;
+}
+
+#tableStatusDiv .player-chosen {
+    color: #a8dba8; /* Light green */
 }

gemp-lotr/gemp-lotr-async/src/main/web/tableDraft.html

@@ -66,6 +66,7 @@
 
     <div id="topDiv" class="ui-layout-north">
         <div id="messageDiv"></div>
+        <div id="tableStatusDiv"></div>
         <div id="picksDiv"></div>
     </div>
     <div id="bottomDiv" class="ui-layout-center">

gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/draft3/DraftPlayer.java

@@ -42,6 +42,10 @@ public class DraftPlayer {
         return table.getChosenCard(this);
     }
 
+    public TableDraft.TableStatus getTableStatus() {
+        return table.getTableStatus();
+    }
+
     @Override
     public boolean equals(Object o) {
         if (this == o) return true;

gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/draft3/TableDraft.java

@@ -15,4 +15,41 @@ public interface TableDraft {
     boolean isFinished();
     int getSecondsRemainingForPick() throws IllegalStateException;
     CardCollection getPickedCards(DraftPlayer draftPlayer);
+    TableStatus getTableStatus();
+
+    class PlayerStatus {
+        private String name;
+        private boolean hasChosenCard;
+
+        public PlayerStatus(String name, boolean hasChosenCard) {
+            this.name = name;
+            this.hasChosenCard = hasChosenCard;
+        }
+
+        public String getName() {
+            return name;
+        }
+
+        public boolean hasChosenCard() {
+            return hasChosenCard;
+        }
+    }
+
+    class TableStatus {
+        private List<PlayerStatus> playerStatuses;
+        private boolean pickOrderAscending;
+
+        public TableStatus(List<PlayerStatus> playerStatuses, boolean pickOrderAscending) {
+            this.playerStatuses = playerStatuses;
+            this.pickOrderAscending = pickOrderAscending;
+        }
+
+        public List<PlayerStatus> getPlayerStatuses() {
+            return playerStatuses;
+        }
+
+        public boolean isPickOrderAscending() {
+            return pickOrderAscending;
+        }
+    }
 }

gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/draft3/TableDraftClassic.java

@@ -348,4 +348,11 @@ public class TableDraftClassic implements TableDraft{
     public CardCollection getPickedCards(DraftPlayer draftPlayer) {
         return collectionsManager.getPlayerCollection(draftPlayer.getName(), collectionType.getCode());
     }
+
+    @Override
+    public TableStatus getTableStatus() {
+        List<PlayerStatus> statuses = new ArrayList<>();
+        players.forEach(draftPlayer -> statuses.add(new PlayerStatus(draftPlayer.getName(), chosenCards.containsKey(draftPlayer))));
+        return new TableStatus(statuses, currentRound % 2 == 1); // Alternate pick order with each booster
+    }
 }