135 lines
3.9 KiB
Django/Jinja
135 lines
3.9 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{% if not done and player in played %}
|
|
<meta http-equiv="refresh" content="3" />
|
|
{% endif %}
|
|
<style>
|
|
td {
|
|
background: #444444;
|
|
padding: 7pt;
|
|
}
|
|
.attempt {
|
|
font-size: 14pt;
|
|
}
|
|
.response {
|
|
font-size: 7pt;
|
|
}
|
|
.other {
|
|
opacity: 0.7;
|
|
}
|
|
.clickselect {
|
|
text-shadow: 0 0 5pt #4030ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
{% macro attempt(a) %}
|
|
<div class="attempt">
|
|
{% for i in range(4) %}
|
|
<span style="color: {{ a[i].value.html }};">⬤</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro response(r, other) %}
|
|
<div class="response {% if other %}other{% endif %}">
|
|
{% for i in range(4) %}
|
|
<span style="color: {{ r[i].value.html }};">⬤</span>
|
|
{#{% if i == 1 %}<br>{% endif %}#}
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<table border="0">
|
|
{% if done %}
|
|
<tr>
|
|
<td>{{ attempt(solution) }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>Turn</th>
|
|
<th>Your guess</th>
|
|
<th>{{ players[player].name }}</th>
|
|
{% for p in players.values() %}
|
|
{% if p.uuid == player %}{% continue %}{% endif %}
|
|
<th>{{ p.name }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
{% for i in range(turn) %}
|
|
<tr>
|
|
<td>{{ i+1 }}</td>
|
|
<td>{% if attempts | length >= i+1 %}{{ attempt(attempts[i]) }}{% endif %}</td>
|
|
<td>{% if responses[player] | length >= i+1 %}{{ response(responses[player][i], false) }}{% endif %}</td>
|
|
{% for p in players.values() %}
|
|
{% if p.uuid == player %}{% continue %}{% endif %}
|
|
<td>{% if responses[p.uuid] | length >= i+1 %}{{ response(responses[p.uuid][i], true) }}{% endif %}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
{% if done %}
|
|
{% if winners | length == 0 %}
|
|
Nobody won
|
|
{% else %}
|
|
{{ winners | join(', ') }} won!
|
|
{% endif %}
|
|
Game Over! <a href="{{ baseurl }}/{{ player }}">Return to lobby</a>
|
|
{% elif player not in played %}
|
|
<form name="controls" method="POST">
|
|
{% for i in range(4) %}
|
|
<label ondragover="allowDrop(event)" ondrop="drop(event)" for="mastermind-controls-attempt{{ i+1 }}">⬤</label>
|
|
<select name="attempt{{ i+1 }}" id="mastermind-controls-attempt{{ i+1 }}">
|
|
{% for c in colors %}
|
|
<option name="{{ c.name }}">{{ c.value.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% endfor %}
|
|
<input type="submit" value="Submit" name="action" />
|
|
</form>
|
|
<div id="colorlist">
|
|
{% for c in colors %}
|
|
<span draggable="true" clickable="true" onclick="click(event, '{{ c.value.name }}', '{{ c.value.html }}')" ondragstart="drag(event, '{{ c.value.name }}', '{{ c.value.html }}')" style="color: {{ c.value.html }};">⬤</span>
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
let labels = document.getElementsByTagName('label');
|
|
for (let select of document.getElementsByTagName('select')) {
|
|
select.style.display = 'none';
|
|
}
|
|
labels[0].classList.add('clickselect');
|
|
i = 0;
|
|
|
|
function allowDrop(e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
function drag(e, name, color) {
|
|
e.dataTransfer.setData('name', name);
|
|
e.dataTransfer.setData('color', color);
|
|
}
|
|
|
|
function drop(e) {
|
|
e.preventDefault();
|
|
console.log(e.dataTransfer.getData('color'));
|
|
console.log(e.dataTransfer.getData('name'));
|
|
e.target.style.color = e.dataTransfer.getData('color');
|
|
document.getElementById(e.target.getAttribute('for')).value = e.dataTransfer.getData('name');
|
|
console.log(e.target);
|
|
}
|
|
|
|
function click(e, name, color) {
|
|
labels[i].style.color = color;
|
|
document.getElementById(labels[i].getAttribute('for')).value = name;
|
|
labels[i].classList.remove('clickselect');
|
|
i = (i+1) % 4;
|
|
labels[i].classList.add('clickselect');
|
|
}
|
|
</script>
|
|
{% else %}
|
|
Please wait for the other players to finish their turn!
|
|
{% endif %}
|
|
</body>
|
|
</html>
|