Adjust how I track tiles in React

ui/src/elements.tsx

@@ -1,6 +1,17 @@
 import * as React from "react";
 import {Letter as LetterData} from "word_grid";
 
+export enum LocationType {
+    GRID,
+    TRAY
+}
+
+export interface CoordinateData {
+    location: LocationType;
+    index: number;
+}
+
+export type PlayableLetterData = LetterData & CoordinateData;
 
 export function Letter(props: { data: LetterData }): React.JSX.Element {
     return <div className="letter">
@@ -9,16 +20,21 @@ export function Letter(props: { data: LetterData }): React.JSX.Element {
     </div>
 }
 
-export function TileTray(props: { letters: Array<LetterData> }): React.JSX.Element {
 
-    let elements = props.letters.map((ld, i) => {
-        if (ld === undefined) {
-            return <div key={i}></div>;
-        } else {
-            return <Letter data={ld} key={i}/>
+export function TileTray(props: { letters: Array<PlayableLetterData>, trayLength: number }): React.JSX.Element {
+
+    let elements: JSX.Element[] = [];
+    for (let i=0; i<props.trayLength; i++) {
+        elements.push(
+          <div key={"empty" + i}></div>
+        );
+    }
+
+    for (let letter of props.letters) {
+        if (letter.location === LocationType.TRAY) {
+            elements[letter.index] = <Letter data={letter} key={"letter" + letter.index} />
+        }
     }
-    })
-        .concat();
 
     return (
         <div className="tray">

ui/src/index.tsx

@@ -1,5 +1,5 @@
 import init, {greet, GameWasm} from '../node_modules/word_grid/word_grid.js';
-import {TileTray} from "./elements";
+import {LocationType, PlayableLetterData, TileTray} from "./elements";
 import {createRoot} from "react-dom/client";
 import {Tray} from "word_grid";
 
@@ -37,12 +37,17 @@ async function run() {
     let game = new GameWasm(BigInt(1234));
     let tray: Tray = game.get_tray();
 
+    // initial state
+    let letters: PlayableLetterData[] = tray.letters.map((ld, i) => {
+        ld["location"] = LocationType.TRAY;
+        ld["index"] = i;
+        return ld as PlayableLetterData;
+    })
+
     console.log({tray});
 
     const root = createRoot(document.getElementById("root"));
-    root.render(<TileTray letters={tray.letters}/>);
-
-    // And afterwards we can use all the functionality defined in wasm.
+    root.render(<TileTray letters={letters} trayLength={7}/>);
 
 }
 

ui/src/style.less

@@ -14,6 +14,7 @@
 .letter {
   background-color: #e5cca9;
   position: relative; // Used for the positioning of the sub-components
+  user-select: none;
 
   .text {
     position: absolute;