Add village resources view to dashboard

src/Dashboard/Components/DashboardApp.vue

@@ -5,6 +5,8 @@
       <task-list></task-list>
       <hr class="separator" />
       <quick-actions></quick-actions>
+      <hr class="separator" />
+      <village-state-list></village-state-list>
     </div>
   </main>
 </template>
@@ -13,14 +15,18 @@
 import Header from './Header';
 import TaskList from './TaskList';
 import QuickActions from './QuickActions';
+import VillageStateList from './VillageStateList';
 export default {
   components: {
     hdr: Header,
     'task-list': TaskList,
     'quick-actions': QuickActions,
+    'village-state-list': VillageStateList,
   },
   data() {
-    return {};
+    return {
+      shared: this.$root.$data,
+    };
   },
 };
 </script>

src/Dashboard/Components/VillageStateList.vue

@@ -0,0 +1,40 @@
+<template>
+  <section>
+    <table class="village-table">
+      <tr v-for="village in shared.villages" :key="village.id">
+        <td>{{ village.id }} - {{ village.name }}</td>
+        <td>Д: {{ resources(village.id).lumber }}</td>
+        <td>Г: {{ resources(village.id).clay }}</td>
+        <td>Ж: {{ resources(village.id).iron }}</td>
+        <td>З: {{ resources(village.id).crop }}</td>
+      </tr>
+    </table>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shared: this.$root.$data,
+    };
+  },
+  methods: {
+    resources(id) {
+      return this.shared.getVillageResources(id);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.village-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.village-table td {
+  border-top: 1px solid #ddd;
+  padding: 4px;
+}
+</style>

src/Dashboard/Dashboard.ts

@@ -3,7 +3,7 @@ import { getNumber, toNumber, uniqId, waitForLoad } from '../utils';
 import { Scheduler } from '../Scheduler';
 import { BuildPage } from '../Page/BuildPage';
 import { UpgradeBuildingTask } from '../Task/UpgradeBuildingTask';
-import { grabActiveVillage, grabActiveVillageId } from '../Page/VillageBlock';
+import { grabActiveVillage, grabActiveVillageId, grabVillageList } from '../Page/VillageBlock';
 import {
     grabResourceDeposits,
     onResourceSlotCtrlClick,
@@ -14,6 +14,8 @@ import Vue from 'vue';
 import DashboardApp from './Components/DashboardApp.vue';
 import { ResourcesToLevel } from '../Task/ResourcesToLevel';
 import { Logger } from '../Logger';
+import { Resources } from '../Game';
+import { VillageState } from '../Storage/VillageState';
 
 interface QuickAction {
     label: string;
@@ -45,6 +47,7 @@ export class Dashboard {
         const state = {
             name: 'Dashboard',
             village: grabActiveVillage(),
+            villages: grabVillageList(),
             version: this.version,
             taskList: this.scheduler.getTaskItems(),
             quickActions: quickActions,
@@ -57,6 +60,11 @@ export class Dashboard {
                 scheduler.removeTask(taskId);
                 this.taskList = scheduler.getTaskItems();
             },
+
+            getVillageResources(villageId): Resources {
+                const state = new VillageState(villageId);
+                return state.getResources();
+            },
         };
 
         setInterval(() => state.refreshTasks(), 1000);