Game project issue - Cait

[caitreid]

What's the problem you're trying to solve?

I've solved most of the MVP pieces of my game, however I'm trying to reset my playing board and losing the drag/drop functionality I created to set up the game initially.

Post any code you think might be relevant (one fenced block per file)

https://github.com/caitreid/chroma/blob/main/js/script.js

const setupBoard = () => {

  let dragged;

  /* events fired on the draggable target */
  const elements = document.querySelectorAll(".draggable");

  elements.forEach(element => element.addEventListener("dragstart", (event)=> {
    // store a ref. on the dragged elem

    dragged = event.target;

    // Add this element's id to the drag payload so the drop handler will
    // know which element to add to its tree
    event.dataTransfer.setData("text", event.target.id);
    event.dataTransfer.effectAllowed = "move";

    // make it half transparent
    event.target.classList.add("dragging");
  }))

  elements.forEach(element => element.addEventListener("dragend", (event)=> {
      // reset the transparency
    event.target.classList.remove("dragging");
  }))

  droptargets.forEach(droptarget => droptarget.addEventListener("dragover", (event)=> {

    event.preventDefault();

  }, false))

  droptargets.forEach(droptarget => droptarget.addEventListener("drop", (event) => {

    // prevent default action (open as link for some elements)
    event.preventDefault();

    let newPlace = event.target.parentElement

    // move dragged element to the selected drop target
    if (newPlace.classList.contains("droptarget")) {

      // console.log('parent ', dragged.parentElement)
      // event.target.classList.remove("dragover");
      dragged.parentElement.appendChild(event.target)

      newPlace.appendChild(dragged);

    }

    checkGame()

  }))

}

const resetGame = () => {

  console.log('reset game');

  blocks.forEach((block) => {

    block.innerHTML = ""

    block.classList.remove('draggable')

    reset.classList.add('hide')
    play.classList.remove('hide')

    // put elements back in proper order if stopping mid-game

    const innerSquares = document.querySelectorAll('.draggable')

    for (let i = 0; i < innerSquares.length; i++) {

      for (let j = 0; j < droptargets.length; j++) {

        if (innerSquares[i].dataset.id === droptargets[j].dataset.id ) {

          droptargets[j].appendChild(innerSquares[i])

        }
      }
    }
  })
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error message. Unexpected behavior is that after reset, I can't drop my new tile. Or at least it doesn't appear that I'm dropping anything.

What things have you already tried to solve the problem?

When I console.log the dragged element, on the first round it prints just one element. Then each time I click 'play' and 'reset' -- the number of console.log's grows by the factor of times I've hit 'reset'. (three resets, three identical logs).

What is your best guess as to the source of the problem?

When I reset the board, I'm calling a function startGame() which creates the fixed and draggable elements on the board, which then calls another function setupBoard(), a function that adds the event listeners. It seems that something is doubling up (tripling, etc) when I reset the board, but I'm not sure which element.

Paste a link to your repository here

https://github.com/caitreid/chroma

[timmshinbone]

Seems like you might have some Event Bubbling going on. Read up on the event.stopPropagation method and try to implement it. Let me know how it goes.

[caitreid]

ok cool! thank you