document.write ( `

<style id="css">
</style>

<header>
    <img src="uploads/alexmurphy1996/comments_icon.png" align="left" height=23%/>
	<h1> 4. Comments, Types and Variables </h1>
</header>

<section>
 <div class="wrap-all">
      <p class="play-time">0</p>
      <ul class="image-container"></ul>
      <button class="start-button">Start</button>
      <p class="game-text">Completed!</p>
    </div>
</section>

` );


   
  // Apply CSS styles to all elements with the class "image-container"
$('.image-container').css({
  "width": "300px",
  "height":"300px",
  "margin": "20px",
  "border-radius": "15px",
  "overflow": "hidden",
  "box-shadow": "0 20px 30px -10px rgba(38, 57, 77, 0.5)"
  
});

// Apply CSS styles to all elements with the class "wrap-all"
$('.wrap-all').css({
  "display": "flex",
  "justify-content": "center",
  "align-items": "center",
  "flex-direction": "column"
});

// Apply CSS styles to all elements with the class "play-time"
$('.play-time').css({
  "font-size": "3rem",
  "margin-top": "2rem",
  "color": "#3b5998"
});

// Apply CSS styles to all <ul> elements
$('ul').css({
  "margin-top": "1rem",
  "list-style": "none",
  "border": "2px solid #3b5998",
  "display": "grid",
  "grid-template-columns": "repeat(4, 1fr)"

});

// Apply CSS styles to all <li> elements
$('li').css({
  "width": "100px",
  "height": "100px",
  "color": "red",
    // "background": "url('/uploads/jackie2002/6.jpg')"
});

// Apply CSS styles to all elements with the class "start-button"
$('.start-button').css({
  "background-color": "#3b5998",
  "color": "white",
  "border": "none",
  "padding": "1rem 2rem",
  "margin-top": "1rem"
});

// Apply CSS styles to all elements with the class "game-text"
$('.game-text').css({
  "position": "absolute",
  "font-size": "45px",
  "color": "#67c23a",
  "text-shadow": "1px 1px rgba(0, 0, 0, 0.5)",
  "display": "none"
});

// Apply CSS styles to elements with class "list0" to "list15"
for (let i = 0; i <= 15; i++) {
  $(`.list${i}`).css({
    "background-position-x": `${i % 4 * -100}px`,
    "background-position-y": `${Math.floor(i / 4) * -100}px`
    
  });
}

const container = document.querySelector(".image-container");
const startButton = document.querySelector(".start-button");
const gameText = document.querySelector(".game-text");
const playTime = document.querySelector(".play-time");

const tileCount = 16;

let tiles = [];
const dragged = {
  el: null,
  class: null,
  index: null,
};

let isPlaying = false;
let timeInterval = null;
let time = 0;

//function
function checkStatus() {
  // 상태확인
  const currentList = [...container.children];
  const unMatchedList = currentList.filter(
    (child, index) => Number(child.getAttribute("data-index")) !== index
  );
  if (unMatchedList.length === 0) {
    // 게임끝
    gameText.style.display = "block";
    isPlaying = false;
    clearInterval(timeInterval);
  }
}

function setGame() {
  // 게임시작될때
  isPlaying = true;
  time = 0;
  container.innerHTML = "";
  gameText.style.display = "none";
  clearInterval(timeInterval);

  tiles = createImageTiles();
  tiles.forEach((tile) => container.appendChild(tile));
  setTimeout(() => {
    container.innerHTML = "";
    shuffle(tiles).forEach((tile) => container.appendChild(tile));

    timeInterval = setInterval(() => {
      playTime.innerText = time;
      time++;
    }, 1000);
  }, 5000);
}

function createImageTiles() {
  const tempArray = [];
  Array(16)
    .fill()
    .forEach((_, i) => {
      const li = document.createElement("li");
      li.setAttribute("data-index", i);
      li.setAttribute("draggable", "true");
      li.classList.add(`list${i}`);
      tempArray.push(li);
    });
  return tempArray;
}

function shuffle(array) {
  let index = array.length - 1;
  while (index > 0) {
    const randomIndex = Math.floor(Math.random() * (index + 1));
    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
    index--;
  }
  return array;
}

//events
container.addEventListener("dragstart", (event) => {
  // 드래그시작
  if (!isPlaying) return;
  const obj = event.target;
  dragged.el = obj;
  dragged.class = obj.className;
  dragged.index = [...obj.parentNode.children].indexOf(obj);
});
container.addEventListener("dragover", (event) => {
  //드래그 움직
  event.preventDefault();
});
container.addEventListener("drop", (event) => {
  //그대그놨을때
  if (!isPlaying) return;
  const obj = event.target;

  if (obj.className !== dragged.class) {
    let originPlace;
    let isLast = false;

    if (dragged.el.nextSibling) {
      originPlace = dragged.el.nextSibling;
    } else {
      originPlace = dragged.el.previousSibling;
      isLast = true;
    }
    const droppedIndex = [...obj.parentNode.children].indexOf(obj);
    dragged.index > droppedIndex
      ? obj.before(dragged.el)
      : obj.after(dragged.el);
    isLast ? originPlace.after(obj) : originPlace.before(obj);
  }
  checkStatus();
});

startButton.addEventListener("click", () => {
  setGame();
});