Plugins: Add plugin settings

- Add support for plugin settings, they appear in the same menu as the plugins, indented from the left to emphasize which plugin the setting belongs to
  - Note that plugin settings can still be changed even when the plugins are stopped
- Add tooltips to plugin menu to view the plugin descriptions, description_lang can also be used
- Fix scolling not working on song select when returning from game settings
- Let instance owners set default plugin files in config.py, to make them easier to maintain
- plugins.add() can now add plugins using a url
- Plugins can be hidden from the plugin menu using PluginLoader.hide, an option in plugins.add(), or in config.py
- Make p2.disable() incremental so that multiple plugins can disable multiplayer independently
- Server no longer crashes if certain optional config fields were not copied over from an updated example config
- Fix not being able to unload plugins if one was imported with errors

public/src/css/view.css

@@ -293,7 +293,7 @@ kbd{
 #settings-latency .view{
 	width: 30em;
 }
-#settings-latency .setting-value{
+.setting-value{
 	position: relative;
 }
 .setting-value:not(.selected) .latency-buttons{

public/src/js/browsersupport.js

@@ -56,6 +56,10 @@ function browserSupport(){
 		},
 		"KeyboardEvent.key": function(){
 			return "key" in KeyboardEvent.prototype
+		},
+		"Module import": function(){
+			eval("import('data:text/javascript,')")
+			return true
 		}
 	}
 	failedTests = []
@@ -107,10 +111,12 @@ function showUnsupported(strings){
 	var warn = document.createElement("div")
 	warn.id = "unsupportedWarn"
 	warn.innerText = "!"
+	warn.textContent = "!"
 	div.appendChild(warn)
 	var hide = document.createElement("div")
 	hide.id = "unsupportedHide"
 	hide.innerText = "x"
+	hide.textContent = "x"
 	div.appendChild(hide)
 	
 	var span = document.createElement("span")
@@ -119,6 +125,7 @@ function showUnsupported(strings){
 		if(i !== 0){
 			var link = document.createElement("a")
 			link.innerText = strings.browserSupport.details
+			link.textContent = strings.browserSupport.details
 			span.appendChild(link)
 		}
 		span.appendChild(document.createTextNode(browserWarning[i]))
@@ -133,6 +140,7 @@ function showUnsupported(strings){
 	for(var i = 0; i < failedTests.length; i++){
 		var li = document.createElement("li")
 		li.innerText = failedTests[i]
+		li.textContent = failedTests[i]
 		ul.appendChild(li)
 	}
 	details.appendChild(ul)
@@ -143,6 +151,7 @@ function showUnsupported(strings){
 			var chrome = document.createElement("a")
 			chrome.href = "https://www.google.com/chrome/"
 			chrome.innerText = "Google Chrome"
+			chrome.textContent = "Google Chrome"
 			details.appendChild(chrome)
 		}
 		details.appendChild(document.createTextNode(supportedBrowser[i]))

public/src/js/importsongs.js

@@ -108,7 +108,10 @@
 					)
 				))){
 					this.plugins.forEach(obj => {
-						var plugin = plugins.add(obj.data, obj.name)
+						var plugin = plugins.add(obj.data, {
+							name: obj.name,
+							raw: true
+						})
 						if(plugin){
 							pluginAmount++
 							plugin.imported = true

public/src/js/loader.js

@@ -183,7 +183,7 @@ class Loader{
 					var image = document.createElement("img")
 					var url = gameConfig.assets_baseurl + "img/" + name
 					categoryPromises.push(pageEvents.load(image).catch(response => {
-						this.errorMsg(response, url)
+						return this.errorMsg(response, url)
 					}))
 					image.id = name
 					image.src = url
@@ -325,6 +325,26 @@ class Loader{
 				
 				promises.push(this.canvasTest.drawAllImages())
 				
+				if(gameConfig.plugins){
+					gameConfig.plugins.forEach(obj => {
+						if(obj.url){
+							var plugin = plugins.add(obj.url, {
+								hide: obj.hide
+							})
+							if(plugin){
+								plugin.loadErrors = true
+								promises.push(plugin.load(true).then(() => {
+									if(obj.start){
+										plugin.start()
+									}
+								}, response => {
+									return this.errorMsg(response, obj.url)
+								}))
+							}
+						}
+					})
+				}
+				
 				Promise.all(promises).then(result => {
 					perf.allImg = result
 					perf.load = Date.now() - this.startTime
@@ -332,8 +352,8 @@ class Loader{
 					this.clean()
 					this.callback(songId)
 					pageEvents.send("ready", readyEvent)
-				})
-			}, this.errorMsg.bind(this))
+				}, () => this.errorMsg())
+			}, () => this.errorMsg())
 		})
 	}
 	addPromise(promise, url){
@@ -433,6 +453,7 @@ class Loader{
 		}
 		var percentage = Math.floor(this.loadedAssets * 100 / (this.promises.length + this.afterJSCount))
 		this.errorTxt.element[this.errorTxt.method] = "```\n" + this.errorMessages.join("\n") + "\nPercentage: " + percentage + "%\n```"
+		return Promise.reject(error)
 	}
 	assetLoaded(){
 		if(!this.error){

public/src/js/p2.js

@@ -11,6 +11,7 @@ class P2Connection{
 		this.allEvents = new Map()
 		this.addEventListener("message", this.message.bind(this))
 		this.currentHash = ""
+		this.disabled = 0
 		pageEvents.add(window, "hashchange", this.onhashchange.bind(this))
 	}
 	addEventListener(type, callback){
@@ -257,11 +258,11 @@ class P2Connection{
 		}
 	}
 	enable(){
-		this.disabled = false
-		this.open()
+		this.disabled = Math.max(0, this.disabled - 1)
+		setTimeout(this.open.bind(this), 100)
 	}
 	disable(){
-		this.disabled = true
+		this.disabled++
 		this.close()
 	}
 }

public/src/js/plugins.js

@@ -8,18 +8,39 @@ class Plugins{
 		this.hashes = []
 		this.startOrder = []
 	}
-	add(script, name){
+	add(script, options){
+		options = options || {}
 		var hash = md5.base64(script.toString())
+		var isUrl = typeof script === "string" && !options.raw
+		if(isUrl){
+			hash = "url " + hash
+		}else if(typeof script !== "string"){
+			hash = "class " + hash
+		}
+		var name = options.name
+		if(!name && isUrl){
+			name = script
+			var index = name.lastIndexOf("/")
+			if(index !== -1){
+				name = name.slice(index + 1)
+			}
+			if(name.endsWith(".taikoweb.js")){
+				name = name.slice(0, -".taikoweb.js".length)
+			}else if(name.endsWith(".js")){
+				name = name.slice(0, -".js".length)
+			}
+		}
+		name = name || "plugin"
 		if(this.hashes.indexOf(hash) !== -1){
 			console.warn("Skip adding an already addded plugin: " + name)
 			return
 		}
-		name = name || "plugin"
 		var baseName = name
 		for(var i = 2; name in this.pluginMap; i++){
 			name = baseName + i.toString()
 		}
-		var plugin = new PluginLoader(script, name, hash)
+		var plugin = new PluginLoader(script, name, hash, options.raw)
+		plugin.hide = !!options.hide
 		this.allPlugins.push({
 			name: name,
 			plugin: plugin
@@ -41,10 +62,14 @@ class Plugins{
 		if(index !== -1){
 			this.allPlugins.splice(index, 1)
 		}
+		var index = this.startOrder.indexOf(name)
+		if(index !== -1){
+			this.startOrder.splice(index, 1)
+		}
 		delete this.pluginMap[name]
 	}
 	load(name){
-		this.pluginMap[name].load()
+		return this.pluginMap[name].load()
 	}
 	loadAll(){
 		for(var i = 0; i < this.allPlugins.length; i++){
@@ -52,7 +77,7 @@ class Plugins{
 		}
 	}
 	start(name){
-		this.pluginMap[name].start()
+		return this.pluginMap[name].start()
 	}
 	startAll(){
 		for(var i = 0; i < this.allPlugins.length; i++){
@@ -60,7 +85,7 @@ class Plugins{
 		}
 	}
 	stop(name){
-		this.pluginMap[name].stop()
+		return this.pluginMap[name].stop()
 	}
 	stopAll(){
 		for(var i = this.startOrder.length; i--;){
@@ -68,7 +93,7 @@ class Plugins{
 		}
 	}
 	unload(name){
-		this.pluginMap[name].unload()
+		return this.pluginMap[name].unload()
 	}
 	unloadAll(){
 		for(var i = this.startOrder.length; i--;){
@@ -127,30 +152,79 @@ class Plugins{
 	}
 	
 	getSettings(){
-		var items = {}
+		var items = []
 		for(var i = 0; i < this.allPlugins.length; i++){
 			var obj = this.allPlugins[i]
 			let plugin = obj.plugin
-			items[obj.name] = {
-				name: plugin.module ? this.getLocalTitle(plugin.module.name || obj.name, plugin.module.name_lang) : obj.name,
-				type: "toggle",
-				default: true,
-				getItem: () => plugin.started,
-				setItem: value => {
-					if(plugin.started && !value){
-						this.stop(plugin.name)
-					}else if(!plugin.started && value){
-						this.start(plugin.name)
-					}
+			if(!plugin.loaded){
+				continue
+			}
+			if(!plugin.hide){
+				let description
+				let description_lang
+				var module = plugin.module
+				if(module){
+					description = [
+						module.description,
+						module.author ? strings.plugins.author.replace("%s", module.author) : null,
+						module.version ? strings.plugins.version.replace("%s", module.version) : null
+					].filter(Boolean).join("\n")
+					description_lang = {}
+					languageList.forEach(lang => {
+						description_lang[lang] = [
+							this.getLocalTitle(module.description, module.description_lang, lang),
+							module.author ? allStrings[lang].plugins.author.replace("%s", module.author) : null,
+							module.version ? allStrings[lang].plugins.version.replace("%s", module.version) : null
+						].filter(Boolean).join("\n")
+					})
 				}
+				var name = module && module.name || obj.name
+				var name_lang = module && module.name_lang
+				items.push({
+					name: name,
+					name_lang: name_lang,
+					description: description,
+					description_lang: description_lang,
+					type: "toggle",
+					default: true,
+					getItem: () => plugin.started,
+					setItem: value => {
+						if(plugin.started && !value){
+							this.stop(plugin.name)
+						}else if(!plugin.started && value){
+							this.start(plugin.name)
+						}
+					}
+				})
+			}
+			var settings = plugin.settings()
+			if(settings){
+				settings.forEach(setting => {
+					if(!setting.name){
+						setting.name = name
+						if(!setting.name_lang){
+							setting.name_lang = name_lang
+						}
+					}
+					if(typeof setting.getItem !== "function"){
+						setting.getItem = () => {}
+					}
+					if(typeof setting.setItem !== "function"){
+						setting.setItem = () => {}
+					}
+					if(!("indent" in setting) && !plugin.hide){
+						setting.indent = 1
+					}
+					items.push(setting)
+				})
 			}
 		}
 		return items
 	}
-	getLocalTitle(title, titleLang){
+	getLocalTitle(title, titleLang, lang){
 		if(titleLang){
 			for(var id in titleLang){
-				if(id === strings.id && titleLang[id]){
+				if(id === (lang || strings.id) && titleLang[id]){
 					return titleLang[id]
 				}
 			}
@@ -163,20 +237,30 @@ class PluginLoader{
 	constructor(...args){
 		this.init(...args)
 	}
-	init(script, name, hash){
+	init(script, name, hash, raw){
 		this.name = name
 		this.hash = hash
 		if(typeof script === "string"){
-			this.url = URL.createObjectURL(new Blob([script], {
-				type: "application/javascript"
-			}))
+			if(raw){
+				this.url = URL.createObjectURL(new Blob([script], {
+					type: "application/javascript"
+				}))
+			}else{
+				this.url = script
+			}
 		}else{
 			this.class = script
 		}
 	}
-	load(){
-		if(this.loaded || !this.url && !this.class){
+	load(loadErrors){
+		if(this.loaded){
 			return Promise.resolve()
+		}else if(!this.url && !this.class){
+			if(loadErrors){
+				return Promise.reject()
+			}else{
+				return Promise.resolve()
+			}
 		}else{
 			return (this.url ? import(this.url) : Promise.resolve({
 				default: this.class
@@ -209,7 +293,11 @@ class PluginLoader{
 			}, e => {
 				console.error(e)
 				this.error()
-				return Promise.resolve()
+				if(loadErrors){
+					return Promise.reject(e)
+				}else{
+					return Promise.resolve()
+				}
 			})
 		}
 	}
@@ -300,6 +388,20 @@ class PluginLoader{
 		}
 		this.unload(true)
 	}
+	settings(){
+		if(this.module && this.module.settings){
+			try{
+				var settings = this.module.settings()
+			}catch(e){
+				console.error(e)
+				this.error()
+				return
+			}
+			if(Array.isArray(settings)){
+				return settings
+			}
+		}
+	}
 }
 
 class EditValue{
@@ -308,6 +410,9 @@ class EditValue{
 	}
 	init(parent, name){
 		if(name){
+			if(!parent){
+				throw new Error("Parent is not defined")
+			}
 			this.name = [parent, name]
 			this.delete = !(name in parent)
 		}else{

public/src/js/settings.js

@@ -253,27 +253,72 @@ class SettingsView{
 			}
 			var settingBox = document.createElement("div")
 			settingBox.classList.add("setting-box")
+			if(current.indent){
+				settingBox.style.marginLeft = (2 * current.indent || 0).toString() + "em"
+			}
 			var nameDiv = document.createElement("div")
 			nameDiv.classList.add("setting-name", "stroke-sub")
-			var name = current.name || strings.settings[i].name
+			if(current.name || current.name_lang){
+				var name = this.getLocalTitle(current.name, current.name_lang)
+			}else{
+				var name = strings.settings[i].name
+			}
 			this.setAltText(nameDiv, name)
+			if(current.description || current.description_lang){
+				nameDiv.title = this.getLocalTitle(current.description, current.description_lang) || ""
+			}
 			settingBox.appendChild(nameDiv)
 			var valueDiv = document.createElement("div")
 			valueDiv.classList.add("setting-value")
-			this.getValue(i, valueDiv)
+			let outputObject = {
+				id: i,
+				settingBox: settingBox,
+				nameDiv: nameDiv,
+				valueDiv: valueDiv,
+				name: current.name,
+				name_lang: current.name_lang,
+				description: current.description,
+				description_lang: current.description_lang
+			}
+			if(current.type === "number"){
+				["min", "max", "fixedPoint", "step", "sign", "format", "format_lang"].forEach(opt => {
+					if(opt in current){
+						outputObject[opt] = current[opt]
+					}
+				})
+				outputObject.valueText = document.createTextNode("")
+				valueDiv.appendChild(outputObject.valueText)
+				var buttons = document.createElement("div")
+				buttons.classList.add("latency-buttons")
+				var buttonMinus = document.createElement("span")
+				buttonMinus.innerText = "-"
+				buttons.appendChild(buttonMinus)
+				this.addTouchRepeat(buttonMinus, event => {
+					this.numberAdjust(outputObject, -1)
+				})
+				var buttonPlus = document.createElement("span")
+				buttonPlus.innerText = "+"
+				buttons.appendChild(buttonPlus)
+				this.addTouchRepeat(buttonPlus, event => {
+					this.numberAdjust(outputObject, 1)
+				})
+				valueDiv.appendChild(buttons)
+				this.addTouch(settingBox, event => {
+					if(event.target.tagName !== "SPAN"){
+						this.setValue(i)
+					}
+				})
+			}else{
+				this.addTouchEnd(settingBox, event => this.setValue(i))
+			}
 			settingBox.appendChild(valueDiv)
 			content.appendChild(settingBox)
 			if(!toSetting && this.items.length === this.selected || toSetting === i){
 				this.selected = this.items.length
 				settingBox.classList.add("selected")
 			}
-			this.addTouchEnd(settingBox, event => this.setValue(i))
-			this.items.push({
-				id: i,
-				settingBox: settingBox,
-				nameDiv: nameDiv,
-				valueDiv: valueDiv
-			})
+			this.items.push(outputObject)
+			this.getValue(i, valueDiv)
 		}
 		this.items.push({
 			id: "default",
@@ -443,6 +488,9 @@ class SettingsView{
 		pageEvents.remove(element, ["mousedown", "touchend"])
 	}
 	getValue(name, valueDiv){
+		if(!this.items){
+			return
+		}
 		var current = this.settingsItems[name]
 		if(current.getItem){
 			var value = current.getItem()
@@ -482,6 +530,17 @@ class SettingsView{
 				}
 				value += string
 			})
+		}else if(current.type === "number"){
+			var mul = Math.pow(10, current.fixedPoint || 0)
+			this.items[name].value = value * mul
+			value = Intl.NumberFormat(strings.intl, current.sign ? {
+				signDisplay: "always"
+			} : undefined).format(value)
+			if(current.format || current.format_lang){
+				value = this.getLocalTitle(current.format, current.format_lang).replace("%s", value)
+			}
+			this.items[name].valueText.data = value
+			return
 		}
 		valueDiv.innerText = value
 	}
@@ -496,6 +555,9 @@ class SettingsView{
 		var selectedIndex = this.items.findIndex(item => item.id === name)
 		var selected = this.items[selectedIndex]
 		if(this.mode !== "settings"){
+			if(this.mode === "number"){
+				return this.numberBack(this.items[this.selected])
+			}
 			if(this.selected === selectedIndex){
 				this.keyboardBack(selected)
 				this.playSound("se_don")
@@ -530,6 +592,12 @@ class SettingsView{
 			this.latencySet()
 			this.playSound("se_don")
 			return
+		}else if(current.type === "number"){
+			this.mode = "number"
+			selected.settingBox.style.animation = "none"
+			selected.valueDiv.classList.add("selected")
+			this.playSound("se_don")
+			return
 		}
 		if(current.setItem){
 			promise = current.setItem(value)
@@ -633,6 +701,19 @@ class SettingsView{
 				this.playSound(name === "confirm" ? "se_don" : "se_cancel")
 			}else if(name === "up" || name === "right" || name === "down" || name === "left"){
 				this.latencySetAdjust(latencySelected, (name === "up" || name === "right") ? 1 : -1)
+				if(event){
+					event.preventDefault()
+				}
+			}
+		}else if(this.mode === "number"){
+			if(name === "confirm" || name === "back"){
+				this.numberBack(selected)
+				this.playSound(name === "confirm" ? "se_don" : "se_cancel")
+			}else if(name === "up" || name === "right" || name === "down" || name === "left"){
+				this.numberAdjust(selected, (name === "up" || name === "right") ? 1 : -1)
+				if(event){
+					event.preventDefault()
+				}
 			}
 		}
 	}
@@ -833,6 +914,42 @@ class SettingsView{
 		this.latencySettings.style.display = ""
 		this.mode = "settings"
 	}
+	numberAdjust(selected, add){
+		var selectedItem = this.items[this.selected]
+		var mul = Math.pow(10, selected.fixedPoint || 0)
+		selectedItem.value += add * ("step" in selected ? selected.step : 1)
+		if("max" in selected && selectedItem.value > selected.max * mul){
+			selectedItem.value = selected.max * mul
+		}else if("min" in selected && selectedItem.value < selected.min * mul){
+			selectedItem.value = selected.min * mul
+		}else{
+			this.playSound("se_ka")
+		}
+		var valueText = Intl.NumberFormat(strings.intl, selected.sign ? {
+			signDisplay: "always"
+		} : undefined).format(selectedItem.value / mul)
+		if(selected.format || selected.format_lang){
+			valueText = this.getLocalTitle(selected.format, selected.format_lang).replace("%s", valueText)
+		}
+		selectedItem.valueText.data = valueText
+	}
+	numberBack(selected){
+		this.mode = "settings"
+		selected.settingBox.style.animation = ""
+		selected.valueDiv.classList.remove("selected")
+		var current = this.settingsItems[selected.id]
+		var promise
+		var mul = Math.pow(10, selected.fixedPoint || 0)
+		var value = selected.value / mul
+		if(current.setItem){
+			promise = current.setItem(value)
+		}else{
+			settings.setItem(selected.id, value)
+		}
+		(promise || Promise.resolve()).then(() => {
+			this.getValue(selected.id, selected.valueText)
+		})
+	}
 	addMs(input){
 		var split = strings.calibration.ms.split("%s")
 		var index = 0
@@ -869,6 +986,9 @@ class SettingsView{
 		this.playSound("se_don")
 	}
 	onEnd(){
+		if(this.mode === "number"){
+			this.numberBack(this.items[this.selected])
+		}
 		this.clean()
 		this.playSound("se_don")
 		setTimeout(() => {
@@ -882,6 +1002,16 @@ class SettingsView{
 			}
 		}, 500)
 	}
+	getLocalTitle(title, titleLang){
+		if(titleLang){
+			for(var id in titleLang){
+				if(id === strings.id && titleLang[id]){
+					return titleLang[id]
+				}
+			}
+		}
+		return title
+	}
 	setLang(lang){
 		settings.setLang(lang)
 		if(failedTests.length !== 0){
@@ -890,8 +1020,15 @@ class SettingsView{
 		for(var i in this.items){
 			var item = this.items[i]
 			if(item.valueDiv){
-				var name = strings.settings[item.id].name
+				if(item.name || item.name_lang){
+					var name = this.getLocalTitle(item.name, item.name_lang)
+				}else{
+					var name = strings.settings[item.id].name
+				}
 				this.setAltText(item.nameDiv, name)
+				if(item.description || item.description_lang){
+					item.nameDiv.title = this.getLocalTitle(item.description, item.description_lang) || ""
+				}
 				this.getValue(item.id, item.valueDiv)
 			}
 		}

public/src/js/songselect.js

@@ -1161,9 +1161,9 @@ class SongSelect{
 				selectedWidth = this.songAsset.selectedWidth
 			}
 			
-			var lastMoveMul = Math.pow(Math.abs(this.state.lastMove), 1 / 4)
+			var lastMoveMul = Math.pow(Math.abs(this.state.lastMove || 0), 1 / 4)
 			var changeSpeed = this.songSelecting.speed * lastMoveMul
-			var resize = changeSpeed * this.songSelecting.resize / lastMoveMul
+			var resize = changeSpeed * (lastMoveMul === 0 ? 0 : this.songSelecting.resize / lastMoveMul)
 			var scrollDelay = changeSpeed * this.songSelecting.scrollDelay
 			var resize2 = changeSpeed - resize
 			var scroll = resize2 - resize - scrollDelay * 2

public/src/js/strings.js

@@ -1323,6 +1323,14 @@ var translations = {
 				one: "%s plugin",
 				other: "%s plugins"
 			}
+		},
+		author: {
+			ja: null,
+			en: "By %s"
+		},
+		version: {
+			ja: null,
+			en: "Version %s"
 		}
 	}
 }