rDrama/files/templates/lottery_modal.html

<div
  class="modal fade"
  id="lotteryModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="lotteryModalTitle"
  aria-hidden="true"
>
  <div class="modal-dialog lottery-modal--dialog" role="document">
    <div class="modal-content lottery-modal--content">
      <button
        class="close lottery-modal--close"
        data-bs-dismiss="modal"
        aria-label="Close"
      >
        <span aria-hidden="true"><i class="far fa-times"></i></span>
      </button>
      <div class="lottery-modal--wrapper">
        <div class="lottery-modal--image">
          <img src="/assets/images/rDrama/lotterymodal.webp?v=2" />
          <img
            id="lotteryTicketPulled"
            src="/assets/images/rDrama/lotterymodalactive.gif?v=2"
            style="display: none"
          />
        </div>
        <div class="lottery-modal--stats">
          {% if v.admin_level > 2 %}
          <div class="lottery-modal--stat" style="position: relative; padding-top: 1rem;">
            <i
              class="fas fa-broom"
              style="
                position: absolute;
                top: -8px;
                right: -8px;
                font-size: 20px;
              "
            >
            </i>
            <button
              type="button"
              class="btn btn-danger"
              id="endLotterySession"
              
              onclick="endLotterySession()"
            >
              End Current Session
            </button>
            <button
              type="button"
              class="btn btn-success"
              id="startLotterySession"
              onclick="startLotterySession()"
            >
              Start New Session
            </button>
          </div>
          {% endif %}
          <div class="lottery-modal--stat">
            <div class="lottery-modal--stat-keys">
              <div>Grand Prize</div>
              <div>Session Ends</div>
              <div>Tickets Sold (Session)</div>
              <div>Tickets Sold (Total)</div>
            </div>
            <div class="lottery-modal--stat-values">
              <div>0</div>
              <div>0:00:00</div>
              <div>0</div>
              <div>0</div>
            </div>
          </div>
          <div class="lottery-modal--stat">
            <div class="lottery-modal--stat-keys">
              <div>Tickets Owned (Session)</div>
              <div>Tickets Owned (Total)</div>
              <div>Total Earnings</div>
            </div>
            <div class="lottery-modal--stat-values">
              <div>0</div>
              <div>0</div>
              <div>0</div>
            </div>
          </div>
          <button
            type="button"
            class="btn btn-success lottery-modal--action"
            id="purchaseTicket"
            onclick="purchaseLotteryTicket()"
          >
            Purchase 1 for
            <img
              alt="coins"
              class="mr-1 ml-1"
              data-bs-toggle="tooltip"
              data-bs-placement="bottom"
              height="13"
              src="/assets/images/rDrama/coins.webp?v=2"
              title=""
              aria-label="coins"
              data-bs-original-title="coins"
            />

            12
          </button>
          <script>
            const userCoinCount = {{v.coins}};
            const ticketCost = 12;

            if (userCoinCount < ticketCost) {
              const purchaseTicketButton = document.getElementById('purchaseTicket');
              purchaseTicketButton.disabled = true;
            }
          </script>
        </div>
      </div>
    </div>
  </div>

  <!-- Success -->
  <div
    class="toast"
    id="lottery-post-success"
    style="
      position: fixed;
      bottom: 1.5rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 275px;
      z-index: 1000;
    "
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-bs-animation="true"
    data-bs-autohide="true"
    data-bs-delay="5000"
  >
    <div class="toast-body bg-success text-center text-white">
      <i class="fas fa-comment-alt-smile mr-2"></i
      ><span id="lottery-post-success-text"></span>
    </div>
  </div>

  <!-- Error -->
  <div
    class="toast"
    id="lottery-post-error"
    style="
      position: fixed;
      bottom: 1.5rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 275px;
      z-index: 1000;
    "
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-bs-animation="true"
    data-bs-autohide="true"
    data-bs-delay="5000"
  >
    <div class="toast-body bg-danger text-center text-white">
      <i class="fas fa-exclamation-circle mr-2"></i
      ><span id="lottery-post-error-text"></span>
    </div>
  </div>
</div>

<script src="/assets/js/lottery_modal.js?v=249" data-cfasync="false"></script>