Use smooth/default image rendering

Fix sound settings from going on top of room settings.

index.html

@@ -48,6 +48,7 @@
 				<div id="midi-btn" class="ugly-button translate">MIDI In/Out</div>
 				<div id="record-btn" class="ugly-button translate">Record MP3</div>
 				<div id="synth-btn" class="ugly-button translate">Synth</div>
+				<div id="sound-btn" class="ugly-button sound-btn">Sound Select</div>
 				<div id="status"></div>
 				<div id="volume"></div>
 				<div id="volume-label">volume</div>

screen.css

@@ -1,7 +1,6 @@
-* { image-rendering: pixelated; }
 * { margin: 0; }
 * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
-html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana; color: white; text-shadow: #444 1px 1px; }
+html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana, "DejaVu Sans", sans-serif; color: white; text-shadow: #444 1px 1px; }
 body { position: absolute; }
 body {
 background: #242464; /* Old browsers */
@@ -111,7 +110,8 @@ table { border: 0; padding: 0; margin: 0; }
 .ugly-button.stuck { background: rgba(204, 187, 170, 0.35); }
 #new-room-btn { position: absolute; left: 300px; top: 4px; }
 #play-alone-btn { position: absolute; left: 420px; top: 4px; }
-#room-settings-btn { position: absolute; left: 540px; top: 4px; display: none; }
+#sound-btn { position: absolute; left: 540px; top: 4px; }
+#room-settings-btn { position: absolute; left: 660px; top: 4px; display: none; }
 #midi-btn { position: absolute; left: 300px; top: 32px; }
 #record-btn { position: absolute; left: 420px; top: 32px; }
 #synth-btn { position: absolute; left: 540px; top: 32px; }
@@ -156,6 +156,18 @@ table { border: 0; padding: 0; margin: 0; }
 .notification .connection.enabled:after { content: "ON"; font-size: 10px; color: #4a4; float: right; }
 .notification ul { list-style-type: upper-roman; }
 
+.notification .pack {
+    padding: 0px;
+    margin: 2px;
+    background: #fdd;
+    border: 1px solid #f84;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.notification .pack.enabled { background: #dfd; cursor: not-allowed; }
+.notification .pack:after { content: ""; font-size: 10px; color: #a44; float: right; }
+.notification .pack.enabled:after { content: "Selected"; font-size: 10px; color: #4a4; float: right; }
+
 
 #modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; }
 #modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0.5; position: absolute; left: 0; top: 0; }

script.js

@@ -28,7 +28,7 @@ $(function() {
 
 
 
-
+/*
 	var gSoundPath = "mp3/";
 	var gSoundExt = ".wav.mp3";
 	
@@ -68,7 +68,7 @@ $(function() {
 		gSoundPath = "https://dl.dropboxusercontent.com/u/70730519/Klaver/";
 		gSoundExt = ".wav";
 	}
-
+*/
 	
 
 
@@ -1002,6 +1002,143 @@ Rect.prototype.contains = function(x, y) {
 
 
 
+// Soundpack Stuff by electrashave ♥
+
+////////////////////////////////////////////////////////////////
+
+	function SoundSelector(piano) {
+		this.initialized = false;
+		this.keys = piano.keys;
+		this.loading = {};
+		this.notification;
+		this.packs = [];
+		this.piano = piano;
+		this.soundSelection = localStorage.soundSelection || "MPP Classic";
+		this.addPack({name: "MPP Classic", keys: Object.keys(this.piano.keys), ext: ".wav.mp3", url: "/mp3/"});
+	}
+
+	SoundSelector.prototype.addPack = function(pack, load) {
+		var self = this;
+		self.loading[pack.url || pack] = true;
+		function add(obj) {
+			var added = false;
+			for (var i = 0; self.packs.length > i; i++) {
+				if (obj.name == self.packs[i].name) {
+					added = true;
+					break;
+				}
+			}
+
+			if (added) return console.warn("Sounds already added!!"); //no adding soundpacks twice D:<
+
+			if (obj.url.substr(obj.url.length-1) != "/") obj.url = obj.url + "/";
+			var html = document.createElement("li");
+			html.classList = "pack";
+			html.innerText = obj.name + " (" + obj.keys.length + " keys)";
+			html.onclick = function() {
+				self.loadPack(obj.name);
+				self.notification.close();
+			};
+			obj.html = html;
+			self.packs.push(obj);
+			self.packs.sort(function(a, b) {
+				if(a.name < b.name) return -1;
+				if(a.name > b.name) return 1;
+				return 0;
+			});
+			if (load) self.loadPack(obj.name);
+			delete self.loading[obj.url];
+		}
+
+		if (typeof pack == "string") {
+			$.getJSON(pack + "/info.json").done(function(json) {
+				json.url = pack;
+				add(json);
+			});
+		} else add(pack); //validate packs??
+	};
+
+	SoundSelector.prototype.addPacks = function(packs) {
+		for (var i = 0; packs.length > i; i++) this.addPack(packs[i]);
+	};
+
+	SoundSelector.prototype.init = function() {
+		var self = this;
+		if (self.initialized) return console.warn("Sound selector already initialized!");
+
+		if (!!Object.keys(self.loading).length) return setTimeout(function() {
+			self.init();
+		}, 250);
+
+		$("#sound-btn").on("click", function() {
+			if (document.getElementById("Notification-Sound-Selector") != null) return self.notification.close();
+			var html = document.createElement("ul");
+			$(html).append("<h1>Current Sound: " + self.soundSelection + "</h1>");
+
+			for (var i = 0; self.packs.length > i; i++) {
+				var pack = self.packs[i];
+				if (pack.name == self.soundSelection) pack.html.classList = "pack enabled";
+				else pack.html.classList = "pack";
+				html.appendChild(pack.html);
+			}
+			self.notification = new Notification({title: "Sound Selector:", html: html, id: "Sound-Selector", duration: -1, target: "#sound-btn"});
+		});
+		self.initialized = true;
+		self.loadPack(self.soundSelection, true);
+	};
+
+	SoundSelector.prototype.loadPack = function(pack, f) {
+		for (var i = 0; this.packs.length > i; i++) {
+			var p = this.packs[i];
+			if (p.name == pack) {
+				pack = p;
+				break;
+			}
+		}
+		if (typeof pack == "string") {
+			console.warn("Sound pack does not exist! Loading default pack...");
+			return this.loadPack("MPP Classic");
+		}
+
+		if (pack.name == this.soundSelection && !f) return;
+		if (pack.keys.length != Object.keys(this.piano.keys).length) {
+			this.piano.keys = {};
+			for (var i = 0; pack.keys.length > i; i++) this.piano.keys[pack.keys[i]] = this.keys[pack.keys[i]];
+			this.piano.renderer.resize();
+		}
+
+		var self = this;
+		for (var i in this.piano.keys) {
+			if (!this.piano.keys.hasOwnProperty(i)) continue;
+			(function() {
+				var key = self.piano.keys[i];
+				key.loaded = false;
+				self.piano.audio.load(key.note, pack.url + key.note + pack.ext, function() {
+					key.loaded = true;
+					key.timeLoaded = Date.now();
+				});
+			})();
+		}
+		localStorage.soundSelection = pack.name;
+		this.soundSelection = pack.name;
+	};
+
+	SoundSelector.prototype.removePack = function(name) {
+		var found = false;
+		for (var i = 0; this.packs.length > i; i++) {
+			var pack = this.packs[i];
+			if (pack.name == name) {
+				this.packs.splice(i, 1);
+				if (pack.name == this.soundSelection) this.loadPack(this.packs[0].name); //add mpp default if none?
+				break;
+			}
+		}
+		if (!found) console.warn("Sound pack not found!");
+	};
+
+
+
+
 
 
 
@@ -1072,7 +1209,7 @@ Rect.prototype.contains = function(x, y) {
 		window.AudioContext = window.AudioContext || window.webkitAudioContext || undefined;
 		var audio_engine = AudioEngineWeb;
 
-		this.audio = new audio_engine().init(function() {
+		this.audio = new audio_engine().init(/*function() {
 			for(var i in piano.keys) {
 				if(!piano.keys.hasOwnProperty(i)) continue;
 				(function() {
@@ -1085,7 +1222,7 @@ Rect.prototype.contains = function(x, y) {
 					});
 				})();
 			}
-		});
+		}*/);
 		this.audio.lramp = 0.2;
 		this.audio.sstop = 0.21;
 		this.audio.lramps = 0.16;
@@ -1121,6 +1258,37 @@ Rect.prototype.contains = function(x, y) {
 	
 	var gPiano = new Piano(document.getElementById("piano"));
 	
+	var gSoundSelector = new SoundSelector(gPiano);
+	gSoundSelector.addPacks([
+	/*	"/sounds/Emotional_2.0/",
+		"/sounds/Harp/",
+		"/sounds/Music_Box/",
+		"/sounds/Vintage_Upright/",
+		"/sounds/Steinway_Grand/",
+		"/sounds/Emotional/",
+		"/sounds/Untitled/"*/
+		"https://ledlamp.github.io/piano-sounds/Emotional/",
+		"https://ledlamp.github.io/piano-sounds/Emotional_2.0/",
+		"https://ledlamp.github.io/piano-sounds/GreatAndSoftPiano/",
+		"https://ledlamp.github.io/piano-sounds/HardAndToughPiano/",
+		"https://ledlamp.github.io/piano-sounds/HardPiano/",
+		"https://ledlamp.github.io/piano-sounds/Harp/",
+		"https://ledlamp.github.io/piano-sounds/Harpsicord/",
+		"https://ledlamp.github.io/piano-sounds/LoudAndProudPiano/",
+		"https://ledlamp.github.io/piano-sounds/MLG/",
+		"https://ledlamp.github.io/piano-sounds/Music_Box/",
+		"https://ledlamp.github.io/piano-sounds/NewPiano/",
+		"https://ledlamp.github.io/piano-sounds/Orchestra/",
+		"https://ledlamp.github.io/piano-sounds/Piano2/",
+		"https://ledlamp.github.io/piano-sounds/PianoSounds/",
+		"https://ledlamp.github.io/piano-sounds/Rhodes_MK1/",
+		"https://ledlamp.github.io/piano-sounds/SoftPiano/",
+		"https://ledlamp.github.io/piano-sounds/Steinway_Grand/",
+		"https://ledlamp.github.io/piano-sounds/Untitled/",
+		"https://ledlamp.github.io/piano-sounds/Vintage_Upright/",
+		"https://ledlamp.github.io/piano-sounds/Vintage_Upright_Soft/"
+	]);
+	gSoundSelector.init();
 
 
 
@@ -1187,7 +1355,7 @@ Rect.prototype.contains = function(x, y) {
 ////////////////////////////////////////////////////////////////
 
 	var channel_id = decodeURIComponent(window.location.hash.substr(1)) || "lobby";
-	var gClient = new Client("wss://ts.terrium.net:8443");
+	var gClient = new Client("wss://mppws.cf");
 	gClient.setChannel(channel_id);
 	gClient.start();