good progress i guess if you consider bad progress to be goood

client/public/main.css

@@ -3,6 +3,8 @@
 
 body {
     font-family: 'Open Sans', sans-serif;
+    background-color: rgb(237, 237, 237);
+    color: rgb(31, 31, 31);
 }
 
 .red {

client/public/scrabble/game.css

@@ -121,6 +121,11 @@ score {
     flex-grow: 2;
 }
 
+.theirturn {
+    background-color: aquamarine;
+}
+
+
 #game-controls {
     border: 1px dotted black;
 

client/public/scrabble/game.js

@@ -36,8 +36,13 @@ function initGame(boardstate, tileset, myplayer, players)
         drawerStructure.push(piece);
     }
     addPiecesToDrawer(drawerStructure);
+
+    // construct UI
+    initUI();
     
-    
-    
+    console.log(players);
+
+    setupUsersUI(players, 0);
+
     return true;
 }

client/public/scrabble/index.html

@@ -16,7 +16,7 @@
         <script src="../locale.js"></script>
 
         <div id="container">
-
+            
         <div id="game-info-left">
             <div id="logo">
                 <svg viewBox="0 0 80 20">
@@ -31,9 +31,9 @@
                 </div>
             </div>
         </div>
-
+                
         <div id="game-container">
-            
+
         <div id="game-board">
             <div class="game-board-row" id="row-1">
                 <div class="game-board-cell" id="col-a"></div>
@@ -312,9 +312,9 @@
             </div>
             <div class="connection-state"><script>document.write(localeString('status'))</script>:</div>
             <div id="game-controls">
-                <input type="button" value="Exchange tiles">
-                <input type="button" value="Skip turn">
-                <input type="button" value="Play turn">
+                <input type="button" value="Exchange tiles" onclick="onExchangeTiles()">
+                <input type="button" value="Skip turn" onclick="onSkipTurn()">
+                <input type="button" value="Play turn" onclick="onPlayTurn()">
             </div>
         </div>
 
@@ -328,9 +328,9 @@
                 </div>
             </div>
             <div id="game-controls">
-                <input type="button" value="Exchange tiles">
-                <input type="button" value="Skip turn">
-                <input type="button" value="Play turn">
+                <input type="button" value="Exchange tiles" onclick="onExchangeTiles()">
+                <input type="button" value="Skip turn" onclick="onSkipTurn()">
+                <input type="button" value="Play turn" onclick="onPlayTurn()">
             </div>
             <div id="moves">
                 <div class="move">Jerry played OXYPHENBUTAZONE for 40 points</div>

client/public/scrabble/pieces.js

@@ -20,36 +20,39 @@ Number.prototype.clamp = function(min, max) {
 
 const Drawer = document.querySelector('#piece-drawer');
 
-/*
-TILE OBJECT
-{
-
-}
-*/
-let PiecesDrawer = [];
-
 // Expects structure [{letter: '', score: int}]
 function addPiecesToDrawer(pieces)
 {
+    let ret = [];
     for (const piece of pieces)
     {
         const domPiece = document.createElement('piece');
         domPiece.innerText = piece.letter;
         domPiece.classList.add('unselectable');
         domPiece.classList.add('unplayed-piece');
+    
         const score = document.createElement('score');
         score.innerText = piece.score;
+    
         domPiece.appendChild(score);
         Drawer.appendChild(domPiece);
+    
+        ret.push (domPiece);
     }
+
     setupPieces();
     updatePieceEventListeners();
+    
+    return ret;
 }
 
 // Removes regardless of vadility
 function removePiecesFromDrawer(pieces)
 {
-
+    for (const piece of pieces)
+    {
+        piece.remove();
+    }
 }
 
 

client/public/scrabble/ui.js

@@ -1,14 +1,59 @@
 // DOES NOT DEAL WITH GAME BOARD
 
-function setupUsers()
+// chat
+const ChatBox = document.querySelector('#game-chat');
+const ChatMessageBox = document.querySelector('#game-chat-input');
+const ChatMessageSubmit = document.querySelector('#game-chat-button');
+
+// players
+const IPlayerScores = document.querySelectorAll('.player-scores');
+
+// playlog
+const PlayLog = document.querySelector('#moves');
+
+function initUI()
 {
-    
+    IPlayerScores.forEach(e => {
+        e.innerHTML = '';
+    });
+    PlayLog.innerHTML = '';
+    ChatBox.value = '';
+}
+
+const UserUIReplacer = (p, n, s) => `<div class="p${p} player">
+<div class="p${0}-name player-name">${n}</div>
+Score:<div class="p${p}-score player-score">${s}</div>
+</div>`;
+
+// expects initUI called before
+function setupUsersUI(users, turn)
+{
+    let elements = [];
+    for (const user in users)
+    {
+        elements.push(UserUIReplacer(user, users[user].name, users[user].score));
+    }
+    IPlayerScores.forEach(e => {
+        e.innerHTML += elements.join('');
+    });
+
+    document.querySelectorAll(`.p${turn}`).forEach(e => {
+        e.classList.toggle('theirturn');
+    });
+}
+
+function updateUsersUI(users, turn)
+{
+
 }
 
 
 function onExchangeTiles()
 {
-
+    let tiles = prompt('Enter the tiles you would like to exchange seperated by commas (this will use your turn)')
+    tiles = tiles.split(',');
+    console.log(tiles);
+    
 }
 
 function onSkipTurn()
@@ -31,8 +76,7 @@ function onTurnProcess()
 
 }
 
-function onTurnPlay()
+function onTurnPlay(oldturnuser, newturnuser, newboardstate)
 {
 
 }
-