Merge branch 'feature-accountmanager'

app/modules/account-manager.js

@@ -0,0 +1,110 @@
+'use strict';
+
+let WindowManager = require('./window-manager');
+
+const HTML = {
+	BTN_INNER: '<div id="accManagerBtn" class="button buttonB bigShadowT" onmouseenter="playTick()" style="display:block;width:300px;text-align:center;padding:15px;font-size:23px;pointer-events:all;padding-bottom:22px;margin-left:-5px;margin-top:5px">Alt-Manager</div>',
+	ALT_MENU: '<div id="altAccounts"></div><div id="buttons"><div class="accountButton" id="altAdd">Add new account</div></div>',
+	FORM: '<input id="accName" type="text" placeholder="Enter Username" class="accountInput" style="margin-top:25px;" value=""><input id="accPass" type="password" placeholder="Enter Password" class="accountInput"><div id="accResp" style="margin-top:10px;font-size:18px;color:rgba(0,0,0,0.5);"><span style="color:rgba(0,0,0,0.8)"></span></div><div class="accountButton" id="addAccountButtonB" style="">Add Account</div></div></div>',
+	STYLE: '#altAdd,#addAccountButtonB{width:100%}.altAccountsLISTED{margin-right:10px;padding:0!important;background:0 0!important;box-shadow:unset!important}.altdeletebtn{display:inline-block;padding:10px 13px;color:#fff;background-color:#ff4747;border-radius:0 4px 4px 0;box-shadow:inset 0 -7px 0 0 #992b2b}.altlistelement{display:inline-block;padding:10px 15px 10px 17px;color:#fff;background-color:#ffc147;border-radius:4px 0 0 4px;box-shadow:inset 0 -7px 0 0 #b08531}.deleteColor{color:#000!important;background-color:#313131!important}'
+};
+
+/**
+ * Creates a new instance of the AccountManager.
+ * This class should not be used anywhere else
+ * other than the single instance in app/preload/game.js
+ * thus, it is not further documented.
+ *
+ * @class AccountManager
+ */
+class AccountManager {
+	constructor(window, document, localStorage) {
+		this.window = window;
+		this.document = document;
+		this.localStorage = localStorage;
+		this.managerWin = new WindowManager(document, 'accManagerBtn');
+		this.addWin = new WindowManager(document, 'altAdd');
+
+		!this.localStorage.getItem('altAccounts') && this.localStorage.setItem('altAccounts', '[]');
+	}
+
+	addAccount(name, pass) {
+		if (name.replace(/\s/, '') === '' || pass.replace(/\s/, '') === '') return alert('Username and Password fields must not be empty.');
+		let users = JSON.parse(this.localStorage.getItem('altAccounts'));
+		if (users.find(e => e.username === name)) return alert('This Username has already been added.');
+		this.localStorage.setItem('altAccounts', JSON.stringify(
+			[].concat(users, { username: name, password: pass })
+		));
+		this.addWin.hide();
+		this.openPopup();
+	}
+
+	deleteAccount(name) {
+		this.localStorage.setItem('altAccounts', JSON.stringify(
+			JSON.parse(this.localStorage.getItem('altAccounts')).filter(e => e.username !== name)
+		));
+		this.managerWin.hide();
+		this.openPopup();
+	}
+
+	login(name, pass) {
+		this.window.logoutAcc();
+		this.document.getElementById('accName').value = name;
+		this.document.getElementById('accPass').value = pass;
+		this.window.loginAcc();
+		this.document.getElementById('accName').style.display = 'none';
+		this.document.getElementById('accPass').style.display = 'none';
+		this.document.getElementsByClassName('accountButton')[0].style.display = 'none';
+		this.document.getElementsByClassName('accountButton')[1].style.display = 'none';
+	}
+
+	openPopup() {
+		this.managerWin.setContent(HTML.ALT_MENU);
+		this.managerWin.toggle();
+		this.watcher();
+	}
+
+	watcher() {
+		let storage = JSON.parse(this.localStorage.getItem('altAccounts'));
+
+		this.document.getElementById('altAdd').addEventListener('click', () => {
+			this.managerWin.hide();
+			this.addWin.setContent(HTML.FORM);
+			this.addWin.show();
+			this.document.getElementById('addAccountButtonB').addEventListener('click', () => (
+				this.addAccount(this.document.getElementById('accName').value, this.document.getElementById('accPass').value)
+			));
+		});
+
+		storage.forEach(e => {
+			const div = this.document.createElement('div');
+			div.innerHTML = `<span class="altlistelement" onmouseenter="playTick()">${e.username}</span><span class="altdeletebtn" onmouseenter="playTick()">X</span>`;
+			div.className = 'button altAccountsLISTED';
+			this.document.getElementById('altAccounts').appendChild(div);
+		});
+
+		this.document.querySelectorAll('.altlistelement').forEach(i => i.addEventListener('click', (e) => {
+			let selected = storage.find(obj => obj.username === e.target.innerText);
+			this.login(selected.username, selected.password);
+			this.managerWin.hide();
+		}));
+
+		this.document.querySelectorAll('.altdeletebtn').forEach(i => i.addEventListener('click', (e) => {
+			let tar = e.target.previousElementSibling.innerText;
+			confirm(`Do you really want to remove the account "${tar}" from the Alt-Manager?`) && this.deleteAccount(tar);
+		}));
+	}
+
+	injectStyles() {
+		this.document.head.appendChild(Object.assign(this.document.createElement('style'), { innerText: HTML.STYLE }));
+		let tar = this.document.getElementById('customizeButton');
+
+		let tmp = this.document.createElement('div');
+		tmp.innerHTML = HTML.BTN_INNER.trim();
+
+		tar.parentNode.insertBefore(tmp.firstChild, tar.nextSibling);
+		this.document.getElementById('accManagerBtn').addEventListener('click', () => this.openPopup());
+	}
+}
+
+module.exports = AccountManager;

app/modules/window-manager.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const STYLES = '#idkr-windowHolder{width:100%;height:100%;position:absolute}#idkr-menuWindow{position:absolute;left:50%;top:50%;border-radius:6px;max-height:calc(100% - 480px);transform:translate(-50%,-50%);z-index:2;overflow-y:auto;display:inline-block;text-align:left;pointer-events:auto;padding:20px;width:705px;font-size:20px;background-color:#fff;-webkit-box-shadow:0 9px 0 0 #a6a6a6;-moz-box-shadow:0 9px 0 0 #a6a6a6;box-shadow:0 9px 0 0 #a6a6a6}';
+
+/**
+ * Creates a new controllable PopUp Element
+ *
+ * @class WindowManager
+ */
+class WindowManager {
+	/**
+	 * Creates an instance of WindowManager.
+	 * @param {HTMLDocument} document - Krunkers Top-Level DOM document (otherwise not accessible from within this class)
+	 * @param {String} callerId - The ID of the Button element that called/triggered this Class
+	 * @param {boolean} [hideKrunkerWindowsOnShow=true] - Should the created popup hide, when a krunker popup is opened? Default=Yes
+	 * @memberof WindowManager
+	 */
+	constructor(document, callerId, hideKrunkerWindowsOnShow = true) {
+		this.$ = document;
+		this.callerId = callerId;
+		this.hideOnShow = hideKrunkerWindowsOnShow;
+		this.shown = false;
+
+		document.addEventListener('DOMContentLoaded', () => {
+			if (!document.getElementById('idkr-windowHolder')) {
+				let w = document.createElement('div');
+				w.setAttribute('id', 'idkr-windowHolder');
+				w.setAttribute('style', 'display: none;');
+				w.innerHTML = '<div id="idkr-menuWindow"></div>';
+				document.getElementsByTagName('body')[0].appendChild(w);
+
+				let s = document.createElement('style');
+				s.innerHTML = STYLES;
+				document.getElementsByTagName('body')[0].appendChild(s);
+
+				document.getElementsByTagName('body')[0].addEventListener('click', e => {
+					// @ts-ignore
+					(!e.path.find(p => p.id === 'idkr-menuWindow' || p.id === this.callerId)) && this.hide();
+				});
+			}
+		});
+	}
+
+	/**
+	 * Set the innder HTML of the new PopUp
+	 *
+	 * @param {String} content
+	 * @memberof WindowManager
+	 */
+	setContent(content) {
+		this.$.getElementById('idkr-menuWindow').innerHTML = content;
+	}
+
+	/**
+	 * Shows the PopUp (overrides style)
+	 *
+	 * @memberof WindowManager
+	 */
+	show() {
+		if (this.hideOnShow) this.$.getElementById('windowHolder').setAttribute('style', 'display: none;');
+		this.$.getElementById('idkr-windowHolder').setAttribute('style', 'display: block;');
+		this.shown = true;
+	}
+
+	/**
+	 * Hides the PopUp (overrides style)
+	 *
+	 * @memberof WindowManager
+	 */
+	hide() {
+		this.$.getElementById('idkr-windowHolder').setAttribute('style', 'display: none;');
+		this.shown = false;
+	}
+
+	/**
+	 * Detects whether or not the PopUp is opened
+	 * and toggles accordingly
+	 *
+	 * @memberof WindowManager
+	 */
+	toggle() {
+		this.shown ? this.hide() : this.show();
+	}
+
+	/**
+	 * Returns true if the PopUp is currenty open, otherwise false.
+	 *
+	 * @returns {Boolean} shown
+	 * @memberof WindowManager
+	 */
+	isShown() {
+		return this.shown;
+	}
+}
+
+module.exports = WindowManager;

app/preload/game.js

@@ -1,3 +1,4 @@
+let AccountManager = require('../modules/account-manager');
 let settingsWindow = null;
 
 Object.assign(window.clientUtil, {
@@ -18,13 +19,17 @@ Object.assign(window.clientUtil, {
 // Workaround to avoid getting client popup
 window.OffCliV = true;
 
+let accoutManager = new AccountManager(window, document, localStorage);
+
 document.addEventListener('DOMContentLoaded', () => {
 	let windowsObserver = new MutationObserver(() => {
 		windowsObserver.disconnect();
 		window.clientUtil.events.emit('game-load');
 	});
 	windowsObserver.observe(document.getElementById('instructions'), { childList: true });
 
+	accoutManager.injectStyles();
+
 	// const gameCSS = Object.assign(document.createElement('link'), {
 	// 	rel: 'stylesheet', href: 'idkr-swap:' + path.join(__dirname, '../css/game.css')
 	// })
@@ -57,7 +62,7 @@ window.clientUtil.events.on('game-load', () => {
 				previousCategory = entry.cat;
 				tempHTML += `<div class='setHed' id='setHed_${btoa(entry.cat)}' onclick='window.windows[0].collapseFolder(this)'><span class='material-icons plusOrMinus'>keyboard_arrow_down</span> ${entry.cat}</div><div id='setBod_${btoa(entry.cat)}'>`;
 			}
-			tempHTML += `<div class='settName'${entry.info ? ` title='${entry.info}'` : ''}${entry.hide ? ` id='c_${entry.id}_div' style='display: none'` : ''}>${entry.name}${entry.needsRestart ? ' <span style="color: #eb5656">*</span>' : ''} ${entry.html()}</div>`;
+			tempHTML += `<div class='settName'${entry.needsRestart ? ' title="Requires Restart"' : ''}${entry.hide ? ` id='c_${entry.id}_div' style='display: none'` : ''}>${entry.name}${entry.needsRestart ? ' <span style="color: #eb5656">*</span>' : ''} ${entry.html()}</div>`;
 		});
 		return tempHTML ? tempHTML + '</div>' : '';
 	};