JSFiddle - React, Tailwind, and code Playground
HTML
<div id="board"><div id="c00r00" class="t r tws"> </div><div id="c01r00" class="t"> </div><div id="c02r00" class="t"> </div><div id="c03r00" class="t dls"> </div><div id="c04r00" class="t"> </div><div id="c05r00" class="t"> </div><div id="c06r00" class="t"> </div><div id="c07r00" class="t"> </div><div id="c08r00" class="t tws"> </div><div id="c09r00" class="t"> </div><div id="c10r00" class="t"> </div><div id="c11r00" class="t"> </div><div id="c12r00" class="t"> </div><div id="c13r00" class="t dls"> </div><div id="c14r00" class="t"> </div><div id="c15r00" class="t"> </div><div id="c16r00" class="t tws"> </div><div id="c00r01" class="t r"> </div><div id="c01r01" class="t dws"> </div><div id="c02r01" class="t"> </div><div id="c03r01" class="t"> </div><div id="c04r01" class="t"> </div><div id="c05r01" class="t"> </div><div id="c06r01" class="t tls"> </div><div id="c07r01" class="t"> </div><div id="c08r01" class="t"> </div><div id="c09r01" class="t"> </div><div id="c10r01" class="t tls"> </div><div id="c11r01" class="t"> </div><div id="c12r01" class="t"> </div><div id="c13r01" class="t"> </div><div id="c14r01" class="t"> </div><div id="c15r01" class="t dws"> </div><div id="c16r01" class="t"> </div><div id="c00r02" class="t r"> </div><div id="c01r02" class="t"> </div><div id="c02r02" class="t dws"> </div><div id="c03r02" class="t"> </div><div id="c04r02" class="t"> </div><div id="c05r02" class="t"> </div><div id="c06r02" class="t"> </div><div id="c07r02" class="t dls"> </div><div id="c08r02" class="t"> </div><div id="c09r02" class="t dls"> </div><div id="c10r02" class="t"> </div><div id="c11r02" class="t"> </div><div id="c12r02" class="t"> </div><div id="c13r02" class="t"> </div><div id="c14r02" class="t dws"> </div><div...
CSS
#board { left: 50px; position: absolute; top: 50px; }
.tile {
background-color: #FFF;
color: #000;
border: 1px outset silver;
width: 18px;
height: 17px;
font-size: 10px;
text-align: center;
padding-top: 1px;
}
.t { border: 1px solid #ccc; width: 20px; height: 20px; font-size: 1px; float: left; }
.r { clear: left; }
.tws { background-color: #f00; }
.dws { background-color: #fcc; }
.scs { background-color: #fcc; }
.dls { background-color: lightblue; }
.tls { background-color: blue; }
.tileset { background-color: brown; clear: both; height: 27px; padding: 2px 3px; float: left; }
.tileset-horizontal .t { float: left; }
.tileset-bottom { left: 156px; position: absolute; top: 450px; }
.bag { left: 600px; position: absolute; }
JavaScript
var McCaubble = function () {
var base_tile = {
letter: 'E',
score: 1
},
base_tileset = [
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'A',
score: 1
}),
$.extend({}, base_tile, {
letter: 'B',
score: 3
}),
$.extend({}, base_tile, {
letter: 'B',
score: 3
}),
$.extend({}, base_tile, {
letter: 'C',
score: 3
}),
$.extend({}, base_tile, {
letter: 'C',
score: 3
}),
$.extend({}, base_tile, {
letter: 'D',
score: 2
}),
$.extend({}, base_tile, {
letter: 'D',
score: 2
}),
$.extend({}, base_tile, {
letter: 'D',
score: 2
}),
$.extend({}, base_tile, {
letter: 'D',
...