MarseyWorld/files/templates/lottery.html

<div>
	<div class="lottery-page--wrapper">
	<div class="lottery-page--image">
		<img src="/i/{{SITE_NAME}}/lottery.webp?v=2000" />
		<img
		id="lotteryTicketPulled"
		src="/i/{{SITE_NAME}}/lottery_active.webp?v=2000"
		style="display: none"
		/>
	</div>
	<div class="lottery-page--stats">
		{% if v.admin_level > 2 %}
		<div
		class="lottery-page--stat"
		style="position: relative; padding-top: 1rem; overflow: hidden"
		>
		<i
			class="fas fa-broom"
			style="
			position: absolute;
			bottom: -4px;
			right: -4px;
			font-size: 50px;
			color: var(--gray-600);
			"
		>
		</i>
		<button
			type="button"
			class="btn btn-danger"
			id="endLotterySession"
			style="display: none"
			onclick="endLotterySession()"
		>
			End Current Session
		</button>
		<button
			type="button"
			class="btn btn-success"
			id="startLotterySession"
			style="display: none"
			onclick="startLotterySession()"
		>
			Start New Session
		</button>
		</div>
		{% endif %}
		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Prize</div>
			<div>Time Left</div>
			<div>Tickets Sold</div>
			<div>Participants</div>
		</div>
		<div class="lottery-page--stat-values">
			<div>
			<img
				id="prize-image"
				alt="coins"
				class="mr-1 ml-1"
				data-bs-toggle="tooltip"
				data-bs-placement="bottom"
				height="13"
				src="{{asset_siteimg('coins.webp')}}"
				aria-label="coins"
				title="coins"
				style="display: none; position: relative; top: -2px"
			/>
			<span id="prize">-</span>
			</div>
			<div id="timeLeft">-</div>
			<div id="ticketsSoldThisSession">-</div>
			<div id="participantsThisSession">-</div>
		</div>
		</div>
		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Your Held Tickets</div>
			<div>Lifetime Held Tickets</div>
			<div>Lifetime Winnings</div>
		</div>
		<div class="lottery-page--stat-values">
			<div id="ticketsHeldCurrent">-</div>
			<div id="ticketsHeldTotal">-</div>
			<div id="winnings">-</div>
		</div>
		</div>

		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Purchase Quantity</div>
		</div>
		<div class="lottery-page--stat-values">
			<div>
			<input
				id="ticketPurchaseQuantity"
				class="form-control"
				autocomplete="off"
				value="1"
				min="1"
				step="1"
				aria-label="Quantity"
				name="ticketPurchaseQuantity"
				type="number"
				style="flex: 1; max-width: 100px; text-align: center"
			/>
			</div>
		</div>
		</div>

		<button
		type="button"
		class="btn btn-success lottery-page--action"
		id="purchaseTicket"
		onclick="purchaseLotteryTicket()"
		>
		Purchase <span id="totalQuantityOfTickets">1</span> for
		<img
			alt="coins"
			class="mr-1 ml-1"
			data-bs-toggle="tooltip"
			data-bs-placement="bottom"
			height="13"
			src="{{asset_siteimg('coins.webp')}}"
			aria-label="coins"
			title="coins"
		/>

		<span id="totalCostOfTickets">12</span>
		</button>
	</div>

	<!-- Success -->
	<div
		class="toast"
		id="lottery-post-success"
		style="
		position: fixed;
		bottom: 1.5rem;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: unset;
		z-index: 1000;
		height: auto !important;
		"
		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: unset;
		z-index: 1000;
		height: auto !important;
		"
		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 defer src="{{asset('js/lottery.js')}}"></script>
</div>