Improve slot markers

package.json

@@ -15,10 +15,10 @@
     "coverage": "nyc mocha",
     "build:dev": "webpack",
     "build": "webpack --env.production",
-    "format": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write '{src,tests}/**/*.{ts,js}'",
+    "format": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --quote-props consistent --write '{src,tests}/**/*.{ts,js}'",
-    "format-check": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --check '{src,tests}/**/*.{ts,js}'",
+    "format-check": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --quote-props consistent --check '{src,tests}/**/*.{ts,js}'",
-    "format-vue": "prettier --tab-width=2 --print-width 120 --single-quote --trailing-comma es5 --write '{src,tests}/**/*.vue'",
+    "format-vue": "prettier --tab-width=2 --print-width 120 --single-quote --trailing-comma es5 --quote-props consistent --write '{src,tests}/**/*.vue'",
-    "format-wp": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write 'webpack.config.js'"
+    "format-wp": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --quote-props consistent --write 'webpack.config.js'"
   },
   "devDependencies": {
     "@types/chai": "^4.2.11",

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)
+        const upCount = buildingIds.filter(id => id === slot.buildId).length;
-            .find('.labelLayer')
+        const $slotEl = jQuery(slot.el);
-            .text();
+        const $labelEl = $slotEl.find('.labelLayer');
-        jQuery(slot.el)
+        const oldLabel = $labelEl.text();
-            .find('.labelLayer')
+        $labelEl.text(slot.buildId + ':' + oldLabel + (upCount > 0 ? '+' + upCount : ''));
-            .text(slot.buildId + ':' + oldLabel);
+        $slotEl.css({ 'border-radius': '20%', 'width': upCount > 0 ? '56px' : '42px' });
-        const inQueue = buildingIds.includes(slot.buildId);
+        $labelEl.css({
-        if (inQueue) {
+            'border-radius': '10%',
-            jQuery(slot.el).css({
+            '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,
+                'left': 0,
-                top: '40px',
+                'top': '40px',
-                color: 'black',
+                'color': 'black',
                 'z-index': '9999',
-                padding: '8px 6px',
+                'padding': '8px 6px',
             });
         tasks.forEach(task => {
             ul.append(