{% extends "casino/game_screen.html" %} {% block result %} N/A {% endblock %}

{% block script %}
<script nonce="{{g.nonce}}">
	if (
		document.readyState === "complete" ||
		(document.readyState !== "loading" && !document.documentElement.doScroll)
	) {
		initializeGame();
	} else {
		document.addEventListener("DOMContentLoaded", initializeGame);
	}

	// Kiss my ass if you're judgin'
	const CELL_TO_NUMBER_LOOKUP = {
		1: 3,
		2: 6,
		3: 9,
		4: 12,
		5: 15,
		6: 18,
		7: 21,
		8: 24,
		9: 27,
		10: 30,
		11: 33,
		12: 36,
		13: 2,
		14: 5,
		15: 8,
		16: 11,
		17: 14,
		18: 17,
		19: 20,
		20: 23,
		21: 26,
		22: 29,
		23: 32,
		24: 35,
		25: 1,
		26: 4,
		27: 7,
		28: 10,
		29: 13,
		30: 16,
		31: 19,
		32: 22,
		33: 25,
		34: 28,
		35: 31,
		36: 34
	};

	function initializeGame() {
		buildRouletteTable();
		updateResult("Rolls occur every five minutes", "success");
		requestRouletteBets();
	}

	function buildRouletteTable() {
		const table = document.getElementById('roulette-table');
		const reds = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];

		let html = "";

		// Lines
		html += `
			<div class="roulette-table-row">
				<div style="flex: 1"></div>
				<div id="LINE_BET#1" onclick="placeChip('LINE_BET', '1')" class="roulette-table-1to1">Line 1</div>
				<div id="LINE_BET#2" onclick="placeChip('LINE_BET', '2')" class="roulette-table-1to1">Line 2</div>
				<div id="LINE_BET#3" onclick="placeChip('LINE_BET', '3')" class="roulette-table-1to1">Line 3</div>
				<div id="LINE_BET#4" onclick="placeChip('LINE_BET', '4')" class="roulette-table-1to1">Line 4</div>
				<div id="LINE_BET#5" onclick="placeChip('LINE_BET', '5')" class="roulette-table-1to1">Line 5</div>
				<div id="LINE_BET#6" onclick="placeChip('LINE_BET', '6')" class="roulette-table-1to1">Line 6</div>
				<div style="flex: 1"></div>
			</div>
		`;

		// First Column
		html += "<div class=\"roulette-table-row\">";
		html += `<div id="STRAIGHT_UP_BET#37" onclick="placeChip('STRAIGHT_UP_BET', '37')" class="roulette-table-number roulette-table-number__green">00</div>`
		for (let i = 1; i < 13; i++) {
			const correctNumber = CELL_TO_NUMBER_LOOKUP[i];
			const isRed = reds.includes(correctNumber);

			html += `<div
				id="STRAIGHT_UP_BET#${correctNumber}"
				onclick="placeChip('STRAIGHT_UP_BET', '${correctNumber}')"
				class="roulette-table-number roulette-table-number__${isRed ? 'red' : 'black'}">
				${correctNumber}
			</div>
			`;
		}
		html += `<div id="COLUMN_BET#3" class="roulette-table-column" onclick="placeChip('COLUMN_BET', '3')">Col 3</div>`;
		html += "</div>";

		// Second Column
		html += "<div class=\"roulette-table-row\">";
		html += `<div id="roulette-spacer-left-middle" class="roulette-table-number roulette-table-number__green"></div>`
		for (let i = 13; i < 25; i++) {
			const correctNumber = CELL_TO_NUMBER_LOOKUP[i];
			const isRed = reds.includes(correctNumber);

			html += `<div
				id="STRAIGHT_UP_BET#${correctNumber}"
				onclick="placeChip('STRAIGHT_UP_BET', '${correctNumber}')"
				class="roulette-table-number roulette-table-number__${isRed ? 'red' : 'black'}">
				${correctNumber}
			</div>
			`;
		}
		html += `<div id="COLUMN_BET#2" class="roulette-table-column" onclick="placeChip('COLUMN_BET', '2')">Col 2</div>`;
		html += "</div>";

		// Third Column
		html += "<div class=\"roulette-table-row\">";
		html += `<div id="STRAIGHT_UP_BET#0" onclick="placeChip('STRAIGHT_UP_BET', '0')" class="roulette-table-number roulette-table-number__green">0</div>`
		for (let i = 25; i < 37; i++) {
			const correctNumber = CELL_TO_NUMBER_LOOKUP[i];
			const isRed = reds.includes(correctNumber);
			
			html += `<div
				id="STRAIGHT_UP_BET#${correctNumber}"
				onclick="placeChip('STRAIGHT_UP_BET', '${correctNumber}')"
				class="roulette-table-number roulette-table-number__${isRed ? 'red' : 'black'}">
				${correctNumber}
			</div>
			`;
		}
		html += `<div id="COLUMN_BET#1" class="roulette-table-column" onclick="placeChip('COLUMN_BET', '1')">Col 1</div>`;
		html += "</div>";

		// Line Bets and 1:1 Bets
		html += `
			<div class="roulette-table-row">
				<div style="flex: 1"></div>
				<div id="DOZEN_BET#1" class="roulette-table-line" onclick="placeChip('DOZEN_BET', '1')">1st12</div>
				<div id="DOZEN_BET#2" class="roulette-table-line" onclick="placeChip('DOZEN_BET', '2')">2nd12</div>
				<div id="DOZEN_BET#3" class="roulette-table-line" onclick="placeChip('DOZEN_BET', '3')">3rd12</div>
				<div style="flex: 1"></div>
				</div>
				<div class="roulette-table-row">
					<div style="flex: 1"></div>
					<div id="HIGH_LOW_BET#LOW" class="roulette-table-1to1" onclick="placeChip('HIGH_LOW_BET', 'LOW')">1:18</div>
					<div id="EVEN_ODD_BET#EVEN" class="roulette-table-1to1" onclick="placeChip('EVEN_ODD_BET', 'EVEN')">EVEN</div>
					<div id="RED_BLACK_BET#RED" class="roulette-table-1to1" onclick="placeChip('RED_BLACK_BET', 'RED')" style="background-color: red">RED</div>
					<div id="RED_BLACK_BET#BLACK" class="roulette-table-1to1" onclick="placeChip('RED_BLACK_BET', 'BLACK')" style="background-color: black">BLACK</div>
					<div id="EVEN_ODD_BET#ODD" class="roulette-table-1to1" onclick="placeChip('EVEN_ODD_BET', 'ODD')">ODD</div>
					<div id="HIGH_LOW_BET#HIGH" class="roulette-table-1to1" onclick="placeChip('HIGH_LOW_BET', 'HIGH')">19:36</div>
					<div style="flex: 1"></div>
			</div>
		`;

		table.innerHTML = html;
	}

	function formatFlatBets(bets) {
		let flatBets = [];

		for (const betCollection of Object.values(bets)) {
			flatBets = flatBets.concat(betCollection)
		}

		return flatBets;
	}

	function formatNormalizedBets(bets) {
		const normalizedBets = {
			gamblers: [],
			gamblersByName: {}
		};
		const flatBets = formatFlatBets(bets);

		for (const bet of flatBets) {
			if (!normalizedBets.gamblers.includes(bet.gambler_username)) {
				normalizedBets.gamblers.push(bet.gambler_username);
			}

			if (!normalizedBets.gamblersByName[bet.gambler_username]) {
				normalizedBets.gamblersByName[bet.gambler_username] = {
					name: bet.gambler_username,
					avatar: bet.gambler_profile_url,
					profile: `/@${bet.gambler_username}`,
					wagerTotal: {
						coins: 0,
						marseybux: 0
					},
					wagers: []
				}
			}

			const entry = normalizedBets.gamblersByName[bet.gambler_username];

			entry.wagerTotal[bet.wager.currency] += bet.wager.amount;

			const existingWager = entry.wagers.find(wager => wager.bet === bet.bet && wager.which === bet.which);

			if (existingWager) {
				existingWager.amounts[bet.wager.currency] += bet.wager.amount;
			} else {
				const newEntry = {
					bet: bet.bet,
					which: bet.which,
					amounts: {
						coins: 0,
						marseybux: 0
					},
				};
				newEntry.amounts[bet.wager.currency] += bet.wager.amount;

				entry.wagers.push(newEntry);
			}
		}

		return normalizedBets;
	}

	function buildPokerChip(avatar) {
		return `
			<div class="roulette-poker-chip">
				<img src="/i/pokerchip.webp" width="40" height="40">
				<img src="${avatar}" width="40" height="40">
			</div>
		`;
	}

	function buildRouletteBets(bets) {
		const betArea = document.getElementById("roulette-bets");
		const flatBets = formatFlatBets(bets);
		const normalizedBets = formatNormalizedBets(bets);
		const coinImgHtml = `
			<img
				src="/i/rDrama/coins.webp?v=3009"
				alt="coin"
				width="32"
				data-bs-toggle="tooltip"
				data-bs-placement="bottom"
				title=""
				aria-label="Coin"
				data-bs-original-title="Coin">
		`;
		const marseybuxImgHtml = `
			<img
				src="/i/marseybux.webp?v=2000"
				alt="marseybux"
				data-bs-toggle="tooltip"
				data-bs-placement="bottom"
				title=""
				aria-label="Marseybux"
				width="32" class="mr-1 ml-1" 
				data-bs-original-title="Marseybux">
		`;
		const { participants, coin, marseybux } = flatBets.reduce((prev, next) => {
			if (!prev.participants.includes(next.gambler_username)) {
				prev.participants.push(next.gambler_username);
			}

			if (next.wager.currency == 'coins') {
				prev.coin += next.wager.amount;
			} else {
				prev.marseybux += next.wager.amount;
			}

			return prev;
		}, { participants: [], coin: 0, marseybux: 0 });
		const coinText = `${coin} ${coinImgHtml}`;
		const marseybuxText = `${marseybux} ${marseybuxImgHtml}`;
		const playerText = participants.length > 1 ? `${participants.length} players are` : `1 player is`;
		const totalText = coin && marseybux ? `${coinText} and ${marseybuxText}` : coin ? coinText : marseybuxText;
		const fullTotalText = participants.length === 0 ? "No one has placed a bet" : `${playerText} betting a total of ${totalText}`;

		let betHtml = `
			<small class="roulette-total-bets">${fullTotalText}</small>
			<hr>
		`;

		for (player of normalizedBets.gamblers) {
			const { name, avatar, wagerTotal, wagers } = normalizedBets.gamblersByName[player];

			betHtml += `<div class="roulette-bet-summary">`;
			// Heading
			betHtml += `  <div class="roulette-bet-summary--heading">`;
			betHtml += buildPokerChip(avatar);
			const coinText = wagerTotal.coins > 0 ? `${wagerTotal.coins} ${coinImgHtml}` : "";
			const procoinText = wagerTotal.marseybux > 0 ? `${wagerTotal.marseybux} ${marseybuxImgHtml}` : "";
			const bettingText = coinText && procoinText ? `${coinText} and ${procoinText}` : coinText || procoinText;
			betHtml += `<p>${name} is betting ${bettingText}:</p>`;
			betHtml += ` </div>`;

			// Individual bets
			betHtml += `<ul class="roulette-bet-summary--list">`;
			for (const individualBet of wagers) {
				const coinText = individualBet.amounts.coins > 0 ? `${individualBet.amounts.coins} ${coinImgHtml}` : "";
				const procoinText = individualBet.amounts.marseybux > 0 ? `${individualBet.amounts.marseybux} ${marseybuxImgHtml}` : "";
				const straightUpWhich = (individualBet.which == 37) ? "00" : individualBet.which;
				const details = {
					STRAIGHT_UP_BET: `that the number will be ${straightUpWhich}`,
					LINE_BET: `that the number will be within line ${individualBet.which}`,
					COLUMN_BET: `that the number will be within column ${individualBet.which}`,
					DOZEN_BET: `that the number will be within dozen ${individualBet.which}`,
					EVEN_ODD_BET: `that the number will be ${individualBet.which.toLowerCase()}`,
					RED_BLACK_BET: `that the color of the number will be ${individualBet.which.toLowerCase()}`,
					HIGH_LOW_BET: `that the number will be ${individualBet.which === "HIGH" ? "higher than 18" : "lower than 19"}`
				}
				const betText = coinText && procoinText ? `${coinText} and ${procoinText}` : coinText || procoinText;

				betHtml += `<li>${betText} ${details[individualBet.bet]}</li>`;
			}
			betHtml += `</ul>`;
			betHtml += `</div>`;
		}

		betArea.innerHTML = betHtml;
	}

	function placeChip(bet, which) {
		const { amount, currency: safeCurrency, localCurrency: currency } = getWager();
		const whichNice = which == 37 ? "00" : which;
		const texts = {
			STRAIGHT_UP_BET: `Bet ${amount} ${currency} on ${whichNice}?\nYou could win ${amount * 35} ${currency}.`,
			LINE_BET: `Bet ${amount} ${currency} on line ${which}?\nYou could win ${amount * 5} ${currency}.`,
			COLUMN_BET: `Bet ${amount} ${currency} column ${which}?\nYou could win ${amount * 2} ${currency}.`,
			DOZEN_BET: `Bet ${amount} ${currency} dozen ${which}?\nYou could win ${amount * 2} ${currency}.`,
			EVEN_ODD_BET: `Bet ${amount} ${currency} that the number will be ${which.toLowerCase()}?\nYou could win ${amount} ${currency}.`,
			RED_BLACK_BET: `Bet ${amount} ${currency} that the number will be ${which.toLowerCase()}?\nYou could win ${amount} ${currency}.`,
			HIGH_LOW_BET: `Bet ${amount} ${currency} that the number will be ${which === "HIGH" ? "higher than 18" : "lower than 19"}?\nYou could win ${amount} ${currency}.`,
		}
		const text = texts[bet] || "";
		const confirmed = window.confirm(text);

		if (confirmed) {
			const xhr = new XMLHttpRequest();
			xhr.open("post", "/casino/roulette/place-bet");
			xhr.setRequestHeader('xhr', 'xhr');
			xhr.onload = handleRouletteResponse.bind(null, xhr);

			const form = new FormData();
			form.append("formkey", formkey());
			form.append("bet", bet);
			form.append("which", which);
			form.append("wager", amount);
			form.append("currency", safeCurrency);

			xhr.send(form);
		}
	}

	function addChipsToTable(bets) {
		const flatBets = formatFlatBets(bets);

		for (const bet of flatBets) {
			const tableElement = document.getElementById(`${bet.bet}#${bet.which}`);
			tableElement.style.position = 'relative';
			const count = tableElement.dataset.count ? parseInt(tableElement.dataset.count) + 1 : 1;
			tableElement.dataset.count = count;

			const chip = buildPokerChip(bet.gambler_profile_url)
			tableElement.innerHTML = `${tableElement.innerHTML}<div style="position: absolute; bottom: ${count + 2}px; left: -${count + 2}px; transform: scale(0.5);">${chip}</div>`;
		}
	}

	function requestRouletteBets() {
		const xhr = new XMLHttpRequest();
		xhr.open("get", "/casino/roulette/bets");
		xhr.setRequestHeader('xhr', 'xhr');
		xhr.onload = handleRouletteResponse.bind(null, xhr);
		xhr.send();
	}

	function handleRouletteResponse(xhr) {
		let response;

		try {
			response = JSON.parse(xhr.response);
		} catch (error) {
			console.error(error);
		}

		const succeeded =
			xhr.status >= 200 && xhr.status < 300 && response && !response.error;

		if (succeeded) {
			buildRouletteBets(response.bets);
			addChipsToTable(response.bets);
			updatePlayerCurrencies(response.gambler);
			updateResult("Rolls occur every five minutes", "success");
		} else {
			updateResult("Unable to place that bet.", "danger");
		}
	}
</script>
{% endblock %}

{% block screen %}
<style nonce="{{g.nonce}}">
	.roulette-table-number {
		flex: 1;
		height: 60px;
		border: 1px solid white;
		background: green;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: bolder;
	}

	.roulette-table-number__black {
		background: black;
	}

	.roulette-table-number__red {
		background: red;
	}

	.roulette-table-number__green {
		background: green;
	}

	.roulette-table-row {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.roulette-table-column {
		flex: 1;
		height: 60px;
		border: 1px solid white;
		background: green;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: bolder;
		writing-mode: vertical-rl;
		text-orientation: sideways;
	}

	.roulette-table-line,
	.roulette-table-1to1 {
		border: 1px solid white;
		background: green;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: bolder;
	}

	.roulette-table-line {
		flex: 4;
	}

	.roulette-table-1to1 {
		flex: 2;
	}

	.roulette-poker-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}

	.roulette-bet-summary--heading {
		display: flex;
		align-items: center;
	}

	.roulette-bet-summary--heading p {
		margin: 0;
		margin-left: 1rem;
		font-weight: bolder;
	}

	.roulette-bet-summary--list {
		list-style-type: none;
	}

	.roulette-poker-chip img:last-child {
		position: absolute;
		border-radius: 50%;
	}

	.roulette-total-bets {
		text-transform: uppercase;
		letter-spacing: 2px;
		text-align: right;
	}
</style>

<div id="roulette-table">
</div>
{% endblock %}

{% block actiontext %}
Bets
{% endblock %}

{% block actions %}
<div id="roulette-bets">
	<div class="roulette-bet-summary">
		<div class="roulette-bet-summary--heading">
			<div class="roulette-poker-chip">
				<img src="/i/pokerchip.webp" width="40" height="40">
				<img src="/e/marseycodecellove.webp" width="40" height="40">
			</div>
			<p>111 is betting 4 and 4:
			</p>
		</div>
		<ul class="roulette-bet-summary--list">
			<li>2 <img src="/i/rDrama/coins.webp?v=3009" alt="coin" width="32" data-bs-toggle="tooltip"
					data-bs-placement="bottom" title="" aria-label="Coin" data-bs-original-title="Coin"> that
				the number will be black.</li>
			<li>2 <img src="/i/rDrama/coins.webp?v=3009" alt="coin" width="32" data-bs-toggle="tooltip"
					data-bs-placement="bottom" title="" aria-label="Coin" data-bs-original-title="Coin"> that
				the number will be even.</li>
		</ul>
	</div>
</div>

<div class="game_screen-title">
	<h5>How to Bet</h5>
	<hr>
</div>
<table class="table">
	<thead>
		<tr>
			<th>Bet</th>
			<th>Payout</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Straight Up</td>
			<td>35:1</td>
			<td>
				Click any single number. <br>
				You win if the roulette lands on that number.
			</td>
		</tr>
		<tr>
			<td>Line</td>
			<td>5:1</td>
			<td>
				Click Line 1, Line 2 ... Line 6. <br>
				You win if the roulette lands on any of the six numbers beneath the line.
			</td>
		</tr>
		<tr>
			<td>Column</td>
			<td>2:1</td>
			<td>
				Click Col 1, Col 2 or Col 3. <br>
				You win if the roulette lands on any of the 12 numbers to the left of the column.
			</td>
		</tr>
		<tr>
			<td>Dozen</td>
			<td>2:1</td>
			<td>
				Click 1st12, 2nd12 or 3rd12. <br>
				You win if the roulette lands on a number within 1-12, 13-24 or 25-36, respectively.
			</td>
		</tr>
		<tr>
			<td>Even/Odd</td>
			<td>1:1</td>
			<td>
				Click EVEN or ODD. <br>
				You win if the roulette lands on a number that matches your choice.
			</td>
		</tr>
		<tr>
			<td>Red/Black</td>
			<td>1:1</td>
			<td>
				Click RED or BLACK. <br>
				You win if the roulette lands on a number that is the same color as your choice.
			</td>
		</tr>
		<tr>
			<td>High/Low</td>
			<td>1:1</td>
			<td>
				Click 1:18 or 19:36. <br>
				You win if the roulette lands on a number within your selected range.
			</td>
		</tr>
	</tbody>
</table>
{% endblock %}