Language popup for Skinbaron

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "betterfloat",
 	"displayName": "BetterFloat",
-	"version": "2.9.0",
+	"version": "2.9.1",
 	"description": "Enhance your experience on CSFloat.com, Skinport.com & Skinbid.com!",
 	"author": "Rums",
 	"license": "CC BY NC SA 4.0",

src/contents/skinbaron_script.ts

@@ -4,11 +4,11 @@ import type { PlasmoCSConfig } from 'plasmo';
 import { html } from 'common-tags';
 import type { DopplerPhase, ItemStyle } from '~lib/@typings/FloatTypes';
 import type { Skinbaron } from '~lib/@typings/SkinbaronTypes';
-import { getFirstSkinbaronItem, rotateSkinbaronItems } from '~lib/handlers/cache/skinbaron_cache';
+import { getFirstSkinbaronItem } from '~lib/handlers/cache/skinbaron_cache';
 import { activateHandler, initPriceMapping } from '~lib/handlers/eventhandler';
 import { getAndFetchCurrencyRate, getMarketID } from '~lib/handlers/mappinghandler';
-import { MarketSource } from '~lib/util/globals';
-import { CurrencyFormatter, checkUserPlanPro, getBuffPrice, handleSpecialStickerNames, isBuffBannedItem } from '~lib/util/helperfunctions';
+import { ICON_EXCLAMATION, MarketSource } from '~lib/util/globals';
+import { CurrencyFormatter, checkUserPlanPro, getBuffPrice, handleSpecialStickerNames, isBuffBannedItem, waitForElement } from '~lib/util/helperfunctions';
 import { type IStorage, getAllSettings } from '~lib/util/storage';
 import { generatePriceLine } from '~lib/util/uigeneration';
 
@@ -43,6 +43,14 @@ async function init() {
 		return;
 	}
 
+	await waitForElement('.language').then(() => {
+		if (document.querySelector('.language')?.textContent?.trim() !== 'EN') {
+			console.warn('[BetterFloat] Skinbaron has to be set to the English language for this extension to work. Aborting ...');
+			createLanguagePopup();
+			return;
+		}
+	});
+
 	await initPriceMapping(extensionSettings, 'baron');
 
 	console.timeEnd('[BetterFloat] Skinbaron init timer');
@@ -428,6 +436,44 @@ function getUserCurrency() {
 	};
 }
 
+function createLanguagePopup() {
+    const popup = document.createElement('div');
+    popup.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background-color: #ff4444;
+        color: white;
+        padding: 15px 20px;
+        border-radius: 5px;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    `;
+
+    popup.innerHTML = `
+        <img src="${ICON_EXCLAMATION}" alt="Warning" style="width: 20px; height: 20px;">
+        <div>
+            <div style="font-weight: bold; margin-bottom: 5px;">Language Settings Required</div>
+            <div>Please set the website language to English for BetterFloat to work properly.</div>
+			<button style="margin-top: 10px; padding: 5px 10px; background-color: #ff6666; color: white; border: none; border-radius: 5px; cursor: pointer;">Set to English</button>
+        </div>
+    `;
+
+    document.body.appendChild(popup);
+
+	popup.querySelector('button')?.addEventListener('click', () => {
+		document.querySelector<HTMLButtonElement>('button.language-currency-button')?.click()
+	});
+
+    // Remove popup after 10 seconds
+    setTimeout(() => {
+        popup.remove();
+    }, 15000);
+}
+
 // mutation observer active?
 let isObserverActive = false;
 let extensionSettings: IStorage;

src/contents/skinport_script.ts

@@ -55,7 +55,7 @@ async function init() {
 	console.debug('[BetterFloat] Settings: ', extensionSettings);
 
 	if (extensionSettings['sp-enable'] && document.getElementsByClassName('Language').length > 0 && document.getElementsByClassName('CountryFlag--GB').length === 0) {
-		console.warn('[BetterFloat] Skinport language has to be English for this extension to work. Aborting ...');
+		console.warn('[BetterFloat] Skinport has to be set to the English language for this extension to work. Aborting ...');
 		createLanguagePopup();
 		return;
 	}