The idea came from the fact that when I watched the host Doudizhu live broadcast, I often lost the game due to misjudgment because there was no card recorder, so I made this card recorder. It is estimated that no one will use 😆, as a practice, familiar with the whole development process of small procedures ha ha. Unexpectedly, it was approved the second day after submission

screenshots

It’s a simple idea just one page

1. Choose one or two decks

2. Click the corresponding card to reduce the number of corresponding cards. When the number is 0, the icon turns grey

3. It can be undone. Only the last 100 clicks are reserved for the undo operation

4. The reset operation clears all operation records

The development choice is MPVUEmpvue.com/

The cards are then arranged directly using the Grid layout

<div class="gird-container">
  <div class="gird-item" v-for="(poker, index) in pokers" :key="index">
    <card :poker="poker" :index="index" @handleHuase="handleHuase" @handleWang="handleWang">
    </card>
  </div>
</div>
Copy the code

Operation method

This.updatehistory.push (json.parse (json.stringify (this.pokers)))if (this.pokers[obj.index][obj.huase] > 0) {
    this.pokers[obj.index][obj.huase] -= 1
    this.pokers[obj.index].count -= 1
  } else {
    this.pokers[obj.index][obj.huase] = this.defaultCount
    this.pokers[obj.index].count += 1
  }
}
Copy the code
// Undo operationrollback () {
  let pokers = this.updateHistory[this.updateHistory.length - 1]
  this.pokers = pokers
  this.updateHistory.pop(this.updateHistory.length - 1)
}
Copy the code

Git address

Github.com/jinggoing/m…

Small program code