Merge pull request #33 from bycop/main

feat: Color settings system all platforms
GODrums · Oct 19, 2023 · 3362254 · 3362254
2 parents 9907fa3 + d1e5042
commit 3362254
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 13 deletions.
diff --git 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;
@@ -318,6 +345,23 @@ input[type='checkbox'] {
     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
@@ -94,4 +94,22 @@
         <p class="ElementText">Tab State Management</p>
         <input type="checkbox" id="InputTabStates" name="useTabStates" checked />
     </div>
+</div>
+<div class="Group">
+    <div class="GroupHeader ColorsHeader">
+        <span>COLORS</span>
+        <img src="../public/reset.svg" class="ResetColorsIcon" id="resetColors" title="Reset to default colors" site="csfloat" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #008000">Profit color</p>
+        <input type="color" id="InputProfitColor" name="csfloat-profit" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #ce0000">Loss color</p>
+        <input type="color" id="InputLossColor" name="csfloat-loss" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #708090">Neutral color</p>
+        <input type="color" id="InputNeutralColor" name="csfloat-neutral" />
+    </div>
 </div>
diff --git a/html/skinbid.html b/html/skinbid.html
@@ -42,4 +42,22 @@
         <input type="checkbox" id="SkinbidListingAge" name="skbListingAge" checked />
     </div>
 </div>
+<div class="Group">
+    <div class="GroupHeader ColorsHeader">
+        <span>COLORS</span>
+        <img src="../public/reset.svg" class="ResetColorsIcon" id="resetColors" title="Reset to default colors" site="skinbid" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #008000">Profit color</p>
+        <input type="color" id="InputProfitColor" name="skinbid-profit" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #ce0000">Loss color</p>
+        <input type="color" id="InputLossColor" name="skinbid-loss" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #708090">Neutral color</p>
+        <input type="color" id="InputNeutralColor" name="skinbid-neutral" />
+    </div>
+</div>
 <p style="text-align: center; color: white">More features coming soon!</p>
diff --git a/html/skinport.html b/html/skinport.html
@@ -75,4 +75,22 @@
         </div>
         <p class="ElementDescription">Low and high floats in respect to each condition will get colored. 0.000X and 0.999X floats get the most prominent coloring.</p>
     </div>
+</div>
+<div class="Group">
+    <div class="GroupHeader ColorsHeader">
+        <span>COLORS</span>
+        <img src="../public/reset.svg" class="ResetColorsIcon" id="resetColors" title="Reset to default colors" site="skinport" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #008000">Profit color</p>
+        <input type="color" id="InputProfitColor" name="skinport-profit" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #ce0000">Loss color</p>
+        <input type="color" id="InputLossColor" name="skinport-loss" />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText" title="Default: #708090">Neutral color</p>
+        <input type="color" id="InputNeutralColor" name="skinport-neutral" />
+    </div>
 </div>
diff --git a/public/reset.svg b/public/reset.svg
diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts
@@ -32,8 +32,21 @@ export namespace Extension {
         skbBuffDifference: boolean;
         skbListingAge: boolean;
         skbStickerPrices: boolean;
+        colors: IColorsSites
     };
 
+    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
@@ -1,6 +1,6 @@
 import { Extension } from './@typings/ExtensionTypes';
 
-const defaultSettings: Extension.Settings = {
+export const defaultSettings: Extension.Settings = {
     enableCSFloat: true,
     autorefresh: true,
     stickerPrices: true,
@@ -33,6 +33,23 @@ const defaultSettings: Extension.Settings = {
     skbBuffDifference: true,
     skbListingAge: true,
     skbStickerPrices: true,
+    colors: {
+        csfloat: {
+            profit: "#008000",
+            loss: "#ce0000",
+            neutral: "#708090"
+        },
+        skinport: {
+            profit: "#008000",
+            loss: "#ce0000",
+            neutral: "#000000"
+        },
+        skinbid: {
+            profit: "#0cb083",
+            loss: "#ce0000",
+            neutral: "#000000"
+        }
+    }
 };
 
 // Check whether new version is installed

diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts
@@ -1192,13 +1192,13 @@ async function addBuffPrice(item: CSFloat.FloatItem, container: Element, isPopou
         let backgroundColor;
         let differenceSymbol;
         if (difference < 0) {
-            backgroundColor = 'green';
+            backgroundColor = extensionSettings.colors.csfloat.profit;
             differenceSymbol = '-$';
         } else if (difference > 0) {
-            backgroundColor = '#ce0000';
+            backgroundColor = extensionSettings.colors.csfloat.loss;
             differenceSymbol = '+$';
         } else {
-            backgroundColor = 'slategrey';
+            backgroundColor = extensionSettings.colors.csfloat.neutral;
             differenceSymbol = '-$';
         }
 

diff --git 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 = <HTMLButtonElement>document.getElementsByClassName('PermissionsButton')[0];
 
@@ -54,6 +55,55 @@ 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) {
+            const [site, color] = attrName.split('-');
+
+            chrome.storage.local.get((data) => {
+                if (data.colors && data.colors[site]) {
+                    data.colors[site][color] = $(this).val();
+                    chrome.storage.local.set({
+                        colors: data.colors
+                    });
+                }
+                else {
+                    chrome.storage.local.set({
+                        colors: {
+                            [site]: {
+                                [color]: $(this).val()
+                            }
+                        },
+                    });
+                }
+            });
+        }
+        $('.SideBar').css('height', '528px');
+        $('.MainContent').css('height', '528px');
+        $('.Warning').show(100);
+    });
+    // add listener to resetColors button
+    $('#resetColors').on('click', function () {
+        const defaultColors = defaultSettings.colors;
+        const attrSite = $(this).attr('site') as keyof Extension.IColorsSites;
+
+        if (!attrSite || !defaultColors[attrSite]) return;
+
+        chrome.storage.local.get((data) => {
+            if (data.colors) {
+                data.colors[attrSite] = defaultColors[attrSite];
+
+                chrome.storage.local.set({
+                    colors: data.colors,
+                });
+            }
+        });
+
+        $('#InputProfitColor').val(defaultColors[attrSite].profit);
+        $('#InputLossColor').val(defaultColors[attrSite].loss);
+        $('#InputNeutralColor').val(defaultColors[attrSite].neutral);
+    });
 }
 
 const host_permissions = chrome.runtime.getManifest().host_permissions;
@@ -99,6 +149,9 @@ function loadForSettings() {
     const showBuffPercentageDifference = <HTMLInputElement>document.getElementById('InputBuffPercentageDifference');
     const topButton = <HTMLInputElement>document.getElementById('InputTopButton');
     const useTabStates = <HTMLInputElement>document.getElementById('InputTabStates');
+    const profitColor = <HTMLInputElement>document.getElementById('InputProfitColor');
+    const lossColor = <HTMLInputElement>document.getElementById('InputLossColor');
+    const neutralColor = <HTMLInputElement>document.getElementById('InputNeutralColor');
 
     chrome.storage.local.get((data) => {
         if (data.enableCSFloat) {
@@ -148,6 +201,11 @@ function loadForSettings() {
         } else {
             useTabStates.checked = false;
         }
+        if (data.colors.csfloat) {
+            profitColor.value = data.colors.csfloat.profit;
+            lossColor.value = data.colors.csfloat.loss;
+            neutralColor.value = data.colors.csfloat.neutral;
+        }
     });
 }
 
@@ -158,6 +216,9 @@ function loadForSkinport() {
     const skinportSteamPrice = <HTMLInputElement>document.getElementById('SkinportSteamPrice');
     const skinportInputBuffDifference = <HTMLInputElement>document.getElementById('SkinportInputBuffDifference');
     const skinportFloatColoring = <HTMLInputElement>document.getElementById('SkinportFloatColoring');
+    const profitColor = <HTMLInputElement>document.getElementById('InputProfitColor');
+    const lossColor = <HTMLInputElement>document.getElementById('InputLossColor');
+    const neutralColor = <HTMLInputElement>document.getElementById('InputNeutralColor');
 
     chrome.storage.local.get((data) => {
         if (data.enableSkinport) {
@@ -199,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;
+        }
     });
 }
 
@@ -227,11 +293,14 @@ function loadForAbout() {
 }
 
 function loadForSkinbid() {
-    let skinbidEnable = <HTMLInputElement>document.getElementById('InputSkinbid');
-    let skinbidPriceReference = <HTMLSelectElement>document.getElementById('SkinbidPriceReference');
-    let skinbidInputBuffDifference = <HTMLInputElement>document.getElementById('SkinbidInputBuffDifference');
-    let skinbidListingAge = <HTMLInputElement>document.getElementById('SkinbidListingAge');
-    let skinbidStickerPrices = <HTMLInputElement>document.getElementById('SkinbidStickerPrices');
+    const skinbidEnable = <HTMLInputElement>document.getElementById('InputSkinbid');
+    const skinbidPriceReference = <HTMLSelectElement>document.getElementById('SkinbidPriceReference');
+    const skinbidInputBuffDifference = <HTMLInputElement>document.getElementById('SkinbidInputBuffDifference');
+    const skinbidListingAge = <HTMLInputElement>document.getElementById('SkinbidListingAge');
+    const skinbidStickerPrices = <HTMLInputElement>document.getElementById('SkinbidStickerPrices');
+    const profitColor = <HTMLInputElement>document.getElementById('InputProfitColor');
+    const lossColor = <HTMLInputElement>document.getElementById('InputLossColor');
+    const neutralColor = <HTMLInputElement>document.getElementById('InputNeutralColor');
 
     chrome.storage.local.get((data) => {
         console.log(data);
@@ -258,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
@@ -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
@@ -406,7 +406,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';
@@ -755,7 +755,7 @@ async function addBuffPrice(item: Skinport.Listing, container: Element) {
         const saleTag = <HTMLElement>discountContainer.firstChild;
         if (item.price !== 0 && !isNaN(item.price) && 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 ? `-${item.currency}0` : (difference > 0 ? '+' : '-') + item.currency + Math.abs(difference).toFixed(2);
         }
     } else {

diff --git a/src/util/extensionsettings.ts b/src/util/extensionsettings.ts
@@ -84,6 +84,9 @@ export async function initSettings(): Promise<Extension.Settings> {
         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