jeux/The Crew/generateur_quetes.html
Adrian Amaglio 0fbe2d0dc1 init
2022-12-16 13:44:18 +01:00

102 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.enabled {
color: green;
}
.disabled {
color: red;
}
</style>
</head>
<body>
<h1>The crew — Générateur de quêtes</h1>
<p>Entrez ici les options à activer et cliquez sur <button onclick="generate()">Générer</button></p>
<div>
<button onclick="toggle('b1')" class="disabled" id="b1" >1</button>
<button onclick="toggle('b2')" class="disabled" id="b2" >2</button>
<button onclick="toggle('b3')" class="disabled" id="b3" >3</button>
<button onclick="toggle('b4')" class="disabled" id="b4" >4</button>
<button onclick="toggle('b5')" class="disabled" id="b5" >5</button>
<button onclick="toggle('bΩ')" class="disabled" id="bΩ" >Ω</button>
<button onclick="toggle('b<')" class="disabled" id="b<" >&lt;</button>
<button onclick="toggle('b<<')" class="disabled" id="b<<" >&lt;&lt;</button>
<button onclick="toggle('b<<<')" class="disabled" id="b<<<" >&lt;&lt;&lt;</button>
<button onclick="toggle('b<<<<')" class="disabled" id="b<<<<" >&lt;&lt;&lt;&lt;</button>
<label for="nombre">Nombre de joueurs</label>
<input name="nombre" id="nombre" type="number" min="1" max="100" step="1" value="3" />
</div>
<div id="displayzone">
</div>
<script>
DISABLED = 'disabled'
ENABLED = 'enabled'
CARDS = ['1trèfle', '1pique', '1cœur', '1carreau', '2trèfle', '2pique', '2cœur', '2carreau', '3trèfle', '3pique', '3cœur', '3carreau', '4trèfle', '4pique', '4cœur', '4carreau', '5trèfle', '5pique', '5cœur', '5carreau', '6trèfle', '6pique', '6cœur', '6carreau', '7trèfle', '7pique', '7cœur', '7carreau', '8trèfle', '8pique', '8cœur', '8carreau', '9trèfle', '9pique', '9cœur', '9carreau']
TOKENS = ['1', '2', '3', '4', '5', 'Ω', '<', '<<', '<<<', '<<<<']
function toggle (id) {
const e = document.getElementById(id)
if (e.classList.contains(DISABLED)) {
e.classList.remove(DISABLED)
e.classList.add(ENABLED)
} else {
e.classList.remove(ENABLED)
e.classList.add(DISABLED)
}
}
function generate () {
const nombre = document.getElementById('nombre').value
choice = []
while (choice.length < nombre) {
pick = CARDS[Math.floor(Math.random() * CARDS.length)];
if (pick in choice) {
continue
} else {
choice.push(pick)
}
}
tokens = []
for (i=0; i<TOKENS.length; i++) {
e = document.getElementById('b'+TOKENS[i])
if (e.classList.contains(ENABLED)) {
console.log(e.classList.contains(ENABLED))
tokens.push(TOKENS[i])
}
}
display (choice, tokens)
}
function display (choice, tokens) {
displayzone = document.getElementById('displayzone')
table = document.getElementById('table')
console.log(table)
if (table) {
displayzone.removeChild(table)
}
table = document.createElement('table')
table.id = "table"
displayzone.appendChild(table)
for (i = 0; i < choice.length; i++) {
tr = document.createElement('tr')
table.appendChild(tr)
td = document.createElement('td')
tr.appendChild(td)
td.innerText = choice[i]
if (i < tokens.length) {
td = document.createElement('td')
tr.appendChild(td)
td.innerText = tokens[i]
}
}
}
</script>
</body>
</html>