Improve slot markers

This commit is contained in:
Anton Vakhrushev 2020-05-03 14:50:31 +03:00
parent e88d1380c5
commit d2d5a039f6
4 changed files with 27 additions and 19 deletions

View File

@ -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-check": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --check '{src,tests}/**/*.{ts,js}'",
"format-vue": "prettier --tab-width=2 --print-width 120 --single-quote --trailing-comma es5 --write '{src,tests}/**/*.vue'",
"format-wp": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write 'webpack.config.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 --quote-props consistent --check '{src,tests}/**/*.{ts,js}'",
"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 --quote-props consistent --write 'webpack.config.js'"
},
"devDependencies": {
"@types/chai": "^4.2.11",

View File

@ -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,

View File

@ -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%)',
});
}

View File

@ -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(