Matching Game (Branch 1317)

✨ PONGSATORN PHATTARASRIVAJCHAKARN

<html>
<head>
	<title>Match Game</title>
  <style>
@font-face{
	 font-family: "Carter";
    src: url("https://raw.githack.com/chaikub/Match-Game/main/Match-Game/font/Carter.woff") format("opentype");
    }
    
    {
	 box-sizing:border-box;
    }

html{
	 min-height: 110vh;
    cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1272.cur), auto !important;
    }

body{
	margin: 0;
      background: linear-gradient(#95e3bb,#ABC4FF);
    }

.page-title{
		color: #ff545e;
      font-family: Carter ,serif;
      font-weight: normal;
  		text-align: center;
      font-size: 4em;
     	margin-top: 5px;
     	margin-bottom: 5px;
    }
    .game-info-container {
  		grid-column: 1 / -1;
  		display: flex;
  		justify-content: space-between;
}
    
   .game-info {
  		font-family: Carter ,serif;
  		color: #000000;
  		font-size: 2.5em;
	 }

.game-contianer{
		display: grid;
      grid-template-columns: repeat(4,auto);
      grid-gap: 30px;
      justify-content: center;
      perspective: 500px;
    }

.card{
		position: relative;
      height: 200px;
      width: 150px;
    }
    .card:hover{
		cursor: url("https://raw.githack.com/chaikub/Match-Game/main/Match-Game/cursor/Pokémon Hand.cur"), auto;
    }
    .card-face{
		position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      backface-visibility: hidden;
      border-width: 2px;
      border-style: solid;
      transition: transform 500ms ease-in-out;
    }
    .card.visible .card-back{
		transform: rotateY(-180deg);
    }
    .card.visible .card-front{
		transform: rotateY(0);
    }
    .card.matched .card-value{
		animation: dance 1s linear infinite 500ms;
    }
    .overlay-text {
      display: none;
		position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      justify-content: center;
      align-items: center;
      z-index: 100;
      color: #ff545e;
      font-family: Carter, serif;
    }
    .overlay-text-small{
		font-size: .3em;
    }
    .overlay-text.visible{
		display: flex;
      flex-direction: column;
      animation: overlay-grow 500ms forwards;
    }
    @keyframes overlay-grow{
      form{
			background-color: rgba(0, 0, 0, 0);
        	font-size: 0;
      }
      to{
			background-color: rgba(0, 0, 0, 0.9);
        font-size: 9em;
      }
    }
    @keyframes dance{
      0%, 100% {
		transform: rotate(0);
      }
      25% {
		transform: rotate(-30deg);
      }
      75% {
		transform: rotate(30deg);
      }
    }
    .card-back{
		background-color: #F0F8FF;
      border-color: blue;
    }
    .card-front{
		background-color: white;
      border-color: #ff545e;
      transform: rotateY(180deg);
    }
    .card-value{
      transition: transform 100ms ease-in-out;
		transform: scale(.8);
    }
    .card-front:hover .card-value{
		transform: scale(1);
    }
    .cob-ball{
		position:absolute;
      width: 20px;
      height: 20px;
      transition: width 100ms ease-in-out, height 100ms ease-in-out;
    }
    .card-face:hover .cob-ball{
		width: 30px;
      height: 30px;
    }
    .cob-ball-top-left{
      top: 5;
      left: 5;
    }
    .cob-ball-top-right{
      top: 5;
      right: 5;
    }
    .cob-ball-bot-right{
      bottom: 5;
      right: 5;
    }
    .cob-ball-bot-left{
      bottom: 5;
      left: 5;
    }
    .poke-text{
      width:70%;
      transition: width 100ms ease-in-out;
    }
    .card-back:hover .poke-text{
      width: 80%;
    }
    .credit{
      position: absolute;
      display: flex;
      font-family: Carter, serif;
      text-align: center;
      font-size: 1em;
      margin-top: 20px;
      margin-bottom: 5 px;
    }
  </style>
</head>
<body>
  <h1 class="page-title">Poké-Match</h1>
  <div class="overlay-text visible">
    Click to Start
  </div>
  <div id="game-over-text" class="overlay-text">
    Game Over
    <span class="overlay-text-small">Click to Restart</span>
  </div>
  <div id="victory-text" class="overlay-text">
    VICTORY
    <span class="overlay-text-small">Click to Restart</span>
  </div>
  <div class="game-contianer">
    <div class="game-info-container">
      <div class="game-info">
        Time : <span id="time-remaining">60</span>
      </div>
      <div class="game-info">
        Flips : <span id="flips">0</span>
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_1.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_1.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_2.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_2.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_3.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_3.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_4.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_4.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_5.png">
      </div>
    </div>
    <div class="card">
    	<div class="card-back card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="poke-text"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png">
      </div>
      <div class="card-front card-face">
        <img class="cob-ball cob-ball-top-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-top-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-left"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="cob-ball cob-ball-bot-right"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png">
        <img class="card-value"
             src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_5.png">
      </div>
    </div>
  </div>
  <script>
class Match{
    	constructor(totalTime, cards) {
        this.cardsArray = cards;
        this.totalTime = totalTime;
        this.timeRemaining = totalTime;
        this.timer = document.getElementById('time-remaining')
        this.ticker = document.getElementById('flips');
      }

startGame() {
			this.totalClicks = 0;
			this.timeRemaining = this.totalTime;
			this.cardToCheck = null;
			this.matchedCards = [];
			this.busy = true;
			setTimeout(()=>{
			this.shuffleCards(this.cardsArray);
			this.countDown = this.startCountDown();
			this.busy = false;
        	}, 500);
			this.hideCards();
			this.timer.innerText = this.timeRemaining;
			this.ticker.innerText = this.totalClicks;
      }

startCountDown(){
			return setInterval(()=>{
				this.timeRemaining--;
           	this.timer.innerText = this.timeRemaining;
           	if(this.timeRemaining == 0)
            	this.gameOver();
      	}, 1000);
      }
  
  		gameOver(){
			clearInterval(this.countDown);
        	document.getElementById('game-over-text').classList.add('visible');
      }

victory(){
			clearInterval(this.countDown);
        	document.getElementById('victory-text').classList.add('visible');
      }

hideCards(){
		 this.cardsArray.forEach(card => {
				card.classList.remove('visible');
         	card.classList.remove('matched');
       });
      }

flipCard(card){
        	if(this.canFlipCard(card)) {
            this.totalClicks++;
            this.ticker.innerText = this.totalClicks;
           	card.classList.add('visible');

if(this.cardToCheck){
				this.checkForCardMatch(card);
         }
        	else{
				this.cardToCheck = card;
         }
      }
      }

checkForCardMatch(card){
			if(this.getCardType(card) === this.getCardType(this.cardToCheck))
           this.cardMatch(card, this.cardToCheck);
        	else
           this.cardMisMatch(card, this.cardToCheck);
        
        	this.cardToCheck = null;
      }
  		cardMatch(card1, card2){
			this.matchedCards.push(card1);
        	this.matchedCards.push(card2);
        	card1.classList.add('matched');
        	card2.classList.add('matched');
        	if(this.matchedCards.length === this.cardsArray.length)
          	this.victory();
      }
  		cardMisMatch(card1, card2){
			this.busy = true;
        	setTimeout(() => {
				card1.classList.remove('visible');
           	card2.classList.remove('visible');
           	this.busy = false;
         }, 1000);
      }
	shuffleCards(cardsArray) {
        for (let i = cardsArray.length - 1; i > 0; i--) {
            const randIndex = Math.floor(Math.random() * (i + 1));
            [cardsArray[i], cardsArray[randIndex]] = [cardsArray[randIndex], cardsArray[i]];
        }
        cardsArray = cardsArray.map((card, index) => {
            card.style.order = index;
        });
    }
			// shuffleCards(cardsArray) {
			// for(let i = this.cardsArray.length - 1; i > 0; i--) {
			// 	const randIndex = Math.floor(Math.random() * (i+1));
			// this.cardsArray[randIndex].style.order = i;
			// this.cardsArray[i].style.order = randIndex;
			// }
			// }

getCardType(card){
			return card.getElementsByClassName('card-value')[0].src;
      }

canFlipCard(card) {
			return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck;
      }
}

if(document.readyState === 'loading'){
			document.addEventListener('DOMContentLoaded', ready());
      	} else{
			ready();
      	}

function ready() {
    		let overlays = Array.from(document.getElementsByClassName('overlay-text'));
   		let cards = Array.from(document.getElementsByClassName('card'));
    		let game = new Match(60, cards);

overlays.forEach(overlay => {
     		   overlay.addEventListener('click', () => {
            overlay.classList.remove('visible');
            game.startGame();
       		});
  			});

cards.forEach(card => {
        card.addEventListener('click', () => {
            game.flipCard(card);
        });
    });
}
  </script>
</body>
  <footer>
  <p class="disclaimer">Credit</p>
  <p class="disclaimer">Web Dev Simplified  - html - css</p>
  <p class="disclaimer">PortEXE  - javascript</p>
  <p class="disclaimer">https://pkmnshuffle.fandom.com/ - Picture</p>
  <p class="disclaimer">Carter One - Font</p>
</footer>
</html>