diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/base.twig | 6 | ||||
| -rw-r--r-- | views/map.twig | 32 | ||||
| -rw-r--r-- | views/root.twig | 2 | ||||
| -rw-r--r-- | views/village.twig | 196 |
4 files changed, 215 insertions, 21 deletions
diff --git a/views/base.twig b/views/base.twig index 94e5037..0063e31 100644 --- a/views/base.twig +++ b/views/base.twig @@ -2,7 +2,11 @@ {% block body %} <div class="wrap"> - <header></header> + <header> + <nav> + <a href="/villages">Overview</a> + </nav> + </header> <main> {% block main %}{% endblock %} diff --git a/views/map.twig b/views/map.twig new file mode 100644 index 0000000..43f1a5b --- /dev/null +++ b/views/map.twig @@ -0,0 +1,32 @@ +{% extends 'base.twig' %} + +{% block main %} +<div class="map"> + <div class="map__up"> + <a href="/map/{{ x }}/{{ y - 1 }}">Up</a> + </div> + <div> + <div class="map__left"> + <a href="/map/{{ x - 1 }}/{{ y }}">Left</a> + </div> + <div class="map__villages" style="grid-template-columns: repeat({{ range*2+1 }}, 1fr); grid-template-rows: repeat({{ range*2+1 }}, 1fr);"> + {% for row in range(-range, range) %} + {% for column in range(-range, range) %} + {% set village = map[x + column][y + row] %} + <div class="map__village"> + <a href="/village/{{ village.x }}/{{ village.y }}"> + {{ map[x + column][y + row].name }} + </a> + </div> + {% endfor %} + {% endfor %} + </div> + <div class="map__right"> + <a href="/map/{{ x + 1 }}/{{ y }}">Right</a> + </div> + </div> + <div class="map__down"> + <a href="/map/{{ x }}/{{ y + 1 }}">Down</a> + </div> +</div> +{% endblock %} diff --git a/views/root.twig b/views/root.twig index 11dc665..35399c0 100644 --- a/views/root.twig +++ b/views/root.twig @@ -3,6 +3,8 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> + + <link rel="stylesheet" href="/assets/style.css"> </head> <body> {% block body %}{% endblock %} diff --git a/views/village.twig b/views/village.twig index 7bb55b2..ea6635c 100644 --- a/views/village.twig +++ b/views/village.twig @@ -4,15 +4,69 @@ <div class="village"> <div class="village__top"> - <div><span>{{ village.x }} x {{ village.y }}</span> — {{ village.name }}</div> + <div> + <span> + <a href="/map/{{ village.x }}/{{ village.y }}"> + {{ village.x }} x {{ village.y }} + </a> + </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> + <div> + <i class="icon icon-wood"></i> + <span>{{ village.wood }} / {{ village.getStorage(village.id).getResourceCapacity('wood') }}</span> + <i class="icon icon-per-increment"></i> + <span>{{ village.getBuilding(village.id, 'WoodCutter').getResourceIncrementor() }}</span> + </div> + <div> + <i class="icon icon-clay"></i> + <span>{{ village.clay }} / {{ village.getStorage(village.id).getResourceCapacity('clay') }}</span> + <i class="icon icon-per-increment"></i> + <span>{{ village.getBuilding(village.id, 'ClayPit').getResourceIncrementor() }}</span> + </div> + <div> + <i class="icon icon-iron"></i> + <span>{{ village.iron }} / {{ village.getStorage(village.id).getResourceCapacity('iron') }}</span> + <i class="icon icon-per-increment"></i> + <span>{{ village.getBuilding(village.id, 'IronMine').getResourceIncrementor() }}</span> + </div> + <div> + <i class="icon icon-food"></i> + <span>{{ village.food }} / {{ village.getStorage(village.id).getResourceCapacity('food') }}</span> + <i class="icon icon-per-increment"></i> + <span>{{ village.getBuilding(village.id, 'Farm').getResourceIncrementor() }}</span> + </div> - <span>capacity: {{ village.getStorage(village.id).getCapacity() }}</span> + <div onclick="javascript:this.nextElementSibling.showModal()"> + <i class="icon icon-storage"></i> + <span>{{ village.getStorage(village.id).getCapacity() }}</span> + </div> + <dialog> + <button onclick="javascript:this.parentNode.close()">Close</button> + <h3 align="center">Storage Config</h3> + <form method="post" action="/village/{{ village.x }}/{{ village.y }}/storage/config"> + <label> + Wood: + <input type="text" name="wood" value="{{ village.getStorageConfig(village.id).wood }}"> + </label> + <label> + <i class="icon icon-clay"></i> + <input type="text" name="clay" value="{{ village.getStorageConfig(village.id).clay }}"> + </label> + <label> + <i class="icon icon-iron"></i> + <input type="text" name="iron" value="{{ village.getStorageConfig(village.id).iron }}"> + </label> + <label> + <i class="icon icon-food"></i> + <input type="text" name="food" value="{{ village.getStorageConfig(village.id).food }}"> + </label> + <button>Save</button> + </form> + </dialog> </div> </div> @@ -47,12 +101,68 @@ </table> {% endif %} - {% if events.train %} + {% if events['TrainUnits'] %} <h4>Train Units</h4> + <table> + <thead> + <tr> + <th>Unit</th> + <th>Time</th> + <th></th> + </tr> + </thead> + <tbody> + {% for event in events['TrainUnits'] %} + <tr> + <td>{{ event.data.type }}</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 }}/unit/{{ event.data.type }}/train/cancel"> + Cancel + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> {% endif %} - {% if events.send %} + {% if events['SendUnits'] %} <h4>Send Resources / Units</h4> + <table> + <thead> + <tr> + <th>Type</th> + <th>Unit</th> + <th>Amount</th> + <th>Origin</th> + <th>Destination</th> + <th>Time</th> + <th></th> + </tr> + </thead> + <tbody> + {% for event in events['SendUnits'] %} + <tr> + <td>{{ event.data.type }}</td> + <td>{{ event.data.unit }}</td> + <td>{{ event.data.amount }}</td> + <td>{{ village.get(event.data.source).name }}</td> + <td>{{ village.get(event.data.destination).name }}</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 }}/unit/{{ event.data.type }}/train/cancel"> + Cancel + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> {% endif %} </div> @@ -76,11 +186,20 @@ <td>{{ building.level }}</td> <td>{{ building.getBuildTime() | buildTime }}</td> <td class="resources"> - <span>wood: {{ building.getResourceRequirements()['wood'] }}</span> + <span> + <i class="icon icon-wood"></i> + {{ building.getResourceRequirements()['wood'] }} + </span> - <span>clay: {{ building.getResourceRequirements()['clay'] }}</span> + <span> + <i class="icon icon-clay"></i> + {{ building.getResourceRequirements()['clay'] }} + </span> - <span>iron: {{ building.getResourceRequirements()['iron'] }}</span> + <span> + <i class="icon icon-iron"></i> + {{ building.getResourceRequirements()['iron'] }} + </span> </td> <td> <form action="/village/{{ village.x }}/{{ village.y }}/building/{{ building.type }}/level-up" method="post"> @@ -114,18 +233,30 @@ {{ unit.getBuildTime(1) | buildTime }} </td> <td> - <span>wood: {{ unit.getResourceRequirements()['wood'] }}</span> + <span> + <i class="icon icon-wood"></i> + {{ unit.getResourceRequirements(unit, 1)['wood'] }} + </span> - <span>clay: {{ unit.getResourceRequirements()['clay'] }}</span> + <span> + <i class="icon icon-clay"></i> + {{ unit.getResourceRequirements(unit, 1)['clay'] }} + </span> - <span>iron: {{ unit.getResourceRequirements()['iron'] }}</span> + <span> + <i class="icon icon-iron"></i> + {{ unit.getResourceRequirements(unit, 1)['iron'] }} + </span> - <span>food: {{ unit.getResourceRequirements()['food'] ?? 0 }}</span> + <span> + <i class="icon icon-food"></i> + {{ unit.getResourceRequirements(unit, 1)['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"> + <input type="submit" value="Train"> </form> </td> </tr> @@ -141,6 +272,7 @@ <th>Amount</th> <th>Origin</th> <th>Location</th> + <th>Travel Time</th> <th></th> </tr> </thead> @@ -151,18 +283,42 @@ <td>{{ unit.amount }}</td> <td>{{ village.get(unit.homeVillageId).name }}</td> <td>{{ not unit.isTraveling ? village.get(unit.residenceVillageId).name : '~traveling~' }}</td> + <td>{{ unit.getTravelTime(unit, village.getDistance(unit.getHomeVillage().x, unit.getHomeVillage().x, unit.getResidenceVillage().x, unit.getResidenceVillage().y)) | buildTime }}</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> + {% if unit.homeVillageId == village.id %} + <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/location/{{ unit.getResidenceVillage().x }}/{{ unit.getResidenceVillage().y }}/recall" method="post"> + <input type="number" min="1" max="{{ unit.amount }}" name="amount" placeholder="Amount" required> + <input type="submit" value="Recall Home"> + </form> + {% else %} + <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/location/{{ unit.getHomeVillage().x }}/{{ unit.getHomeVillage().y }}/send-back" method="post"> + <input type="number" min="1" max="{{ unit.amount }}" name="amount" placeholder="Amount" required> + <input type="submit" value="Send Back"> + </form> + {% endif %} {% endif %} </td> </tr> {% endfor %} </tbody> </table> + + <h4>Send Units</h4> + <form action="/village/{{ village.x }}/{{ village.y }}/send-units" method="post"> + <select name="unit"> + {% for unit in village.getUnits(village.id, 1) %} + <option>{{ unit.type }}</option> + {% endfor %} + </select> + <select name="village"> + {% for v in villages %} + <option value="{{ v.id }}">{{ v.name }}</option> + {% endfor %} + </select> + <input type="number" min="1" name="amount" placeholder="Amount" required> + <button>Send</button> + </form> </div> </div> </div> |