This is Numbering!!!

✨ นายณัฐพงษ์ ไวยจรี

<html>
  <h1>
    ***วิธีการเล่น : ให้ผู้เล่นเลือกตัวเลขเรียงกันตั้งแต่ 1-50 ผู้เล่นไม่สามารถกดข้ามเลขได้ ไปลุยกันเลย!                       -.-'
  </h1>
  <h2>
  </h2>

  <head>
    <title>Let's Start
    </title>
    <style>
      h1{
      width: 620px;
    	padding: 5px;
/*     	border: 5px solid #00FFCC; */
    	margin: 0;
      font-size:17px;
      margin-left:350px;
      color:#330000;
      box-shadow: 0px 0px 25px #000099;
      border-radius: 10px;
      font-family: "Lucida Console", "Courier New", monospace;
      background: #66FF99; 
      background: -webkit-linear-gradient(left, #66FF99 , #3300CC); 
  		background: -o-linear-gradient(right, #66FF99, #3300CC); 
 		background: -moz-linear-gradient(right, #66FF99, #3300CC);
  		background: linear-gradient(to right, #66FF99 , #3300CC);
      }
      h2{
		font-size: 17px;
      margin-left:480px;
      color:#00FFFF;
      }
      body{
        background-image: linear-gradient(#00FFDC, blueviolet);
        margin:2em;
        font-family:Cursive;
        
      }
      html {
  box-sizing: border-box;
  font-size: 18px;
  position:fixed;
}

body {
  margin:10px;
  font-family: sans-serif;
  background-image: url(https://wallpapercave.com/wp/wp4575286.jpg);
}

.game {
  max-width: 50%;
  margin: auto;
}

.control {
  margin-bottom:20px;
  display: flex;
  justify-content: space-around;
}

#timer {
  display: flex;
  align-items: center;
  width: 120px;
  height: 35px;
  border-radius: 20px;
  font-size: 17px;
  margin-left:490px;
  margin-bottom: 30px;
  justify-content: space-around;
  background: #989898;
  color: #000;
  font-family: cursive;
  box-shadow: 0px 0px 25px #000;
}

button {
  background: #957DAD;
  font-size:17px;
  position: absolute;
  color: white;
  width: 120px;
  height: 35px;
  margin-left:220px;
  border-radius: 25px;
  border: none;
  font-family: cursive;
  cursor: pointer;
  box-shadow: 0px 0px 25px purple;
}

button:hover {
  background: #57466D;
}

.table {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 0.1fr 0.1fr 1fr;
}

.number {
  background: #70A1D7;
  height: 80px;
  width:80px;
  border-radius: 15px;
  color: #CCFFFF;
  font-size: 25px;
  display: grid;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  margin-left: 440px;
  margin-right: -430px;
  box-shadow: 0px 0px 20px #000099; 
}

.number:hover {
  background: #396394;
}

@media (max-width: 208px) {
  body {
    margin: 20px;
  }

.game {
    max-width: 100%;
    margin: auto;
  }

.number {
    height: 50px;
    font-size: 20px;
  }
}
    </style>
  </head>
  <body>
  <iframe width="0" height="0" src="https://www.youtube.com/embed/gfeFa02HaHE?autoplay=1"></iframe>
<script src = "index.js"></script>
    
    <div class = "game">
        <button id = "restart">Restart</button>
        <div id = "timer">00 : 00</div>
    </div>
    <div class = "table">
        <div class = "number" id = "1"></div>
        <div class = "number" id = "2"></div>
        <div class = "number" id = "3"></div>
        <div class = "number" id = "4"></div>
        <div class = "number" id = "5"></div>
        <div class = "number" id = "6"></div>
        <div class = "number" id = "7"></div>
        <div class = "number" id = "8"></div>
        <div class = "number" id = "9"></div>
        <div class = "number" id = "10"></div>
        <div class = "number" id = "11"></div>
        <div class = "number" id = "12"></div>
        <div class = "number" id = "13"></div>
        <div class = "number" id = "14"></div>
        <div class = "number" id = "15"></div>
        <div class = "number" id = "16"></div>
        <div class = "number" id = "17"></div>
        <div class = "number" id = "18"></div>
        <div class = "number" id = "19"></div>
        <div class = "number" id = "20"></div>
        <div class = "number" id = "21"></div>
        <div class = "number" id = "22"></div>
        <div class = "number" id = "23"></div>
        <div class = "number" id = "24"></div>
        <div class = "number" id = "25"></div>
    </div>
    <script>
      let firstNumbersList
let secondNumbersList
let countedNumbers

let timer
let totalTime
let reset

const timeStart = () => {
  timer = setInterval(() => {
    totalTime++

let milliSeconds = totalTime % 100
    let seconds = (totalTime - milliSeconds) / 100
    if (milliSeconds < 10) {
      milliSeconds = `0${milliSeconds}`
    }

if (seconds < 10) {
      seconds = `0${seconds}`
    }

document.getElementById('timer').innerHTML = `${seconds} : ${milliSeconds}`
  }, 10)
}

const timeStop = () => clearInterval(timer)

const autoReset = () => {
  if (countedNumbers.length === 0) {
    reset = setInterval(firstDisplay, 8000)
  }
}

const firstDisplay = () => {
  clearInterval(reset)
  timeStop()
  totalTime = 0

firstNumbersList = []
  secondNumbersList = []
  countedNumbers = []

document.getElementById('timer').innerHTML = '00 : 00'

for (let i = 1; i < 26; i++) {
    const getNumber = () => {
      const number = Math.floor(Math.random() * 25) + 1

const exist = firstNumbersList.find(item => item === number)

if (exist) return getNumber()

firstNumbersList.push(number)
    }
    getNumber()
  }

firstNumbersList.map((num, i) => {
    const html = document.getElementById(`${i + 1}`)
    html.innerHTML = num

html.addEventListener('click', playGame(html))
  })

autoReset()
}

window.onload = firstDisplay

const playGame = element => () => {
  clearInterval(reset)
  const value = element.innerHTML

if (+value !== countedNumbers.length + 1) return

countedNumbers.push(+value)

if (countedNumbers.length === 1) {

timeStart()
  }

if (+value < 26) {
    const getNumber = () => {
      const number = Math.floor(Math.random() * 25) + 26

const exist = secondNumbersList.find(item => item === number)

if (exist) return getNumber()

secondNumbersList.push(number)
      element.innerHTML = number
    }
    getNumber()
  } else {
    element.innerHTML = ''
  }

if (countedNumbers.length === 50) {

timeStop()
    alert('You win คุณเก่งมากกกกก กด Restart เพื่อเริ่มเกมส์ใหม่')
  }
}

document.getElementById('restart').addEventListener('click', firstDisplay)
    </script>
  </body>
  <h2>Credit Music by --Magic of fantasy-- (Youtube)</h2>
</html>