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