Entonces, estoy escribiendo un juego de Tic Tac Toe usando HTML, CSS y JavaScript nativos. He escrito una clase para el tablero que se ve bastante ordenada, que puedes ver a continuación.
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');Pero tengo otro script que se encarga de generar el tablero en el 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> Mi pregunta es, ¿hay una mejor manera de escribir el script de BoardGenerator ? La clase se ve ordenada, pero el código fuente del generador no se ve tan bien y es difícil de leer. ¿Cómo puedo hacer que mi código sea más hermoso aquí? Sé que es una mala pregunta, pero aun así, tengo curiosidad sobre cómo puedo mejorar la belleza de mi código aquí.