create.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<p>
<i>
Tip: To learn the game, play the scenarios from the base
game in order. They are built to show you the ropes of the system, and to get
you used to pulling the levers, with each scenario in the base set being
progressively more complex.
</i>

<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>