feat: gui for matchmaker progress

.gitignore

@@ -10,4 +10,6 @@ xed_preload.js
 cc-config.js
 
 # yes i know i shouldn't do this but it solved an error for someone so here goes:
-package-lock.json
+package-lock.json
+
+multiselect_dummy.html

assets/settingCss.css

@@ -15,10 +15,21 @@
 	grid-template-rows: 0fr;
 	align-items: center;
 }
+.Crankshaft-settings .settName.multisel {
+	grid-template-rows: min-content 1fr;
+	grid-template-columns: 0fr 1fr;
+	grid-template-areas: "icon title" "input input";
+}
 
 .Crankshaft-settings .settName .setting-title {
 	grid-area: title;
 }
+.Crankshaft-settings .settName.multisel label {
+	font-size: 1.1rem;
+}
+.Crankshaft-settings .settName.multisel input {
+	margin-left: .25rem;
+}
 
 .Crankshaft-settings .settName .s-update:disabled,
 .Crankshaft-settings .settName .s-update:disabled+.slider.round {
@@ -59,7 +70,8 @@
 
 .Crankshaft-settings .setting.settName .inputGrey2,
 .Crankshaft-settings .setting.settName .switch,
-.Crankshaft-settings .setting.settName .cs-input-num {
+.Crankshaft-settings .setting.settName .cs-input-num,
+.Crankshaft-settings .setting.settName .crankshaft-multisel-parent {
 	grid-area: input;
 }
 
@@ -215,4 +227,36 @@ input:checked+.advancedSlider:hover {
     padding: 0.08rem 0.4rem;
     border-radius: 3px;
     border: 2px solid #333333
+}
+
+.crankshaft-multisel-parent {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	grid-auto-rows: 1fr;
+	gap: .2rem;
+
+	background: #232323;
+	padding: .2rem;
+	border-radius: 10px;
+}
+.crankshaft-multisel-parent label {
+	padding: .2rem;
+	border-radius: 5px;
+	background: #393939;
+	color: #a3a5aa;
+	position: relative;
+}
+.crankshaft-multisel-parent label input::after {
+	content: "";
+	background: transparent;
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 5px;
+}
+.crankshaft-multisel-parent label input:checked::after {
+	background-color: rgba(0, 128, 0, 0.466);
 }

src/global.d.ts

@@ -1,5 +1,5 @@
 type UserPrefs = {
-	[preference: string]: boolean | string;
+	[preference: string]: boolean | string | string[] | number;
 };
 
 interface UserscriptTracker {
@@ -49,7 +49,7 @@ interface Window {
  */
 
 type Callbacks = 'normal' | 'userscript' | Function;
-type ValidTypes = 'bool' | 'heading' | 'text' | 'sel' | 'num';
+type ValidTypes = 'bool' | 'heading' | 'text' | 'sel' | 'multisel' | 'num';
 
 interface SettingItemGeneric {
 	title: string;
@@ -70,10 +70,13 @@ interface SettingItemGeneric {
 // sel has to have an opts with a string array
 interface SelectSettingDescItem extends SettingItemGeneric { type: 'sel', opts?: string[] }
 
+interface MultiselectSettingDescItem extends SettingItemGeneric { type: 'multisel', opts?: string[], cols: number }
+
 // num has to have a min and max
 interface NumSettingItem extends SettingItemGeneric { type: 'num', min?: number, max?: number }
 
-type SettingsDescItem = (SettingItemGeneric | NumSettingItem | SelectSettingDescItem);
+
+type SettingsDescItem = (SettingItemGeneric | NumSettingItem | SelectSettingDescItem | MultiselectSettingDescItem);
 
 /** array of SettingDescItem objects */
 interface SettingsDesc {
@@ -86,6 +89,7 @@ interface RenderReadySetting extends SettingItemGeneric {
 
 	// for sel
 	opts?: string[];
+	cols?: number;
 
 	// for num
 	min?: number;

src/main.ts

@@ -46,9 +46,18 @@ const settingsSkeleton = {
 	safeFlags_gpuRasterizing: false,
 	experimentalFlags_increaseLimits: false,
 	experimentalFlags_lowLatency: false,
-	experimentalFlags_experimental: false
+	experimentalFlags_experimental: false,
+	matchmaker: false,
+	matchmaker_F6: false,
+	matchmaker_regions: [] as string[],
+	matchmaker_gamemodes: [] as string[],
+	matchmaker_minPlayers: 1,
+	matchmaker_maxPlayers: 6,
+	matchmaker_minRemainingTime: 120
 };
 
+// export type settingsKeys = keyof typeof settingsSkeleton
+
 if (!existsSync(swapperPath)) mkdirSync(swapperPath, { recursive: true });
 if (!existsSync(userscriptsPath)) mkdirSync(userscriptsPath, { recursive: true });
 if (!existsSync(userscriptTrackerPath)) writeFileSync(userscriptTrackerPath, '{}', { encoding: 'utf-8' });

src/matchmaker.ts

@@ -1,11 +1,11 @@
 import { secondsToTimestring } from "./utils";
-import { strippedConsole } from "./preload";
+// import { strippedConsole } from "./preload";
 // matchmaker code originally by wa#3991 / paintingofblue
 
 
 // https://greasyfork.org/en/scripts/468482-kraxen-s-krunker-utils
-const MATCHMAKER_REGIONS = [ "MBI", "NY", "FRA", "SIN", "DAL", "SYD", "MIA", "BHN", "TOK", "BRZ", "AFR", "LON", "CHI", "SV", "STL", "MX" ]
-const MATCHMAKER_GAMEMODES = [ "Free for All", "Team Deathmatch", "Hardpoint", "Capture the Flag", "Parkour", "Hide & Seek", "Infected", "Race", "Last Man Standing", "Simon Says", "Gun Game", "Prop Hunt", "Boss Hunt", "Classic FFA", "Deposit", "Stalker", "King of the Hill", "One in the Chamber", "Trade", "Kill Confirmed", "Defuse", "Sharp Shooter", "Traitor", "Raid", "Blitz", "Domination", "Squad Deathmatch", "Kranked FFA", "Team Defender", "Deposit FFA", "Chaos Snipers", "Bighead FFA" ]
+export const MATCHMAKER_REGIONS = [ "MBI", "NY", "FRA", "SIN", "DAL", "SYD", "MIA", "BHN", "TOK", "BRZ", "AFR", "LON", "CHI", "SV", "STL", "MX" ]
+export const MATCHMAKER_GAMEMODES = [ "Free for All", "Team Deathmatch", "Hardpoint", "Capture the Flag", "Parkour", "Hide & Seek", "Infected", "Race", "Last Man Standing", "Simon Says", "Gun Game", "Prop Hunt", "Boss Hunt", "Classic FFA", "Deposit", "Stalker", "King of the Hill", "One in the Chamber", "Trade", "Kill Confirmed", "Defuse", "Sharp Shooter", "Traitor", "Raid", "Blitz", "Domination", "Squad Deathmatch", "Kranked FFA", "Team Defender", "Deposit FFA", "Chaos Snipers", "Bighead FFA" ]
 
 function getGameMode(num: number) {
 	return MATCHMAKER_GAMEMODES[num]

src/settingsui.ts

@@ -4,6 +4,7 @@ import { ipcRenderer } from 'electron'; // add app if crashes
 import { createElement, toggleSettingCSS } from './utils';
 import { styleSettingsCSS, classPickerBottom } from './preload';
 import { su } from './userscripts';
+import { MATCHMAKER_GAMEMODES, MATCHMAKER_REGIONS } from './matchmaker';
 
 /// <reference path="global.d.ts" />
 enum RefreshEnum {
@@ -62,20 +63,30 @@ const settingsDesc: SettingsDesc = {
 	resourceSwapper: { title: 'Resource swapper', type: 'bool', desc: 'Enable Krunker Resource Swapper. Reads Documents/Crankshaft/swapper', safety: 0, cat: 0 },
 	discordRPC: { title: 'Discord Rich Presence', type: 'bool', desc: 'Enable Discord Rich Presence. Shows Gamemode, Map, Class and Skin', safety: 0, cat: 0 },
 	extendedRPC: { title: 'Extended Discord RPC', type: 'bool', desc: 'Adds Github + Discord buttons to RPC. No effect if RPC is off.', safety: 0, cat: 0, instant: true },
+
 	userscripts: { title: 'Userscript support', type: 'bool', desc: 'Enable userscript support. place .js files in Documents/Crankshaft/scripts', safety: 1, cat: 0 },
 	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 },
-	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 },
-	safeFlags_gpuRasterizing: { title: 'GPU rasterization', type: 'bool', desc: 'Enable GPU rasterization and disable Zero-copy rasterizer so rasterizing is stable', safety: 2, cat: 2 },
-	safeFlags_helpfulFlags: { title: '(Potentially) useful flags', type: 'bool', desc: 'Enables javascript-harmony, future-v8-vm-features, webgl2-compute-context.', safety: 3, cat: 2 },
-	disableAccelerated2D: { title: 'Disable Accelerated 2D canvas', type: 'bool', desc: '', safety: 3, cat: 2 },
-	experimentalFlags_increaseLimits: { title: 'Increase limits flags', type: 'bool', desc: 'Sets renderer-process-limit, max-active-webgl-contexts and webrtc-max-cpu-consumption-percentage to 100, adds ignore-gpu-blacklist', safety: 4, cat: 2 },
-	experimentalFlags_lowLatency: { title: 'Lower Latency flags', type: 'bool', desc: 'Adds following flags: enable-highres-timer, enable-quic (experimental low-latency protocol) and enable-accelerated-2d-canvas', safety: 4, cat: 2 },
-	experimentalFlags_experimental: { title: 'Experimental flags', type: 'bool', desc: 'Adds following flags: disable-low-end-device-mode, high-dpi-support, ignore-gpu-blacklist, no-pings and no-proxy-server', safety: 4, cat: 2 }
+
+	matchmaker: { title: 'Custom Matchmaker', type: 'bool', desc: 'Configurable matchmaker. Default hotkey F1', safety: 0, cat: 2 },
+	matchmaker_F6: { title: 'Use F6 as Matchmaker hotkey', type: 'bool', desc: 'Replace default \'New Lobby\' F6 hotkey with Matchmaker ', safety: 0, cat: 2 },
+	matchmaker_regions: { title: 'Whitelisted regions', type: 'multisel', desc: '', safety: 0, cat: 2, opts: MATCHMAKER_REGIONS, cols: 8 },
+	matchmaker_gamemodes: { title: 'Whitelisted gamemodes', type: 'multisel', desc: '', safety: 0, cat: 2, opts: MATCHMAKER_GAMEMODES, cols: 4 },
+	matchmaker_minRemainingTime: { title: 'Minimum temaining time', type: 'num', min: 0, max: 3600, safety: 0, cat: 2  },
+	matchmaker_minPlayers: { title: 'Minimum players in Lobby', type: 'num', min: 0, max: 7, safety: 0, cat: 2  },
+	matchmaker_maxPlayers: { title: 'Maximum players in Lobby', type: 'num', min: 0, max: 7, safety: 0, cat: 2  },
+
+	logDebugToConsole: { title: 'Log debug & GPU info to electron console', type: 'bool', safety: 0, cat: 3 },
+	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: 3 },
+	safeFlags_removeUselessFeatures: { title: 'Remove useless features', type: 'bool', desc: 'Adds a lot of flags that disable useless features.', safety: 1, cat: 3 },
+	safeFlags_gpuRasterizing: { title: 'GPU rasterization', type: 'bool', desc: 'Enable GPU rasterization and disable Zero-copy rasterizer so rasterizing is stable', safety: 2, cat: 3 },
+	safeFlags_helpfulFlags: { title: '(Potentially) useful flags', type: 'bool', desc: 'Enables javascript-harmony, future-v8-vm-features, webgl2-compute-context.', safety: 3, cat: 3 },
+	disableAccelerated2D: { title: 'Disable Accelerated 2D canvas', type: 'bool', desc: '', safety: 3, cat: 3 },
+	experimentalFlags_increaseLimits: { title: 'Increase limits flags', type: 'bool', desc: 'Sets renderer-process-limit, max-active-webgl-contexts and webrtc-max-cpu-consumption-percentage to 100, adds ignore-gpu-blacklist', safety: 4, cat: 3 },
+	experimentalFlags_lowLatency: { title: 'Lower Latency flags', type: 'bool', desc: 'Adds following flags: enable-highres-timer, enable-quic (experimental low-latency protocol) and enable-accelerated-2d-canvas', safety: 4, cat: 3 },
+	experimentalFlags_experimental: { title: 'Experimental flags', type: 'bool', desc: 'Adds following flags: disable-low-end-device-mode, high-dpi-support, ignore-gpu-blacklist, no-pings and no-proxy-server', safety: 4, cat: 3 }
 };
 
 /** index-based safety descriptions. goes in title attribute */
@@ -91,6 +102,7 @@ const safetyDesc = [
 const categoryNames: CategoryName[] = [
 	{ name: 'Client Settings', cat: 'mainSettings' },
 	{ name: 'Visual Settings', cat: 'styleSettings' },
+	{ name: 'Matchmaker', cat: 'matchmakerSettings' },
 	{ name: 'Advanced Settings', cat: 'advSettings' }
 ];
 
@@ -131,7 +143,7 @@ class SettingElem {
 	// s-update is the class for element to watch
 	props: RenderReadySetting;
 
-	type: 'bool' | 'sel' | 'heading' | 'text' | 'num';
+	type: ValidTypes;
 
 	HTML: string;
 
@@ -179,13 +191,29 @@ class SettingElem {
 		switch (props.type) {
 			case 'bool':
 				this.HTML += `<span class="setting-title">${props.title}</span> 
-                <label class="switch">
-                    <input class="s-update" type="checkbox" ${props.value ? 'checked' : ''} ${this.#disabled ? 'disabled' : ''}/>
-                    <div class="slider round"></div>
-                </label>`;
+					<label class="switch">
+							<input class="s-update" type="checkbox" ${props.value ? 'checked' : ''} ${this.#disabled ? 'disabled' : ''}/>
+							<div class="slider round"></div>
+					</label>`;
 				this.updateKey = 'checked';
 				this.updateMethod = 'onchange';
 				break;
+			case 'text':
+				this.HTML += `<span class="setting-title">${props.title}</span>
+					<span class="setting-input-wrapper">
+							<input type="text" class="rb-input s-update inputGrey2" name="${props.key}" autocomplete="off" value="${props.value}">
+					</span>`;
+				this.updateKey = 'value';
+				this.updateMethod = 'oninput';
+				break;
+			case 'num':
+				this.HTML += `<span class="setting-title">${props.title}</span>
+				<span class="setting-input-wrapper">
+					<input type="number" class="rb-input s-update cs-input-num" name="${props.key}" autocomplete="off" value="${props.value}" min="${props.min}" max="${props.max}">
+				</span>`;
+				this.updateKey = 'value';
+				this.updateMethod = 'onchange';
+				break;
 			case 'heading':
 				this.HTML = `<h1 class="setting-title">${props.title}</h1>`;
 				break;
@@ -197,21 +225,11 @@ class SettingElem {
 				this.updateKey = 'value';
 				this.updateMethod = 'onchange';
 				break;
-			case 'text':
-				this.HTML += `<span class="setting-title">${props.title}
-                </span>
-                <span class="setting-input-wrapper">
-                    <input type="text" class="rb-input s-update inputGrey2" name="${props.key}" autocomplete="off" value="${props.value}">
-                </span>
-                `;
-				this.updateKey = 'value';
-				this.updateMethod = 'oninput';
-				break;
-			case 'num':
-				this.HTML += `<span class="setting-title">${props.title}</span><span>
-                    <input type="number" class="rb-input marright s-update cs-input-num" name="${props.key}" autocomplete="off" value="${props.value}" min="${props.min}" max="${props.max}">
-                </span>
-                `;
+			case 'multisel':
+				this.HTML = `<span class="setting-title">${props.title}</span>
+					<div class="crankshaft-multisel-parent s-update" ${props?.cols ? `style="grid-template-columns:repeat(${props.cols}, 1fr)"` : '' }>
+					${props.opts.map(opt => `<label><input type="checkbox" name="${opt}"/>${opt}</label>`).join('')}
+					</div>`
 				this.updateKey = 'value';
 				this.updateMethod = 'onchange';
 				break;