Add styling to grid and allow moving ephemeral tiles

ui/src/elements.tsx

@@ -17,6 +17,41 @@ enum CellType {
     Start = "Start",
 }
 
+function cell_type_to_details(cell_type: CellType): {className: string, text: string} {
+    let className: string;
+    let text: string;
+
+    switch (cell_type) {
+        case CellType.Normal:
+            className = "grid-spot-normal";
+            text = "";
+            break;
+        case CellType.DoubleWord:
+            className = "grid-spot-double-word";
+            text = "Double Word Score";
+            break;
+        case CellType.DoubleLetter:
+            className = "grid-spot-double-letter";
+            text = "Double Letter Score";
+            break;
+        case CellType.TripleLetter:
+            className = "grid-spot-triple-letter";
+            text = "Triple Letter Score";
+            break;
+        case CellType.TripleWord:
+            className = "grid-spot-triple-word";
+            text = "Triple Word Score";
+            break;
+        case CellType.Start:
+            className = "grid-spot-start";
+            text = "★";
+            break;
+
+    }
+
+    return {className: className, text: text};
+}
+
 export interface CoordinateData {
     location: LocationType;
     index: number;
@@ -83,7 +118,7 @@ export function Game(props: {wasm: GameWasm}) {
 
 
     return <>
-        <Grid cellTypes={cellTypes} />
+        <Grid cellTypes={cellTypes} playerLetters={playerLetters} dispatch={dispatch}/>
         <TileTray letters={playerLetters} trayLength={7} dispatch={dispatch}/>
         <button onClick={(e) => {
           dispatch({
@@ -92,7 +127,7 @@ export function Game(props: {wasm: GameWasm}) {
                   "index": 0
               },
               "end": {
-                  "location": LocationType.TRAY,
+                  "location": LocationType.GRID,
                   "index": 3
               },
           })
@@ -176,33 +211,35 @@ export function TileTray(props: { letters: Array<PlayableLetterData>, trayLength
 
 }
 
-function Grid(props: {cellTypes: CellType[]}) {
+function Grid(props: {cellTypes: CellType[], playerLetters: Array<PlayableLetterData>, dispatch: TileDispatch}) {
     const elements = props.cellTypes.map((ct, i) => {
-       let className: string;
-       switch (ct) {
-           case CellType.Normal:
-               className = "grid-spot-normal"
-               break;
-           case CellType.DoubleWord:
-               className = "grid-spot-double-word"
-               break;
-           case CellType.DoubleLetter:
-               className = "grid-spot-double-letter"
-               break;
-           case CellType.TripleLetter:
-               className = "grid-spot-triple-letter"
-               break;
-           case CellType.TripleWord:
-               className = "grid-spot-triple-word"
-               break;
-           case CellType.Start:
-               className = "grid-spot-start"
-               break;
+        const {className, text} = cell_type_to_details(ct);
+
+        return <div key={i} className={"grid-spot " + className}>
+            <span>{text}</span>
+            <TileSlot
+                tile={undefined}
+                location={{location: LocationType.GRID, index: i}}
+                dispatch={props.dispatch} />
+        </div>;
+    });
+
+    for (let letter of props.playerLetters) {
+        if (letter.location === LocationType.GRID) {
+            const ct = props.cellTypes[letter.index];
+            const {className, text} = cell_type_to_details(ct);
+
+            elements[letter.index] =
+                <div key={"letter" + letter.index} className={"grid-spot " + className}>
+                    <TileSlot
+                        tile={<Letter data={letter} />}
+                        location={{location: LocationType.GRID, index: letter.index}}
+                        dispatch={props.dispatch} />
+                </div>;
+
 
         }
-
-        return <div key={i} className={className}></div>;
-    });
+    }
 
     return <div className="board-grid">
         {elements}

ui/src/style.less

@@ -23,6 +23,25 @@
   user-select: none;
 }
 
+.grid-spot {
+  font-size: 12px;
+  text-align: center;
+  background-color: #bbb59d;
+  position: relative;
+
+  span {
+    vertical-align: middle;
+    z-index: 0;
+  }
+
+  .tileSpot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
 .grid-spot-normal{
 
 }
@@ -46,12 +65,16 @@
 .grid-spot-start {
   background-color: #f9b4a5;
   font-size: @tile-star-size;
+
+  span { // undo the vertical align other cells have
+    vertical-align: unset;
+  }
 }
 
 
 .tileSpot {
-  height: 100%;
-  width: 100%;
+  height: @tile-width;
+  width: @tile-width;
 }
 
 .letter {