Improve slot markers

src/DashboardView/Dashboard.vue

@@ -18,7 +18,7 @@ import QuickActions from './QuickActions';
 import VillageStateList from './VillageStateList';
 export default {
   components: {
-    hdr: Header,
+    'hdr': Header,
     'task-list': TaskList,
     'quick-actions': QuickActions,
     'village-state-list': VillageStateList,

src/Page/SlotBlock.ts

@@ -19,15 +19,23 @@ function slotElements(prefix: string): Array<Slot> {
 function showSlotIds(prefix: string, buildingIds: Array<number>): void {
     const slots = slotElements(prefix);
     slots.forEach(slot => {
-        const oldLabel = jQuery(slot.el)
-            .find('.labelLayer')
-            .text();
-        jQuery(slot.el)
-            .find('.labelLayer')
-            .text(slot.buildId + ':' + oldLabel);
-        const inQueue = buildingIds.includes(slot.buildId);
-        if (inQueue) {
-            jQuery(slot.el).css({
+        const upCount = buildingIds.filter(id => id === slot.buildId).length;
+        const $slotEl = jQuery(slot.el);
+        const $labelEl = $slotEl.find('.labelLayer');
+        const oldLabel = $labelEl.text();
+        $labelEl.text(slot.buildId + ':' + oldLabel + (upCount > 0 ? '+' + upCount : ''));
+        $slotEl.css({ 'border-radius': '20%', 'width': upCount > 0 ? '56px' : '42px' });
+        $labelEl.css({
+            'border-radius': '10%',
+            'top': '3px',
+            'left': '3px',
+            'height': '19px',
+            'line-height': '19px',
+            'width': upCount > 0 ? '50px' : '36px',
+        });
+
+        if (upCount) {
+            $slotEl.css({
                 'background-image': 'linear-gradient(to top, #f00, #f00 100%)',
             });
         }

src/TaskQueueRenderer.ts

@@ -14,13 +14,13 @@ export class TaskQueueRenderer {
         const ul = jQuery('<ul></ul>')
             .attr({ id: ID })
             .css({
-                position: 'absolute',
+                'position': 'absolute',
                 'background-color': 'white',
-                left: 0,
-                top: '40px',
-                color: 'black',
+                'left': 0,
+                'top': '40px',
+                'color': 'black',
                 'z-index': '9999',
-                padding: '8px 6px',
+                'padding': '8px 6px',
             });
         tasks.forEach(task => {
             ul.append(