feat: hiddenClasses quick switcher initial

assets/quickClassPicker.css

@@ -0,0 +1,41 @@
+#hiddenClasses {
+	display: flex !important;
+	justify-content: space-evenly;
+	align-items: center;
+	column-gap: 4px;
+
+	position: absolute;
+	bottom: 300px;
+    left: 50%;	
+    transform: translate(-50%,0) scale(.95);
+
+    pointer-events: all;
+	min-width: 810px;
+	width: min-content;
+}
+
+#hiddenClasses [id^="menuClassPicker"] {
+	/* width: 46px;
+    height: 46px; */
+	border-radius: 5px;
+	display: block;
+	pointer-events: all;
+
+	background-position: center;
+	background-repeat: no-repeat;
+	/* background-size: 40px 40px; */
+	image-rendering: pixelated;
+	border: 2px solid transparent;
+
+	cursor: pointer;
+	transition: background-color 0.2s, border 0.2s;
+}
+
+#hiddenClasses [id^="menuClassPicker"]:hover {
+	background-color: #262626;
+	border-color: #313131;
+}
+#hiddenClasses [id^="menuClassPicker"]:active {
+	background-color: #393939;
+	border-color: #a3a5aa;
+}

src/preload.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from 'fs';
 import { join as pathJoin, resolve as pathResolve } from 'path';
 import { ipcRenderer } from 'electron';
-import { createElement, injectSettingsCSS, toggleSettingCSS } from './utils';
+import { createElement, hiddenClassesImages, injectSettingsCSS, toggleSettingCSS } from './utils';
 import { renderSettings } from './settingsui';
 import { compareVersions } from 'compare-versions';
 
@@ -27,6 +27,7 @@ let lastActiveTab = 0;
 export const styleSettingsCSS = {
 	hideAds: readFileSync(pathJoin($assets, 'hideAds.css'), { encoding: 'utf-8' }),
 	menuTimer: readFileSync(pathJoin($assets, 'menuTimer.css'), { encoding: 'utf-8' }),
+	quickClassPicker: readFileSync(pathJoin($assets, 'quickClassPicker.css'), { encoding: 'utf-8' }) + hiddenClassesImages(16),
 	hideReCaptcha: 'body > div:not([class]):not([id]) > div:not(:empty):not([class]):not([id]) { display: none; }'
 };
 
@@ -113,7 +114,7 @@ ipcRenderer.on('initDiscordRPC', () => {
 	document.addEventListener('pointerlockchange', updateRPC); // thank God this exists
 });
 
-ipcRenderer.on('injectClientCSS', (event, { hideAds, menuTimer, hideReCaptcha, clientSplash, userscripts }, version) => {
+ipcRenderer.on('injectClientCSS', (event, { hideAds, menuTimer, quickClassPicker, hideReCaptcha, clientSplash, userscripts }, version) => {
 	const splashId = 'Crankshaft-splash-css';
 	const settId = 'Crankshaft-settings-css';
 
@@ -153,9 +154,15 @@ ipcRenderer.on('injectClientCSS', (event, { hideAds, menuTimer, hideReCaptcha, c
 		observer.observe(document.getElementById('instructions'), observerConfig);
 	}
 
+	strippedConsole.log(styleSettingsCSS.quickClassPicker)
+
 	// TODO rewrite, this is not well scalable
-	if (hideAds) toggleSettingCSS(styleSettingsCSS.hideAds, 'hideAds', true);
+	if (hideAds) {
+		toggleSettingCSS(styleSettingsCSS.hideAds, 'hideAds', true);
+		document.getElementById("hiddenClasses").style.bottom = '40px';
+	}
 	if (menuTimer) toggleSettingCSS(styleSettingsCSS.menuTimer, 'menuTimer', true);
+	if (quickClassPicker) toggleSettingCSS(styleSettingsCSS.quickClassPicker, 'quickClassPicker', true)
 	if (hideReCaptcha) toggleSettingCSS(styleSettingsCSS.hideReCaptcha, 'hideReCaptcha', true);
 	if (userscripts) ipcRenderer.send('preload_requests_userscriptPath');
 });

src/settingsui.ts

@@ -67,6 +67,7 @@ const settingsDesc: SettingsDesc = {
 	hideAds: { title: 'Hide Ads', type: 'bool', safety: 0, cat: 1, instant: true },
 	menuTimer: { title: 'Menu Timer', type: 'bool', safety: 0, cat: 1, instant: true },
 	hideReCaptcha: { title: 'Hide reCaptcha', type: 'bool', safety: 0, cat: 1, instant: true },
+	quickClassPicker: { title: "Quick Class Picker", type: 'bool', safety: 0, cat: 1, instant: true, desc: 'Shows krunker\'s hiddenClasses picker' },
 	logDebugToConsole: { title: 'Log debug & GPU info to electron console', type: 'bool', safety: 0, cat: 2 },
 	alwaysWaitForDevTools: { title: 'Always wait for DevTools', desc: 'Crankshaft uses an alt. method to open Devtools in a new window if they take too long. This disables that. Might cause DevTools to not work', type: 'bool', safety: 3, cat: 2 },
 	safeFlags_removeUselessFeatures: { title: 'Remove useless features', type: 'bool', desc: 'Adds a lot of flags that disable useless features.', safety: 1, cat: 2 },
@@ -243,8 +244,12 @@ class SettingElem {
 			saveSettings();
 
 			// you can add custom instant refresh callbacks for settings here
-			if (this.props.key === 'hideAds') toggleSettingCSS(styleSettingsCSS.hideAds, this.props.key, value);
+			if (this.props.key === 'hideAds') {
+				toggleSettingCSS(styleSettingsCSS.hideAds, this.props.key, value);
+				document.getElementById("hiddenClasses").style.bottom = value ? '40px' : null;
+			}
 			if (this.props.key === 'menuTimer') toggleSettingCSS(styleSettingsCSS.menuTimer, this.props.key, value);
+			if (this.props.key === 'quickClassPicker') toggleSettingCSS(styleSettingsCSS.quickClassPicker, this.props.key, value);
 			if (this.props.key === 'hideReCaptcha') toggleSettingCSS(styleSettingsCSS.hideReCaptcha, this.props.key, value);
 		} else if (callback === 'userscript') {
 			let refreshSettings = false;

src/utils.ts

@@ -96,4 +96,33 @@ export function debounce(func: Function, timeout = 300) {
 		clearTimeout(timer);
 		timer = setTimeout(() => { func.apply(this, args); }, timeout);
 	};
+} 
+
+export function hiddenClassesImages(classNumberFallback: number) {
+	const wrapper = document.getElementById("hiddenClasses")
+	const prepend = (wrapper ? (wrapper.firstChild as HTMLElement).id : "menuClassPicker0").slice(0, -1)
+	const count = wrapper ? wrapper.children.length : classNumberFallback
+	const wrapperFull = wrapper !== null && wrapper.children.length > 0
+
+	let css = '';
+	// 810 is krunker's set middle element size
+	// for each gap (count - 1) we substract 4px for gap
+	// Math.min is a safety measure in case the buttons would be < 50px
+	const buttonSize = Math.min(Math.round( (810 - 4*(count-1)) / count), 50);
+	css += `#hiddenClasses [id^="menuClassPicker"] {
+		width: ${buttonSize}px; height: ${buttonSize}px;
+		background-size: ${buttonSize - 6}px ${buttonSize - 6}px; 
+	}`
+
+	if (wrapperFull) {
+		[...wrapper.children].forEach(child => {
+			css += `${child.id} { background-image: url("https://assets.krunker.io/textures/classes/icon_${child.id.replace(prepend, '')}.png"); } \n`
+		});
+	} else { // the fallback is almost always used...
+		for (let i = 0; i < count; i++) {
+			css += `#${prepend}${i} { background-image: url("https://assets.krunker.io/textures/classes/icon_${i}.png"); } \n`
+		}
+	}
+
+	return css
 }