JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<script src="code.jquery.com/jquery-3.1.1.min.js"></script>
<table>
  <thead>
    <tr>
      <th>G</th>
      <th>C</th>
      <th>P</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="gc">4</td>
      <td class="cc">4</td>
      <td class="pc">4</td>
    </tr>
  </tbody>
</table>
<hr>
<table>
  <thead>
    <tr>
      <th>プレイヤー</th>
      <th>星の数</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>コンピュータ</td>
      <td class="cmp-star">3</td>
      <td class="c1"></td>
      <td class="c2"></td>
      <td class="c3"></td>
      <td class="c4"></td>
      <td class="c5"></td>
      <td class="c6"></td>
      <td class="c7"></td>
      <td class="c8"></td>
      <td class="c9"></td>
      <td class="c10"></td>
      <td class="c11"></td>
      <td class="c12"></td>
    </tr>
    <tr>
      <td>あなた</td>
      <td class="you-star">3</td>
            <td class="y1"></td>
      <td class="y2"></td>
      <td class="y3"></td>
      <td class="y4"></td>
      <td class="y5"></td>
      <td class="y6"></td>
      <td class="y7"></td>
      <td class="y8"></td>
      <td class="y9"></td>
      <td class="y10"></td>
      <td class="y11"></td>
      <td class="y12"></td>
 
    </tr>
  </tbody>
</table>
<hr>
<button class="g" data-t="g">g</button>
<button class="g" data-t="g">g</button>
<button class="g" data-t="g">g</button>
<button class="g" data-t="g">g</button>
<button class="c" data-t="c">c</button>
<button class="c" data-t="c">c</button>
<button class="c" data-t="c">c</button>
<button class="c" data-t="c">c</button>
<button class="p" data-t="p">p</button>
<button class="p" data-t="p">p</button>
<button class="p" data-t="p">p</button>
<button class="p" data-t="p">p</button>

CoffeeScript

cmp_cards = ["g", "g", "g", "g", "c", "c", "c", "c", "p", "p", "p", "p"]
you_cards = ["g", "g", "g", "g", "c", "c", "c", "c", "p", "p", "p", "p"]
num = 0
cmp_star = 3
you_star = 3
cmp_g = ->
  idx = Math.floor(Math.random()*cmp_cards.length)
  cmp_cards.splice(idx,1)[0]
check = (cmp, you)->
  if cmp == you then return "d"
  if cmp == "g" && you == "p" || cmp == "c" && you == "g" || cmp == "p" || you == "c" then return "w"
  return "l"
star = (r)->
  if r == "w" 
    cmp_star--
    you_star++
  if r == "l" 
    cmp_star++
    you_star--
  $(".cmp-star").text(cmp_star)
  $(".you-star").text(you_star)
    
$("button").on "click", ->
  num++
  cmp = cmp_g()
  $(".c#{num}").text(cmp)
  you = $(@).data("t")
  $(".y#{num}").text(you)
  $(@).hide()
  r = check(cmp, you)
  star(r)