Week4 Team P’Getty GroupD minigame

✨ นายเมษา มานิตสกุลวงศ์

<html>
  <head>
  </head>
  <body>
    <style>
          @import url('https://fonts.googleapis.com/css?family=Raleway');
    * {
      margin: 0;
      padding: 0;
      color: white;
    }

*,
    *::after,
    *::before {
      box-sizing: border-box;
    }

:root {
      --cell-size: 100px;
      --mark-size: calc(var(--cell-size) * .8);
      --background: #111827;
    }

body {
      background-color: #111827;
      font-family: 'Kanit', sans-serif;
    }
    .name-game{
      top: 25%;
      left: 40%;
      font-size: 48px;
      font-weight: 700;
      position: absolute;
    }
    .btn-newgame {
      top: 40%;
      left: 40%;
      font-size: 28px;
      position: absolute;
      color: black;
      padding: 30px 50px;
      border: none;
      border-radius: 20px;
      outline: none;
      animation: btnColor 5s alternate infinite;
      cursor:pointer;
    }

@keyframes btnColor {
      0% {
        background-color: white;
      }

20% {
        background-color: hsl(2, 87%, 79%);
      }

40% {
        background-color: hsl(42, 87%, 79%);
      }

80% {
        background-color:
      }
    }

.flex {
      display: flex;
      justify-content: center;
    }

.board {
      width: 100vw;
      height: 100vh;
      display: grid;
      background: var(--background);
      background-size: cover;
      justify-content: center;
      align-content: center;
      justify-items: center;
      align-items: center;
      grid-template-columns: repeat(3, auto)
    }

.cell {
      width: var(--cell-size);
      height: var(--cell-size);
      background: #771ff2;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
      border-radius: 20px;
      margin: 8px 5px;
    }

.cell:first-child,
    .cell:nth-child(2),
    .cell:nth-child(3) {
      border-top: none;
    }

.cell:nth-child(3n + 1) {
      border-left: none;
    }

.cell:nth-child(3n + 3) {
      border-right: none;
    }

.cell:last-child,
    .cell:nth-child(8),
    .cell:nth-child(7) {
      border-bottom: none;
    }

.cell.x,
    .cell.circle {
      cursor: not-allowed;
    }

.cell.circle,
    .cell.x {
      transition: background-color 1.2s;
      background-color: transparent;
    }

.cell.x::before,
    .cell.x::after {
      background-color: #ff7582;
    }

.cell.circle::before {
      background-color: #88f4ff;
    }

/* .cell.circle::before{
  background-color: black;
} */
    .board.x .cell:not(.x):not(.circle):hover::before,
    .board.x .cell:not(.x):not(.circle):hover::after,
    .board.circle .cell:not(.x):not(.circle):hover::before {
      background-color: lightgrey;
    }

.cell.x::before,
    .cell.x::after,
    .board.x .cell:not(.x):not(.circle):hover::before,
    .board.x .cell:not(.x):not(.circle):hover::after {
      content: '';
      position: absolute;
      width: calc(var(--mark-size) * .15);
      height: var(--mark-size);
      transition: all 1s;
    }

.cell.x::before,
    .board.x .cell:not(.x):not(.circle):hover::before {
      transform: rotate(45deg);
    }

.cell.x::after,
    .board.x .cell:not(.x):not(.circle):hover::after {
      transform: rotate(-45deg);
    }

.cell.circle::before,
    .cell.circle::after,
    .board.circle .cell:not(.x):not(.circle):hover::before,
    .board.circle .cell:not(.x):not(.circle):hover::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      transition: all 1s;
    }

.cell.circle::before,
    .board.circle .cell:not(.x):not(.circle):hover::before {
      width: var(--mark-size);
      height: var(--mark-size);
    }

.cell.circle::after,
    .board.circle .cell:not(.x):not(.circle):hover::after {
      width: calc(var(--mark-size) * .7);
      height: calc(var(--mark-size) * .7);
      background-color: transparent;
    }

.winning-message {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .9);
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 5rem;
      flex-direction: column;
    }

.winning-message button {
      font-size: 3rem;
      background-color: white;
      border: 1px solid black;
      padding: .25em .5em;
      cursor: pointer;
      color: black;
    }

.winning-message button:hover {
      background-color: black;
      color: white;
      border-color: white;
    }

.winning-message.show {
      display: flex;
    }

.turn-player {
      position: absolute;
      font-size: 36px;
      font-weight: 500;
      top: 12%;
    }

.letplay {
      position: absolute;
      font-weight: 700;
      font-size: 48px;
      top: 5%;
    }

/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
      font-family: Raleway;
    }

.side-links {
      position: absolute;
      top: 15px;
      right: 15px;
    }

.side-link {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      margin-bottom: 10px;
      color: white;
      width: 180px;
      padding: 10px 0;
      border-radius: 10px;
    }

.side-link-youtube {
      background-color: red;
    }

.side-link-twitter {
      background-color: #0066CC;
    }

.side-link-github {
      background-color: #6e5494;
    }

.side-link-text {
      margin-left: 10px;
      font-size: 18px;
    }

.side-link-icon {
      color: white;
      font-size: 30px;
    }

.a-radio {
      width: 100%;
      height: 50px;
      background-color: white;
      border-radius: 15px;
    }

.radio1 {
      position: absolute;
      margin-top: 5px;
      margin-left: 10px;
      left: 10%;
      width: 40px;
      height: 40px;
      cursor:pointer;
      background-repeat: no-repeat;
      background: url(https://media.discordapp.net/attachments/798210377618948117/807573373755719691/turn-notifications-on-button.png?width=463&height=463);
      background-size: cover;
      transition:background-color 2s;
    }

.radio2 {
      position: absolute;
      margin-top: 5px;
      margin-left: 10px;
      left: 60%;
      width: 40px;
      height: 40px;
      cursor:pointer;
      background-repeat: no-repeat;
      background: url(https://media.discordapp.net/attachments/798210377618948117/807573017193873429/turn-notifications-off-button.png?width=463&height=463);
      background-size: cover;
      transition:background-color 2s;

}
.radio1:hover, .radio2:hover{
  background-color:lightgreen;
}
    </style>
  <div class="flex">
    <div id="view" class="panel">
    <div class="name-game">TIC TAC TOE</div>
      <button id="okButton" class="btn-newgame">Start Game!</button>
    </div>
  </div>
  <section id="awesome" hidden>
    <div class="flex">
      <p2 class="letplay">LET'S PLAY!!</p2>
      <p2 id="play" class="turn-player"></p2>
    </div>
    <div class="board" id="board">
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
      <div class="cell" data-cell></div>
    </div>
    <div class="winning-message" id="winningMessage">
      <div data-winning-message-text></div>
      <button id="restartButton" style="border-radius:15px; margin:20px;">Restart</button>
    </div>
    
    <div class="side-links">
      <a href="https://youtu.be/Y-GkMjUZsmM" target="_blank" class="side-link side-link-youtube">
        <i class="fab fa-youtube-square side-link-icon"></i>
        <span class="side-link-text">Credit Tutorial</span>
      </a>
      <a href="https://www.youtube.com/watch?v=G-zERbBCJMQ" target="_blank" class="side-link side-link-twitter">
        <i class="fas fa-music"></i>
        <span class="side-link-text">Credit Sound</span>
      </a>
      <a href="https://github.com/WebDevSimplified/JavaScript-Tic-Tac-Toe" target="_blank" class="side-link side-link-github side-link-icon">
        <i class="fab fa-github-square"></i>
        <span class="side-link-text">Credit GitHub</span>
      </a>
      <div class="a-radio">
        <div class="radio1" onclick="playAudio()">
          <audio id="myAudio">
            <source
              src="https://cdn.discordapp.com/attachments/798210377618948117/807565640952184842/Playful_iMovie_Song-Music.mp3"
              type="audio/mpeg">
          </audio>
        </div>
        <div class="radio2" onclick="pause()">
        </div>
      </div>
    </div>
    <script>
      
      const X_CLASS = 'x'
      const CIRCLE_CLASS = 'circle'
      const WINNING_COMBINATIONS = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
      ]
      const cellElements = document.querySelectorAll('[data-cell]')
      const board = document.getElementById('board')
      const winningMessageElement = document.getElementById('winningMessage')
      const restartButton = document.getElementById('restartButton')
      const winningMessageTextElement = document.querySelector('[data-winning-message-text]')
      let circleTurn

startGame()

restartButton.addEventListener('click', startGame)

function startGame() {
        circleTurn = false
        cellElements.forEach(cell => {
          cell.classList.remove(X_CLASS)
          cell.classList.remove(CIRCLE_CLASS)
          cell.removeEventListener('click', handleClick)
          cell.addEventListener('click', handleClick, { once: true })
        })
        setBoardHoverClass()
        winningMessageElement.classList.remove('show')
      }

function endGame(draw) {
        if (draw) {
          winningMessageTextElement.innerText = 'Draw!'
        } else {
          winningMessageTextElement.innerText = `${circleTurn ? "Player 2's" : "Player 1's"} Wins!`
        }
        winningMessageElement.classList.add('show')
      }

function isDraw() {
        return [...cellElements].every(cell => {
          return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS)
        })
      }

function placeMark(cell, currentClass) {
        cell.classList.add(currentClass)
      }

function swapTurns() {
        circleTurn = !circleTurn
        if (circleTurn = circleTurn) {
          document.getElementById('play').innerHTML = "Player 1's Turn"
        }
        else {
          document.getElementById('play').innerHTML = "Player 2's Turn"
        }
      }

function setBoardHoverClass() {
        board.classList.remove(X_CLASS)
        board.classList.remove(CIRCLE_CLASS)
        if (circleTurn) {
          board.classList.add(CIRCLE_CLASS)
    document.getElementById('play').innerHTML = "Player 2's Turn"
  } else {
    board.classList.add(X_CLASS)
    document.getElementById('play').innerHTML = "Player 1's Turn"
        }
      }

function checkWin(currentClass) {
        return WINNING_COMBINATIONS.some(combination => {
          return combination.every(index => {
            return cellElements[index].classList.contains(currentClass)
          })
        })
      }

var x = document.getElementById("myAudio");

function playAudio() {
        x.play();
      }

function pause() {
        x.pause();
      }

</script>
  
</body>

</html>