Add resource balance indication

src/ControlPanel.ts

@@ -54,10 +54,12 @@ export class ControlPanel {
             activeVillage: {},
             villages: [],
             taskList: [],
+            actionList: [],
             quickActions: quickActions,
 
             refreshTasks() {
                 this.taskList = scheduler.getTaskItems();
+                this.actionList = scheduler.getActionItems();
             },
 
             removeTask(taskId: string) {

src/DashboardView/Resource.vue

@@ -0,0 +1,38 @@
+<template>
+  <span :class="classes" v-text="formatted"></span>
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  data() {
+    return {};
+  },
+  computed: {
+    formatted() {
+      if (this.value === undefined) {
+        return '';
+      } else if (this.value > 0) {
+        return '+' + this.value;
+      } else {
+        return '' + this.value;
+      }
+    },
+    classes() {
+      return {
+        good: this.value > 0,
+        bad: this.value < 0,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.good {
+  color: green;
+}
+.bad {
+  color: red;
+}
+</style>

src/DashboardView/TaskList.vue

@@ -1,6 +1,9 @@
 <template>
   <section class="task-list">
-    <p class="summary">Task count: {{ shared.taskList.length }}</p>
+    <p class="summary">
+      Task count: {{ shared.taskList.length }}
+      <template v-if="actionCount">, actions left {{ actionCount }}</template>
+    </p>
     <div class="container">
       <table class="task-table">
         <tr v-for="task in shared.taskList" class="task-item" :class="{ 'this-village': isThisVillageTask(task) }">
@@ -27,6 +30,11 @@ export default {
       activeVillage: this.$root.$data.activeVillage,
     };
   },
+  computed: {
+    actionCount() {
+      return this.shared.actionList.length;
+    },
+  },
   methods: {
     formatDate(ts) {
       const d = new Date(ts * 1000);

src/DashboardView/VillageStateList.vue

@@ -51,11 +51,19 @@
             <td></td>
           </tr>
           <tr class="required-line">
-            <td class="right">Профицит:</td>
-            <td class="right" v-text="village.lumber - village.lumber_need || ''"></td>
-            <td class="right" v-text="village.clay - village.clay_need || ''"></td>
-            <td class="right" v-text="village.iron - village.iron_need || ''"></td>
-            <td class="right" v-text="village.crop - village.crop_need || ''"></td>
+            <td class="right">Баланс:</td>
+            <td class="right">
+              <resource :value="village.lumber - village.lumber_need"></resource>
+            </td>
+            <td class="right">
+              <resource :value="village.clay - village.clay_need"></resource>
+            </td>
+            <td class="right">
+              <resource :value="village.iron - village.iron_need"></resource>
+            </td>
+            <td class="right">
+              <resource :value="village.crop - village.crop_need"></resource>
+            </td>
             <td></td>
             <td></td>
           </tr>
@@ -90,8 +98,12 @@
 
 <script>
 import { path } from '../utils';
+import Resource from './Resource';
 
 export default {
+  components: {
+    resource: Resource,
+  },
   data() {
     return {
       shared: this.$root.$data,

src/Queue/ActionQueue.ts

@@ -37,6 +37,10 @@ export class ActionQueue {
         this.flushState([]);
     }
 
+    seeItems(): ActionList {
+        return this.getCommands();
+    }
+
     private getCommands(): ActionList {
         const serialized = this.storage.get(QUEUE_NAME);
         if (!Array.isArray(serialized)) {

src/Scheduler.ts

@@ -7,7 +7,7 @@ import { BalanceHeroResourcesTask } from './Task/BalanceHeroResourcesTask';
 import { ConsoleLogger, Logger } from './Logger';
 import { BuildBuildingTask } from './Task/BuildBuildingTask';
 import { GrabVillageState } from './Task/GrabVillageState';
-import { ActionQueue } from './Queue/ActionQueue';
+import { ActionList, ActionQueue } from './Queue/ActionQueue';
 import { Resources, ResourcesInterface } from './Game';
 import { UpdateResourceContracts } from './Task/UpdateResourceContracts';
 
@@ -43,6 +43,10 @@ export class Scheduler {
         return this.taskQueue.seeItems();
     }
 
+    getActionItems(): ActionList {
+        return this.actionQueue.seeItems();
+    }
+
     nextTask(ts: number) {
         return this.taskQueue.get(ts);
     }