Improve slot markers

src/ControlPanel.ts

@@ -5,6 +5,7 @@ import { UpgradeBuildingTask } from './Task/UpgradeBuildingTask';
 import { grabActiveVillageId, grabVillageList } from './Page/VillageBlock';
 import {
     grabResourceDeposits,
+    onBuildingSlotCtrlClick,
     onResourceSlotCtrlClick,
     showBuildingSlotIds,
     showResourceSlotIds,
@@ -114,19 +115,27 @@ export class ControlPanel {
             }, 500)
         );
 
-        const tasks = this.scheduler.getTaskItems();
-        const buildingsInQueue = tasks
+        const getBuildingsInQueue = () =>
+            this.scheduler
+                .getTaskItems()
                 .filter(t => t.name === UpgradeBuildingTask.name && t.args.villageId === villageId)
                 .map(t => t.args.buildId || 0);
 
         if (p.pathname === '/dorf1.php') {
-            showResourceSlotIds(buildingsInQueue);
-            onResourceSlotCtrlClick(buildId => this.onResourceSlotCtrlClick(villageId, buildId));
+            showResourceSlotIds(getBuildingsInQueue());
             state.quickActions.push(...this.createDepositsQuickActions(villageId));
+            onResourceSlotCtrlClick(buildId => {
+                this.onSlotCtrlClick(villageId, buildId);
+                showResourceSlotIds(getBuildingsInQueue());
+            });
         }
 
         if (p.pathname === '/dorf2.php') {
-            showBuildingSlotIds(buildingsInQueue);
+            showBuildingSlotIds(getBuildingsInQueue());
+            onBuildingSlotCtrlClick(buildId => {
+                this.onSlotCtrlClick(villageId, buildId);
+                showBuildingSlotIds(getBuildingsInQueue());
+            });
         }
 
         if (isBuildingPage()) {
@@ -166,7 +175,7 @@ export class ControlPanel {
         return quickActions;
     }
 
-    private onResourceSlotCtrlClick(villageId: number, buildId: number) {
+    private onSlotCtrlClick(villageId: number, buildId: number) {
         this.scheduler.scheduleTask(UpgradeBuildingTask.name, { villageId, buildId });
         notify(`Building ${buildId} scheduled`);
     }

src/Page/SlotBlock.ts

@@ -22,7 +22,8 @@ function showSlotIds(prefix: string, buildingIds: Array<number>): void {
         const upCount = buildingIds.filter(id => id === slot.buildId).length;
         const $slotEl = jQuery(slot.el);
         const $labelEl = $slotEl.find('.labelLayer');
-        const oldLabel = $labelEl.text();
+        const oldLabel = $labelEl.data('oldLabel') || $labelEl.text();
+        $labelEl.data('oldLabel', oldLabel);
         $labelEl.text(slot.buildId + ':' + oldLabel + (upCount > 0 ? '+' + upCount : ''));
         $slotEl.css({ 'border-radius': '20%', 'width': upCount > 0 ? '56px' : '42px' });
         $labelEl.css({
@@ -50,8 +51,8 @@ export function showBuildingSlotIds(buildingIds: number[]): void {
     showSlotIds('aid', buildingIds);
 }
 
-export function onResourceSlotCtrlClick(cb: (buildId: number) => void): void {
-    const slots = slotElements('buildingSlot');
+function onSlotCtrlClick(prefix: string, onClickHandler: (buildId: number) => void): void {
+    const slots = slotElements(prefix);
     slots.forEach(slot => {
         jQuery(slot.el)
             .find('.labelLayer')
@@ -59,12 +60,20 @@ export function onResourceSlotCtrlClick(cb: (buildId: number) => void): void {
                 if (evt.ctrlKey) {
                     evt.preventDefault();
                     evt.stopPropagation();
-                    cb(slot.buildId);
+                    onClickHandler(slot.buildId);
                 }
             });
     });
 }
 
+export function onResourceSlotCtrlClick(onClickHandler: (buildId: number) => void): void {
+    onSlotCtrlClick('buildingSlot', onClickHandler);
+}
+
+export function onBuildingSlotCtrlClick(onClickHandler: (buildId: number) => void): void {
+    onSlotCtrlClick('aid', onClickHandler);
+}
+
 function slotToDepositMapper(slot: Slot): ResourceDeposit {
     const el = slot.el;
     const classes = jQuery(el).attr('class');