查看“PVP比赛专用”的源代码

<html>
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
  <!-- 玩家1 -->
  <div>
    <h3 style="color:blue;">玩家1</h3>
    <div>Ban: <span id="ban1"></span></div>
    <div>Pick: <span id="pick1"></span></div>
  </div>

  <!-- 中间 -->
  <div style="text-align:center;">
    <h3>点击精灵进行 Ban / Pick</h3>
    <div id="sprite-grid" style="display: grid; grid-template-columns: repeat(4, 80px); gap: 8px;"></div>
    <button onclick="nextStep()">下一步</button>
    <div>当前步骤：<span id="step-display">Ban - 玩家1</span></div>
  </div>

  <!-- 玩家2 -->
  <div>
    <h3 style="color:red;">玩家2</h3>
    <div>Ban: <span id="ban2"></span></div>
    <div>Pick: <span id="pick2"></span></div>
  </div>
</div>

<script>
// 你的 sprites + banpick 逻辑（和你贴出的一致）...
renderGrid();
updateStepDisplay();
</script>
</html>