JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<div class="game"></div>

JavaScript

// Основной класс который управляет игрой а так же отображением состояния игры в DOM
class BlackJackGame {
	constructor(rootNode) {
		// Ниже значения для демонстрации какие свойства будут у объекта игры.
		// Значения будут манипулироваться объектом игры в процессе игры
		this.playersCards = null
		this.computerCards = null
		this.deck = null

		// Узлы в которые будет происходит отрисовка состояния игры. Удобно когда узлы существуют в течение всей игры. Тогда не придетс заморачиваться с поддержанием состосния (навешивание-убирание обработчиков событий)
		// Иногда для удобства отличия узлов от данных придумывают формат переменных, например, начинающиеся с $ это DOM узлы. Или дать всем префикс DOM. Тогда при чтении кода будет однозначно понятно с чем имеем дело
		this.DOMComputerScore = null
		this.DOMComputerCards = null
		this.DOMDeckOfCards = null
		this.DOMPlayerScore = null
		this.DOMPlayerCards = null
		this.DOMPass = null

		// Корневой элемет
		this.DOMRootNode = rootNode
		this.init()
	}
	
	// Функция-привязка ко внешнему миру, куда игра будет себя проэцировать.
	// Запускается разово, генерирует всю нужную разметку в переданом узле, создает начальное сотояние игры
	init() {
		this.playersCards = []
		this.computerCards = []
		this.deck = this._createDeck()
		
		// Разметку с которой будет иметь дело игра лучше создавать самой игре
		// На начальных этапах фокусируемся на контейнерах - узлах в которые мы будем отображать аспекты игры.
		// На конечных этапах мы просто перенесем эти узлы в другие узлы или добавим оберток чтобы создать желаемую картинку. Код же самой игры менять не будет потому что мы отделим логику отображения от логики самой игры. 
		// Стремимся называть классы единообразно, сообразно аспекту за который отвечает узел. Классы нужны для того чтобы уникальным образом обратиться к элементу. Например блок карт бота и блок карт человека должны иметь разные классы (можно сделать общий класс чтобы поместить в него общие стили, но логику будем...