Method render

assets/js/15puzzle.js:170–218

()

	}

	render() {
		const { grid, move, time, status } = this.state;

		//Render Grid
		const newGrid = document.createElement('div');
		newGrid.className = 'grid';

		for (let i = 0; i < 4; i++) {
			for (let j = 0; j < 4; j++) {
				const button = document.createElement('button');

				if (status === 'playing') {
					button.addEventListener('click', this.handleClickBox(new Box(j, i)));
				}

				button.textContent = grid[i][j] === 0 ? '' : grid[i][j].toString();
				newGrid.appendChild(button);
			}
		}

		document.querySelector('.grid').replaceWith(newGrid);

		//render button
		const newButton = document.createElement('button');
		if (status === 'ready') newButton.textContent = 'play';
		if (status === 'playing') newButton.textContent = 'reset';
		if (status === 'won') newButton.textContent = 'play';

		newButton.addEventListener('click', () => {
			clearInterval(this.tickId);
			this.tickId = setInterval(this.tick, 1000);
			this.setState(State.start());
		});

		document.querySelector('.footer button').replaceWith(newButton);

		// Render move
		document.getElementById('move').textContent = `Move: ${move}`;

		// Render Time
		document.getElementById('time').textContent = `Time: ${time}`;

		// Render Message
		if (status === 'won') {
			document.querySelector('.message').textContent = 'You win!';
		} else {
			document.querySelector('.message').textContent = '';
		}
	}
}

const GAME = Game.ready();