From b23480133051456af8e4cc932aa31b09bef6d29d Mon Sep 17 00:00:00 2001 From: Bycop Date: Wed, 18 Oct 2023 12:31:57 +0200 Subject: [PATCH 1/4] feat(csfloat): Add colors settings system --- css/popup.css | 27 +++++++++++++++++++++++++++ html/csfloat.html | 15 +++++++++++++++ src/@typings/ExtensionTypes.d.ts | 5 +++++ src/background.ts | 5 +++++ src/csfloat/content_script.ts | 6 +++--- src/popup.ts | 32 ++++++++++++++++++++++++++++++++ src/util/extensionsettings.ts | 3 +++ 7 files changed, 90 insertions(+), 3 deletions(-) diff --git a/css/popup.css b/css/popup.css index 86c5c62..2f04229 100644 --- a/css/popup.css +++ b/css/popup.css @@ -157,6 +157,33 @@ input[type='checkbox'] { margin-right: 15px; } +input[type="color"] { + width: 23px; + height: 23px; + border-radius: 5px; + margin-right: 15px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: none; + cursor: pointer; +} + +input[type="color"]::-webkit-color-swatch { + border-radius: 5px; + border: none; +} + +input[type="color"]::-moz-color-swatch { + border-radius: 5px; + border: none; +} + +input[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} + .ElementText { margin-left: 18px; color: white; diff --git a/html/csfloat.html b/html/csfloat.html index d6c0347..15bd599 100644 --- a/html/csfloat.html +++ b/html/csfloat.html @@ -94,4 +94,19 @@

Tab State Management

+ +
+
COLORS
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
\ No newline at end of file diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts index 7c27f49..4878b89 100644 --- a/src/@typings/ExtensionTypes.d.ts +++ b/src/@typings/ExtensionTypes.d.ts @@ -32,6 +32,11 @@ export namespace Extension { skbBuffDifference: boolean; skbListingAge: boolean; skbStickerPrices: boolean; + colors: { + profit: string; + loss: string; + neutral: string; + } }; export type CSGOTraderMapping = { diff --git a/src/background.ts b/src/background.ts index 05cda66..f097cfd 100644 --- a/src/background.ts +++ b/src/background.ts @@ -33,6 +33,11 @@ const defaultSettings: Extension.Settings = { skbBuffDifference: true, skbListingAge: true, skbStickerPrices: true, + colors: { + profit: "#008000", + loss: "#ce0000", + neutral: "#708090" + } }; // Check whether new version is installed diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts index 0e6088f..23fe2cc 100644 --- a/src/csfloat/content_script.ts +++ b/src/csfloat/content_script.ts @@ -1142,13 +1142,13 @@ async function addBuffPrice(item: CSFloat.FloatItem, container: Element, isPopou let backgroundColor; let differenceSymbol; if (difference < 0) { - backgroundColor = 'green'; + backgroundColor = extensionSettings.colors.profit; differenceSymbol = '-$'; } else if (difference > 0) { - backgroundColor = '#ce0000'; + backgroundColor = extensionSettings.colors.loss; differenceSymbol = '+$'; } else { - backgroundColor = 'slategrey'; + backgroundColor = extensionSettings.colors.neutral; differenceSymbol = '-$'; } diff --git a/src/popup.ts b/src/popup.ts index d168a66..036e352 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -54,6 +54,30 @@ function addListeners() { $('.MainContent').css('height', '528px'); $('.Warning').show(100); }); + // add listeners to all color pickers + $('input[type=color]').on('change', function () { + const attrName = $(this).attr('name'); + if (attrName) { + chrome.storage.local.get((data) => { + if (data.colors) { + data.colors[attrName] = $(this).val(); + chrome.storage.local.set({ + colors: data.colors, + }); + } + else { + chrome.storage.local.set({ + colors: { + [attrName]: $(this).val(), + }, + }); + } + }); + } + $('.SideBar').css('height', '528px'); + $('.MainContent').css('height', '528px'); + $('.Warning').show(100); + }); } const host_permissions = chrome.runtime.getManifest().host_permissions; @@ -99,6 +123,9 @@ function loadForSettings() { const showBuffPercentageDifference = document.getElementById('InputBuffPercentageDifference'); const topButton = document.getElementById('InputTopButton'); const useTabStates = document.getElementById('InputTabStates'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { if (data.enableCSFloat) { @@ -148,6 +175,11 @@ function loadForSettings() { } else { useTabStates.checked = false; } + if (data.colors) { + profitColor.value = data.colors.profit; + lossColor.value = data.colors.loss; + neutralColor.value = data.colors.neutral; + } }); } diff --git a/src/util/extensionsettings.ts b/src/util/extensionsettings.ts index 09cd887..1439c49 100644 --- a/src/util/extensionsettings.ts +++ b/src/util/extensionsettings.ts @@ -84,6 +84,9 @@ export async function initSettings(): Promise { if (data.skbStickerPrices) { extensionSettings.skbStickerPrices = Boolean(data.skbStickerPrices); } + if (data.colors) { + extensionSettings.colors = data.colors as Extension.Settings['colors']; + } }); // wait for settings to be loaded, takes about 1.5 seconds From 8433e1994e8030ae04d6143ee442330602ac588c Mon Sep 17 00:00:00 2001 From: Bycop Date: Wed, 18 Oct 2023 13:17:50 +0200 Subject: [PATCH 2/4] refactor: Add reset button for colors --- css/popup.css | 17 +++++++++++++++++ html/csfloat.html | 5 ++++- public/reset.svg | 1 + src/popup.ts | 13 +++++++++++++ 4 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 public/reset.svg diff --git a/css/popup.css b/css/popup.css index 2f04229..ca1e29d 100644 --- a/css/popup.css +++ b/css/popup.css @@ -345,6 +345,23 @@ input[type="color"]::-webkit-color-swatch-wrapper { color: lightskyblue; } +.ColorsHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.ResetColorsIcon { + width: 25px; + height: 25px; + margin-right: 15px; + display: inline-block; + vertical-align: middle; + filter: invert(82%) sepia(3%) saturate(242%) hue-rotate(202deg) brightness(85%) contrast(92%); + cursor: pointer; +} + #priceRefreshButton { background: var(--color-accent, #ff5722); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); diff --git a/html/csfloat.html b/html/csfloat.html index 15bd599..522d41e 100644 --- a/html/csfloat.html +++ b/html/csfloat.html @@ -96,7 +96,10 @@
-
COLORS
+
+ COLORS + +

Profit color

diff --git a/public/reset.svg b/public/reset.svg new file mode 100644 index 0000000..438c331 --- /dev/null +++ b/public/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/popup.ts b/src/popup.ts index 036e352..fdbe17a 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -78,6 +78,19 @@ function addListeners() { $('.MainContent').css('height', '528px'); $('.Warning').show(100); }); + // add listener to resetColors button + $('#resetColors').on('click', function () { + chrome.storage.local.set({ + colors: { + profit: '#008000', + loss: '#ce0000', + neutral: '#708090', + }, + }); + $('#InputProfitColor').val('#008000'); + $('#InputLossColor').val('#ce0000'); + $('#InputNeutralColor').val('#708090'); + }); } const host_permissions = chrome.runtime.getManifest().host_permissions; From bf5f44ddba7a839aa8b95f893bd8c8821d0a34c2 Mon Sep 17 00:00:00 2001 From: Bycop Date: Wed, 18 Oct 2023 13:56:43 +0200 Subject: [PATCH 3/4] refactor: Multi site colors configurations --- html/csfloat.html | 8 ++++---- src/@typings/ExtensionTypes.d.ts | 12 +++++++++--- src/csfloat/content_script.ts | 6 +++--- src/popup.ts | 32 +++++++++++++++++++++----------- 4 files changed, 37 insertions(+), 21 deletions(-) diff --git a/html/csfloat.html b/html/csfloat.html index 522d41e..dc0671f 100644 --- a/html/csfloat.html +++ b/html/csfloat.html @@ -98,18 +98,18 @@
COLORS - +

Profit color

- +

Loss color

- +

Neutral color

- +
\ No newline at end of file diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts index 4878b89..6bc038e 100644 --- a/src/@typings/ExtensionTypes.d.ts +++ b/src/@typings/ExtensionTypes.d.ts @@ -33,12 +33,18 @@ export namespace Extension { skbListingAge: boolean; skbStickerPrices: boolean; colors: { - profit: string; - loss: string; - neutral: string; + csfloat: IColors; + skinport: IColors; + skinbid: IColors; } }; + type IColors = { + profit: string; + loss: string; + neutral: string; + } + export type CSGOTraderMapping = { [name: string]: { steam: { diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts index 23fe2cc..d762026 100644 --- a/src/csfloat/content_script.ts +++ b/src/csfloat/content_script.ts @@ -1142,13 +1142,13 @@ async function addBuffPrice(item: CSFloat.FloatItem, container: Element, isPopou let backgroundColor; let differenceSymbol; if (difference < 0) { - backgroundColor = extensionSettings.colors.profit; + backgroundColor = extensionSettings.colors.csfloat.profit; differenceSymbol = '-$'; } else if (difference > 0) { - backgroundColor = extensionSettings.colors.loss; + backgroundColor = extensionSettings.colors.csfloat.loss; differenceSymbol = '+$'; } else { - backgroundColor = extensionSettings.colors.neutral; + backgroundColor = extensionSettings.colors.csfloat.neutral; differenceSymbol = '-$'; } diff --git a/src/popup.ts b/src/popup.ts index fdbe17a..b0b8d91 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -58,17 +58,21 @@ function addListeners() { $('input[type=color]').on('change', function () { const attrName = $(this).attr('name'); if (attrName) { + const [site, color] = attrName.split('-'); + chrome.storage.local.get((data) => { - if (data.colors) { - data.colors[attrName] = $(this).val(); + if (data.colors && data.colors[site]) { + data.colors[site][color] = $(this).val(); chrome.storage.local.set({ - colors: data.colors, + colors: data.colors }); } else { chrome.storage.local.set({ colors: { - [attrName]: $(this).val(), + [site]: { + [color]: $(this).val() + } }, }); } @@ -80,11 +84,17 @@ function addListeners() { }); // add listener to resetColors button $('#resetColors').on('click', function () { + const attrSite = $(this).attr('site'); + + if (!attrSite) return; + chrome.storage.local.set({ colors: { - profit: '#008000', - loss: '#ce0000', - neutral: '#708090', + [attrSite]: { + profit: '#008000', + loss: '#ce0000', + neutral: '#708090' + } }, }); $('#InputProfitColor').val('#008000'); @@ -188,10 +198,10 @@ function loadForSettings() { } else { useTabStates.checked = false; } - if (data.colors) { - profitColor.value = data.colors.profit; - lossColor.value = data.colors.loss; - neutralColor.value = data.colors.neutral; + if (data.colors?.csfloat) { + profitColor.value = data.colors.csfloat.profit; + lossColor.value = data.colors.csfloat.loss; + neutralColor.value = data.colors.csfloat.neutral; } }); } From 2a4eea8a8f79836cc5af4a29122d574480aa9233 Mon Sep 17 00:00:00 2001 From: Bycop Date: Wed, 18 Oct 2023 15:16:54 +0200 Subject: [PATCH 4/4] refactor: Typings & popup script Add skinbid & skinport color settings --- html/skinbid.html | 18 ++++++++++ html/skinport.html | 18 ++++++++++ src/@typings/ExtensionTypes.d.ts | 14 ++++---- src/background.ts | 20 ++++++++--- src/popup.ts | 59 +++++++++++++++++++++----------- src/skinbid/content_script.ts | 2 +- src/skinport/content_script.ts | 4 +-- 7 files changed, 102 insertions(+), 33 deletions(-) diff --git a/html/skinbid.html b/html/skinbid.html index 7b8803f..38724d4 100644 --- a/html/skinbid.html +++ b/html/skinbid.html @@ -42,4 +42,22 @@
+
+
+ COLORS + +
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
+

More features coming soon!

diff --git a/html/skinport.html b/html/skinport.html index c5ef52e..7aa87dd 100644 --- a/html/skinport.html +++ b/html/skinport.html @@ -75,4 +75,22 @@

Low and high floats in respect to each condition will get colored. 0.000X and 0.999X floats get the most prominent coloring.

+ +
+
+ COLORS + +
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
\ No newline at end of file diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts index 6bc038e..7ddccaa 100644 --- a/src/@typings/ExtensionTypes.d.ts +++ b/src/@typings/ExtensionTypes.d.ts @@ -32,19 +32,21 @@ export namespace Extension { skbBuffDifference: boolean; skbListingAge: boolean; skbStickerPrices: boolean; - colors: { - csfloat: IColors; - skinport: IColors; - skinbid: IColors; - } + colors: IColorsSites }; - type IColors = { + export type IColors = { profit: string; loss: string; neutral: string; } + export type IColorsSites = { + csfloat: IColors; + skinport: IColors; + skinbid: IColors; + } + export type CSGOTraderMapping = { [name: string]: { steam: { diff --git a/src/background.ts b/src/background.ts index f097cfd..85b789e 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,6 +1,6 @@ import { Extension } from './@typings/ExtensionTypes'; -const defaultSettings: Extension.Settings = { +export const defaultSettings: Extension.Settings = { enableCSFloat: true, autorefresh: true, stickerPrices: true, @@ -34,9 +34,21 @@ const defaultSettings: Extension.Settings = { skbListingAge: true, skbStickerPrices: true, colors: { - profit: "#008000", - loss: "#ce0000", - neutral: "#708090" + csfloat: { + profit: "#008000", + loss: "#ce0000", + neutral: "#708090" + }, + skinport: { + profit: "#008000", + loss: "#ce0000", + neutral: "#000000" + }, + skinbid: { + profit: "#0cb083", + loss: "#ce0000", + neutral: "#000000" + } } }; diff --git a/src/popup.ts b/src/popup.ts index b0b8d91..b79aa17 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -1,4 +1,5 @@ -import { refreshPrices } from './background'; +import { defaultSettings, refreshPrices } from './background'; +import { Extension } from './@typings/ExtensionTypes'; const permissionsButton = document.getElementsByClassName('PermissionsButton')[0]; @@ -84,22 +85,24 @@ function addListeners() { }); // add listener to resetColors button $('#resetColors').on('click', function () { - const attrSite = $(this).attr('site'); + const defaultColors = defaultSettings.colors; + const attrSite = $(this).attr('site') as keyof Extension.IColorsSites; - if (!attrSite) return; + if (!attrSite || !defaultColors[attrSite]) return; - chrome.storage.local.set({ - colors: { - [attrSite]: { - profit: '#008000', - loss: '#ce0000', - neutral: '#708090' - } - }, + chrome.storage.local.get((data) => { + if (data.colors) { + data.colors[attrSite] = defaultColors[attrSite]; + + chrome.storage.local.set({ + colors: data.colors, + }); + } }); - $('#InputProfitColor').val('#008000'); - $('#InputLossColor').val('#ce0000'); - $('#InputNeutralColor').val('#708090'); + + $('#InputProfitColor').val(defaultColors[attrSite].profit); + $('#InputLossColor').val(defaultColors[attrSite].loss); + $('#InputNeutralColor').val(defaultColors[attrSite].neutral); }); } @@ -198,7 +201,7 @@ function loadForSettings() { } else { useTabStates.checked = false; } - if (data.colors?.csfloat) { + if (data.colors.csfloat) { profitColor.value = data.colors.csfloat.profit; lossColor.value = data.colors.csfloat.loss; neutralColor.value = data.colors.csfloat.neutral; @@ -213,6 +216,9 @@ function loadForSkinport() { const skinportSteamPrice = document.getElementById('SkinportSteamPrice'); const skinportInputBuffDifference = document.getElementById('SkinportInputBuffDifference'); const skinportFloatColoring = document.getElementById('SkinportFloatColoring'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { if (data.enableSkinport) { @@ -254,6 +260,11 @@ function loadForSkinport() { } else { skinportFloatColoring.checked = false; } + if (data.colors.skinport) { + profitColor.value = data.colors.skinport.profit; + lossColor.value = data.colors.skinport.loss; + neutralColor.value = data.colors.skinport.neutral; + } }); } @@ -282,11 +293,14 @@ function loadForAbout() { } function loadForSkinbid() { - let skinbidEnable = document.getElementById('InputSkinbid'); - let skinbidPriceReference = document.getElementById('SkinbidPriceReference'); - let skinbidInputBuffDifference = document.getElementById('SkinbidInputBuffDifference'); - let skinbidListingAge = document.getElementById('SkinbidListingAge'); - let skinbidStickerPrices = document.getElementById('SkinbidStickerPrices'); + const skinbidEnable = document.getElementById('InputSkinbid'); + const skinbidPriceReference = document.getElementById('SkinbidPriceReference'); + const skinbidInputBuffDifference = document.getElementById('SkinbidInputBuffDifference'); + const skinbidListingAge = document.getElementById('SkinbidListingAge'); + const skinbidStickerPrices = document.getElementById('SkinbidStickerPrices'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { console.log(data); @@ -313,6 +327,11 @@ function loadForSkinbid() { } else { skinbidListingAge.checked = false; } + if (data.colors.skinbid) { + profitColor.value = data.colors.skinbid.profit; + lossColor.value = data.colors.skinbid.loss; + neutralColor.value = data.colors.skinbid.neutral; + } }); } diff --git a/src/skinbid/content_script.ts b/src/skinbid/content_script.ts index cf84f7b..137d78f 100644 --- a/src/skinbid/content_script.ts +++ b/src/skinbid/content_script.ts @@ -298,7 +298,7 @@ async function addBuffPrice(item: Skinbid.HTMLItem, container: Element, selector discountContainer = discountSpan; } discountContainer.className += ' betterfloat-sale-tag'; - discountContainer.style.color = difference == 0 ? 'black' : difference < 0 ? '#0cb083' : '#ce0000'; + discountContainer.style.color = difference == 0 ? extensionSettings.colors.skinbid.neutral : difference < 0 ? extensionSettings.colors.skinbid.profit : extensionSettings.colors.skinbid.loss; discountContainer.style.fontWeight = '400'; discountContainer.style.fontSize = '14px'; discountContainer.textContent = difference == 0 ? `-${currencySymbol}0` : (difference > 0 ? '+' : '-') + currencySymbol + Math.abs(difference).toFixed(2); diff --git a/src/skinport/content_script.ts b/src/skinport/content_script.ts index 9a811ca..1e3696c 100644 --- a/src/skinport/content_script.ts +++ b/src/skinport/content_script.ts @@ -409,7 +409,7 @@ async function adjustItemPage(container: Element) { const newContainer = document.createElement('div'); const saleTag = document.createElement('span'); newContainer.className = 'ItemPage-discount betterfloat-discount-container'; - newContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? 'black' : difference < 0 ? 'green' : '#ce0000'})`; + newContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? extensionSettings.colors.skinport.neutral : difference < 0 ? extensionSettings.colors.skinport.profit : extensionSettings.colors.skinport.loss})`; newContainer.style.transform = 'skewX(-15deg)'; newContainer.style.borderRadius = '3px'; newContainer.style.paddingTop = '2px'; @@ -763,7 +763,7 @@ async function addBuffPrice(item: Skinport.Listing, container: Element) { const saleTag = discountContainer.firstChild; if (item.price !== 0 && saleTag && tooltipLink && !discountContainer.querySelector('.betterfloat-sale-tag')) { saleTag.className = 'sale-tag betterfloat-sale-tag'; - discountContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? 'black' : difference < 0 ? 'green' : '#ce0000'})`; + discountContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? extensionSettings.colors.skinport.neutral : difference < 0 ? extensionSettings.colors.skinport.profit : extensionSettings.colors.skinport.loss})`; saleTag.textContent = difference == 0 ? `-${currencySymbol}0` : (difference > 0 ? '+' : '-') + currencySymbol + Math.abs(difference).toFixed(2); } } else {