initial commit 2

author: Daniel Weipert <code@drogueronin.de> 2023-10-04 11:32:04 +0200
committer: Daniel Weipert <code@drogueronin.de> 2023-10-04 11:32:04 +0200
commit: 94a3dd52da3ae180af37c6fd0e8c24b3562da388 (patch)
tree: acced055660bfd65ca3e955ea26d412457ba4507 /views
parent: fa00b957378a393f8edbfc98ef111d35d18ecb09 (diff)
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> &mdash; {{ village.name }}</div>
+    <div>
+      <span>
+        <a href="/map/{{ village.x }}/{{ village.y }}">
+          {{ village.x }} x {{ village.y }}
+        </a>
+      </span>
+      &mdash;
+      {{ village.name }}
+    </div>
 
     <div class="resources">
-      <span>wood: <b>{{ village.wood }}</b> / {{ village.getStorage(village.id).getResourceCapacity('wood') }} &ndash; {{ village.getBuilding(village.id, 'WoodCutter').getResourceIncrementor() }}</span>
-      <span>clay: <b>{{ village.clay }}</b> / {{ village.getStorage(village.id).getResourceCapacity('clay') }} &ndash; {{ village.getBuilding(village.id, 'ClayPit').getResourceIncrementor() }}</span>
-      <span>iron: <b>{{ village.iron }}</b> / {{ village.getStorage(village.id).getResourceCapacity('iron') }} &ndash; {{ village.getBuilding(village.id, 'IronMine').getResourceIncrementor() }}</span>
-      <span>food: <b>{{ village.food }}</b> / {{ village.getStorage(village.id).getResourceCapacity('food') }} &ndash; {{ 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>
             &nbsp;
-            <span>clay: {{ building.getResourceRequirements()['clay'] }}</span>
+            <span>
+              <i class="icon icon-clay"></i>
+              {{ building.getResourceRequirements()['clay'] }}
+            </span>
             &nbsp;
-            <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>
             &nbsp;
-            <span>clay: {{ unit.getResourceRequirements()['clay'] }}</span>
+            <span>
+              <i class="icon icon-clay"></i>
+              {{ unit.getResourceRequirements(unit, 1)['clay'] }}
+            </span>
             &nbsp;
-            <span>iron: {{ unit.getResourceRequirements()['iron'] }}</span>
+            <span>
+              <i class="icon icon-iron"></i>
+              {{ unit.getResourceRequirements(unit, 1)['iron'] }}
+            </span>
             &nbsp;
-            <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>
author	Daniel Weipert <code@drogueronin.de>	2023-10-04 11:32:04 +0200
committer	Daniel Weipert <code@drogueronin.de>	2023-10-04 11:32:04 +0200
commit	94a3dd52da3ae180af37c6fd0e8c24b3562da388 (patch)
tree	acced055660bfd65ca3e955ea26d412457ba4507 /views
parent	fa00b957378a393f8edbfc98ef111d35d18ecb09 (diff)