<div id=”scrabble-game”>
<div id=”board”></div>
<div id=”rack”></div>
<div id=”input”>
<label for=”word-input”>Enter a word:</label>
<input type=”text” id=”word-input” />
<button onclick=”playTurn()”>Play</button>
</div>
</div>
<style>
#scrabble-game {
text-align: center;
margin-top: 20px;
}
#board {
margin-bottom: 20px;
}
#rack {
margin-bottom: 20px;
}
#input {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<script>
let rack = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];
let board = [
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
[‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘],
];
function render() {
document.getElementById(‘board’).innerHTML = board
.map(row => `<div>${row.join(”)}</div>`)
.join(”);
document.getElementById(‘rack’).innerHTML = `Rack: ${rack.join(‘ ‘)}`;
}
function playTurn() {
const wordInput = document.getElementById(‘word-input’).value.toUpperCase();
const validPlacement = true; // You need to implement validation logic
if (validPlacement) {
// Update the board and rack
// Implement your logic to update the board and rack array
// based on the word and its placement.
// For simplicity, let’s assume the placement is always valid.
render();
} else {
alert(‘Invalid word placement. Try again.’);
}
}
// Initial rendering
render();
</script>