Welcome to CODEBOX! (Branch 1652)

✨ นายศุภชัย ชื่นสุขศรี

<!DOCTYPE html>

<html lang="en">
<head>
    	<meta charset="utf-8">
    	<title>24 Game</title>
   	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&family=Sigmar+One&display=swap');
body{
  font-family: 'Itim', cursive;
  background-color: pink;
  background-size: contain;
  background-image: url(https://media.discordapp.net/attachments/806442579485917204/807601427518062602/myU7u7UKroOg.gif?width=1025&height=308);
}
:root {
    --card-height: 62vh;
    -webkit-tap-highlight-color: transparent;
}
.button::selection{
    color: none;
}
.check-box::selection {
    cursor: none;
}
.template{
  width:800px;
  margin:auto;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content:center;
}
.top-part{
  display: flex;
  flex: 0 0 100%;
  background: linear-gradient(#fcb6d0,#F48FB1);
  margin: 4px;
  width: 100px;
  border-radius: 30px;
  box-shadow: 5px 5px #c9c9c9;
  justify-content: center;
}
.score, .time{
  min-width: 10rem;
  max-height: 5rem;
  font-size: 40px;
  text-align: center;
  border-radius: 20px;
  margin:20px;
  padding: 10px 0px;
  background: white;
}
.line{
  height: 1px;
  border: solid 5px;
  color: white;
  flex: 1 100%;
  margin: 2px;
}
.bottom-part{
  flex: 0 1 100%;
  display: flex;
  flex-wrap: wrap;
  background: #c1e2ff;
  margin: 4px;
  border-radius: 20px;
  justify-content: center;
}
.display{
  height: 80px;
  flex: 0 1 100%;
  display: flex;
  background: white;
  border-radius: 20px;
  margin: 20px;
  box-shadow: 8px 8px #a2bdd6;
  font-size: 40px;
  align-items: center;
  padding-left: 20px;
}
.remove{
  flex: 0 0 10%;
  color: #ff8184;
  background: #e3e3e3;
  margin: 11px;
  margin-left: 665px;
  border-radius: 10px;
}
.number-block{
  flex-wrap: wrap;
  background:#c1e2ff;
  margin: 4px;
  display: flex;
  flex: 0 0 47%;
  justify-content:center;
  padding-bottom: 1.8rem;
}
.number{
  background: linear-gradient(#AED6F1,#5DADE2);
  flex: 0 0 45%;
  margin: 7px;
  text-align: center;
  cursor: pointer;
  line-height: calc(var(--card-height) / 3);;
  width: calc(var(--card-height) / 3);
  height: calc(var(--card-height) / 3);
  border-radius: 50%;
  border-radius: 20px;
  box-shadow: 4px 4px #f2f2f2;
  /*transition: 1000ms;*/
}
.number.selected {
    color: pink;
    text-shadow: 0 0 5px black;
    background: linear-gradient(hsl(110, 59%, 44%), hsl(110, 59%, 30%));
}
.number.selected:hover {
    background: linear-gradient(hsl(110, 59%, 35%), hsl(110, 59%, 25%)) !important;
}

.number:hover{
  background: linear-gradient(hsl(204, 71%, 75%), hsl(204, 71%, 55%));
  /*background: #339cff;*/
}

.number:active{
  transform: translateY(2px);
  background: #339cff;
}

.operator{
  --card-height: 45vh;
  height: 33%;
  background: linear-gradient(hsl(50, 100%, 71%), hsl(28, 80%, 71%));
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  line-height: calc(var(--card-height) / 3);;
  width: calc(var(--card-height) / 3);
  height: calc(var(--card-height) / 3);
  flex: 0 0 45%;
  margin: 6px;
  border-radius: 20px;
  box-shadow: 4px 4px #a2bdd6;
}

.operator.selected {
    color: pink;
    text-shadow: 0 0 5px black;
    background: linear-gradient(hsl(41, 100%, 62%), hsl(41, 100%, 50%));
}
.operator.selected:hover {
    background: linear-gradient(hsl(41, 100%, 62%), hsl(41, 100%, 40%)) !important;
}

.operator:hover{
  background: linear-gradient(hsl(50, 100%, 70%), hsl(28, 80%, 60%));
}
.operator:active{
  transform: translateY(2px);
  background: #FFB74D ;
}
.control{
  height: 20%;
  background: linear-gradient(#ff696c 20%,#CB4335 80%);
  flex: 0 0 46%;
  display: flex;
  border-radius: 20px;
  box-shadow: 4px 4px #a2bdd6;
  margin: 7px;
  justify-content: center;
  font-size: 36px;
  align-items: center;
  cursor: pointer;
}
.control:hover{
  background: #EF9A9A  ;
}
.control:active{
  transform: translateY(2px);
  background: #EF9A9A  ;
  }

.overlay-text {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 100;
  color: #FF6B6B;
  font-family: 'Sigmar One', cursive;
  text-align: center;
}

.overlay-text-small {
  font-size: .3em;
}

.overlay-text.visible {
  display: flex;
  flex-direction: column;
  animation: overlay-grow 500ms forwards;
}

@keyframes overlay-grow {
  from {
    background-color: rgba(0, 0, 0, 0);
    font-size: 0;
  }
  to {
    background-color: rgba(0, 0, 0, .8);
    font-size: 10em;
  }
}

.game-name {
  font-family: "Sigmar one", sans-serif;
  align-items: center;
  font-variant-caps: petite-caps;
  font-size: 120px;
  font-weight: bold;
  margin-top: -1.2em;
  margin-bottom: -0.9em;
  color:#8cd1ff;
  -webkit-text-stroke-width: 2.5px;
  -webkit-text-stroke-color: #4ba8ff;
  text-shadow: 0 0.1em 20px rgba(84, 194, 238, 0.11), 0.05em -0.03em 0 rgba(84, 194, 238, 0.11),
    0.05em 0.005em 0 rgba(84, 194, 238, 0.11), 0em 0.08em 0 rgba(84, 194, 238, 0.11),
    0.05em 0.08em 0 rgba(84, 194, 238, 0.11), 0px -0.03em 0 rgba(84, 194, 238, 0.11),
    -0.03em -0.03em 0 rgba(84, 194, 238, 0.11), -0.03em 0.08em 0 rgba(84, 194, 238, 0.11), -0.03em 0 0 rgba(84, 194, 238, 0.11);

}
.game-name:nth-child(1) {
  animation: shaking 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite
    alternate;
}
.game-name:nth-child(2) {
  animation: shakingB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
}

@keyframes shaking {
  0% {
    transform: scale(0.9);
  }
  50%,100% {
    transform: scale(1) rotateZ(2deg);
  }
}

@keyframes shakingB {
  0% {
    transform: scale(0.9);
  }
  80%,100% {
    transform: scale(1) rotateZ(-3deg);
  }
}
  		</style>
</head>
<body>
  <div class="overlay-text visible" overlayStart><p start>Click to Start</p></div>
  <div id="game-over-text" class="overlay-text" overlayRestart>
    <p style="font-size: 5rem" messageGameover></p>
    <p style="font-size: 2.5rem">Score is: <span gameOverScore>0</span></p>
    <span class="overlay-text-small" restart>Click to Restart</span></div>
  <div class="template">
    
      <div class="game-name"><p>24</p></div><div class="game-name"><p>game</p></div>
      <div class="top-part">
        <div class="score" scoreBox>0</div>
        <div class="time" timerBox>00:00</div>
      </div>
      <div class="bottom-part">
        <div class="display" textBox>
        </div>
        <div class="number-block">
          <div class="number button" numberButton></div>
          <div class="number button" numberButton></div>
          <div class="number button" numberButton></div>
          <div class="number button" numberButton></div>
          <div class="dummy" dummy></div>
        </div>
        <div class="number-block">
          <div class="operator button" operationButton></div>
          <div class="operator button" operationButton></div>
          <div class="operator button" operationButton></div>
          <div class="operator button" operationButton></div>
          <div class="control button" resetButton></div>
          <div class="control check" newBox></div>
          <div class="dummy" dummy></div>
        </div>
      </div>
  </div>
  <script type="text/javascript">
class AudioController {
    constructor() {
        this.bgMusic = new Audio('https://multijabond.web.app/kahootbg.mp3');
        this.clickSound = new Audio('https://multijabond.web.app/click.wav');
        this.matchSound = new Audio('https://raw.githubusercontent.com/WebDevSimplified/Mix-Or-Match/master/Assets/Audio/match.wav');
        this.gameOverSound = new Audio('https://multijabond.web.app/hawaiio.mp3');
        this.bgMusic.volume = 0.5;
        this.gameOverSound.volume = 0.25;
        this.bgMusic.loop = true;
    }
    startMusic() {
        this.bgMusic.play();
          this.stopGameOver();
    }
    stopMusic() {
        this.bgMusic.pause();
        this.bgMusic.currentTime = 0;
    }
    
    match() {
        this.matchSound.play();
    }
    
    gameOver() {
        this.stopMusic();
        this.gameOverSound.play();
    }
    stopGameOver() {
        this.gameOverSound.pause();
        this.gameOverSound.currentTime = 0;
    }
    click() {
        this.clickSound.play();
    }
}

const sound = new AudioController

class twentyFourGame {
    constructor() {
        this.dummyOperand = document.querySelector('[dummy]')
        this.dummyOperation = document.querySelector('[dummy]')
        this.newNumbers()
    }

clear() {
        this.firstOperand = this.dummyOperand
        this.secondOperand = this.dummyOperand
        this.activeOperation = this.dummyOperation
    }

newNumbers() {
        textBoxElement.innerText = ''
        this.clear()
        this.randomizeNumbers()
        this.populateNumbers()
    }

randomizeNumbers() {
        let base = 24
        answerArray.splice(0, answerArray.length)
        for (let i = 0; i < 3; i++) {
            let operation = Math.floor((Math.random() * 6)) % 4
            let nextNumber = Math.floor((Math.random() * 10)) + 2
            if (operation === 3) {
                if ((base + nextNumber) > 24) {
                    i--
                    continue
                }
                answerArray.push(nextNumber)
                answerArray.push(' - ')
                base = base + nextNumber
            } else if (operation === 2) {
                if ((base - nextNumber) < 1) {
                    i--
                    continue
                }
                answerArray.push(nextNumber)
                answerArray.push(' + ')
                base = base - nextNumber
            } else if (operation === 1) {
                if ((base * nextNumber) > 32) {
                    i--
                    continue
                }
                answerArray.push(nextNumber)
                answerArray.push(' / ')
                base = base * nextNumber
            } else {
                if (base % nextNumber !== 0) {
                    i--
                    continue
                }
                answerArray.push(nextNumber)
                answerArray.push(' * ')
                base = base / nextNumber
            }
            operationsArray[i] = operationLib[operation]
        }
        if (base > 16) {
            this.randomizeNumbers()
        } else {
            answerArray.push(base)
            answerArray.reverse()
        }
    }

populateNumbers() {
        let randomOrder = Math.floor(Math.random() * 4)
        numberButtonElements.forEach((number, index) => {
            number.innerText = `${answerArray[2*((randomOrder + index) % 4)]}`
            number.classList.remove('empty')
            number.classList.remove('selected')
            number.style.fontSize = `calc(var(--card-height) / (${answerArray[2*((randomOrder + index) % 4)].toString().length} + 3.5)`
        })
    }

chooseOperation(operation) {
        if(this.firstOperand !== this.dummyOperation) {
            if (this.activeOperation === operation) {
                this.activeOperation.classList.remove('selected')
                this.activeOperation = this.dummyOperation
                let text = textBoxElement.innerText
                textBoxElement.innerText = text.substring(0, text.length - 1);
                return
            } else {
                this.activeOperation.classList.remove('selected')
                this.activeOperation = operation
                this.activeOperation.classList.add('selected')

textBoxElement.innerText += operation.textContent
            }
        }
    }

chooseNumber(number) {
        if (number.textContent !== '') {
            if (this.firstOperand === number) {
                this.firstOperand.classList.remove('selected')
                this.firstOperand = this.dummyOperand
                this.activeOperation.classList.remove('selected')
                this.activeOperation = this.dummyOperation
                textBoxElement.innerText = ''
                return
            } else if (this.secondOperand === number) {  
                this.secondOperand.classList.remove('selected')
                this.secondOperand = this.dummyOperand
                let text = textBoxElement.innerText
                textBoxElement.innerText = text.substring(0, text.length - 1);
                return
            } else if (this.firstOperand !== this.dummyOperation && this.activeOperation !== this.dummyOperation) {
                this.secondOperand.classList.remove('selected')
                this.secondOperand = number
                this.secondOperand.classList.add('selected')
                textBoxElement.innerText += number.textContent
            } else if (number.textContent !== '') {
                this.firstOperand.classList.remove('selected')
                this.firstOperand = number
                this.firstOperand.classList.add('selected')
                textBoxElement.innerText = number.textContent
            }
        }
    }

compute() {
        if (this.firstOperand === this.dummyOperand || this.secondOperand === this.dummyOperand || this.activeOperation === this.dummyOperation){
            return
        }
        let computation
        const first = parseInt(this.firstOperand.innerText)
        const second = parseInt(this.secondOperand.innerText)
        // textBoxElement.classList.add('hidden')
        switch (this.activeOperation.innerText) {
            case '+':
                computation = first + second
                break
            case '-':
                computation = Math.abs(first - second)
                break
            case '*':
                computation = first * second
                break
            case '/':
                if (first % second === 0) {
                    computation = first / second
                } else if (second % first === 0) {
                    computation = second / first
                } else {
                    this.firstOperand.classList.remove('selected')
                    this.secondOperand.classList.remove('selected')
                    this.activeOperation.classList.remove('selected')
                    alert('The quotient is not a whole number')
                    textBoxElement.innerText = ''
                    this.clear()
                    return
                }
                break
            default:
                this.clear()
                return
        }
        textBoxElement.innerText += ' = '+`${computation}`
        this.firstOperand.innerText = ''
        this.firstOperand.classList.remove('selected')
        this.secondOperand.innerText = `${computation}`
        this.secondOperand.style.fontSize = `calc(var(--card-height) / (${computation.toString().length} + 3.5)`
        this.secondOperand.classList.remove('selected')
        this.activeOperation.classList.remove('selected')
        this.clear()
        this.victory()
    }

victory() {
        let victoryCount = 0
        numberButtonElements.forEach(number => {
            if (number.innerText === '' || number.innerText === '24') victoryCount++ 
        })
        if (victoryCount === 4) {
            // To do, add screen victory
            sound.match()
            scoreCount++;
            scoreBoxElement.innerText = scoreCount;
            gameOverScore.innerText = scoreCount;
            newGame.newNumbers()
        }
    }
}

const messageGameover = document.querySelector('[messageGameover]')
const start = document.querySelector('[start]')
const restart = document.querySelector('[restart]')
const overlayStart = document.querySelector('[overlayStart]')
const overlayRestart = document.querySelector('[overlayRestart]')
const gameOverScore = document.querySelector('[gameOverScore]')
const scoreBoxElement = document.querySelector('[scoreBox]')
const operationButtonElements = document.querySelectorAll('[operationButton]')
const numberButtonElements = document.querySelectorAll('[numberButton]')
const resetButtonElement = document.querySelector('[resetButton]')
const textBoxElement = document.querySelector('[textBox]')
const newBoxElement = document.querySelector('[newBox]')
const timerBox = document.querySelector('[timerBox]')
const operationLib = ['Multiplication', 'Division', 'Addition', 'Subtraction']
const operationsArray = [], answerArray = []
var firsttime = true
var scoreCount = 0
var message

const newGame = new twentyFourGame()

let operationSymbols = '+-*/';
operationButtonElements.forEach((operation,index) => {
    operation.innerText = operationSymbols[index]
    operation.addEventListener('click', () => {
        sound.click()
        newGame.chooseOperation(operation)
        newGame.compute()
    })
})

numberButtonElements.forEach(number => {
    number.addEventListener('click', () => {
        sound.click()
        newGame.chooseNumber(number)
        newGame.compute()
    })
})

resetButtonElement.innerText = 'Reset';
resetButtonElement.addEventListener('click', () => {
    sound.click()
    textBoxElement.innerText = '';
    newGame.activeOperation.classList.remove('selected')
    newGame.clear()
    newGame.populateNumbers()
})

newBoxElement.innerText = 'Next';
newBoxElement.addEventListener('click', () => {
    sound.click()
    newGame.newNumbers()
})

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var loop = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

display.textContent = minutes + ":" + seconds;

if (--timer < 0) {
            if (scoreCount >= 12) {
                message = 'Please don\'t use F12 function'
            }
            else if (scoreCount >= 8) {
                message = 'Fuck you, nerd'
            }
            else if (scoreCount >= 5) {
                message = 'Great!'
            }
            else if (scoreCount >= 3) {
                message = 'Try harder'
            }
            else if (scoreCount < 3) {
                message = 'NOOB'
            }
            messageGameover.innerText = message;
            timer = duration;
            sound.gameOver()
            document.getElementById('game-over-text').classList.add('visible');
            gameOverScore.innerText = scoreCount;
            scoreCount = 0
            scoreBoxElement.innerText = scoreCount;
            newGame.newNumbers()
            clearInterval(loop);
        }
    }, 1000);
}