From 066bb3c89210cf5a10d28535482ebe1271b928fc Mon Sep 17 00:00:00 2001 From: ge-ku Date: Sat, 21 Jul 2018 15:38:13 +0300 Subject: [PATCH] Updated visual look of displayed bans on friends pages --- checkbans.js | 36 ++++++++++++++++++++++-------------- display.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ display.js | 3 ++- icons/banned.svg | 4 ++++ icons/clean.svg | 4 ++++ manifest.json | 14 +++++++++++--- 6 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 icons/banned.svg create mode 100644 icons/clean.svg diff --git a/checkbans.js b/checkbans.js index f098a4f..17b2e31 100644 --- 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 index 1da4348..a5a1845 100644 --- 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); } \ No newline at end of file diff --git a/display.js b/display.js index a319fd0..0374d7f 100644 --- 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 = `

This page will show only those bans which occured after you played together.

Extension records games periodically every few hours, they don't appear here immediately.

+

For complete CS:GO Match history click here.

With your own Steam API key extension will periodically scan every recorded game for recent bans.
Without the key it will only scan last 100 players once a day. You can set your API key in settings.

`; extensionInfo.innerHTML = InfoMessage; diff --git a/icons/banned.svg b/icons/banned.svg new file mode 100644 index 0000000..95cbd84 --- /dev/null +++ b/icons/banned.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/clean.svg b/icons/clean.svg new file mode 100644 index 0000000..0519a99 --- /dev/null +++ b/icons/clean.svg @@ -0,0 +1,4 @@ + + + + diff --git a/manifest.json b/manifest.json index 710110b..fbd1ac1 100644 --- 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"],