<!DOCTYPE html> <html> <head> {% if not done and current_player.uuid != me.uuid %} <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 .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"], input[type="radio"], select { display: none; } input[name="follower"]:checked + label.follower-label .follower { stroke-width: 3px; stroke: black; } svg [droppable="true"] </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' %} {% for follower in me.followers %} {{ follower.resting_svg() }} {% endfor %} <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].setAttribute('droppable', true); claimables[i].onclick = (e) => { c.elements.claim.value = e.target.getAttribute('data-uuid'); document.getElementById('btn-claim').click(); }; }; follower = null; document.addEventListener('dragstart', e => { follower = e.target; follower.style.opacity = 0.5; e.dataTransfer.effectAllowed = 'move'; }); document.addEventListener('dragenter', e => { e.target.classList.add('hover'); e.dataTransfer.dropEffect = 'move'; }); document.addEventListener('dragleave', e => { e.target.classList.remove('hover'); }); document.addEventListener('dragend', e => { follower.style.opacity = ''; }); document.addEventListener('dragover', e => { e.preventDefault(); }); document.addEventListener('drop', e => { follower.style.opacity = ''; if (!e.target.hasAttribute('data-uuid')) { return; } c.elements.follower.value = follower.getAttribute('data-uuid'); c.elements.claim.value = e.target.getAttribute('data-uuid'); console.log(c.elements.follower.value + ' ' + c.elements.claim.value); document.getElementById('btn-claim').click(); }); </script> {% else %}{# my turn #} It is <font color="{{ current_player.color.value.html }}">{{ game._players[current_player.uuid].name }}'s</font> turn. {% endif %}{# my turn #} {% endif %}{# done #} <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>