Quality of life fixes

cjmaxik · Feb 27, 2021 · 56bdec4 · 56bdec4
1 parent 286dbcf
commit 56bdec4
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 189 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,16 +1,17 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "standard"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "globals": {
-        "chrome"
-    }
-}
+  "env": {
+    "browser": true,
+    "es6": true,
+    "webextensions": true
+  },
+  "extends": [
+    "standard"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "globals": {
+    "chrome": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,5 @@
 node_modules
-distribution
+distribution
+
+# Idea files
+/.idea/
diff --git 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
@@ -28,10 +28,10 @@ const init = () => {
 }
 
 const warningMessage = () => {
-  const template = `<div class="search_results_none">Due to <img src="${chrome.extension.getURL('icons/tmp.png')}"> API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK</div>`
+  const template = `<div class="search_results_none">Due to <img src="${chrome.extension.getURL('icons/tmp.png')}" alt="Icon"> API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK</div>`
   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
@@ -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
@@ -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;
-}
+  max-width: 100% !important;
+}
diff --git 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;
-}
+  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
@@ -17,10 +17,10 @@ body.dark {
 }
 
 .content {
-  padding: 0px 20px;
+  padding: 0 20px;
 }
 
 .hr {
   padding-bottom: 10px;
   border-bottom: 1px solid var(--color-darkGrey);
-}
+}
diff --git a/source/options.html b/source/options.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
@@ -10,54 +10,60 @@
 </head>
 
 <body>
-  <form id="options-form">
-    <div class="content hr">
-      <h4>Visibility in Steam</h4>
-      <div>
-        <input type="checkbox" name="showInProfile"> Profile
-      </div>
-      <div>
-        <input type="checkbox" name="showInFriends"> Friends <small>(including Blocked, Recently Played With)</small>
-      </div>
-      <div>
-        <input type="checkbox" name="showInInvites"> Pending Invites
-      </div>
+<form id="options-form">
+  <div class="content hr">
+    <h4>Visibility in Steam</h4>
+    <div>
+      <input type="checkbox" name="showInProfile"> Profile
     </div>
-
-    <div class="content hr">
-      <h4>Profile</h4>
-      <div>
-        <input type="checkbox" name="showDiscord"> Show Discord Snowflake
-      </div>
-      <div>
-        <input type="checkbox" name="showPatreon"> Show Patreon info
-      </div>
-      <div>
-        <input type="checkbox" name="showFirstInProfile"> Show as a first block in the profile
-      </div>
+    <div>
+      <input type="checkbox" name="showInFriends"> Friends <small>(including Blocked, Recently Played With)</small>
+    </div>
+    <div>
+      <input type="checkbox" name="showInInvites"> Pending Invites
     </div>
+  </div>
 
-    <div class="content hr">
-      <h4>Friends</h4>
-      <div>
-        <input type="checkbox" name="friendsMaxWidth"> Full-width page
-      </div>
+  <div class="content hr">
+    <h4>Profile</h4>
+    <div>
+      <input type="checkbox" name="showDiscord"> Show Discord Snowflake
+    </div>
+    <div>
+      <input type="checkbox" name="showPatreon"> Show Patreon info
     </div>
-  </form>
+    <div>
+      <input type="checkbox" name="showFirstInProfile"> Show as a first block in the profile
+    </div>
+  </div>
 
-  <div class="text-center">
-    <h5>Settings will be saved immediately</h5>
-    <p>
-      Version <span id="version"></span><br />
-      <a href="#" class="openURL" data-href="https://github.com/cjmaxik/truckersmp-steam-helper">Source code, issues,
-        discussions</a> | <a href="#" class="openURL"
-        data-href="https://forum.truckersmp.com/index.php?/topic/102560-truckersmp-steam-helper/">TruckersMP Forum
-        post</a>
-    </p>
+  <div class="content hr">
+    <h4>Friends</h4>
+    <div>
+      <input type="checkbox" name="friendsMaxWidth"> Full-width page
+    </div>
   </div>
+</form>
+
+<div class="text-center">
+  <h5>Settings will be saved immediately</h5>
+  <p>
+    Version <span id="version"></span><br/>
+    <a
+      href="#"
+      class="openURL"
+      data-href="https://github.com/cjmaxik/truckersmp-steam-helper"
+    >
+      Source code, issues, discussions
+    </a> | <a href="#" class="openURL"
+              data-href="https://forum.truckersmp.com/index.php?/topic/102560-truckersmp-steam-helper/">
+    TruckersMP Forum post
+  </a>
+  </p>
+</div>
 
 </body>
 <script src="browser-polyfill.min.js"></script>
 <script src="options.js"></script>
 
-</html>
+</html>
diff --git 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
@@ -1,7 +1,7 @@
-<br />
+<br/>
 <span class="friend_small_text" style="color: {{#if id}}{{ groupColor }}{{else}}#898989{{/if}} !important;">
-    <img src="{{ iconURL }}" width="10px"> {{#if id}}{{groupName}}{{else}}¯\_(ツ)_/¯{{/if}}
+    <img src="{{ iconURL }}" width="10px" alt="Icon"> {{#if id}}{{groupName}}{{else}}¯\_(ツ)_/¯{{/if}}
 </span>
 {{#if banned}}
-<span class="em_count tmp_banned">Banned</span>
-{{/if}}
+  <span class="em_count tmp_banned">Banned</span>
+{{/if}}