craps/resources/views/app/markup.blade.php

<main id="crapsComponent">
  <div class="container py-4">
    <h4 class="title">Craps <i class="fas fa-dice"></i></h4>
    <div class="row">
      <div class="col-1">
        <button class="btn btn-danger shadow" @click="resetPassGame" :disabled="!game || rolled"><h5 class="m-0"><i class="fal fa-undo"></i></h5> Reset</button>
      </div>
      <div class="col-8">
        <div class="position-relative">
          <span class="shadow coin" :class="rolled ? 'active coin-'+passPoint : ''">@{{rolled ? 'ON' : 'OFF'}}</span>
        </div>
        <div class="table-responsive position-relative">
          <table class="table table-bordered">
            <tbody>
              <tr>
                <td class="disabled" rowspan="5" width="20" valign="middle"><h6 class="m-0"><span class="rotate ms-3 d-block">Don't Pass Odds</span></h6></td>
                <td class="disabled" rowspan="5" width="20" valign="middle"><h5 class="m-0"><span class="rotate ms-4 d-block">Don't Pass Bar</span> <i class="mt-3 fas d-block fa-dice-six"></i> <i class="fas d-block fa-dice-six"></i> </h5></td>
                <td class="disabled" rowspan="4" width="40" valign="middle"><h5 class="m-0">Don't Come Bar  <i class="mt-3 fas d-block fa-dice-six"></i> <i class="fas d-block fa-dice-six"></i> </h5></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
              </tr>
              <tr>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
                <td class="fx-box disabled"></td>
              </tr>
              <tr>
                <td class="fx-box disabled">
                  <h2 class="m-0">4</h2>
                  <span class="badge bg-black" v-if="passPoint == 4">bet: @{{passChipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <h2 class="m-0">5</h2>
                  <span class="badge bg-black" v-if="passPoint == 5">bet: @{{passChipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <h2 class="m-0 tilt">SIX</h2>
                  <span class="badge bg-black" v-if="passPoint == 6">bet: @{{passChipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <h2 class="m-0">8</h2>
                  <span class="badge bg-black" v-if="passPoint == 8">bet: @{{passChipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <h2 class="m-0 tilt">NINE</h2>
                  <span class="badge bg-black" v-if="passPoint == 9">bet: @{{passChipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <h2 class="m-0">10</h2>
                  <span class="badge bg-black" v-if="passPoint == 10">bet: @{{passChipCount}}</span>
                </td>
              </tr>
              <tr>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 4">bet: @{{cm.chipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 5">bet: @{{cm.chipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 6">bet: @{{cm.chipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 8">bet: @{{cm.chipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 9">bet: @{{cm.chipCount}}</span>
                </td>
                <td class="fx-box disabled">
                  <span class="badge bg-success" v-for="cm in comePoints" v-if="cm.move == 10">bet: @{{cm.chipCount}}</span>
                </td>
              </tr>
              <tr>
                <td colspan="7" @click="onComeLine" class="come" :class="rolled || comePoints.length ? '' : 'disabled'">
                  <div class="playchips">
                    <span v-for="ch in currentComeChips" v-if="comeChipCount > 0" class="btn chip rounded-circle" :class="'btn-'+ch">@{{ch}} <span class="badge bg-black">bet: @{{comeChipCount}}</span></span>
                  </div>
                  <h2 class="m-0">COME</h2>
                </td>
              </tr>
              <tr>
                <td class="disabled" colspan="2" style="cursor: default;">
                  <div class="d-flex position-relative crn">
                    <span class="six">6</span>
                    <div class="line"></div>
                    <span class="eight">8</span>
                  </div>
                </td>
                <td class="disabled" colspan="8">
                  <div class="nums mt-4">
                    <span class="circle">2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                    <span class="circle">12</span>
                  </div>
                  <h4 class="m-0 text-center">FIELD</h4>
                </td>
              </tr>
              <tr>
                <td colspan="10" class="pass py-3" @click="onPassLine" :class="(passPoint && rolled) ? 'disabled' : ''">
                  <div class="playchips" v-if="!passPoint">
                    <span v-for="ch in passchips" v-if="passChipCount > 0" class="btn chip rounded-circle" :class="'btn-'+ch">@{{ch}} <span class="badge bg-black">bet: @{{passChipCount}}</span></span>
                  </div>
                  <h3 class="m-0">Pass Line</h3>
                </td>
              </tr>
              <tr>
                <td colspan="10" valign="middle" class="odds" @click="onOddsLine" :class="(passPoint && rolled) ? '' : 'disabled'">
                  <div class="playchips">
                    <span v-for="ch in oddschips" v-if="oddsChipCount > 0" class="btn chip rounded-circle" :class="'btn-'+ch">@{{ch}} <span class="badge bg-black">bet: @{{oddsChipCount}}</span></span>
                  </div>
                  <h6 class="m-0">Pass Odds</h6>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-3">
        <div class="alert alert-info p-1 mb-2">
          <small>@{{alert}}</small>
        </div>
        <div class="alert alert-info p-1 mb-2" v-if="comeAlert">
          <small>@{{comeAlert}}</small>
        </div>
        <div class="alert alert-info p-1 mb-2" v-if="oddsAlert">
          <small>@{{oddsAlert}}</small>
        </div>
        <div class="border border-white px-2 pb-2">
          <div class="dices-box">
            <i :class="rolledOnce ? dice1Text : 'fad fa-dice-two'"></i>
            <i :class="rolledOnce ? dice2Text : 'fad fa-dice-three'"></i>
          </div>
          <button type="button" :disabled="!game" @click="onRollDice" class="btn btn-warning rounded-0 btn-lg w-100 py-2 shadow">ROLL</button>
        </div>
        <div class="table-responsive position-relative mt-3">
          <table class="table table-bordered table-sm">
            <tbody>
              <tr>
                <td class="disabled" colspan="2">
                  <h5 class="m-0">Seven</h5>
                  <h6 class="m-0 text-warning">4 to 1</h6>
                </td>
              </tr>
              <tr>
                <td class="disabled" colspan="2">
                  <h5 class="m-0">Any Craps</h5>
                  <h6 class="m-0 text-warning">7 to 1</h6>
                </td>
              </tr>
              <tr>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-two"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-two"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">7 to 1</h6>
                </td>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-five"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-five"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">7 to 1</h6>
                </td>
              </tr>
              <tr>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-three"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-three"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">9 to 1</h6>
                </td>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-four"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-four"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">9 to 1</h6>
                </td>
              </tr>
              <tr>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-one"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-two"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">15 to 1</h6>
                </td>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-five"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-six"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">15 to 1</h6>
                </td>
              </tr>
              <tr>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-one"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-one"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">30 to 1</h6>
                </td>
                <td class="disabled">
                  <div class="d-flex align-items-center justify-content-center">
                    <h4 class="m-0 pe-2"><i class="fas fa-dice-six"></i></h4>
                    <h4 class="m-0"><i class="fas fa-dice-six"></i></h4>
                  </div>
                  <h6 class="m-0 text-warning">30 to 1</h6>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row mt-3 text-white">
      <div class="col-8 offset-1">
        <div class="chips">
          <button type="button" v-for="ch in chips" @click.prevent="selectedChip = ch" :class="selectedChip == ch ? 'active btn-'+ch : 'btn-'+ch" class="btn chip rounded-circle">@{{ch}}</button>
        </div>
        <button type="button" v-if="oddsChipCount > 0" @click="resetOddsGame" class="btn btn-danger mt-3 btn-sm">cancel odds bet</button>
      </div>
      <div class="col-3">
        <div class="d-flex align-items-start justify-content-between">
          <div>
            <h6>Max Bet: @{{max}}</h6>
            <h6>Min Bet: 1</h6>
          </div>
          <h6>Max Odds: x3</h6>
        </div>
        <div class="d-flex align-items-start justify-content-between mt-3">
          <h6>Total: @{{currencyFormat(total)}}</h6>
          <h6>Bet Placed: @{{passChipCount}}</h6>
        </div>
      </div>
    </div>
  </div>
</main>