Add contextual resource info

src/Dashboard/Components/VillageStateList.vue

@@ -16,10 +16,26 @@
         <template v-for="village in shared.villages">
           <tr class="normal-line top-line">
             <td :class="{ active: village.active }" :title="village.id">{{ village.name }}</td>
-            <td class="right" v-text="village.lumber"></td>
+            <td
-            <td class="right" v-text="village.clay"></td>
+              class="right"
-            <td class="right" v-text="village.iron"></td>
+              v-text="village.lumber"
-            <td class="right" v-text="village.crop"></td>
+              :title="resourceTitle(village.lumber, village.warehouse, village.lumber_hour)"
+            ></td>
+            <td
+              class="right"
+              v-text="village.clay"
+              :title="resourceTitle(village.clay, village.warehouse, village.clay_hour)"
+            ></td>
+            <td
+              class="right"
+              v-text="village.iron"
+              :title="resourceTitle(village.iron, village.warehouse, village.iron_hour)"
+            ></td>
+            <td
+              class="right"
+              v-text="village.crop"
+              :title="resourceTitle(village.crop, village.granary, village.crop_hour)"
+            ></td>
             <td class="right">
               <a :href="warehousePath(village)" v-text="village.warehouse"></a>
             </td>
@@ -77,6 +93,21 @@ export default {
     quartersPath(village) {
       return path('/build.php', { newdid: village.id, gid: 19 });
     },
+    resourceTitle(current, max, speed) {
+      const percent = Math.floor((current / max) * 100);
+      if (speed < 0) {
+        const time = this.fractionalHourToTime(current / speed);
+        return `${current}, ${percent}%, опустеет через ${time}`;
+      } else {
+        const time = this.fractionalHourToTime((max - current) / speed);
+        return `${current}, ${percent}%, заполнится через ${time}`;
+      }
+    },
+    fractionalHourToTime(value) {
+      const hours = Math.floor(value);
+      const minutes = Math.round((value - hours) * 60);
+      return `${hours}:${String(minutes).padStart(2, '0')}`;
+    },
   },
 };
 </script>

src/Page/VillageBlock.ts

@@ -40,20 +40,8 @@ function grabVillageInfo($el): Village {
     const id = getNumber(parsedHref.query.newdid);
     const name = $el.find('.name').text();
     const active = $el.hasClass('active');
-    const x = getNumber(
+    const x = getNumber($el.find('.coordinateX').text());
-        $el
+    const y = getNumber($el.find('.coordinateY').text());
-            .find('.coordinateX')
-            .text()
-            .replace('−‭', '-')
-            .replace(/[^0-9-]/gi, '')
-    );
-    const y = getNumber(
-        $el
-            .find('.coordinateY')
-            .text()
-            .replace('−‭', '-')
-            .replace(/[^0-9-]/gi, '')
-    );
     return new Village(id, name, active, new Coordinates(x, y));
 }
 

src/utils.ts

@@ -76,7 +76,10 @@ export function* split(n: number) {
 }
 
 export function toNumber(value: any): number | undefined {
-    const converted = Number(value);
+    const normalized = String(value)
+        .replace('−‭', '-')
+        .replace(/[^0-9-]/gi, '');
+    const converted = Number(normalized);
     return isNaN(converted) ? undefined : converted;
 }