PICK ME Group’D P’FaiiFuu :-)

✨ นางสาวคณากานต์ ศรีสมบูรณ์สุข

<html lang="en">
  <head><link href='https://fonts.googleapis.com/css?family=Dekko' rel='stylesheet'>
<body>
  </head>
  <link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<body scroll="no" style="overflow: hidden">
  <header>
    <div class="head" id="home">-:PICK ME PlEASE:-</div>
    <div class="box">:BRAIN TRAINING GAME:</div>
    <div class="box">:GROUP D - P'FAIIFUU:</div>
    <div class="box">
      <a href="#startgame" id="new-game-button">START</a></div>
        </div>
      <div class="credit">:Credit By <a href="https://medium.com/@autsada.t/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%97%E0%B8%94%E0%B8%AA%E0%B8%AD%E0%B8%9A%E0%B8%AA%E0%B8%B8%E0%B8%82%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-javascript-10b3200e567d" target="a_blank">autsada</a>:</div>
 <div class="space">
   
  </div>
              <div id = "timer">00 : 00 : 00 </div>
  </header>
  <br id="startgame">
    <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 class = "number" id = "26"></div>
        <div class = "number" id = "27"><img class="photo" src=""></div>
        <div class = "number" id = "28"></div>
    </div>
            <div class="game">
      <div class="control">
        <button id = "restart">RESTART<i class="fa fa-refresh fa-spin"></i></button>

</div> 
 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-7/sym635.ani), url(http://cur.cursors-4u.net/symbols/sym-7/sym635.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/11/26/shiny-gold-star.html" target="_blank" title="Shiny Gold Star"><img src="http://cursors-4u.com/cursor.png" border="0" alt="Shiny Gold Star" style="position:absolute; top: 0px; right: 0px;" /></a>
  
</body>
</html>
<iframe width="0" height="0"
src="https://www.youtube.com/embed/yPSAFkvn97Q?&autoplay=1&mute=0.95">
</iframe>
  <style>
     html {
  box-sizing: border-box;
  font-size: 18px;
  /*background: #66c0c4*/
  background-image: url('https://i.pinimg.com/564x/0c/0d/42/0c0d422219d118eae317fef9a4875e6a.jpg');
  background-attachment: fixed;
  background-size: cover;
  color: white;
}
.box {
  text-align: center;
  position: relative;
  font-size:2em;
  font-family: 'Dekko';
  font-weight: 500;
  letter-spacing:6px;
  margin-bottom:50px;
  color: hsl(225, 21%, 19%);
}
body {
  margin: 80px;
  font-family: sans-serif;
}
    .space{
      height:220px;
    }
    .game {
  max-width: 50%;
  margin: auto;
}

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

#timer {
  position:relative;
  background: #f5d740;
  margin-top:50px;
  border:1px solid white;
  padding:5px;
  width: 250px;
  min-height: 50px;
  font-size:30px;
  color:white;
  box-shadow:4px 4px 0px 0px white;
  font-family: 'Dekko', sans-serif;
  font-weight:bold;
  letter-spacing:5px;
  text-transform:uppercase;
  transition: all 300ms ease-in-out;
  left:0;
  top:0;
  border-radius: 100px;
  text-align: center;
  margin: auto;
}

button {
  position:relative;
  margin-top:50px;
  background: #a682d9;
  border:1px solid white;
  padding:20px;
  font-size:30px;
  color:white;
  box-shadow:4px 4px 0px 0px white;
  font-family: 'Dekko', sans-serif;
  font-weight:700;
  letter-spacing:5px;
  text-transform:uppercase;
  left:0;
  top:0;
  border-radius: 100px;
  text-align: center;
}

button:hover {
  left:4px;
  top:4px;
  box-shadow:0 0 0 0 white;
}
button:active {
  background-color: #9072ba;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.table {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.number {
  background: #FFB2AF; 
  height: 60px;
  font-size: 40px;
  font-weight: bold;
  display: grid;
  justify-content: center;
  align-items: center;
  margin: 2px 2px;
  margin-top:10px;
  border-radius: 20px;
  transition: all .1s;
  font-family: 'Dekko';
  text-decoration: none;
	background-color: #FF9E9B;
  padding: 18px 30px;
}

.number:hover {
  background: #FF7A85;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
.number:active {
  background-color: #FF7A85;
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
  transform: translateY(10px);
}

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

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

.number {
    height: 60px;
    font-size: 20px;
  }
 .photo {
  width: 10px;
  height: 10px;
}
}
iframe{
  opacity:0%;
}
a{
  color:#FFFFFF;
}
#new-game-button {
  text-decoration: none;
  color: #CD1039;
	background-color: #FF7DB4;
  margin-top: 40px;
  padding: 18px 30px;
  border: 1px solid;
  border-radius: 200px;
  box-shadow: inset 0 0 0 0 white;
	transition: ease-out 0.5s;
}
#new-game-button:hover {
  background-color: #FF6EED;
  color: #FF6A89;
  margin-top: 40px;
  padding: 18px 30px;
  border: 1px solid white;
  border-radius: 100px;
  box-shadow: inset 300px 0 0 0 #FF6EED;
}
.head {
  text-align: center;
  color:hsl(225, 21%, 19%);
  position: relative;
  font-size:5em;
  font-family: 'Dekko';
  font-weight: 500;
  letter-spacing:6px;
  margin-bottom:20px;
}
.credit {
  text-align: center;
  position: relative;
  font-size:1em;
  font-family: 'Dekko';
  font-weight: 500;
  letter-spacing:6px;
  margin-top:100px;
  color:white;
}
html {
  scroll-behavior: smooth;
}
  </style>
  <script>
    let firstNumbersList
let secondNumbersList
let countedNumbers

let timer
let totalTime
let reset
let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]

const timeStart = () => {
  timer = setInterval(() => {
    totalTime++
    
    let milliSeconds = totalTime % 100
    let seconds = ((totalTime - milliSeconds) / 100)%60
    let minute = Math.floor((totalTime - seconds - milliSeconds)/6000)
    if (milliSeconds < 10) {
      milliSeconds = `0${milliSeconds}`
    }
       if (seconds < 10) {
      seconds = `0${seconds}`
    }
    if (minute < 10) {
      minute = `0${minute}`
    }

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

const timeStop = () => clearInterval(timer)

// Auto reset
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 : 00'

for (let i = 1; i < 27; i++) {
    const getNumber = () => {
      const number = arr[Math.floor(Math.random() * arr.length)];

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

// Attach onClick function
    html.addEventListener('click', playGame(html))
  })

autoReset()
}

window.onload = firstDisplay

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

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

countedNumbers.push(+value)

if (countedNumbers.length === 1 && arr[0]) {
    // Timer start
    timeStart()
  }

if (+value < 27) {
    const getNumber = () => {
      const number = arr[Math.floor(Math.random() * arr.length)+27];

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

if (exist) return getNumber()

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

if (countedNumbers.length === 26) {
    // Timer stop
    timeStop()
    alert("เยี่ยมม!! คุณทำได้เวลา "+ Math.floor((totalTime - ((totalTime - totalTime % 100) / 100)%60 - totalTime % 100)/6000) + " นาที " + ((totalTime - (totalTime % 100)) / 100)%60 + " วินาที!!!")
  }
}

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