JSFiddle - React, Tailwind, and code Playground

by CollonilTolli

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Доска | Проект 4</title>
</head>
<body>
<div class="container" id="board">
</div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #434e55;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 565px;
  padding: 10px 0;
  background-color: #A4AEBA;
}
.winner{
  border:1px solid red
}
.square{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
  background-color: #1d2935;
  margin: 2px;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
  color: #e2e2e2;
  font-size: 50px;
  
}
.culp{
  animation: culp-coins 1s 0s linear
}
.white{
  background-color: #e2e2e2;
  color: #1d1d1d
}

.square:hover{
  transition-duration: 0s;
}
@keyframes culp-coins{
  0%{
    transform: scaleX(1)
  }
  50%{
    transform: scaleX(0)
  }
  100%{
    transform: scaleX(1)
  }
}

JavaScript

const board = document.querySelector('#board');
const SQUARES_NUMBER = 64;
const COINS = ["https://static.coininvest.com/cache/img/1-10-oz-american-eagle-gold-coin-2018_4-725ec502f13d5583878f72a921085367.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/RR5714-0002.png/190px-RR5714-0002.png"];
let oncedFunc = true;


for (let i = 0; i < SQUARES_NUMBER; i++) {
    const square = document.createElement('div');
    if (i % 2 == 0 && ((i <= 7) || (i >= 16 && i <= 23) || (i >= 32 && i <= 39) || (i >= 48 && i <= 55))) {
        square.classList.add('white');
    }
    else if (i % 2 != 0 && ((i >= 8 && i <= 15) || (i >= 24 && i <= 31) || (i >= 40 && i <= 47) || (i >= 56 && i <= 63))) {
        square.classList.add('white');
    }
    const coin = getRandomCoin()
    square.style.backgroundImage = "url(" + coin + ")"
    square.classList.add('square');
    board.append(square);



    
    square.addEventListener('click', () => {
        culpCoin(square, oncedFunc);
        oncedFunc = false;
    }, { once: true })
}



const winnerCase = winnerSquare()
console.log(winnerCase)
winnerCase.classList.add = ("winner")

function winnerSquare(){
	const lengthSquare = [...document.querySelectorAll(".square")].map(item => item.id);
  const winnerSquareItem = Math.floor(Math.random() * lengthSquare.length);
  return lengthSquare[winnerSquareItem]
  
  console.log(winnerSquareItem)
}

function culpCoin(square, oncedFunc) {
    if (oncedFunc === true) {
        square.classList.add("culp")
        window.setTimeout(() => {
            if (square.style.backgroundImage == 'url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/RR5714-0002.png/190px-RR5714-0002.png")') {
                square.style.backgroundImage = 'url("https://static.coininvest.com/cache/img/1-10-oz-american-eagle-gold-coin-2018_4-725ec502f13d5583878f72a921085367.png")'
            }
            else {
                square.style.backgroundImage =...