Reactjs - изменение элемента в рандомизированном массиве с помощью кнопки

Question

Это снова я с той же карточной игрой, что и мой последний вопрос.Я добился определенного прогресса, но на этот раз я хочу исправить код так, чтобы одна карта в рандомизированной «руке» была заменена другой случайной картой, которая не должна быть уже использованной картой.Это делается нажатием второй кнопки под кнопкой рандомизатора.В коде, который я сделал, кнопка изменения делает то же самое, что и кнопка рандомизации, но я намереваюсь ее изменить.

function replace() {
  var res = str.replace(this.state.cards, this.state.replacecards);
}
// what i intend to be the function that is used to replace the item

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: ["A♥", "A♠", "A♦", "A♣", "2♣", "3♣", "4♣", "5♣", "6♣", "7♣", "8♣", "9♣", "10♣", "K♣", "Q♣", "J♣", "2♦", "3♦", "4♦", "5♦", "6♦", "7♦", "8♦", "9♦", "10♦", "K♦", "Q♦", "J♦", "2♥", "3♥", "4♥", "5♥", "6♥", "7♥", "8♥", "9♥", "10♥", "K♥", "Q♥", "J♥", "2♠", "3♠", "4♠", "5♠", "6♠", "7♠", "8♠", "9♠", "10♠", "K♠", "Q♠", "J♠"],
      hand: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const cards = this.state.cards;

    const newHand = [];

    function in_array(array, el) {
      for (var i = 0; i < array.length; i++) if (array[i] == el) return true;
      return false;
    }

    function get_rand(array) {
      var rand = array[Math.floor(Math.random() * array.length)];

      if (!in_array(newHand, rand)) {
        newHand.push(rand);
        return rand;
      }
    }
    function sortcards(a, b) {
      return a > b ? 1 : b > a ? -1 : 0;
    }

    for (var i = 0; i < 5; i++) {
      get_rand(cards);
    }

    this.setState({
      hand: newHand
    });
    newHand.sort(sortcards);
  }

  render() {
    const { hand } = this.state;
    return (
      <div>
        {hand
          ? hand.map(card => {
              return <p>{card}</p>;
            })
          : null}
        <button onClick={this.handleClick}>Randomize</button>
        <br />
        <button onClick={this.handleClick}>Change the first card</button>
      </div>
    );
  }
}

Answer 1

Если я правильно понимаю ваш вопрос и ваш код, кнопка, которую вы собираетесь нажать, заменяет первую карту в вашей руке новой картой, которой еще нет в вашей руке.Если это так, вы можете использовать следующее для достижения этой цели:

getNewCard = () => {
  let { cards, hand } = this.state;
  let newCardIndex = Math.floor(Math.random()*cards.length);
  let newCard = cards[newCardIndex];
  while (hand.contains(newCard)) {
    cards.splice(newCardIndex, 1);
    newCardIndex = Math.floor(Math.random()*cards.length);
    newCard = cards[newCardIndex];
  }
  
  hand[0] = newCard;
  this.setState({ hand });
}

Важной частью является цикл while.Он будет продолжать получать новую случайную карту в массиве до тех пор, пока полученная нами случайная карта не окажется в нашей руке.Если случайная карта в нашей руке, мы удаляем ее из массива карт.Это сделано для того, чтобы мы случайно не получили ту же карту снова.

Answer 2

Вот что тебе нужно, бигбойопиро. Это уместно, что я могу ответить и на ваш второй вопрос:).

Вот песочница для справки: https://codesandbox.io/s/yv93w19pkz

  swapOneCard = () => {
    const currentHand = this.state.hand
    //get random card to remove from current hand
    const cardToRemove = currentHand[Math.floor(Math.random() * currentHand.length)];
    //all cards
    const allCards = this.state.cards
    //unchoosen cards to choose from
    const unchoosenCards = allCards.filter((card) => {
      return !currentHand.includes(card)
    })
    //get random card from unchoosen cards
    var cardToAdd = unchoosenCards[Math.floor(Math.random() * unchoosenCards.length)];

    const newHand = currentHand.map((card) => {
      if(card == cardToRemove){
        return cardToAdd
      } else {
        return card
      }
    })

    this.setState({
      hand: newHand
    })
  }