diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/base.twig | 26 | ||||
| -rw-r--r-- | views/components/timer.twig | 25 | ||||
| -rw-r--r-- | views/root.twig | 10 | ||||
| -rw-r--r-- | views/village.twig | 169 | ||||
| -rw-r--r-- | views/villages.twig | 38 |
5 files changed, 268 insertions, 0 deletions
diff --git a/views/base.twig b/views/base.twig new file mode 100644 index 0000000..94e5037 --- /dev/null +++ b/views/base.twig @@ -0,0 +1,26 @@ +{% extends 'root.twig' %} + +{% block body %} +<div class="wrap"> + <header></header> + + <main> + {% block main %}{% endblock %} + </main> + + <footer></footer> + + <div class="global-timer"></div> + <script> + const timer = document.querySelectorAll('.global-timer'); + function setTime () { + const now = new Date(); + for (const t of timer) { + t.innerHTML = now; + } + } + setTime(); + setInterval(setTime, 1000); + </script> +</div> +{% endblock %} diff --git a/views/components/timer.twig b/views/components/timer.twig new file mode 100644 index 0000000..97977da --- /dev/null +++ b/views/components/timer.twig @@ -0,0 +1,25 @@ +<span class="timer" data-time="{{ time }}"> + <span class="timer__time"></span> +</span> +<script> +document.addEventListener('DOMContentLoaded', function (ev) { + const timer = document.querySelector('.timer[data-time="{{ time }}"] .timer__time'); + const time = new Date('{{ time }}'); + + const interval = setInterval(setTime, 1000); + function setTime() { + let diff = time - new Date(); + if (diff <= -1) { + clearInterval(interval); + } + + const hh = Math.floor(diff/1000/60/60); + diff -= hh*1000*60*60; + const mm = Math.floor(diff/1000/60); + diff -= mm*1000*60; + const ss = Math.floor(diff/1000); + timer.innerHTML = `${('00' + hh).slice(-2)}:${('00' + mm).slice(-2)}:${('00' + ss).slice(-2)}`; + } + setTime(); +}); +</script> diff --git a/views/root.twig b/views/root.twig new file mode 100644 index 0000000..11dc665 --- /dev/null +++ b/views/root.twig @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<body> + {% block body %}{% endblock %} +</body> +</html> diff --git a/views/village.twig b/views/village.twig new file mode 100644 index 0000000..7bb55b2 --- /dev/null +++ b/views/village.twig @@ -0,0 +1,169 @@ +{% extends 'base.twig' %} + +{% block main %} +<div class="village"> + + <div class="village__top"> + <div><span>{{ village.x }} x {{ village.y }}</span> — {{ village.name }}</div> + + <div class="resources"> + <span>wood: <b>{{ village.wood }}</b> / {{ village.getStorage(village.id).getResourceCapacity('wood') }} – {{ village.getBuilding(village.id, 'WoodCutter').getResourceIncrementor() }}</span> + <span>clay: <b>{{ village.clay }}</b> / {{ village.getStorage(village.id).getResourceCapacity('clay') }} – {{ village.getBuilding(village.id, 'ClayPit').getResourceIncrementor() }}</span> + <span>iron: <b>{{ village.iron }}</b> / {{ village.getStorage(village.id).getResourceCapacity('iron') }} – {{ village.getBuilding(village.id, 'IronMine').getResourceIncrementor() }}</span> + <span>food: <b>{{ village.food }}</b> / {{ village.getStorage(village.id).getResourceCapacity('food') }} – {{ village.getBuilding(village.id, 'Farm').getResourceIncrementor() }}</span> + + <span>capacity: {{ village.getStorage(village.id).getCapacity() }}</span> + </div> + </div> + + <div class="village__events"> + <h3>Events</h3> + + {% if events['UpgradeBuilding'] %} + <h4>Upgrade Buildings</h4> + <table> + <thead> + <tr> + <th>Building</th> + <th>Time</th> + <th></th> + </tr> + </thead> + <tbody> + {% for event in events['UpgradeBuilding'] %} + <tr> + <td>{{ event.data.building }}</td> + <td class="timer"> + {% include 'components/timer.twig' with { 'time': event.event.time|date('c') } %} + </td> + <td> + <a class="btn" href="/village/{{ village.x }}/{{ village.y }}/building/{{ event.data.building }}/build/cancel"> + Cancel + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> + {% endif %} + + {% if events.train %} + <h4>Train Units</h4> + {% endif %} + + {% if events.send %} + <h4>Send Resources / Units</h4> + {% endif %} + </div> + + <div class="village__main"> + <div class="village__buildings"> + <h3>Buildings</h3> + <table> + <thead> + <tr> + <th>Type</th> + <th>Level</th> + <th>Build Time</th> + <th>Resources</th> + <th></th> + </tr> + </thead> + <tbody> + {% for building in village.getBuildings(village.id) %} + <tr class="village__buildings__row"> + <td>{{ building.type }}</td> + <td>{{ building.level }}</td> + <td>{{ building.getBuildTime() | buildTime }}</td> + <td class="resources"> + <span>wood: {{ building.getResourceRequirements()['wood'] }}</span> + + <span>clay: {{ building.getResourceRequirements()['clay'] }}</span> + + <span>iron: {{ building.getResourceRequirements()['iron'] }}</span> + </td> + <td> + <form action="/village/{{ village.x }}/{{ village.y }}/building/{{ building.type }}/level-up" method="post"> + <input type="submit" value="Level up" {{ village.canBuild(village, building) ? '' : 'disabled' }}> + </form> + </td> + </tr> + {% endfor %} + </tbody> + </table> + </div> + + <div class="village_units"> + <h3>Units</h3> + <table> + <thead> + <tr> + <th>Type</th> + <th>Amount</th> + <th>Build Time</th> + <th>Resources</th> + <th></th> + </tr> + </thead> + <tbody> + {% for unit in village.getUnits(village.id, 1) %} + <tr> + <td>{{ unit.type }}</td> + <td>{{ unit.amount }}</td> + <td> + {{ unit.getBuildTime(1) | buildTime }} + </td> + <td> + <span>wood: {{ unit.getResourceRequirements()['wood'] }}</span> + + <span>clay: {{ unit.getResourceRequirements()['clay'] }}</span> + + <span>iron: {{ unit.getResourceRequirements()['iron'] }}</span> + + <span>food: {{ unit.getResourceRequirements()['food'] ?? 0 }}</span> + </td> + <td> + <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/create" method="post" class="inline"> + <input type="number" min="0" name="amount" placeholder="Amount"> + <input type="submit" value="Create"> + </form> + </td> + </tr> + {% endfor %} + </tbody> + </table> + + <h4>Supporting Units</h4> + <table> + <thead> + <tr> + <th>Type</th> + <th>Amount</th> + <th>Origin</th> + <th>Location</th> + <th></th> + </tr> + </thead> + <tbody> + {% for unit in village.getUnits(village.id, 2) | merge(village.getUnits(village.id, 3)) %} + <tr> + <td>{{ unit.type }}</td> + <td>{{ unit.amount }}</td> + <td>{{ village.get(unit.homeVillageId).name }}</td> + <td>{{ not unit.isTraveling ? village.get(unit.residenceVillageId).name : '~traveling~' }}</td> + <td> + {% if not unit.isTraveling %} + <form action="/village/{{ village.id }}/unit/{{ unit.id }}/send-back" method="post" class="inline"> + <input type="number" min="1" max="{{ unit.amount }}" name="amount" placeholder="Amount" required> + <input type="submit" value="{{ (unit.homeVillageId != unit.residenceVillageId) ? 'Send Back' : 'Recall Home' }}"> + </form> + {% endif %} + </td> + </tr> + {% endfor %} + </tbody> + </table> + </div> + </div> +</div> +{% endblock %} diff --git a/views/villages.twig b/views/villages.twig new file mode 100644 index 0000000..21d8cec --- /dev/null +++ b/views/villages.twig @@ -0,0 +1,38 @@ +{% extends 'base.twig' %} + +{% block main %} +<table> + <thead> + <tr> + <td>Name</td> + <td>Coordinates</td> + <td>Wood</td> + <td>Clay</td> + <td>Iron</td> + <td>Food</td> + <td>Storage</td> + <td>Reputation</td> + </tr> + </thead> + <tbody> + {% for village in villages %} + <tr> + <td> + <a href="/village/{{ village.x}}/{{ village.y }}"> + {{ village.name }} + </a> + </td> + <td> + { x: {{ village.x }}, y: {{ village.y }} } + </td> + <td>{{ village.wood }}</td> + <td>{{ village.clay }}</td> + <td>{{ village.iron }}</td> + <td>{{ village.food }}</td> + <td>{{ village.getStorage(village.id).getCapacity() * (25 / 100) }}</td> + <td>{{ village.reputation }}</td> + </tr> + {% endfor %} + </tbody> +</table> +{% endblock %} |