JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="cards">
</div>
<div class="score">
  <p class="combat">
    0
  </p>
  <p class="trade">
    0
  </p>
  <p class="authority">
    0
  </p>
</div>

CSS

.card,
.score {
  border: 1px solid black;
  margin: 1rem;
  text-align: center;
  width: 50%;
}

.card:hover {
  background: lightgray;
  cursor: pointer;
}

.score {background: black; font-size: 2em; font-weight: bold;}
.combat {color: red;}
.trade {color: yellow;}
.authority {color: green;}

JavaScript

var data = [{
    "set": "Core Set",
    "qty": 1,
    "name": "Flagship",
    "main": {
      "gain_combat": 5,
      "draw_card": 5
    },
    "ally": {
      "gain_authority": 5
    },
    "scrap": "",
    "type": "Ship",
    "faction": "Trade Federation",
    "cost": 6,
    "defense": 0,
    "outpost": 0,
    "role": "Trade Deck",
    "or": 0
  },
  {
    "set": "Core Set",
    "qty": 3,
    "name": "Federation Shuttle",
    "main": {
      "gain_trade": 2
    },
    "ally": {
      "gain_authority": 4
    },
    "scrap": "",
    "type": "Ship",
    "faction": "Trade Federation",
    "cost": 1,
    "defense": 0,
    "outpost": 0,
    "role": "Trade Deck",
    "or": 0
  },
  {
    "set": "Core Set",
    "qty": 3,
    "name": "Cutter",
    "main": {
      "gain_authority": 4,
      "gain_trade": 2
    },
    "ally": {
      "gain_combat": 4
    },
    "scrap": "",
    "type": "Ship",
    "faction": "Trade Federation",
    "cost": 2,
    "defense": 0,
    "outpost": 0,
    "role": "Trade Deck",
    "or": 0
  },
  {
    "set": "Core Set",
    "qty": 1,
    "name": "Trade Escort",
    "main": {
      "gain_authority": 4,
      "gain_combat": 4
    },
    "ally": {
      "draw_card": 1
    },
    "scrap": "",
    "type": "Ship",
    "faction": "Trade Federation",
    "cost": 5,
    "defense": 0,
    "outpost": 0,
    "role": "Trade Deck",
    "or": 0
  },
  {
    "set": "Core Set",
    "qty": 1,
    "name": "Command Ship",
    "main": {
      "gain_authority": 4,
      "gain_combat": 5,
      "draw_card": 2
    },
    "ally": "destroy_target_base",
    "scrap": "",
    "type": "Ship",
    "faction": "Trade Federation",
    "cost": 8,
    "defense": 0,
    "outpost": 0,
    "role": "Trade Deck",
    "or": 0
  },
  {
    "set": "Core Set",
    "qty": 2,
    "name": "Embassy Yacht",
    "main": {
      "gain_authority": 3,
      "gain_trade": 2,
      "special_if(active_base>=2)draw_card_value_2": null
    },
    "ally": "",
    "scrap": "",
    "type": "Ship",
   ...