164 lines
3.8 KiB
Django/Jinja
164 lines
3.8 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{% if not done %}
|
|
<meta http-equiv="refresh" content="3" />
|
|
{% endif %}
|
|
<style>
|
|
body > svg {
|
|
min-width: 50%;
|
|
max-width: 100%;
|
|
max-height: 70vh;
|
|
display: block;
|
|
}
|
|
|
|
svg .highlight {
|
|
stroke: black;
|
|
stroke-width: 1px;
|
|
fill: none;
|
|
}
|
|
|
|
svg .claimable:hover {
|
|
stroke: cyan;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
svg .empty {
|
|
fill: transparent;
|
|
stroke: grey;
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
svg .plus {
|
|
fill: grey;
|
|
}
|
|
|
|
svg .defense {
|
|
fill: blue;
|
|
stroke-width: 3px;
|
|
stroke: white;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg .road {
|
|
fill: olive;
|
|
}
|
|
|
|
svg .city {
|
|
fill: brown;
|
|
}
|
|
|
|
svg .citywall {
|
|
stroke: #000000;
|
|
stroke-width: 5px;
|
|
fill: none;
|
|
}
|
|
|
|
svg .pasture {
|
|
fill: green;
|
|
}
|
|
{% for p in completed_pastures %}
|
|
svg .pasture[data-uuid="{{ p }}"] {
|
|
fill: #{{ p.__str__()[:6] }};
|
|
}
|
|
{% endfor %}
|
|
|
|
svg .monastery {
|
|
fill: #713c32;
|
|
}
|
|
|
|
svg .cathedral {
|
|
fill: #713c32;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg .inn {
|
|
fill: white;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg .shrine-clickable {
|
|
fill: green;
|
|
}
|
|
svg .shrine {
|
|
fill: #713c32;
|
|
pointer-events: none;
|
|
}
|
|
svg .shrine-overlay {
|
|
fill: #713c32;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg .river {
|
|
fill: #86b4bc;
|
|
}
|
|
|
|
svg .bridgeshadow {
|
|
fill: #00000066;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type="number"], input[value="Place Tile"], select {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{ field }}
|
|
{% if done %}
|
|
Game Over! <a href="{{ baseurl }}/{{ me.uuid }}">Return to lobby</a>
|
|
{% else %}
|
|
{% if current_player.uuid == me.uuid %}
|
|
It is your turn!
|
|
{% if phase == 'place' %}Place your tile{% else %}Claim your resource{% endif %}
|
|
<form name="controls" method="POST">
|
|
{% if phase == 'place' %}
|
|
<input type="submit" value="Rotate CCW" name="action" />
|
|
{{ card }}
|
|
<input type="submit" value="Rotate CW" name="action" />
|
|
<input type="number" value="0" name="x" />
|
|
<input type="number" value="0" name="y" />
|
|
<input type="submit" value="Place Tile" name="action" id="btn-place" />
|
|
{% endif %}
|
|
{% if phase == 'claim' %}
|
|
<select name="claim">
|
|
{{ claimable }}
|
|
</select>
|
|
<input type="submit" value="Claim" name="action" id="btn-claim" />
|
|
{% endif %}
|
|
</form>
|
|
<script>
|
|
let c = document.forms.controls;
|
|
let empties = document.getElementsByClassName('empty');
|
|
for (let i = 0; i < empties.length; ++i) {
|
|
empties[i].onclick = (e) => {
|
|
c.elements.x.value = e.target.getAttribute('data-x');
|
|
c.elements.y.value = e.target.getAttribute('data-y');
|
|
document.getElementById('btn-place').click();
|
|
};
|
|
};
|
|
let claimables = document.getElementsByClassName('claimable');
|
|
for (let i = 0; i < claimables.length; ++i) {
|
|
claimables[i].onclick = (e) => {
|
|
c.elements.claim.value = e.target.getAttribute('data-uuid');
|
|
document.getElementById('btn-claim').click();
|
|
};
|
|
};
|
|
</script>
|
|
{% else %}
|
|
It is <font color="{{ current_player.color.value.html }}">{{ game._players[current_player.uuid].name }}'s</font> turn.
|
|
{% endif %}
|
|
{% endif %}
|
|
<table border="1">
|
|
<tr><td>Name</td><td>Followers</td><td>Score</td></tr>
|
|
{% for player in players | sort(attribute='score', reverse=true) %}
|
|
<tr>
|
|
<td><font color="{{ player.color.value.html }}">{{ game._players[player.uuid].name }}</font></td>
|
|
<td>{{ player.followers | selectattr('resource', 'none') | list | length }}</td>
|
|
<td>{{ player.score }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
Deck: {{ deck | length }}
|
|
</body>
|
|
</html>
|