102 lines
3.1 KiB
HTML
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<" ><</button>
|
|
<button onclick="toggle('b<<')" class="disabled" id="b<<" ><<</button>
|
|
<button onclick="toggle('b<<<')" class="disabled" id="b<<<" ><<<</button>
|
|
<button onclick="toggle('b<<<<')" class="disabled" id="b<<<<" ><<<<</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>
|