idk what i did

client/board.js

@@ -1,15 +1,78 @@
 // traverse HTML and fill in table
 
 const BoardLookup = {
-    '3LS': 'x3 Letter Score',
-    '2LS': 'x2 Letter Score',
-    '3WS': 'x3 Word Score',
-    '2WS': 'x2 Word Scre',
-    '★': 'x2 Word Score'
+    'TL': 'tripple-letter',
+    'DL': 'double-letter',
+    'TW': 'tripple-word',
+    'DW': 'double-word',
+    '★': 'center-star'
 };
 
 const BoardLocations = {
-    'A1': '2WS'
-
-
+    'A1': 'TW',
+    'D1': 'DL',
+    'H1': 'TW',
+    'L1': 'DL',
+    'O1': 'TW',
+    'B2': 'DW',
+    'F2': 'TL',
+    'J2': 'TL',
+    'N2': 'DW',
+    'C3': 'DW',
+    'G3': 'DL',
+    'I3': 'DL',
+    'M3': 'DW',
+    'A4': 'DL',
+    'D4': 'DW',
+    'H4': 'DL',
+    'L4': 'DW',
+    'O4': 'DL',
+    'E5': 'DW',
+    'K5': 'DW',
+    'B6': 'TL',
+    'F6': 'TL',
+    'J6': 'TL',
+    'N6': 'TL',
+    'C7': 'DL',
+    'G7': 'DL',
+    'I7': 'DL',
+    'M7': 'DL',
+    'A8': 'TW',
+    'D8': 'DL',
+    'H8': '★',
+    'L8': 'DL',
+    'O8': 'TW'
+};
+
+function flip(y, size)
+{
+    return -y + size + 1;
+}
+
+window.onload = e => {
+    for (const location in BoardLocations)
+    {
+        const x = location[0].toLowerCase();
+        const y = location[1];
+
+        const boardLocation = document.querySelector(`#row-${y}`).querySelector(`#col-${x}`);
+
+        boardLocation.classList.add(BoardLookup[BoardLocations[location]]);
+        boardLocation.innerHTML = BoardLocations[location];
+    }
+
+    // flip it
+    
+    for (const location in BoardLocations)
+    {
+        const x = location[0].toLowerCase();
+        let y = location[1];
+
+        y = flip(y, 15);
+
+        const boardLocation = document.querySelector(`#row-${y}`).querySelector(`#col-${x}`);
+
+        boardLocation.classList.add(BoardLookup[BoardLocations[location]]);
+        boardLocation.innerHTML = BoardLocations[location];
+    }
 };

client/dragable.js

@@ -24,8 +24,6 @@ function mouseDown(event, element)
 
     element.pointerEvents = 'none';
     selectedElement = element;
-
-    console.log(element);
 }
 
 function mouseMove(event)

client/game.css

@@ -2,14 +2,16 @@
 #game-container {
     border: 1px dotted black;
     padding-bottom: 20%;
-    position: relative;
+    position: absolute;
+
+    height: 80%;
+    overflow: hidden;
 }
 
 piece {
     display: flex;
 
     cursor: move;
-    border: 1px dotted black;
     background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%);
 
     text-align: center;
@@ -84,9 +86,10 @@ score {
 .game-board-cell {
     display: table-cell;
 
-    width: 100%;
-    height: 0;
-    padding-bottom: 0%;
+    /* width: 100%; */
+    height: 4vw;
+    /* width: 10vw; */
+    /* padding-bottom: 0%; */
 
     font-size: 2vw; /* roughly 15 / table width */
     vertical-align: middle;

client/game.html

@@ -48,11 +48,11 @@
         <div class="game-board-row" id="row-1">
             <div class="game-board-col-header game-board-col-header-cell">1</div>
 
-            <div class="game-board-cell tripple-word" id="col-a">TW</div>
-            <div class="game-board-cell double-word" id="col-b">DW</div>
-            <div class="game-board-cell tripple-letter" id="col-c">TL</div>
-            <div class="game-board-cell double-letter" id="col-d">DL</div>
-            <div class="game-board-cell center-star" id="col-e">★</div>
+            <div class="game-board-cell" id="col-a"></div>
+            <div class="game-board-cell" id="col-b"></div>
+            <div class="game-board-cell" id="col-c"></div>
+            <div class="game-board-cell" id="col-d"></div>
+            <div class="game-board-cell" id="col-e"></div>
             <div class="game-board-cell" id="col-f"></div>
             <div class="game-board-cell" id="col-g"></div>
             <div class="game-board-cell" id="col-h"></div>