|
GreyCollector
|
Сообщение #1
1 августа 2020 в 16:18
|
Гонщик 
20 |
Заметил, что даже при использовании визуальной полосы прогресса из KlavoTools я постоянно навожу курсор на картинку с "Задачей дня" чтобы узнать, сколько конкретно мне осталось пройти. Иногда каждый второй заезд, т.к. увлекался и забывал, сколько там было. Взял, да сделал свой скрипт, выводящий оставшееся количество заездов в углу картинки.  Любите конкретные цифры, но не любите их запоминать? Вот код скрипта, который будет вам их показывать постоянно (пока не выполните задачу): скрытый текст… // ==UserScript==
// @name KG_RemainingDailyRaces
// @namespace klavogonki
// @version 1.1.0
// @description Выводит оставшееся количество заездов для выполнения «Задачи дня»
// @author GreyCollector
// @match http*://klavogonki.ru/*
// ==/UserScript==
function setupObserver() {
window.MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
var target = document.querySelector('.daily-task');
if (!target) {
console.log('KG_RemainingDailyRaces: Панель задания не найдена, не могу продолжить.');
return false;
}
var observer = new MutationObserver(function(mutation) {
for (var i in mutation) {
if (mutation[i].attributeName == 'original-title') {
updateProgress();
}
}
});
// Never disconnect observer since progress will be updated immediately
// after a race and it would be nice to reflect this right away
observer.observe(target, {attributes: true});
return true;
}
/* Creates remaining races element */
function createRemainingRaces(gauge) {
var remainingRacesBackground = document.createElement('div');
var remainingRaces = document.createElement('div');
remainingRaces.id = 'daily-remaining-races';
remainingRacesBackground.style.position = "absolute";
remainingRacesBackground.style.width = "100%";
remainingRacesBackground.style.height = "100%";
remainingRacesBackground.style.display = "flex";
remainingRacesBackground.style.alignItems = "flex-start";
remainingRacesBackground.style.justifyContent = "flex-end";
remainingRaces.style.fontFamily = "tahoma, sans-serif";
remainingRaces.style.fontSize = "14px";
remainingRaces.style.fontWeight = "bold";
remainingRaces.style.display = "flex";
remainingRaces.style.justifyContent = "center";
remainingRaces.style.alignItems = "center";
remainingRaces.style.marginTop = "1px";
remainingRaces.style.marginRight = "1px";
remainingRaces.style.backgroundColor = "#F10";
remainingRaces.style.color = "white";
remainingRaces.style.borderRadius = "5px";
remainingRaces.style.padding = "0px 3px 1px 3px";
remainingRacesBackground.appendChild(remainingRaces);
gauge.appendChild(remainingRacesBackground);
return remainingRaces;
}
/* Returns element for Daily Task. Throws exception if it is not found */
function getDailyTaskGauge() {
var elements = document.getElementsByClassName('daily-task');
if (!elements.length) throw 'Элемент не найден.';
var progressBadge = elements[0];
return progressBadge;
}
/*
Returns daily progress figures: races completed and races to go.
If progress is not yet available (cusotm title is empty), returns null
*/
function getProgress(gauge) {
var customProps = gauge.getAttributeNames();
if (customProps.indexOf('original-title') < 0) throw 'Атрибут \'orignal-title\' не найден.';
var title = gauge.getAttribute('original-title');
if (!title) {
return null;
}
if (title === 'Завершено') {
return { done: 1, total: 1 };
}
var match = /Прогресс:\W(\d{1,2})\/(\d{1,2})/.exec(title);
if (!match || match.length != 3) throw 'Формат заголовка поменялся, невозможно распарсить.';
var done = parseInt(match[1]);
var total = parseInt(match[2]);
if (isNaN(done) || isNaN(total)) throw 'Формат заголовка поменялся, количество заездов не найдено.';
return {
done: done,
total: total
};
}
// Reflects progress on daily task gauge
function updateProgress() {
try {
var gauge = getDailyTaskGauge();
var progress = getProgress(gauge);
if (progress === null) {
return; // Progress is not there yet
}
let remainingRaces = document.getElementById('daily-remaining-races');
if (!progress || progress.done === progress.total) {
if (remainingRaces) {
remainingRaces.parentElement.remove();
}
return;
}
if (!remainingRaces) {
remainingRaces = createRemainingRaces(gauge);
}
remainingRaces.innerHTML = progress.total - progress.done;
} catch (e) {
console.log('KG_RemainingDailyRaces: Ошибка при обновлении. ' + e);
}
}
window.addEventListener("load", function() {
// Try to update progress first. On FireFox it is avaible on load
// whereas on Chromium it is updated later on
updateProgress();
setupObserver();
}, false); Если не по душе стиль "Индикация пропущенных сообщений", представляю новый - "В круге".  Код скрипта со стилем "В круге". скрытый текст… // ==UserScript==
// @name KG_RemainingDailyRaces
// @namespace klavogonki
// @version 1.1.0
// @description Выводит оставшееся количество заездов для выполнения «Задачи дня»
// @author GreyCollector
// @match http*://klavogonki.ru/*
// ==/UserScript==
function setupObserver() {
window.MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
var target = document.querySelector('.daily-task');
if (!target) {
console.log('KG_RemainingDailyRaces: Панель задания не найдена, не могу продолжить.');
return false;
}
var observer = new MutationObserver(function(mutation) {
for (var i in mutation) {
if (mutation[i].attributeName == 'original-title') {
updateProgress();
}
}
});
// Never disconnect observer since progress will be updated immediately
// after a race and it would be nice to reflect this right away
observer.observe(target, {attributes: true});
return true;
}
/* Creates remaining races element */
function createRemainingRaces(gauge) {
var remainingRacesBackground = document.createElement('div');
var remainingRaces = document.createElement('div');
remainingRaces.id = 'daily-remaining-races';
remainingRacesBackground.style.position = "absolute";
remainingRacesBackground.style.background = "linear-gradient(#3f71f9, #1752bd)";
remainingRacesBackground.style.left = "18px";
remainingRacesBackground.style.top = "10px";
remainingRacesBackground.style.width = "14px";
remainingRacesBackground.style.height = "24px";
remainingRacesBackground.style.display = "flex";
remainingRacesBackground.style.alignItems = "center";
remainingRacesBackground.style.justifyContent = "center";
remainingRaces.style.fontFamily = "tahoma, sans-serif";
remainingRaces.style.fontSize = "17px";
remainingRaces.style.fontWeight = "bold";
remainingRaces.style.display = "flex";
remainingRaces.style.justifyContent = "center";
remainingRaces.style.alignItems = "center";
remainingRaces.style.marginBottom = "1px";
remainingRaces.style.color = "white";
remainingRacesBackground.appendChild(remainingRaces);
gauge.appendChild(remainingRacesBackground);
return remainingRaces;
}
/* Returns element for Daily Task. Throws exception if it is not found */
function getDailyTaskGauge() {
var elements = document.getElementsByClassName('daily-task');
if (!elements.length) throw 'Элемент не найден.';
var progressBadge = elements[0];
return progressBadge;
}
/*
Returns daily progress figures: races completed and races to go.
If progress is not yet available (cusotm title is empty), returns null
*/
function getProgress(gauge) {
var customProps = gauge.getAttributeNames();
if (customProps.indexOf('original-title') < 0) throw 'Атрибут \'orignal-title\' не найден.';
var title = gauge.getAttribute('original-title');
if (!title) {
return null;
}
if (title === 'Завершено') {
return { done: 1, total: 1 };
}
var match = /Прогресс:\W(\d{1,2})\/(\d{1,2})/.exec(title);
if (!match || match.length != 3) throw 'Формат заголовка поменялся, невозможно распарсить.';
var done = parseInt(match[1]);
var total = parseInt(match[2]);
if (isNaN(done) || isNaN(total)) throw 'Формат заголовка поменялся, количество заездов не найдено.';
return {
done: done,
total: total
};
}
// Reflects progress on daily task gauge
function updateProgress() {
try {
var gauge = getDailyTaskGauge();
var progress = getProgress(gauge);
if (progress === null) {
return; // Progress is not there yet
}
let remainingRaces = document.getElementById('daily-remaining-races');
if (!progress || progress.done === progress.total) {
if (remainingRaces) {
remainingRaces.parentElement.remove();
}
return;
}
if (!remainingRaces) {
remainingRaces = createRemainingRaces(gauge);
}
remainingRaces.innerHTML = progress.total - progress.done;
} catch (e) {
console.log('KG_RemainingDailyRaces: Ошибка при обновлении. ' + e);
}
}
window.addEventListener("load", function() {
// Try to update progress first. On FireFox it is avaible on load
// whereas on Chromium it is updated later on
updateProgress();
setupObserver();
}, false); Восклицательный знак закрывается градиентом, соответствующим внутренности круга, а сверху по центру выводится число. Еще пара примеров для облегчения экспериментов. Заменить часть функции createRemainingRaces.  скрытый текст… remainingRacesBackground.style.position = "absolute";
remainingRacesBackground.style.width = "100%";
remainingRacesBackground.style.height = "100%";
remainingRacesBackground.style.display = "flex";
remainingRacesBackground.style.alignItems = "center";
remainingRacesBackground.style.justifyContent = "center";
remainingRaces.style.fontFamily = "tahoma, sans-serif";
remainingRaces.style.fontSize = "21px";
remainingRaces.style.fontWeight = "bold";
remainingRaces.style.display = "flex";
remainingRaces.style.justifyContent = "center";
remainingRaces.style.alignItems = "center";
remainingRaces.style.width = "80%";
remainingRaces.style.height = "80%";
remainingRaces.style.backgroundColor = "#6a7af8";
remainingRaces.style.color = "white";
remainingRaces.style.borderRadius = "15px";
remainingRaces.style.paddingBottom = "1px";  скрытый текст… remainingRacesBackground.style.position = "absolute";
remainingRacesBackground.style.width = "100%";
remainingRacesBackground.style.height = "100%";
remainingRacesBackground.style.display = "flex";
remainingRacesBackground.style.alignItems = "center";
remainingRacesBackground.style.justifyContent = "center";
remainingRaces.style.fontFamily = "tahoma, sans-serif";
remainingRaces.style.fontSize = "21px";
remainingRaces.style.fontWeight = "bold";
remainingRaces.style.display = "flex";
remainingRaces.style.justifyContent = "center";
remainingRaces.style.alignItems = "center";
remainingRaces.style.width = "100%";
remainingRaces.style.height = "100%";
remainingRaces.style.backgroundColor = "#6a7af8";
remainingRaces.style.color = "white";
remainingRaces.style.paddingBottom = "1px"; Скрипт может быть и заменой и дополнением полосы прогресса из KlavoTools. Друг другу они не мешают. Установка:1. Установите расширение Tampermonkey ( chrome, firefox). 2. Откройте панель управления расширением (кликнуть левой кнопкой по иконке расширения для вызова меню). 3. В панели управления нажмите на вкладку с плюсом - это создание нового скрипта. 4. Замените текст по-умолчанию на код скрипта. 5. Сохраните скрипт (Ctrl+S). После обновления страницы с Клавогонками скрипт начнет работать. Последний раз отредактировано 2 августа 2020 в 20:50 пользователем GreyCollector
|
|
pashkhan
|
Сообщение #2
1 августа 2020 в 16:32
|
Новичок 
96 |
О, класс! Полезная фишечка 
|
|
Анна_Банановна
|
Сообщение #3
1 августа 2020 в 17:55
|
Супермен 
66 |
О, как интересно!
А оформление циферки можно варьировать? (Подскажите, где :)). Просто красная цифра будет вводить в заблуждение (меня, по крайней мере), напоминая цифры о непрочитанных сообщениях.
|
|
GreyCollector
|
Сообщение #4
1 августа 2020 в 18:08
|
Гонщик
20 |
Анна_Банановна писал(а): О, как интересно!
А оформление циферки можно варьировать? (Подскажите, где :)). Просто красная цифра будет вводить в заблуждение (меня, по крайней мере), напоминая цифры о непрочитанных сообщениях. На это и расчет был :) А поменять можно в функции createRemainingRaces в строчке: remainingRaces.style.backgroundColor = "#F10"; Там дальше и цвет текста задается: remainingRaces.style.color = "white"; и др. настройки внешнего вида.
|
|
Анна_Банановна
|
Сообщение #5
1 августа 2020 в 19:05
|
Супермен
66 |
Спасибо! Попробую покопаться. :) Вот как себе смогла нахимичить, потыкав туда-сюда:  Последний раз отредактировано 1 августа 2020 в 19:32 пользователем Анна_Банановна
|
|
Лень
|
Сообщение #6
2 августа 2020 в 01:34
|
Кибергонщик 
80 |
одно из самых годных дополнений для кг за последнее время
|
|
ПАНЧЕР
|
Сообщение #7
2 августа 2020 в 02:20
|
Новичок 
1 |
Адаптация под тёмную тему remainingRaces.id = 'daily-remaining-races';
remainingRaces.style.position = 'absolute';
remainingRaces.style.backgroundColor = "#6a1a14";
remainingRaces.style.color = "#ee3d3d";
remainingRaces.style.fontFamily = "arial, sans-serif";
remainingRaces.style.fontSize = "25px";
remainingRaces.style.fontWeight = "bold";
remainingRaces.style.marginTop = "-35px";
remainingRaces.style.display = "flex";
remainingRaces.style.justifyContent = "center";
remainingRaces.style.alignItems = "center";
remainingRaces.style.height = "50px";
remainingRaces.style.width = "48px"; 
|
|
Анна_Банановна
|
Сообщение #8
2 августа 2020 в 11:40
|
Супермен
66 |
Напишите, пожалуйста, какие команды надо, если хочется какую-то фигуру ( круг, например, или квадрат со скругленными краями) в центре окошка для зд (поверх кружочка, который уже там есть). И чтобы надписи внутри тоже были по центру. Методом тыка, без знания команд, не получилось. :( Последний раз отредактировано 2 августа 2020 в 11:40 пользователем Анна_Банановна
|
|
GreyCollector
|
Сообщение #9
2 августа 2020 в 12:53
|
Гонщик
20 |
Обновил заглавный пост. Анна_Банановна навела на мысль, как можно было сделать по-другому.
|
|
madinko
|
Сообщение #10
2 августа 2020 в 12:54
|
Кибергонщик 
68 |
Залейте в клавотулз, спасибо за скрипт!
|
|
Анна_Банановна
|
Сообщение #11
2 августа 2020 в 13:21
|
Супермен
66 |
GreyCollector писал(а): Обновил заглавный пост. Анна_Банановна навела на мысль, как можно было сделать по-другому. Спасибо! Отлично смотрится! Правда, это не кружок наложен сверху, поэтому поэкспериментировать с цветом не получится. :( Последний раз отредактировано 2 августа 2020 в 13:35 пользователем Анна_Банановна
|
|
un4given
|
Сообщение #12
2 августа 2020 в 13:38
|
Клавокодер 
122 |
GreyCollector писал(а): представляю новый - "В круге". Так даже прикольнее: похоже на дорожный знак 
|
|
GreyCollector
|
Сообщение #13
2 августа 2020 в 16:45
|
Гонщик
20 |
un4given писал(а): GreyCollector писал(а): представляю новый - "В круге". Так даже прикольнее: похоже на дорожный знак Самому понравилось, как получилось  . Ещё пришлось следующего дня ждать, т.к. задачу дня уже выполнил и не мог протестировать градиент. P.S. Обновил скрипты. Теперь они отличаются только функцией createRemainingRaces. Добавил дополнительные примеры для экспериментов. панчер, можешь обновить версию для тёмной темы, а то у меня ее нет?
|
|
Glage
|
Сообщение #14
2 августа 2020 в 19:15
|
Профи 
7 |
Нубы в замешательстве. Добавте скрипт в клавотулс пожалуйста.
|
|
GreyCollector
|
Сообщение #15
2 августа 2020 в 20:56
|
Гонщик
20 |
Glage писал(а): Нубы в замешательстве. Добавте скрипт в клавотулс пожалуйста. Написал как пользоваться скриптом в конце заглавного поста.
|
|
Glage
|
Сообщение #16
2 августа 2020 в 21:16
|
Профи
7 |
Спасибо GreyCollector! 
|
