Refactorings village state view

src/ControlPanel.ts

@@ -166,25 +166,15 @@ class VillageController {
     public readonly crop;
     public readonly resources;
     public readonly performance;
-    public readonly requiredResources;
+    public readonly requiredResources: Resources;
-    public readonly totalRequiredResources;
+    public readonly requiredBalance: Resources;
+    public readonly totalRequiredResources: Resources;
+    public readonly totalRequiredBalance: Resources;
+    public readonly incomingResources: Resources;
     public readonly storage;
-    public readonly lumber_hour;
-    public readonly clay_hour;
-    public readonly iron_hour;
-    public readonly crop_hour;
-    public readonly lumber_need;
-    public readonly clay_need;
-    public readonly iron_need;
-    public readonly crop_need;
-    public readonly lumber_total_need;
-    public readonly clay_total_need;
-    public readonly iron_total_need;
-    public readonly crop_total_need;
     public readonly warehouse;
     public readonly granary;
     public readonly buildRemainingSeconds;
-    public readonly incomingResources: Resources;
 
     constructor(village: Village, state: VillageState, scheduler: Scheduler) {
         const resources = state.getResources();
@@ -204,20 +194,10 @@ class VillageController {
         this.resources = resources;
         this.performance = performance;
         this.requiredResources = requiredResources;
+        this.requiredBalance = resources.sub(requiredResources);
         this.totalRequiredResources = totalRequiredResources;
+        this.totalRequiredBalance = resources.sub(totalRequiredResources);
         this.storage = storage;
-        this.lumber_hour = performance.lumber;
-        this.clay_hour = performance.clay;
-        this.iron_hour = performance.iron;
-        this.crop_hour = performance.crop;
-        this.lumber_need = requiredResources.lumber;
-        this.clay_need = requiredResources.clay;
-        this.iron_need = requiredResources.iron;
-        this.crop_need = requiredResources.crop;
-        this.lumber_total_need = totalRequiredResources.lumber;
-        this.clay_total_need = totalRequiredResources.clay;
-        this.iron_total_need = totalRequiredResources.iron;
-        this.crop_total_need = totalRequiredResources.crop;
         this.warehouse = storage.warehouse;
         this.granary = storage.granary;
         this.buildRemainingSeconds = buildQueueInfo.seconds;

src/DashboardView/ResourceBalance.vue

@@ -4,7 +4,23 @@
 
 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: Number,
+    },
+    hideZero: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: Boolean,
+      default: true,
+    },
+    sign: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return {};
   },
@@ -12,17 +28,22 @@ export default {
     formatted() {
       if (this.value === undefined) {
         return '';
-      } else if (this.value > 0) {
+      }
-        return '+' + this.value;
+      if (this.value === 0) {
+        return this.hideZero ? '' : '0';
+      }
+      if (this.value > 0) {
+        return (this.sign ? '+' : '') + this.value;
       } else {
         return '' + this.value;
       }
     },
     classes() {
-      return {
+      const colorClasses = {
         good: this.value > 0,
         bad: this.value < 0,
       };
+      return this.color ? colorClasses : {};
     },
   },
 };

src/DashboardView/VillageStateList.vue

@@ -17,16 +17,16 @@
           <tr class="normal-line top-line">
             <td :class="{ active: village.active }" :title="village.id">{{ village.name }}</td>
             <td class="right">
-              <filling :value="village.lumber" :max="village.warehouse" :speed="village.lumber_hour"></filling>
+              <filling :value="village.lumber" :max="village.warehouse" :speed="village.performance.lumber"></filling>
             </td>
             <td class="right">
-              <filling :value="village.clay" :max="village.warehouse" :speed="village.clay_hour"></filling>
+              <filling :value="village.clay" :max="village.warehouse" :speed="village.performance.clay"></filling>
             </td>
             <td class="right">
-              <filling :value="village.iron" :max="village.warehouse" :speed="village.iron_hour"></filling>
+              <filling :value="village.iron" :max="village.warehouse" :speed="village.performance.iron"></filling>
             </td>
             <td class="right">
-              <filling :value="village.crop" :max="village.granary" :speed="village.crop_hour"></filling>
+              <filling :value="village.crop" :max="village.granary" :speed="village.performance.crop"></filling>
             </td>
             <td class="right">
               <a :href="warehousePath(village)" v-text="village.warehouse"></a>
@@ -35,35 +35,71 @@
           </tr>
           <tr class="performance-line">
             <td class="right">Прирост:</td>
-            <td class="right">+{{ village.lumber_hour }}</td>
+            <td class="right">
-            <td class="right">+{{ village.clay_hour }}</td>
+              <resource :value="village.performance.lumber"></resource>
-            <td class="right">+{{ village.iron_hour }}</td>
+            </td>
-            <td class="right">+{{ village.crop_hour }}</td>
+            <td class="right">
+              <resource :value="village.performance.clay"></resource>
+            </td>
+            <td class="right">
+              <resource :value="village.performance.iron"></resource>
+            </td>
+            <td class="right">
+              <resource :value="village.performance.crop"></resource>
+            </td>
             <td></td>
             <td></td>
           </tr>
           <tr class="required-line">
             <td class="right">След:</td>
-            <td class="right" v-text="village.lumber_need || ''"></td>
+            <td class="right">
-            <td class="right" v-text="village.clay_need || ''"></td>
+              <resource
-            <td class="right" v-text="village.iron_need || ''"></td>
+                :value="village.requiredResources.lumber"
-            <td class="right" v-text="village.crop_need || ''"></td>
+                :hide-zero="true"
+                :color="false"
+                :sign="false"
+              ></resource>
+            </td>
+            <td class="right">
+              <resource
+                :value="village.requiredResources.clay"
+                :hide-zero="true"
+                :color="false"
+                :sign="false"
+              ></resource>
+            </td>
+            <td class="right">
+              <resource
+                :value="village.requiredResources.iron"
+                :hide-zero="true"
+                :color="false"
+                :sign="false"
+              ></resource>
+            </td>
+            <td class="right">
+              <resource
+                :value="village.requiredResources.crop"
+                :hide-zero="true"
+                :color="false"
+                :sign="false"
+              ></resource>
+            </td>
             <td class="right" v-text="secondsToTime(village.buildRemainingSeconds)"></td>
             <td></td>
           </tr>
           <tr class="required-line">
             <td class="right">Баланс:</td>
             <td class="right">
-              <resource :value="village.lumber - (village.lumber_need || 0)"></resource>
+              <resource :value="village.requiredBalance.lumber"></resource>
             </td>
             <td class="right">
-              <resource :value="village.clay - (village.clay_need || 0)"></resource>
+              <resource :value="village.requiredBalance.clay"></resource>
             </td>
             <td class="right">
-              <resource :value="village.iron - (village.iron_need || 0)"></resource>
+              <resource :value="village.requiredBalance.iron"></resource>
             </td>
             <td class="right">
-              <resource :value="village.crop - (village.crop_need || 0)"></resource>
+              <resource :value="village.requiredBalance.crop"></resource>
             </td>
             <td class="right" v-text="timeToRequired(village)"></td>
             <td></td>
@@ -71,16 +107,16 @@
           <tr class="required-line">
             <td class="right">Баланс очереди:</td>
             <td class="right">
-              <resource :value="village.lumber - village.lumber_total_need"></resource>
+              <resource :value="village.totalRequiredBalance.lumber"></resource>
             </td>
             <td class="right">
-              <resource :value="village.clay - village.clay_total_need"></resource>
+              <resource :value="village.totalRequiredBalance.clay"></resource>
             </td>
             <td class="right">
-              <resource :value="village.iron - village.iron_total_need"></resource>
+              <resource :value="village.totalRequiredBalance.iron"></resource>
             </td>
             <td class="right">
-              <resource :value="village.crop - village.crop_total_need"></resource>
+              <resource :value="village.totalRequiredBalance.crop"></resource>
             </td>
             <td class="right" v-text="timeToTotalRequired(village)"></td>
             <td></td>
@@ -88,16 +124,16 @@
           <tr class="incoming-line">
             <td class="right">Торговцы:</td>
             <td class="right">
-              <resource :value="village.incomingResources.lumber"></resource>
+              <resource :value="village.incomingResources.lumber" :hide-zero="true"></resource>
             </td>
             <td class="right">
-              <resource :value="village.incomingResources.clay"></resource>
+              <resource :value="village.incomingResources.clay" :hide-zero="true"></resource>
             </td>
             <td class="right">
-              <resource :value="village.incomingResources.iron"></resource>
+              <resource :value="village.incomingResources.iron" :hide-zero="true"></resource>
             </td>
             <td class="right">
-              <resource :value="village.incomingResources.crop"></resource>
+              <resource :value="village.incomingResources.crop" :hide-zero="true"></resource>
             </td>
             <td></td>
             <td></td>