Merge pull request #12 from GODrums/feature/skinport-integration

Feature/skinport integration

README.md

@@ -18,8 +18,15 @@
 
 ## Highlights
 
+Currently supports CSFloat.com and Skinport.com, but more sites are coming soon!
+
 -   Display Buff prices (buy order + listings) for every item
--   Auto-refresh in the "Newest Items"
+-   Price difference to Buff at first glance next to the price tag
+-   Accurate sticker price calculation (%sp) with gradual coloring
+-   CSFloat: Auto-refresh in the "Newest Items"
+-   CSFloat: See the listing age of an item
+-   Skinport: Automatically check the checkboxes in the cart for faster buying
+-   Skinport: Multiple currency conversion options
 -   More coming soon!
 
 ## Services
@@ -92,6 +99,6 @@ Please follow the [conventional commits](https://www.conventionalcommits.org/en/
 
 ## Disclaimer
 
-BetterFloat is developed independently, and is not officially endorsed by or affiliated with CSFloat in any way. If you are a legal representative of CSFloat and would like this project to be taken down, please contact me.
+BetterFloat is developed independently, and is not officially endorsed by or affiliated with CSFloat Inc. or Skinport GmbH in any way. If you are a legal representative of CSFloat or Skinport and would like this project to be taken down, please contact me directly.
 
-Built with 🖤 in Munich
+Built with 🖤 in Munich.

css/stylesheet.css → css/csfloat_styles.css

@@ -47,6 +47,7 @@
 .betterfloat-buffprice:hover .betterfloat-buff-tooltip {
 	visibility: visible;
 	opacity: 1;
+	transition: visibility 0s, opacity 0.5s linear;
 }
 
 .betterfloat-buffprice {

css/popup.css

@@ -228,4 +228,5 @@ input[type='checkbox'] {
     color: rgba(255, 255, 255, 0.7);
     margin: 5px 20px 5px 0px;
     font-weight: 400;
+    overflow-wrap: break-word;
 }

css/skinport_styles.css

@@ -0,0 +1,33 @@
+.betterfloat-buff-tooltip {
+	/* Positioning the tooltip text */
+	position: absolute;
+	z-index: 1;
+    transform: translate(-16%, 40%);
+	visibility: hidden;
+	width: 200px;
+    background-color: #192733;
+	color: #fff;
+	text-align: center;
+    padding: 8px 10px 8px 10px;
+	border-radius: 6px;
+    font-size: 14px;
+
+	/* Fade in tooltip */
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.betterfloat-buffprice {
+    font-size: 12px;
+}
+
+.betterfloat-buffprice:hover .betterfloat-buff-tooltip {
+	visibility: visible;
+	opacity: 1;
+}
+
+.betterfloat-sale-tag {
+    font-size: 12px!important;
+    margin: 1px;
+	border-radius: 3px;
+}

html/changelog.html

@@ -1,10 +1,13 @@
 <div class="Group">
-    <div class="VersionHeader">1.3.3</div>
+    <div class="VersionHeader">1.4.0</div>
     <div class="VersionBox">
         <p class="VersionSubHeader">
             What's new?
         </p> 
         <ul class="VersionText">
+            <li><b>FEATURE:</b> First BETA support for skinport.com. Only selected features work for now. Please refer to the corresponding extension settings tab.</li>
+            <li><b>PRICING:</b> As Steaminventoryhelper changed their CORS policy, requests now have to be proxied through a server. The deployed source code of the server can be found here: https://gist.github.com/GODrums/5b2d24c17c136a1b37acd14b1089933c</li>
+            <li><b>PRICING:</b> Skinport displays item prices in your local currency. To provide actual accurate exchange rates, the exchangerate.host API is in use. If you want to use Skinport's questionable rates instead, feel free to select it in the options popup. Skinport will always charge in your (local) account currency.</li>
             <li><b>FIX:</b> Previously fast actions such as switching a tab after refreshing the page could lead to unexpected behavior in the extension's functionality. This change attempts to dislodge this bug. If you still notice bugs such as the infamous "double buff pricing" on item listings, please notify me about it.</li>
         </ul>
     </div>

html/index.html

@@ -24,9 +24,13 @@
         <div class="MainContent"></div>
         <footer>
             <div class="tabbar">
-                <button class="tabItem active" data-page="settings.html">
+                <button class="tabItem active" data-page="csfloat.html">
                     <img class="tab-icon" src="../public/gear-solid.svg" />
-                    <p>Settings</p>
+                    <p>CSFloat</p>
+                </button>
+                <button class="tabItem" data-page="skinport.html">
+                    <img class="tab-icon" src="../public/gear-solid.svg" />
+                    <p>Skinport</p>
                 </button>
                 <button class="tabItem" data-page="changelog.html">
                     <img class="tab-icon" src="../public/file-lines-solid.svg" />

html/skinport.html

@@ -0,0 +1,52 @@
+<div class="Group">
+    <div class="GroupHeader">FEATURES</div>
+    <div class="GroupElement">
+        <p class="ElementText">Buff Price Calculations</p>
+        <input type="checkbox" id="SkinportBuffPrice" name="spBuffPrice" value="spBuffPrice" checked />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText">Auto-Checkboxes</p>
+        <input type="checkbox" id="SkinportCheckboxes" name="spCheckBoxes" value="spCheckBoxes" checked />
+    </div>
+</div>
+<div class="Group">
+    <div class="GroupHeader">PRICES</div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Buff Price Reference</p>
+            <select class="ElementDropdownMenu" id="SkinportPriceReference" name="spPriceReference">
+                <option value="0">Bid</option>
+                <option value="1" selected>Ask</option>
+            </select>
+        </div>
+        <p class="ElementDescription">
+            Sets the reference price for difference calculations on item prices.<br />Bid refers to the highest buy order price.<br />Ask refers to the lowest listing price. (Default)
+        </p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Currency Conversion</p>
+            <select class="ElementDropdownMenu" id="SkinportCurrencyConversion" name="skinportRates">
+                <option value="real" selected>Real</option>
+                <option value="skinport">Skinport</option>
+            </select>
+        </div>
+        <p class="ElementDescription">
+            Sets the reference rates for the currency conversion (USD -> X). Skinport will nevertheless always charge you in your local currency.. <br />Real refers to the buff-like currency conversion rates. (Default) <br />Skinport refers to the rates used by Skinport, which can vary from Buff rates.
+        </p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Show Steam Price</p>
+            <input type="checkbox" id="SkinportSteamPrice" name="spSteamPrice" value="spSteamPrice" />
+        </div>
+        <p class="ElementDescription">Show the Steam price of an item in addition to the Buff price.</p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Show Buff Price Difference</p>
+            <input type="checkbox" id="SkinportInputBuffDifference" name="spBuffDifference" value="spBuffDifference" checked/>
+        </div>
+        <p class="ElementDescription">This settings allows to switch between displaying the difference to the Buff price in absolute units and the original difference to the Steam price in percentage.</p>
+    </div>
+</div>

manifest.json

@@ -1,25 +1,31 @@
 {
 	"name": "BetterFloat",
 	"author": "Rums",
-	"version": "1.3.3",
-	"version_name": "1.3.3",
-	"description": "Enhance your experience on CSFloat.com",
+	"version": "1.4.0",
+	"version_name": "1.4.0",
+	"description": "Enhance your experience on CSFloat.com and Skinport.com",
 	"manifest_version": 3,
-	"host_permissions": ["*://prices.csgotrader.app/*", "*://csfloat.com/*"],
+	"host_permissions": ["*://prices.csgotrader.app/*", "*://*.csfloat.com/*", "*://*.skinport.com/*"],
 	"background": {
 		"service_worker": "js/background.js"
 	},
 	"content_scripts": [
 		{
 			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
-			"js": ["js/content_script.js"],
-			"css": ["css/stylesheet.css"],
+			"js": ["js/csfloat/content_script.js"],
+			"css": ["css/csfloat_styles.css"],
 			"run_at": "document_end"
 		},
 		{
-			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
+			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*", "*://*.skinport.com/*"],
 			"js": ["js/injectionhandler.js"],
 			"run_at": "document_start"
+		},
+		{
+			"matches": ["*://*.skinport.com/*"],
+			"js": ["js/skinport/content_script.js"],
+			"css": ["css/skinport_styles.css"],
+			"run_at": "document_end"
 		}
 	],
 	"icons": {
@@ -30,7 +36,7 @@
 	 },
 	"permissions": ["storage"],
     "web_accessible_resources": [ {
-       "matches": [ "https://csfloat.com/*", "https://csgofloat.com/*" ],
+       "matches": [ "https://csfloat.com/*", "https://csgofloat.com/*", "*://*.skinport.com/*"],
        "resources": [ "public/buff_favicon.png", "public/clock-solid.svg", "public/chevron-up-solid.svg", "js/inject.js"]
     } ]
 }

manifest_firefox.json

@@ -1,24 +1,30 @@
 {
     "name": "BetterFloat",
     "author": "Rums",
-	"version": "1.3.3",
-    "description": "Enhance your experience on CSFloat.com",
+	  "version": "1.4.0",
+    "description": "Enhance your experience on CSFloat.com and Skinport.com",
     "manifest_version": 3,
-    "host_permissions": ["*://prices.csgotrader.app/*", "*://csfloat.com/*"],
+    "host_permissions": ["*://prices.csgotrader.app/*", "*://csfloat.com/*", "*://*.skinport.com/*"],
     "background": {
         "scripts": ["js/background.js"]
     },
     "content_scripts": [
         {
-            "matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
-            "js": ["js/content_script.js"],
-            "css": ["css/stylesheet.css"],
-            "run_at": "document_end"
+			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
+			"js": ["js/csfloat/content_script.js"],
+			"css": ["css/csfloat_styles.css"],
+			"run_at": "document_end"
         },
 		{
-			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
+			"matches": ["https://csfloat.com/*", "https://csgofloat.com/*", "*://*.skinport.com/*"],
 			"js": ["js/injectionhandler.js"],
 			"run_at": "document_start"
+		},
+		{
+			"matches": ["*://*.skinport.com/*"],
+			"js": ["js/skinport/content_script.js"],
+			"css": ["css/skinport_styles.css"],
+			"run_at": "document_idle"
 		}
     ],
     "icons": {
@@ -39,7 +45,7 @@
     "permissions": ["storage"],
     "web_accessible_resources": [
         {
-            "matches": ["https://csfloat.com/*", "https://csgofloat.com/*"],
+            "matches": ["https://csfloat.com/*", "https://csgofloat.com/*", "*://*.skinport.com/*"],
             "resources": ["public/buff_favicon.png", "public/clock-solid.svg", "public/chevron-up-solid.svg", "js/inject.js"]
         }
     ]