fix: setting migration, button placement

assets/settingCss.css

@@ -12,25 +12,43 @@
 	display: grid;
 	grid-auto-columns: 1fr;
 	grid-template-columns: 0fr 1fr 0fr;
-	grid-template-areas: "icon title input";
-	grid-template-rows: 0fr;
+	grid-template-areas: 
+	"icon title input"
+	"desc desc desc";
+	grid-template-rows: 0fr min-content;
 	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";
+	grid-template-areas: 
+	"icon title" 
+	"input input";
+}
+.Crankshaft-settings .settName.has-button {
+	grid-template-areas: 
+	"icon title button input"
+	"desc desc desc desc";
+	grid-template-columns: 0fr 1fr min-content 0fr;
+}
+.Crankshaft-settings .settName.has-button .settingsBtn { 
+	grid-area: button;
+	margin: 0 .5rem;
 }
 
 .Crankshaft-settings .settName.crankshaft-button-holder { 
 	grid-template-columns: 1fr;
 	grid-auto-columns: min-content;
 	column-gap: 0.25rem;
 	grid-template-areas: unset;
+	grid-template-rows: 0fr;
 	grid-auto-flow: column;
 }
 .Crankshaft-settings .crankshaft-button-holder .buttons-title, .material-icons { color: inherit; }
-.Crankshaft-settings .crankshaft-button-holder .settingsBtn { width: max-content }
+.Crankshaft-settings .crankshaft-button-holder .settingsBtn, 
+.Crankshaft-settings .settName.has-button .settingsBtn { 
+	width: max-content 
+}
 
 /* type: num */
 .Crankshaft-settings .settName.num .setting-input-wrapper {
@@ -176,7 +194,7 @@ span.optDescription {
 	overflow: hidden;
 	max-height: 500px;
 	margin-top: 5px;
-	grid-area: 2/1/3/4;
+	grid-area: desc;
 }
 
 .setting-desc-new a {

esbuilder.js

@@ -24,6 +24,7 @@ const buildOptions = {
 		'src/switches.ts',
 		'src/userscripts.ts',
 		'src/matchmaker.ts',
+		'src/utils_node.ts',
 		'src/utils.ts',
 	],
 	bundle: false,

package.json

@@ -27,7 +27,6 @@
 		"url": "https://github.com/KraXen72/crankshaft.git"
 	},
 	"devDependencies": {
-		"@types/fs-extra": "^11.0.1",
 		"concurrently": "^8.2.0",
 		"conventional-changelog-cli": "^3.0.0",
 		"electron": "10.4.7",
@@ -43,7 +42,6 @@
 		"compare-versions": "^6.1.0",
 		"dayjs": "^1.11.9",
 		"discord-rpc": "^4.0.1",
-		"fs-extra": "11.1.1",
 		"userscript-meta": "^1.0.1"
 	}
 }

src/global.d.ts

@@ -76,13 +76,21 @@ interface Window {
 type Callbacks = 'normal' | 'userscript' | Function;
 type ValidTypes = 'bool' | 'heading' | 'text' | 'sel' | 'multisel' | 'num';
 
+interface settingExtraButton { 
+	icon: string, 
+	text: string, 
+	callback: (e?: MouseEvent) => void, 
+	customTitle?: string
+}
+
 interface SettingItemGeneric {
 	title: string;
 	desc?: string;
 	safety: number;
 	type: ValidTypes;
+	button?: settingExtraButton;
 
-	// category
+	/** category */
 	cat?: number;
 
 	/** applies instantly */
@@ -135,7 +143,7 @@ interface RenderReadySetting extends SettingItemGeneric {
 	key: string;
 	callback: Callbacks;
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-anya
 	value: any;
 
 	// an optional unload function (for now for userscripts)

src/main.ts

@@ -1,6 +1,6 @@
 import { join as pathJoin, resolve as pathResolve } from 'path';
 import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync } from 'fs';
-import { copySync, emptyDirSync } from 'fs-extra';
+import { moveFolderSync } from './utils_node';
 import { BrowserWindow, Menu, MenuItem, MenuItemConstructorOptions, app, clipboard, dialog, ipcMain, protocol, shell, screen, BrowserWindowConstructorOptions } from 'electron';
 import { aboutSubmenu, macAppMenuArr, genericMainSubmenu, csMenuTemplate, constructDevtoolsSubmenu } from './menu';
 import { applyCommandLineSwitches } from './switches';
@@ -13,13 +13,12 @@ const docsPath = pathJoin(app.getPath('documents'), 'Crankshaft'); // pre 1.9.0
 const configPath = userData;
 
 /*
- * TODO change paths in docs
  * TODO make crankshaft server announcement about backup
  * TODO mention minor breaking change in changelog & mention backup
  */
 function migrateSettings() {
-	if (existsSync(pathJoin(docsPath, 'settings moved.txt'))) return;
-	if (readdirSync(docsPath).length === 0) return;
+	if (existsSync(pathJoin(docsPath, 'settings moved.txt')) || readdirSync(docsPath).length === 0) return;
+	if (!existsSync(userData)) mkdirSync(userData)
 
 	console.log(`Migrating old settings to new path ${userData}`);
 	if (existsSync(userData) && readdirSync(userData).length !== 0) {
@@ -36,9 +35,8 @@ function migrateSettings() {
 		error.stack = null;
 		throw error;
 	}
-
-	emptyDirSync(docsPath);
-	copySync(docsPath, userData);
+	moveFolderSync(docsPath, userData)
+	if (!existsSync(docsPath)) mkdirSync(docsPath)
 	writeFileSync(pathJoin(docsPath, 'settings moved.txt'),
 		`Starting from crankshaft v1.9.0, the configuration directory is no longer '${docsPath}'.\n
 Settings, userscripts and swapper have been moved to '${userData}'.\n
@@ -420,7 +418,7 @@ app.on('ready', () => {
 
 	mainWindow.webContents.on('new-window', (event, url) => {
 		console.log('url trying to open:', url, 'socialWindowReference:', typeof socialWindowReference);
-		const freeSpinHostnames = ['youtube.com', 'twitch.tv', 'twitter.com', 'reddit.com', 'discord.com', 'accounts.google.com', 'instagram.com'];
+		const freeSpinHostnames = ['youtube.com', 'twitch.tv', 'twitter.com', 'reddit.com', 'discord.com', 'accounts.google.com', 'instagram.com', 'github.com'];
 
 		// sanity check, if social window is destroyed but the reference still exists
 		if (typeof socialWindowReference !== 'undefined' && socialWindowReference.isDestroyed()) socialWindowReference = void 0;

src/preload.ts

@@ -2,7 +2,7 @@
 import { join as pathJoin, resolve as pathResolve } from 'path';
 import { ipcRenderer } from 'electron';
 import { fetchGame } from './matchmaker';
-import { hasOwn, createElement, hiddenClassesImages, injectSettingsCSS, toggleSettingCSS } from './utils';
+import { hasOwn, createElement, hiddenClassesImages, injectSettingsCSS, toggleSettingCSS, repoID } from './utils';
 import { renderSettings } from './settingsui';
 import { compareVersions } from 'compare-versions';
 
@@ -26,7 +26,6 @@ export const strippedConsole = {
 };
 
 const $assets = pathResolve(__dirname, '..', 'assets');
-const repoID = 'KraXen72/crankshaft';
 
 /** actual css for settings that are style-based (hide ads, etc)*/
 export const styleSettingsCSS = {
@@ -223,7 +222,6 @@ function patchSettings(_userPrefs: UserPrefs) {
 		const getSettingsHook = settingsWindow.getSettings.bind(settingsWindow);
 		const changeTabHook = settingsWindow.changeTab.bind(settingsWindow);
 
-		// coldStart: settings window is launched while clientTab === true
 		window.showWindow = (...args: unknown[]) => {
 			const result = showWindowHook(...args);
 

src/settingsui.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import { writeFileSync } from 'fs';
 import { ipcRenderer, shell } from 'electron'; // add app if crashes
-import { classListSet, createElement, haveSameContents, toggleSettingCSS, hasOwn } from './utils';
+import { createElement, haveSameContents, toggleSettingCSS, hasOwn, repoID } from './utils';
 import { styleSettingsCSS, getTimezoneByRegionKey } from './preload';
 import { su } from './userscripts';
 import { MATCHMAKER_GAMEMODES, MATCHMAKER_REGIONS } from './matchmaker';
@@ -31,6 +31,10 @@ ipcRenderer.on('m_userPrefs_for_settingsUI', (event, recieved_paths: IPaths, rec
 	paths = recieved_paths;
 	userPrefs = recieved_userPrefs;
 	userPrefsCache = { ...recieved_userPrefs }; // cache userprefs
+
+	settingsDesc.resourceSwapper.button = { icon: 'folder', text: 'Swapper', callback: e => openPath(e, paths.swapperPath) }
+	settingsDesc.customFilters.button = { icon: 'filter_list', text: 'Filters file', callback: e => openPath(e, paths.filtersPath) }
+	settingsDesc.userscripts.button = { icon: 'folder', text: 'Scripts', callback: e => openPath(e, paths.userscriptsPath) }
 });
 
 /** joins the data: userPrefs and Desc: SettingsDesc into one array of objects */
@@ -42,6 +46,11 @@ function transformMarrySettings(data: UserPrefs, desc: SettingsDesc, callback: C
 	return renderReadySettings;
 }
 
+function openPath(e: MouseEvent, path: string) {
+	e.stopPropagation();
+	shell.openPath(path);
+}
+
 /**
  * each setting is defined here as a SettingsDesc object. check typescript intelliSense to see if you have all required props.
  * some setting types, like 'sel' will have more required props, for example 'opts'.
@@ -62,12 +71,12 @@ const settingsDesc: SettingsDesc = {
 	'angle-backend': { title: 'ANGLE Backend', type: 'sel', safety: 0, opts: ['default', 'gl', 'd3d11', 'd3d9', 'd3d11on12', 'vulkan'], cat: 0 },
 	fullscreen: { title: 'Start in Windowed/Fullscreen mode', type: 'sel', desc: "Use 'borderless' if you have client-capped fps and unstable fps in fullscreen", safety: 0, cat: 0, opts: ['windowed', 'maximized', 'fullscreen', 'borderless'] },
 	inProcessGPU: { title: 'In-Process GPU (video capture)', type: 'bool', desc: 'Enables video capture & embeds the GPU under the same process', safety: 1, cat: 0 },
-	resourceSwapper: { title: 'Resource swapper', type: 'bool', desc: 'Enable Krunker Resource Swapper. Reads Documents/Crankshaft/swapper', safety: 0, cat: 0 },
+	resourceSwapper: { title: 'Resource swapper', type: 'bool', desc: 'Enable Krunker Resource 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 },
 	hideAds: { title: 'Hide/Block Ads', type: 'sel', desc: 'With \'hide\' you can still claim free KR. Using \'block\' also blocks trackers.', safety: 0, cat: 0, refreshOnly: true, opts: ['block', 'hide', 'off'] },
-	customFilters: { title: 'Custom Filters', type: 'bool', desc: 'Enable custom network filters. Reads Documents/Crankshaft/filters.txt', safety: 0, cat: 0, refreshOnly: true },
-	userscripts: { title: 'Userscript support', type: 'bool', desc: 'Enable userscript support. place .js files in Documents/Crankshaft/scripts', safety: 1, cat: 0 },
+	customFilters: { title: 'Custom Filters', type: 'bool', desc: 'Enable custom network filters. ', safety: 0, cat: 0, refreshOnly: true },
+	userscripts: { title: 'Userscript support', type: 'bool', desc: `Enable userscript support. read <a href="https://github.com/${repoID}/blob/master/USERSCRIPTS.md" target="_blank">USERSCRIPTS.md</a> for more info.`, safety:1, cat:0 },
 
 	menuTimer: { title: 'Menu Timer', type: 'bool', safety: 0, cat: 1, instant: true },
 	hideReCaptcha: { title: 'Hide reCaptcha', type: 'bool', safety: 0, cat: 1, instant: true },
@@ -166,6 +175,7 @@ class SettingElem {
 	#disabled: boolean;
 
 	constructor(props: RenderReadySetting) {
+
 		/** @type {Object} save the props from constructor to this class (instance) */
 		this.props = props;
 
@@ -311,7 +321,7 @@ class SettingElem {
 			if (this.props.key === 'hideAds') {
 				const adsHidden = value === 'hide' || value === 'block';
 				toggleSettingCSS(styleSettingsCSS.hideAds, this.props.key, adsHidden);
-				classListSet(document.getElementById('hiddenClasses'), adsHidden, 'hiddenClasses-hideAds-bottomOffset');
+				document.getElementById('hiddenClasses').classList.toggle('hiddenClasses-hideAds-bottomOffset', adsHidden);
 			}
 
 			// you can add custom instant refresh callbacks for settings here
@@ -372,12 +382,19 @@ class SettingElem {
 		if (this.#wrapper !== false) return this.#wrapper; // return the element if already initialized
 
 		// i only create the element after .elem is called so i don't pollute the dom with virutal elements when making settings
+		const classes = ['setting', 'settName', `safety-${this.props.safety}`, this.type ]
+		if (this.props.button) classes.push('has-button')
+
 		const wrapper = createElement('div', {
-			class: ['setting', 'settName', `safety-${this.props.safety}`, this.props.type],
+			class: classes,
 			id: `settingElem-${this.props.key}`,
 			innerHTML: this.HTML
 		});
 
+		if (this.props.button) {  
+			const { icon, text, callback } = this.props.button;
+			wrapper.appendChild(skeleton.settingButton(icon, text, callback, this.props.button.customTitle ?? void 0)) 
+		}
 		if (this.type === 'sel') wrapper.querySelector('select').value = this.props.value;
 		if (typeof this.props.callback === 'undefined') this.props.callback = 'normal'; // default callback
 
@@ -500,7 +517,7 @@ export function renderSettings() {
 			csSettings.appendChild(skeleton.catBodElem('userscripts', skeleton.notice('NOTE: refresh page to see changes', { iconHTML: skeleton.refreshIcon('refresh-icon') })));
 		} else {
 			csSettings.appendChild(skeleton.catBodElem('userscripts', skeleton.notice('No userscripts...',
-				{ desc: 'Go to the Crankshaft <a href="https://github.com/KraXen72/crankshaft#userscripts">README.md</a> to download some made by the client dev.' })));
+				{ desc: `Go to the Crankshaft <a href="https://github.com/${repoID}#userscripts">README.md</a> to download some made by the client dev.` })));
 		}
 
 		const userscriptSettings: RenderReadySetting[] = su.userscripts
@@ -558,16 +575,8 @@ export function renderSettings() {
 		header.addEventListener('click', collapseCallback);
 	});
 
-	function openPath(e: MouseEvent, path: string) {
-		e.stopPropagation();
-		shell.openPath(path);
-	}
-
 	const buttonsHolder = createElement('div', { class: ['crankshaft-button-holder', 'setting', 'settName'], innerHTML: '<span class="buttons-title">Quick open:</span>' });
 	buttonsHolder.appendChild(skeleton.settingButton('file_open', 'Settings file', e => openPath(e, userPrefsPath)));
-	buttonsHolder.appendChild(skeleton.settingButton('filter_list', 'Filters file', e => openPath(e, paths.filtersPath)));
-	buttonsHolder.appendChild(skeleton.settingButton('folder', 'Swapper', e => openPath(e, paths.swapperPath)));
-	buttonsHolder.appendChild(skeleton.settingButton('folder', 'Scripts', e => openPath(e, paths.userscriptsPath)));
 	buttonsHolder.appendChild(skeleton.settingButton('folder', 'Crankshaft folder', e => openPath(e, paths.configPath)));
 	document.querySelector('.setBodH.Crankshaft-setBodH').prepend(buttonsHolder);
 }