Список скидок Steam картинкой

И опять я со своими никому не нужными JS-скриптами... Хотя, стоп 😏

Возможно, на этот раз, он все таки кому-нибудь сгодится 🤔

Собственно назначение скрипта в заголовке, а так как ИнфоКот у нас постит скидки в Steam картинками, он наш основной клиент.

Собственно для использования, как обычно понадобится Tampermonkey (или аналог), устанавливаем в браузер, далее устанавливаем скрипт по ссылке (если автоматом не подхватится) любым удобным способом (Импорт из URL на вкладке Утилиты самый напрашивающийся).

После установки появится новая кнопка справа внизу на странице поиска в Steam, а также выделять игры их писка кликом по их изображениям.

Без выделения тоже будет работать, будут браться первые из списка, количество будет зависеть от настроек

После того как все отфильтровано, отсортировано и выделено, клацаем по кнопке и получаем что-то такое (или совсем не такое)

На скрине вариант настроек для ИнфоКота 😺

Ну а далее, листаем - кликом по стрелкам, сохраняем текущее - кликом по плюсу.

На выходе получаем что-то такое

Не знаю стоит ли описывать настройки (закомментированы в кнопке по умолчанию), рискнём пожалуй.

imgType: тип изображения, разные изображения (или их размеры) которые хранятся в Steam; может быть одним из h215, h192, h136, c45, c69, c87, c181, c353, l450; по умолчанию используется первый (header.jpg) colCount: количество колонок rowCount: количество строк sortField: поле сортировки; может быть одним из type (приложения, наборы, комплекты), name (имя), discount (скидка), final (финальная цена), original (цена без скидки), reviewPerc (рейтинг), reviewCount (количество обзоров); можно сочетать несколько сортировок перечислив их через запятую sortDescOrder: сортировка в обратном порядке если true; если используется несколько полей сортировки, то нужно использовать массив, элементы которого будут соответствовать полям mainWidth: ширина изображения в пикселях itemGutter: расстояние между изображениями в пикселях fntSize: размер шрифта в пикселях; это размер максимальный размер шрифта, от которого зависят некоторые другие размеры; этим размером отображается заголовок и процент скидки bgColor: основной цвет фона; здесь и в других цветовых настройках можно использовать разные определения цвета используемые в html (названия, hex, rgba, градиенты) headColor: цвет фона заголовка fntColor: цвет шрифта заголовка fntImport: ссылка для импорта шрифта (например с Google Fonts) fntFamily: название шрифта, если их несколько по ссылке или он не подцепился автоматически fntImportHeadOnly: применять импортированный шрифт только к заголовку если true

Да, это чуда дизайнерской мысли можно получить если раскомментировать все настройки, не изменяя их значения 🤪

UPD1: Забыл еще кое-что уточнить, есть бандлы (а может и не только) для которых путь к изображениям содержит уникальный идентификатор, для разных типов изображений свой идентификатор, поэтому я не могу получать для них изображения и они остаются не загруженными (чёрный прямоугольник с названием). Это в теории можно было бы как-то решить наверно, но... пока я просто дал возможность загружать свое изображение при клике по картинке. Также уточню, изображения должны быть с сайта Steam (shared.cloudflare.steamstatic.com или shared.akamai.steamstatic.com).

UPD2: Ширина изображения ограничена размерами окна, т.е. при низком разрешении не получится сделать больших изображений (как у меня на первой картинке), но... можно использовать масштаб в браузере =)

Знаю, что это мало кого заинтересует, но Кот, жду тебя здесь с комментариями, вот кстати кнопка специально для тебя, просто замени ею стандартную 😼

addButton({ btnText: 'Sale List to Image: InfoCat Edition', imgSrc: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="5 6 22 20"><g><ellipse cx="12.5" cy="9.5" rx="2.5" ry="3.5"/><ellipse cx="19.5" cy="9.5" rx="2.5" ry="3.5"/><ellipse cx="7.5" cy="16.5" rx="2.5" ry="3.5"/><ellipse cx="24.5" cy="16.5" rx="2.5" ry="3.5"/><path d="M19,20c-0.966-0.966-1-3-3-3s-2,2-3,3 s-4,1.069-4,3.5c0,1.381,1.119,2.5,2.5,2.5c1.157,0,3.684-1,4.5-1s3.343,1,4.5,1c1.381,0,2.5-1.119,2.5-2.5 C23,21.207,19.966,20.966,19,20z"/></g></svg>', onClick: () => {CreateModal({ colCount:2, fntColor: '#1e317d', headColor: '#fff', bgColor: '#76b8ff', fntImport: 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&display=swap', fntImportHeadOnly: true, })}, });

#steam #tampermonkey #скрипт #распродажи #скидки #steam_sm