Test of Larking (Branch 1319)

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

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background-image: linear-gradient(#00FFDC, blueviolet);
        margin:2em;
        font-family:Cursive;
        
      }
      html {
  box-sizing: border-box;
  font-size: 18px;
  position:fixed;
}

body {
  margin: 40px;
  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: 150px;
  height: 50px;
  border-radius: 25px;
  font-size: 20px;
  margin-left:680px;
  margin-bottom: 50px;
  justify-content: space-around;
  background: #957DAD;
  color: white;
  font-family: cursive;
}

button {
  background: #957DAD;
  font-size: 20px;
  position: absolute;
  color: white;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  margin-left: 420px;
  border: none;
  font-family: cursive;
  cursor: pointer;
}

button:hover {
  background: #57466D;
}

.table {
  display: grid;
  margin-left: 450px;
  grid-template-columns: 0.1fr 0.1fr 0.1fr 0.1fr 1fr;
}

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

.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>
<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()
  }
}

document.getElementById('restart').addEventListener('click', firstDisplay)
    </script>
  </body>
</html>