So, I am writing a Tic Tac Toe game using native HTML, CSS, and JavaScript. I've written a class for the board that looks pretty neat, which you can see below.
class Board {
#boardSize;
#player1Symbol;
#player2Symbol;
constructor(boardSize = 3, player1Symbol = 'X', player2Symbol = 'O') {
this.#boardSize = boardSize;
this.#player1Symbol = player1Symbol;
this.#player2Symbol = player2Symbol;
}
get boardSize() { return this.#boardSize; }
get player1Symbol() { return this.#player1Symbol; }
get player2Symbol() { return this.#player2Symbol; }
}
let board = new Board(3, 'X', 'O');But I have another script that is responsible for generating the board into the HTML.
let game_ui = document.querySelector('.game-ui');
let uiHTML = '';
for (let x = 0; x < board.boardSize; x++) {
uiHTML += `<div class="row-${x}">`;
for (let y = 0; y < board.boardSize; y++) uiHTML += `<input type="button" class="" id="btn-${x}.${y}" value=" " />`;
uiHTML += `</div>`;
}
game_ui.innerHTML = uiHTML;<body>
<div class="game-ui">
</div>
</body>My question is, is there a better way to write the BoardGenerator script? The class looks neat but the generator source code doesn't look all that good and is hard to read. How can I make my code more beautiful here? I know this is a bad question to ask, but still, I am curious on how I can improve the beauty of my code here.