diff options
Diffstat (limited to 'create.html')
| -rw-r--r-- | create.html | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/create.html b/create.html index 48c6db3..e1bb4f4 100644 --- a/create.html +++ b/create.html @@ -1,8 +1,27 @@ <link rel="stylesheet" href="/table-battles/cards.css"> <style> -.card { box-shadow: var(--drop-shadow) } +.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 id="preview"></div> +<div style="display:none"> +<div class="card exp0" data-scenario="Random"></div> +<div class="card exp0" data-scenario="Random - Table Battles"></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']") @@ -14,12 +33,15 @@ window.onload = async function () { .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 |