From de2605af67255bb67dfb09ec7ed9382d675479db Mon Sep 17 00:00:00 2001
From: Joel Therrien <joel@joeltherrien.ca>
Date: Wed, 23 Aug 2023 20:37:22 -0700
Subject: [PATCH] Improve tile exchange to retain player order

---
 ui/src/elements.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/src/elements.tsx b/ui/src/elements.tsx
index 049f929..b371d47 100644
--- a/ui/src/elements.tsx
+++ b/ui/src/elements.tsx
@@ -266,7 +266,10 @@ export function Game(props: {wasm: GameWasm, settings: Settings}) {
 
         }}>{confirmedScorePoints > -1 ? `Score ${confirmedScorePoints} points ✅` : "Check"}</button>
         <button
-            onClick={(e) => {setIsTileExchangeOpen(true);}}
+            onClick={(e) => {
+                trayDispatch({action: TileDispatchActionType.RETURN}); // want all tiles back on tray for tile exchange
+                setIsTileExchangeOpen(true);
+            }}
         >Open Tile Exchange</button>
         <button onClick={(e) => {
             trayDispatch({action: TileDispatchActionType.RETURN});
@@ -538,6 +541,10 @@ function TilesExchangedTray(props: {
 }){
 
     const divContent = [];
+    for(let i=0; i<props.trayLength; i++) {
+        divContent.push(<span key={i} />); // empty tile elements
+    }
+
     for(let i = 0; i<props.trayLength; i++){
         const tileData = props.tray[i];
 
@@ -547,11 +554,9 @@ function TilesExchangedTray(props: {
         }
 
         if(tileData != null){
-            divContent.push(
-                <DummyExchangeTile key={i} letter={tileData} isSelected={props.selectedArray[i]} onClick={toggleFunction}/>
-            );
-        } else{
-            divContent.push(<span key={i} />);
+            divContent[tileData.index] =
+                <DummyExchangeTile key={tileData.index} letter={tileData} isSelected={props.selectedArray[i]} onClick={toggleFunction}/>;
+
         }
     }