I'm trying to programmatically remember an object array but I'm lacking skills and I don't seem to find answers on the web either.

So, I want to be able to, while drawing a cardObj, to remove its reverse(upsidedown) alternative. Note that I wanna do the same if the reverse version is drawer first - remove the upright one from the deck.

Here is the code:

Cardz Exerz!

EXERZ!

Past, Present & Future
Spread

PASTPRESENTFUTURE// -----------JAVASCRIPT--------------//

  // CARDS OBJECT ------------------------------------------------------------------------------------>
  let cardObj = [
  {name: "0_Fool", imgUrl: "data/0_Fool.jpg"},
  {name: "0_Fool_R", imgUrl: "data/0_Fool_R.jpg"}, 
  //{name: "1_Magician", imgUrl: "data/1_Magician.jpg"}, 
  //{name: "1_Magician_R", imgUrl: "data/1_Magician_R.jpg"}, 
  ];
  //--- ------------------------------------------------------------------------------------>
  
  
  //SHUFFLE CARDS ------------------------------------------------------------------------------------>
        function shuffle(array){
                let currentIndex = array.length, randomIndex;
            
                    while(currentIndex != 0){
                        randomIndex = Math.floor(Math.random() * currentIndex);
                        currentIndex--;
                
                        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
                    }
                    return array;
                     
        };
            shuffle(cardObj);
  //--- ------------------------------------------------------------------------------------>
  
  
  //DRAW ------------------------------------------------------------------------------------>
  function drawCard(id){
  if(cardObj.length === 0){
  return;
  }
  
  
  
  let castCard = document.getElementById(id);
  
  
  let card = document.createElement('img');
  card.setAttribute('src', cardObj[0].imgUrl);
  card.setAttribute('height', '272');
  card.setAttribute('width', '185');
  card.innerHTML = cardObj[0].imgUrl;
  
  
  
  if(castCard.id === 'imgPast'){
  document.getElementById("btnPast").replaceChild(card, castCard);
  }else if(castCard.id === 'imgPresent'){
  document.getElementById("btnPresent").replaceChild(card, castCard);
  }else if(castCard.id === 'imgFuture'){
  document.getElementById("btnFuture").replaceChild(card, castCard);
  }
  
  if(cardObj[0].name === cardObj[0].name){
                    cardObj = cardObj.filter(function(f) {return f !== cardObj.name   "_R"});
       
                }
  
  cardObj.shift();
  
  return false;
  }
  //--- ----------------------------------------------------------------------------------</script></body></html>

CodePudding user response：

I am quite confused about your question here but I'll assume what you want is to remove the "opposite" element of the array depending on the card that's drawn.

let cardObj = [
  {name: "0_Fool", imgUrl: "data/0_Fool.jpg"},
  {name: "0_Fool_R", imgUrl: "data/0_Fool_R.jpg"}, 
  {name: "1_Magician", imgUrl: "data/1_Magician.jpg"}, 
  {name: "1_Magician_R", imgUrl: "data/1_Magician_R.jpg"}, 
];
function drawCard(id){
  if(cardObj.length === 0) return;

  // assuming that all 'reverse' cards end with '_R' and that 'id' is the 'name'
  const isReverse = id.endsWith('_R');

  // construct opposite card ID
  const oppositeCardID = isReverse ? id.substring(0, id.lastIndexOf('_')) : (id   '_R');

  // Find opposite card index in the array
  const oppositeCardIndex = cardObj.findIndex(card => card.name == oppositeCardID);

  if (oppositeCardIndex < 0) return; // opposite card not found

  // Remove opposite card from deck
  cardObj.splice(oppositeCardIndex, 1);
}

console.log("Cards before drawing:", JSON.stringify(cardObj));
console.log("Drawing card 1_Magician");
drawCard("1_Magician");
console.log("Cards after drawing:", JSON.stringify(cardObj));