Letter distribution chart

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,29 +31,39 @@ 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;
     -o-border-radius: 0.4em;
     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;

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>

client/javascript/scrabble.js

@@ -794,4 +794,6 @@ if (typeof exports == 'object') {
     exports.calculateMove = calculateMove;
     exports.LetterBag = LetterBag;
     exports.Bag = Bag;
+    exports.letterDistributions = letterDistributions;
+
 }

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;
 

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++) {