Question

0

84

Views

How to randomly re-render the DOM nodes' order of precedence from a node-list?

I'm trying to shuffle cards by reordering the index of the nodes in my NodeList.

How can I achieve removing and appending the children of a class attribute I have?

HTML:

<div class="card" data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png" alt="">
    <img class="back" src="img/cards/back.png" alt="">
</div>

<div class="card" data-card="7" onclick="cardClicked(this)">
    <img src="img/cards/7.png" alt="">
    <img class="back" src="img/cards/back.png" alt="">
</div>

<div class="card" data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png" alt="">
    <img class="back" src="img/cards/back.png" alt="">
</div>

JavaScript:

function shuffleCards() {
    let cards = document.querySelectorAll('.card');
    let cardsArray = Array.from(cards);
    // reorder the nodes of the nodelist (cards)
}

over 1 year ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-08-31T10:10:57.824Z

There are several ways you can go about "shuffling" an array. I chose the Fisher-Yates method in an experimental "war" card game. https://github.com/scottm85/war/blob/master/src/Game/Deck.js#L80

shuffle()
{
    /* Use a Fisher-Yates shuffle...If provides a much more reliable shuffle than using variations of a sort method https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle */
    let cards = this.cards;
    for (let i = cards.length - 1; i > 0; i--)
    {
        let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }
    this.cards = cards;

    console.log("----------------- Deck Shuffled -----------------");
}

https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

Granted my provided example is slightly different than your needs as I was doing this in react, had a Deck array built out, and wasn't using JS for direct DOM manipulation. In theory though, you could modify this to work with your method. Something like this:

function shuffleCards
{
    let cards = document.querySelectorAll('.card');
    let cardsArray = Array.from(cards);

    for (let i = cardsArray.length - 1; i > 0; i--)
    {
        let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
        [cardsArray[i], cardsArray[j]] = [cardsArray[j], cardsArray[i]];
        cards[i].remove();
    }

    cardsArray.forEach(t => document.body.appendChild(t));
}

Answer 2 · 2022-08-31T10:10:57.831Z

You can use sort and Math.random() methods like this:

 function shuffleCards() {
            var parent = document.getElementById("parent");

            let cards = document.querySelectorAll('.card');
            let cardsArray = Array.from(cards);

            //console.log(cardsArray)

            cardsArray.sort(() => Math.random() - 0.5);

            //console.log(cardsArray)

            cardsArray.forEach(t => parent.appendChild(t));
            // reorder the nodes of the nodelist (cards)
        }

<h3> Click on card to Shuffle at the same postion</h3>

    <div id="parent">
        <div class="card" data-card="1" onclick="shuffleCards(this)">
            card 1
            <img src="img/cards/1.png" alt="">
            <img class="back" src="img/cards/back.png" alt="">
        </div>

        <div class="card" data-card="7" onclick="shuffleCards(this)">
            card 2
            <img src="img/cards/7.png" alt="">
            <img class="back" src="img/cards/back.png" alt="">
        </div>

        <div class="card" data-card="1" onclick="shuffleCards(this)">
            card 3
            <img src="img/cards/1.png" alt="">
            <img class="back" src="img/cards/back.png" alt="">
        </div>
    </div>

Answer 3 · 2022-08-31T10:10:57.837Z

The following approach is agnostic to where the queried nodes need to be removed from, and after shuffling, have to be inserted into again.

Thus one does not need to know anything about the DOM structure except for the element query.

Basically ...

Use only reliable/proven shuffle functions like _.shuffle.
Create an array from the queried node list.
Map it with node items in a way that each (child) node gets removed from the DOM but preserves not only its own reference but also the reference of its parent node.
Shuffle the mapped array.
Iterate the shuffled items in a way where from each item one can restore the former parent-node child-node relationship ...

function shuffleArray(arr) {
  let idx;
  let count = arr.length;

  while (--count) {
    idx = Math.floor(Math.random() * (count + 1));
    [arr[idx], arr[count]] = [arr[count], arr[idx]];
  }
  return arr;
}

function shuffleCards() {
  const removedNodeDataList = Array
    .from(document.querySelectorAll('.card'))
    .map(elmNode => ({
      parentNode: elmNode.parentNode,
      elementNode: elmNode.parentNode.removeChild(elmNode),
    }));

  shuffleArray(removedNodeDataList)
    .forEach(({ parentNode, elementNode }) =>
      parentNode.appendChild(elementNode)
    );
}

function init() {
  document
    .querySelector('button')
    .addEventListener('click', shuffleCards);
}
init();

img { background-color: #eee; }
button { display: block; margin: 0 0 10px 0; }

<button>Shuffle Cards</button>

<div class="card" data-card="1">
  <img src="https://picsum.photos/140/50?grayscale" alt="">
  <img class="back" src="https://picsum.photos/120/50?grayscale" alt="">
</div>
<div class="card" data-card="2">
  <img src="https://picsum.photos/100/50?grayscale" alt="">
  <img class="back" src="https://picsum.photos/160/50?grayscale" alt="">
</div>
<div class="card" data-card="3">
  <img src="https://picsum.photos/180/50?grayscale" alt="">
  <img class="back" src="https://picsum.photos/80/50?grayscale" alt="">
</div>