<link rel="stylesheet" href="/table-battles/cards.css">
<style>
.card { box-shadow: var(--drop-shadow); background-size: 240px 336px; }
.card.exp0 { background-image: url(/table-battles/info/base-cover.jpg); }
.card.exp1 { background-image: url(/table-battles/info/wotr-cover.jpg); }
.card.exp2 { background-image: url(/table-battles/info/aoa-cover.jpg); }
.card.exp3 { background-image: url(/table-battles/info/getty-cover.jpg); }
.card.exp4 { background-image: url(/table-battles/info/ecw-cover.jpg); }
.card.exp5 { background-image: url(/table-battles/info/tga-cover.jpg); }
.card.exp6 { background-image: url(/table-battles/info/cal-cover.jpg); }
</style>
<div style="display:none">
<div class="card exp0" data-scenario="Random"></div>
<div class="card exp0" data-scenario="Random - Base Game"></div>
<div class="card exp1" data-scenario="Random - Wars of the Roses"></div>
<div class="card exp2" data-scenario="Random - Age of Alexander"></div>
<div class="card exp3" data-scenario="Random - Gettysburg"></div>
<div class="card exp4" data-scenario="Random - English Civil War"></div>
<div class="card exp5" data-scenario="Random - The Grand Alliance"></div>
<div class="card exp6" data-scenario="Random - Charles Alexander of Lorraine"></div>
</div>
<div id="preview">
<div class="card exp0"></div>
</div>
<script>

var select = document.querySelector("select[name='scenario']")
var preview = document.getElementById("preview")
var list = null

window.onload = async function () {
	fetch("/table-battles/info/scenarios.html")
		.then(r => r.text())
		.then(html => {
			list = (new DOMParser()).parseFromString(html, "text/html")
			select.onchange()
		})
}

select.onchange = function (evt) {
	if (list) {
		let node = list.getElementById("scenario_" + parseInt(select.value))
		if (!node)
			node = document.querySelector(`[data-scenario='${select.value}']`)
		if (node)
			preview.replaceChildren(node.cloneNode(true))
		else
			preview.replaceChildren()
	}
}

</script>