Updated visual look of displayed bans on friends pages

ge-ku · Jul 21, 2018 · 066bb3c · 066bb3c
1 parent 896f1f8
commit 066bb3c
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 18 deletions.
diff --git a/checkbans.js b/checkbans.js
@@ -34,25 +34,33 @@ checkBans = () => {
                     playerEls.forEach(playerEl => {
                         let verdict = '';
                         let verdictEl = document.createElement('div');
-                        if (player.NumberOfVACBans > 0) {
-                            verdict += 'VAC';
+                        let icon = '';
+                        verdictEl.className = 'banchecker-verdict';
+                        if (player.NumberOfVACBans > 0 || player.NumberOfGameBans > 0) {
+                            verdictEl.classList.add('banned');
+                            icon = 'banned.svg';
+                            verdict = `${player.NumberOfVACBans > 0 ? `${player.NumberOfVACBans} VAC`: ''}`
+                                    + `${player.NumberOfVACBans > 0 && player.NumberOfGameBans > 0 ? ' & ' : ''}`
+                                    + `${player.NumberOfGameBans > 0 ? `${player.NumberOfGameBans} Game`: ''}`
+                                    + ` ban${player.NumberOfVACBans + player.NumberOfGameBans > 1 ? 's' : ''} on record\n`
+                                    + `Last ban occured ${player.DaysSinceLastBan} day${player.DaysSinceLastBan > 1 ? 's' : ''} ago`;
                         }
-                        if (player.NumberOfGameBans > 0) {
-                            if (verdict) verdict += ' & ';
-                            verdict += 'Game Ban';
-                        } 
                         if (!verdict) {
+                            verdictEl.classList.add('clean');
                             if (greentext) {
+                                icon = 'clean.svg';
                                 verdict = 'No bans for this player';
-                                verdictEl.style.color = 'green';
-                            }                            
-                        } else {
-                            verdict += ` ${player.DaysSinceLastBan} day${player.DaysSinceLastBan > 1 ? 's' : ''} ago.`;
-                            verdictEl.style.color = 'red';
-                        }
+                            }
+                        }                         
                         if (verdict) {
-                            playerEl.querySelector('.friend_block_content br').remove();
-                            verdictEl.textContent = verdict;
+                            const verdictElIcon = document.createElement('div');
+                            const verdictElIconImg = document.createElement('img');
+                            verdictElIconImg.src = chrome.extension.getURL(`icons/${icon}`);
+                            verdictElIcon.appendChild(verdictElIconImg);
+                            const verdictElText = document.createElement('span');
+                            verdictElText.textContent = verdict;
+                            verdictEl.appendChild(verdictElIcon);
+                            verdictEl.appendChild(verdictElText);
                             playerEl.querySelector('.friend_block_content').appendChild(verdictEl);
                         }
                     });

diff --git a/display.css b/display.css
@@ -106,4 +106,51 @@
     background-color: #66c0f4;
     border-color: #66c0f4;
     color: #fff;
+  }
+
+  .banchecker-verdict {
+    position: absolute;
+    color: #ebebeb;
+    top: 0;
+    right: 0;
+    width: auto;
+    max-width: 28px;
+    height: 100%;
+    transition: all .3s;
+    z-index: 10;
+    cursor: default;
+    display: flex;
+    align-items: center;
+  }
+
+  .banchecker-verdict:hover {
+    max-width: 235px;
+  }
+
+  .banchecker-verdict div {
+    flex: 0 0 28px;
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .banchecker-verdict:hover div {
+    flex: 0 0 0;
+  }
+
+  .banchecker-verdict span {
+    padding: 10px;
+    white-space: pre;
+  }
+
+  .banchecker-verdict.banned {
+    background-color: rgba(255, 0, 0, .4);
+  }
+  .banchecker-verdict.banned:hover {
+    background-color: rgba(255, 0, 0, .9);
+  }
+  .banchecker-verdict.clean {
+    background-color: rgba(0, 255, 0, .2);
+  }
+  .banchecker-verdict.clean:hover {
+    background-color: rgba(0, 150, 0, .9);
   }
diff --git a/display.js b/display.js
@@ -4,7 +4,7 @@ var gamesShowingIndex = 0; // Index of a last game shown
 // Add links to Ban Checker page
 var banCheckerButton = document.createElement('a');
 banCheckerButton.setAttribute('href', '//steamcommunity.com/my/friends/banchecker');
-banCheckerButton.className = 'icon_item icon_recent_friends banchecker';
+banCheckerButton.className = 'icon_item icon_all_groups banchecker';
 banCheckerButton.dataset.navid = 'banchecker';
 var banCheckerButtonText = document.createElement('span');
 banCheckerButtonText.appendChild(document.createTextNode('Ban Checker'));
@@ -318,6 +318,7 @@ function renderBanCheker() {
   extensionInfo.style.paddingBottom = "1.5em";
   var InfoMessage = `<p>This page will show only those bans which occured after you played together.</p>
                      <p>Extension records games periodically every few hours, they don't appear here immediately.</p>
+                     <p>For complete CS:GO Match history click <a href="https://steamcommunity.com/my/gcpd/730?tab=matchhistorycompetitive">here</a>.
                      <p>With your own Steam API key extension will periodically scan every recorded game for recent bans.<br>
                      Without the key it will only scan last 100 players once a day. You can set your API key in <span class="openSettings" style="text-decoration:underline; cursor:pointer">settings</span>.</p>`;
   extensionInfo.innerHTML = InfoMessage;

diff --git a/icons/banned.svg b/icons/banned.svg
diff --git a/icons/clean.svg b/icons/clean.svg
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Ban Checker for Steam",
   "description": "Automatically check bans of people you recently played with, your friends, and group members.",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "icons": { "16": "icons/ow16.png",
 			"48": "icons/ow48.png",
 			"128": "icons/ow128.png" },
@@ -15,14 +15,22 @@
     "page": "options.html",
     "chrome_style": true },
   "web_accessible_resources": [
-    "options.html"
+    "options.html",
+    "icons/*.svg"
   ],
   "content_scripts": [
 	{
     "js": [ "checkbans.js", "options.js", "display.js" ],
     "css": [ "display.css" ],
 		"run_at": "document_end",
-		"matches": [ "*://steamcommunity.com/id/*/friends*", "*://steamcommunity.com/profiles/*/friends*" ]
+		"matches": [
+      "*://steamcommunity.com/id/*/friends*",
+      "*://steamcommunity.com/profiles/*/friends*",
+      "*://steamcommunity.com/id/*/following*",
+      "*://steamcommunity.com/profiles/*/following*",
+      "*://steamcommunity.com/id/*/groups*",
+      "*://steamcommunity.com/profiles/*/groups*"
+    ]
 	},
   {
     "js": [ "checkbans-old.js"],