<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matching Drag & Drop Game</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #ffe0b2;
    padding: 8px;
    max-width: 620px;
    margin: auto;
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
  }

  #gameContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .line {
    display: flex;
    align-items: center;
    padding: 8px 8px;
    border: 2px solid #f57c00;
    border-radius: 8px;
    background-color: #fff3e0;
  }

  .leftPart {
    width: 190px;
    font-size: 1.5em;
    margin-right: 2px;
  }

  .dropZone {
    width: 190px;
    height: 40px;
    border: 2px dashed #f57c00;
    border-radius: 2px;
    background-color: #ffe0b2;
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
    padding-left: 4px;
    font-size: 1.5em;
  }

  .dropZone.filled {
    border: 2px solid green;
    background-color: #c8e6c9;
  }

  .wordContainer {
    width: 190px;
    display: flex;
    justify-content: left;
  }

  .draggable {
    padding: 4px 4px;
    background-color: #ffb74d;
    border-radius: 2px;
    cursor: grab;
    user-select: none;
    font-weight: bold;
    font-size: 1.5em;
  }

  /* When a draggable is being dragged */
  .dragging {
    opacity: 0.5;
  }

  #resetBtn, #nextBtn {
    margin-top: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 1em;
    background-color: #f57c00;
    color: white;
    border: none;
    border-radius: 5px;
  }

  #message {
    text-align: center;
    margin-top: 2px;
    font-size: 1.3em;
    color: green;
  }
</style>
</head>
<body>

<h1>🧩 Drag & Match Game 🎯</h1>
<div id="gameContainer"></div>
<button id="resetBtn" onclick="createGame()">Reset Game</button>
<button id="nextBtn" onclick="nextSet()" style="display: none;">Next Set</button>
<div id="message"></div>

<script>
const sets = [
  [
    {left: "attractive", right: "hot"},
    {left: "clever", right: "sharp"},
    {left: "argument", right: "row"},
    {left: "quiet", right: "hush"},
    {left: "person", right: "guy"},
    {left: "money", right: "dough"},
    {left: "food", right: "grub"},
  ],
  [
    {left: "friend", right: "buddy"},
    {left: "stupid", right: "dumb"},
    {left: "no", right: "nope"},
    {left: "clothes", right: "threads"},
    {left: "house", right: "crib"},
    {left: "crazy", right: "nuts"},
    {left: "cool", right: "dope"},
  ],
    [
    {left: "sure", right: "no way"},
    {left: "gossip", right: "chatter"},
    {left: "sleep", right: "nap"},
    {left: "party", right: "bash"},
    {left: "accident", right: "crash"},
    {left: "mistake", right: "screw-up"},
    {left: "relax", right: "chill"},
  ],
];

let matchedCount = 0;
let currentSetIndex = 0;
const gameContainer = document.getElementById('gameContainer');
const messageDiv = document.getElementById('message');
const nextButton = document.getElementById('nextBtn');

function shuffle(array) {
  for (let i = array.length -1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i+1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function createGame() {
  matchedCount = 0;
  messageDiv.innerText = '';
  nextButton.style.display = 'none'; // Hide Next button
  gameContainer.innerHTML = '';

  // Get current set of pairs
  const pairs = sets[currentSetIndex];

  // Shuffle pairs for lines
  const shuffledPairs = shuffle([...pairs]);

  // Create draggable elements for each right word
  const draggableElements = [];
  for (let pair of pairs) {
    const dragDiv = document.createElement('div');
    dragDiv.className = 'draggable';
    dragDiv.innerText = pair.right; // Ensure string
    dragDiv.draggable = true;
    dragDiv.ondragstart = handleDragStart;
    dragDiv.ondragend = handleDragEnd;
    draggableElements.push(dragDiv);
  }

  // Shuffle draggable elements for random placement
  shuffle(draggableElements);

  // Create lines with left part and drop zones
  for (let pair of shuffledPairs) {
    const lineDiv = document.createElement('div');
    lineDiv.className = 'line';

    // Left part
    const leftDiv = document.createElement('div');
    leftDiv.className = 'leftPart';
    leftDiv.innerText = pair.left;

    // Drop zone
    const dropZone = document.createElement('div');
    dropZone.className = 'dropZone';
    dropZone.dataset.correctRight = pair.right;
    dropZone.dataset.filled = 'false';
    dropZone.ondragover = (e) => { e.preventDefault(); };
    dropZone.ondrop = handleDrop;

    // Container for the draggable word (initially on the right)
    const wordContainer = document.createElement('div');
    wordContainer.className = 'wordContainer';

    // Assign a draggable word in random order
    const dragWord = draggableElements.pop(); // Take one from shuffled array
    wordContainer.appendChild(dragWord); // Append to container

    // Append all to line
    lineDiv.appendChild(leftDiv);
    lineDiv.appendChild(dropZone);
    lineDiv.appendChild(wordContainer);

    // Append line to container
    gameContainer.appendChild(lineDiv);
  }
}

let draggedItem = null;

function handleDragStart(e) {
  draggedItem = e.target;
  e.dataTransfer.setData('text/plain', e.target.innerText);
  e.dataTransfer.effectAllowed = "move";
  e.target.classList.add('dragging');
}

function handleDragEnd(e) {
  e.target.classList.remove('dragging');
}

function handleDrop(e) {
  e.preventDefault();
  const dropZone = e.target;

  if (dropZone.dataset.filled === 'true') {
    alert('This box is already filled. Pick another.');
    return;
  }

  const draggedText = e.dataTransfer.getData('text/plain');

  if (draggedText === dropZone.dataset.correctRight) {
    // Correct match
    dropZone.innerText = draggedText;
    dropZone.dataset.filled = 'true';
    dropZone.classList.add('filled');

    // Remove draggable from its container
    if (draggedItem && draggedItem.parentNode) {
      draggedItem.parentNode.removeChild(draggedItem);
    }

    matchedCount++;
    if (matchedCount === sets[currentSetIndex].length) {
      if (currentSetIndex < sets.length - 1) {
        nextButton.style.display = 'block'; // Show Next button
        messageDiv.innerText = '🎉 Congratulations! All matched! Click Next to continue.';
      } else {
        messageDiv.innerText = '🎉 Congratulations! You completed all sets!';
        nextButton.style.display = 'none'; // Hide Next button
      }
    }
  } else {
    alert('Incorrect! Try again.');
  }
}

function nextSet() {
  currentSetIndex++;
  if (currentSetIndex < sets.length) {
    createGame();
  } else {
    messageDiv.innerText = '🎉 Congratulations! You completed all sets!';
    nextButton.style.display = 'none'; // Hide Next button
  }
}

createGame();

</script>
</body>
</html>