From 56bdec49633022af785b80552cbbc523ac626afb Mon Sep 17 00:00:00 2001 From: CJMAXiK Date: Sat, 27 Feb 2021 23:47:04 +0300 Subject: [PATCH] Quality of life fixes --- .eslintrc | 31 +++---- .gitignore | 5 +- source/cache.js | 10 ++- source/contentScripts/friends.js | 14 ++-- source/contentScripts/profile.js | 12 ++- source/css/friends.css | 31 ++++--- source/css/profile.css | 34 ++++---- source/options.css | 4 +- source/options.html | 88 +++++++++++--------- source/options.js | 6 +- source/templates/friend.hbs | 8 +- source/templates/invite.hbs | 20 ++--- source/templates/profile.hbs | 137 +++++++++++++++---------------- 13 files changed, 211 insertions(+), 189 deletions(-) diff --git a/.eslintrc b/.eslintrc index c0e5941..0c057a0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,16 +1,17 @@ { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "standard" - ], - "parserOptions": { - "ecmaVersion": 12, - "sourceType": "module" - }, - "globals": { - "chrome" - } -} \ No newline at end of file + "env": { + "browser": true, + "es6": true, + "webextensions": true + }, + "extends": [ + "standard" + ], + "parserOptions": { + "ecmaVersion": 12, + "sourceType": "module" + }, + "globals": { + "chrome": true + } +} diff --git a/.gitignore b/.gitignore index 40151f4..5113081 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ node_modules -distribution \ No newline at end of file +distribution + +# Idea files +/.idea/ diff --git a/source/cache.js b/source/cache.js index b3f76bb..1c2d81a 100644 --- a/source/cache.js +++ b/source/cache.js @@ -1,5 +1,8 @@ const writeToCache = (steamId, data, timeout) => { - localStorage.setItem(steamId, JSON.stringify({ data, timeout })) + localStorage.setItem(steamId, JSON.stringify({ + data, + timeout + })) } const readFromCache = async (steamId, callback) => { @@ -17,7 +20,10 @@ const readFromCache = async (steamId, callback) => { writeToCache(steamId, data, cacheTimeout) // Return with timeout 0 to indicate an updated value - return { data, timeout: 0 } + return { + data, + timeout: 0 + } } const removeExpiredItems = () => { diff --git a/source/contentScripts/friends.js b/source/contentScripts/friends.js index f7e6a8a..e44b786 100644 --- a/source/contentScripts/friends.js +++ b/source/contentScripts/friends.js @@ -28,10 +28,10 @@ const init = () => { } const warningMessage = () => { - const template = `
Due to API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK
` + const template = `
Due to Icon API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK
` const titleBarSelector = document.querySelectorAll('div.profile_friends.title_bar') - if (titleBarSelector) titleBarSelector[0].insertAdjacentHTML('beforeBegin', template) + if (titleBarSelector) titleBarSelector[0].insertAdjacentHTML('beforebegin', template) } const isSteamId = (steamId) => { @@ -56,9 +56,10 @@ const render = (mainSelector, targetSelector, template, key) => { } const blockContent = mainSelector.querySelector(targetSelector) - blockContent.insertAdjacentHTML('beforeEnd', template( + blockContent.insertAdjacentHTML('beforeend', template( { - ...player, iconURL: chrome.extension.getURL('icons/tmp.png') + ...player, + iconURL: chrome.extension.getURL('icons/tmp.png') } )) } @@ -72,7 +73,10 @@ new MutationObserver(() => { lastUrl = location.href onUrlChange() } -}).observe(document, { subtree: true, childList: true }) +}).observe(document, { + subtree: true, + childList: true +}) function onUrlChange () { init() diff --git a/source/contentScripts/profile.js b/source/contentScripts/profile.js index fbd1e17..9d7f722 100644 --- a/source/contentScripts/profile.js +++ b/source/contentScripts/profile.js @@ -59,7 +59,7 @@ const render = (player, options, isCached) => { } const mainSelector = 'div.profile_leftcol' - let mainTarget = 'beforeBegin' + let mainTarget = 'beforebegin' let selector = mainSelector if (!options.showFirstInProfile) { selector += ' > :last-child' @@ -70,7 +70,7 @@ const render = (player, options, isCached) => { selector = document.querySelector(selector) if (!selector) { selector = document.querySelector(mainSelector) - mainTarget = 'afterBegin' + mainTarget = 'afterbegin' } selector.insertAdjacentHTML(mainTarget, template( @@ -80,6 +80,14 @@ const render = (player, options, isCached) => { )) } +/** + * Describe Patreon tier for the player + * @param {Object} player + * @param {Object} player.patreon + * @param {Number} player.patreon.tierId + * @param {Number} player.patreon.currentPledge + * @return {*} + */ const currentTier = (player) => { let currentTier = null diff --git a/source/css/friends.css b/source/css/friends.css index 4e3cb59..bbf8274 100644 --- a/source/css/friends.css +++ b/source/css/friends.css @@ -1,35 +1,34 @@ .profile_friends .friend_block_v2 { - height: 69px !important; /* nice */ + height: 69px !important; /* nice */ } .player_avatar img { - width: auto !important; - height: 69px !important; /* nice */ + width: auto !important; + height: 69px !important; /* nice */ } .invite_block_details { - margin-top: 0 !important; + margin-top: 0 !important; } .invite_block_icon .playerAvatar { - width: 40px !important; - height: 40px !important; + width: 40px !important; + height: 40px !important; } .invite_block_icon .playerAvatar a img { - width: 38px !important; - height: 38px !important; + width: 38px !important; + height: 38px !important; } .tmp_banned { - float: initial !important; - color: #000 !important; - padding: 0 5px !important; - border-radius: 2px !important; - color: white !important; - background-color: #ca2842 !important; + float: initial !important; + padding: 0 5px !important; + border-radius: 2px !important; + color: white !important; + background-color: #ca2842 !important; } .max_width { - max-width: 100% !important; -} \ No newline at end of file + max-width: 100% !important; +} diff --git a/source/css/profile.css b/source/css/profile.css index 33dd0cc..ce99cd0 100644 --- a/source/css/profile.css +++ b/source/css/profile.css @@ -1,36 +1,36 @@ .tmp_banned_block { - background-color: #FF000020 !important; + background-color: #FF000020 !important; } div.tmp_block div.showcase_slot { - height: 180px !important; - padding-left: 189px !important; - margin-bottom: 0 !important; + height: 180px !important; + padding-left: 189px !important; + margin-bottom: 0 !important; } div.tmp_block div.favoritegroup_avatar { - width: 180px !important; - height: 180px !important; + width: 180px !important; + height: 180px !important; } div.tmp_block div.favoritegroup_avatar > a > img { - width: 100% !important; - height: auto !important; + width: 100% !important; + height: auto !important; } div.tmp_block div.favoritegroup_content { - height: 100% !important; + height: 100% !important; } div.tmp_block div.showcase_stat { - padding-bottom: 0 !important; + padding-bottom: 0 !important; } .tmp_banned { - float: right; - color: #000; - padding: 0 5px; - border-radius: 2px; - color: white !important; - background-color: #ca2842 !important; -} \ No newline at end of file + float: right; + color: #000; + padding: 0 5px; + border-radius: 2px; + color: white !important; + background-color: #ca2842 !important; +} diff --git a/source/options.css b/source/options.css index 9f5e9b3..8c82ec3 100644 --- a/source/options.css +++ b/source/options.css @@ -17,10 +17,10 @@ body.dark { } .content { - padding: 0px 20px; + padding: 0 20px; } .hr { padding-bottom: 10px; border-bottom: 1px solid var(--color-darkGrey); -} \ No newline at end of file +} diff --git a/source/options.html b/source/options.html index b1900b3..271c60d 100644 --- a/source/options.html +++ b/source/options.html @@ -1,4 +1,4 @@ - + @@ -10,54 +10,60 @@ -
-
-

Visibility in Steam

-
- Profile -
-
- Friends (including Blocked, Recently Played With) -
-
- Pending Invites -
+ +
+

Visibility in Steam

+
+ Profile
- -
-

Profile

-
- Show Discord Snowflake -
-
- Show Patreon info -
-
- Show as a first block in the profile -
+
+ Friends (including Blocked, Recently Played With) +
+
+ Pending Invites
+
-
-

Friends

-
- Full-width page -
+
+

Profile

+
+ Show Discord Snowflake +
+
+ Show Patreon info
- +
+ Show as a first block in the profile +
+
-
-
Settings will be saved immediately
-

- Version
- Source code, issues, - discussions | TruckersMP Forum - post -

+
+

Friends

+
+ Full-width page +
+ + +
+
Settings will be saved immediately
+

+ Version
+ + Source code, issues, discussions + | + TruckersMP Forum post + +

+
- \ No newline at end of file + diff --git a/source/options.js b/source/options.js index 82f919f..2fbc3e0 100644 --- a/source/options.js +++ b/source/options.js @@ -1,11 +1,11 @@ import optionsStorage from './options-storage.js' if (window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches) { + window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark') } -optionsStorage.syncForm('#options-form') +optionsStorage.syncForm('#options-form').catch(e => console.error(e)) // Links const links = document.getElementsByClassName('openURL') @@ -16,4 +16,4 @@ Array.from(links).forEach((element) => { }) }) -document.getElementById('version').innerHTML = chrome.app.getDetails().version +document.getElementById('version').innerHTML = chrome.runtime.getManifest().version diff --git a/source/templates/friend.hbs b/source/templates/friend.hbs index 5d946a2..7681faa 100644 --- a/source/templates/friend.hbs +++ b/source/templates/friend.hbs @@ -1,7 +1,7 @@ -
+
- {{#if id}}{{groupName}}{{else}}¯\_(ツ)_/¯{{/if}} + Icon {{#if id}}{{groupName}}{{else}}¯\_(ツ)_/¯{{/if}} {{#if banned}} -Banned -{{/if}} \ No newline at end of file + Banned +{{/if}} diff --git a/source/templates/invite.hbs b/source/templates/invite.hbs index 4700c15..2120885 100644 --- a/source/templates/invite.hbs +++ b/source/templates/invite.hbs @@ -1,11 +1,11 @@ -
+
- - - {{ groupName }} - - {{#if vtc}}{{#if vtc.inVTC}} | Member of - {{ vtc.name }} - {{/if}}{{/if}} - {{#if banned}} | Banned{{/if}} -
\ No newline at end of file + + + {{ groupName }} + + {{#if vtc}}{{#if vtc.inVTC}} | Member of + {{ vtc.name }} + {{/if}}{{/if}} + {{#if banned}} | Banned{{/if}} +
diff --git a/source/templates/profile.hbs b/source/templates/profile.hbs index 70f66bd..549a4ec 100644 --- a/source/templates/profile.hbs +++ b/source/templates/profile.hbs @@ -1,83 +1,78 @@
-
- - {{#if id}} - TruckersMP Info - {{else}} - No TruckersMP account ¯\_(ツ)_/¯ - {{/if}} - {{#if banned}} - Banned - {{/if}} -
+
+ Logo {{#if id}} + TruckersMP Info + {{else}} + No TruckersMP account ¯\_(ツ)_/¯ + {{/if}} + {{#if banned}} + Banned + {{/if}} +
+ {{#if id}}
-
-
-
-
- - - -
-
-
- - {{ name }} - - - - {{ groupName }} - -
+
+
+
+
+ + {{ nickname }}'s avatar + +
+
+
+ + {{ name }} + - {{ groupName }} +
- {{#if vtc}}{{#if vtc.inVTC}} -
- Member of - {{ vtc.name }} - -
- {{/if}}{{/if}} + {{#if vtc}}{{#if vtc.inVTC}} +
+ Member of {{ vtc.name }} +
+ {{/if}}{{/if}} - {{#if showPatreon}}{{#if patreon}}{{#with patreon}} - {{#unless hidden}}{{#if active}}{{#if currentTier}} -
- - Active patron: {{ currentTier }} - -
- {{/if}}{{/if}}{{/unless}} - {{/with}}{{/if}}{{/if}} + {{#if showPatreon}}{{#if patreon}}{{#with patreon}} + {{#unless hidden}}{{#if active}}{{#if currentTier}} +
+ + Active patron: {{ currentTier }} + +
+ {{/if}}{{/if}}{{/unless}} + {{/with}}{{/if}}{{/if}} - {{#if showDiscord}}{{#if discordSnowflake}} -
- Discord Snowflake: {{ discordSnowflake }} -
- {{/if}}{{/if}} + {{#if showDiscord}}{{#if discordSnowflake}} +
+ Discord Snowflake: {{ discordSnowflake }} +
+ {{/if}}{{/if}} - {{#if steamID}} -
- Steam ID: {{ steamID }} -
- {{/if}} + {{#if steamID}} +
+ Steam ID: {{ steamID }} +
+ {{/if}} -
-
-
{{ id }}
-
TMP ID
-
- {{#if bansCount}} -
-
{{bansCount}}
-
Active Bans
-
- {{/if}} -
-
-
+
+
+
{{ id }}
+
TMP ID
+ {{#if bansCount}} +
+
{{bansCount}}
+
Active Bans
+
+ {{/if}} +
+
+
+
- {{/if}} -
\ No newline at end of file + {{/if}} +