From 1c65b6c9a9dae920893065a6ce6315c431c1e0de Mon Sep 17 00:00:00 2001
From: Joshua Fox <4542591+JoshuaFox@users.noreply.github.com>
Date: Fri, 3 Sep 2021 16:49:37 +0300
Subject: [PATCH] Letter distribution chart

---
 client/css/game.css           | 30 +++++++++++++++++++++++-------
 client/game.html              |  4 ++++
 client/javascript/scrabble.js |  2 ++
 client/javascript/ui.js       | 19 ++++++++++++++++++-
 server.js                     |  1 +
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/client/css/game.css b/client/css/game.css
index f4445113..2b9914a5 100644
--- a/client/css/game.css
+++ b/client/css/game.css
@@ -14,6 +14,12 @@ div.bottomShade table
     -o-box-shadow: 0 0 0.5em #000000;
     box-shadow: 0 0 0.5em #000000;
 }
+#container {
+    display: flex;
+}
+#container > div {
+    flex: auto; /*grow*/
+}
 
 div#container
 {
@@ -25,21 +31,31 @@ div#letterbagStatus > div
     margin: 0.5em;
 }
 
+
+div#letterDistributionChartHolder {
+    float:left;
+    margin-left: 2.7em;
+    margin-top: 2.6em;
+    margin-bottom: 0.4em;
+    font-size: 0.82em;
+    height: 100%;
+}
+
 div#controls
 {
     float: left;
     margin: 1em;
     margin-top: 2em;
-    width: 19.5em;
+    flex: 0 0 20em;
 }
 
-div#controls > div
+div#letterDistributionChartHolder, div#controls > div
 {
     background-color: #F7F7E3;
     border-color: #DCDCC6;
 
     border-style: solid;
-	
+
     -webkit-border-radius: 0.4em;
     -moz-border-radius: 0.4em;
     -ms-border-radius: 0.4em;
@@ -47,7 +63,7 @@ div#controls > div
     border-radius: 0.4em;
 
     margin-bottom: 0.4em;
-    padding: 0.4em;
+    padding: 0.6em;
 }
 
 div#log {
@@ -162,7 +178,7 @@ div#rackButtons {
 div#boardWrap
 {
     margin-top: 1em;
-    float: right;
+    float: left;
     width: 37em;
 }
 
@@ -373,7 +389,7 @@ div.tableDivWrap td div.Tile
     background-color: #F7F7E3;
     border-color: #DCDCC6;
     border-style: solid;
-	
+
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     -ms-border-radius: 0.2em;
@@ -436,7 +452,7 @@ div.tableDivWrap td div.Selected,
     -o-animation-iteration-count: infinite;
     -o-animation-direction: alternate;
     -o-animation-timing-function: linear;
-	
+
     animation-name: glow;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
diff --git a/client/game.html b/client/game.html
index 966aa669..a5bef29b 100644
--- a/client/game.html
+++ b/client/game.html
@@ -88,6 +88,10 @@
         <div id="rack" class="tableDivWrap bottomShade"></div>
         <div id="letters" class="tableDivWrap" style="display:none;"></div>
       </div>
+      <div id="letterDistributionChartHolder" class="controls">
+        <div id="letterDistributionChart"/>
+      </div>
+
       <div id="blankLetterRequester">
           <button>Type letter for blank</button>
       </div>
diff --git a/client/javascript/scrabble.js b/client/javascript/scrabble.js
index da924301..659f0ecc 100644
--- a/client/javascript/scrabble.js
+++ b/client/javascript/scrabble.js
@@ -794,4 +794,6 @@ if (typeof exports == 'object') {
     exports.calculateMove = calculateMove;
     exports.LetterBag = LetterBag;
     exports.Bag = Bag;
+    exports.letterDistributions = letterDistributions;
+
 }
diff --git a/client/javascript/ui.js b/client/javascript/ui.js
index 8eb1e308..6b2f9949 100644
--- a/client/javascript/ui.js
+++ b/client/javascript/ui.js
@@ -35,6 +35,7 @@ function UI(game) {
         gameData = thaw(gameData, PrototypeMap);
         console.log('gameData', gameData);
 
+        ui.createLetterDistributionChart(gameData);
         ui.swapRack = new Rack(7);
         ui.swapRack.tileCount = 0;
         ui.board = gameData.board;
@@ -704,7 +705,23 @@ UI.prototype.updateBoardSquare = function(square) {
         .empty()
         .append(div);
 };
-    
+UI.prototype.createLetterDistributionChart = function(gameData) {
+
+    var header = [TR(null, [TH(null, "Letter"), TH(null, "Count"), TH(null, "Points")])];
+    var distribution = gameData.letterDistributions.slice();//copy
+    var blank = distribution.shift();
+    distribution.push(blank);
+    var rows = distribution.map(function (letter) {
+        return TR({'class': 'letterDistribution'},
+            TD({'class': 'letter'}, letter.letter ? letter.letter : "_"),
+            TD({'class': 'count'}, letter.count),
+            TD({'class': 'score'}, letter.score));
+    });
+    var tableContent = header.concat(rows);
+    $('#letterDistributionChart').append(TABLE(null, tableContent));
+}
+
+
 UI.prototype.drawBoard = function() {
     var board = this.board;
 
diff --git a/server.js b/server.js
index 6101d380..120f7041 100644
--- a/server.js
+++ b/server.js
@@ -712,6 +712,7 @@ async function getGame(req, res) {
                              whosTurn: game.whosTurn,
                              remainingTileCounts: game.remainingTileCounts(),
                              legalLetters: game.letterBag.legalLetters,
+                             letterDistributions: scrabble.letterDistributions[game.language],
                              players: [] }
             var thisPlayer = game.lookupPlayer(req, true);
             for (var i = 0; i < game.players.length; i++) {