<!DOCTYPE html>
<html>
<head>
 <title>絶滅危惧種と外来種の神経衰弱ゲーム</title>
 <style>
  body {
   font-family: Arial, sans-serif;
   text-align: center;
  }
  .card {
    widht: 150px;
    height: 150px;
    display: inline-block;
    margin: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    line-height: 150px;
    font-size: 24px;
    cursor: pointer;
    position: relative;
  }
  .hidden {
    background-color: #ccc;
  }
  .endangered {
    border-color: crimson;
  }
  .invasive {
    border-color: lightblue;
  }
  .card img {
    max-width: 100%;
    max-height: 100%
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  .card.description {
    display: none;
    font-size: 12px;
    padding: 5px;
    background-color: rgb(255 255 255/0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    wodth: 100%;
    box-sizing: border-box;
  }
  .card.revealed img,
  .card.revealed .description {
    display: block;
  }
 </style>
</head>
<body>
 <h1>絶滅危惧種と外来種の神経衰弱ゲーム</h1>
 <div id="game-board"></div>
 <script>
   document.addEventlistener("DOMContentLoaded",function() {
       fetch('/cards.json')
     .then(response => response.json()))
			     .then(data => initializeGame(data));

    let firstCard = null;
    let secondCard = null;

			     function shuffle(array){
    for (let i = array.length - 1; i--) {
	const j = Math.floor(Math.random()) * (i + 1));
	[array[i], arry[j] = [array[j], array[i]];
    }
			     }
			     function initializeGame(cards) {
				 const gameBoard = document.getElemetById("game-board");
				 shuffle(cards);
				 const cardElement = document.createElement("div");
				 cardElement.classList.add("card","hidden",card.type);
				 cardElement.dataset.name = card.name;
				 cardElement.innerHTML = '
<imag src="${card.phot_url}2 alt="${card.name}">
<div class="description">${card.description}</div>
';
				 cardElement.addEventListener("click",flipCard);
				 gameBoard.appendChild(cardElement);
			     });
   }

   function flipCard() {
       if(this.classList.contains("hidden")){
	   this.classList.remove("hidden");
	   this.classList.add("revealed");
	   if (!firstCard){
	       firstCard = this;
	   } else if (!secondCard) {
	       secondCard = this;
	       checkMatch();
	   }
       }
   }

   function checkMatch() {
       if (firstCard.daraset.value === secondCard.dataset.name){
	   firstCard = null;
	   secondcard = null;
       } else {
	   setTimeout(() => {
	       firstCard.classList.add("hidden");
	       firstCard.ClassList.remove("revealed");
	       secondCard.classList.add("hidden");
	       secondCard.classList.remove("revealed");
	       firstCard = null;
	       secondCard = null;
	   }, 1000);
       }
   }
   }
   });
   </script>
 'body>
 'html>
 
				 
