const translation = window.i18nextify.init({ autorun: false, }); if (location.host === "multiplayerpiano.com") { const url = new URL("https://multiplayerpiano.net/" + location.search); if (localStorage.token) url.searchParams.set("token", localStorage.token); location.replace(url); throw new Error("Redirecting to multiplayerpiano.net"); } if (location.host === "multiplayerpiano.net") { const url = new URL(location.href); const token = url.searchParams.get("token"); if (token) { localStorage.token = token; url.searchParams.delete("token"); location.replace(url); throw new Error("Finalizing redirect."); } } // 钢琴 $(function () { translation.start(); console.log( "%cWelcome to MPP's developer console!", "color:blue; font-size:20px;", ); console.log( "%cCheck out the source code: https://github.com/mppnet/frontend/tree/main/client\nGuide for coders and bot developers: https://docs.google.com/document/d/1OrxwdLD1l1TE8iau6ToETVmnLuLXyGBhA0VfAY1Lf14/edit?usp=sharing", "color:gray; font-size:12px;", ); var test_mode = window.location.hash && window.location.hash.match(/^(?:#.+)*#test(?:#.+)*$/i); var gSeeOwnCursor = window.location.hash && window.location.hash.match(/^(?:#.+)*#seeowncursor(?:#.+)*$/i); var gMidiVolumeTest = window.location.hash && window.location.hash.match(/^(?:#.+)*#midivolumetest(?:#.+)*$/i); var gMidiOutTest; if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = from < 0 ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++) { if (from in this && this[from] === elt) return from; } return -1; }; } window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 30); }; var DEFAULT_VELOCITY = 0.5; var TIMING_TARGET = 1000; // Utility //////////////////////////////////////////////////////////////// var Rect = function (x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.x2 = x + w; this.y2 = y + h; }; Rect.prototype.contains = function (x, y) { return x >= this.x && x <= this.x2 && y >= this.y && y <= this.y2; }; const BASIC_PIANO_SCALES = { // ty https://www.pianoscales.org/ // major keys "Notes in C Major": ["C", "D", "E", "F", "G", "A", "B", "C"], "Notes in D Major": ["D", "E", "G♭", "G", "A", "B", "D♭", "D"], "Notes in E Major": ["E", "G♭", "A♭", "A", "B", "D♭", "E♭", "E"], "Notes in F Major": ["F", "G", "A", "B♭", "C", "D", "E", "F"], "Notes in G Major": ["G", "A", "B", "C", "D", "E", "G♭", "G"], "Notes in A Major": ["A", "B", "D♭", "D", "E", "G♭", "A♭", "A"], "Notes in B Major": ["B", "D♭", "E♭", "E", "G♭", "A♭", "B♭", "B"], "Notes in C# / Db Major": ["D♭", "E♭", "F", "G♭", "A♭", "B♭", "C", "D♭"], "Notes in D# / Eb Major": ["E♭", "F", "G", "A♭", "B♭", "C", "D", "E♭"], "Notes in F# / Gb Major": ["G♭", "A♭", "B♭", "B", "D♭", "E♭", "F", "G♭"], "Notes in G# / Ab Major": ["A♭", "B♭", "C", "D♭", "E♭", "F", "G", "A♭"], "Notes in A# / Bb Major": ["B♭", "C", "D", "E♭", "F", "G", "A", "B♭"], // natural minor keys "Notes in A Minor": ["A", "B", "C", "D", "E", "F", "G", "A"], "Notes in A# / Bb Minor": ["B♭", "C", "D♭", "E♭", "F", "G♭", "A♭", "B♭"], "Notes in B Minor": ["B", "D♭", "D", "E", "G♭", "G", "A", "B"], "Notes in C Minor": ["C", "D", "E♭", "F", "G", "A♭", "B♭", "C"], "Notes in C# / Db Minor": ["D♭", "E♭", "E", "G♭", "A♭", "A", "B", "D♭"], "Notes in D Minor": ["D", "E", "F", "G", "A", "B♭", "C", "D"], "Notes in D# / Eb Minor": ["E♭", "F", "G♭", "A♭", "B♭", "B", "D♭", "E♭"], "Notes in E Minor": ["E", "G♭", "G", "A", "B", "C", "D", "E"], "Notes in F Minor": ["F", "G", "A♭", "B♭", "C", "D♭", "E♭", "F"], "Notes in F# / Gb Minor": ["G♭", "A♭", "A", "B", "D♭", "D", "E", "G♭"], "Notes in G Minor": ["G", "A", "B♭", "C", "D", "E♭", "F", "G"], "Notes in G# / Ab Minor": ["A♭", "B♭", "B", "D♭", "E♭", "E", "G♭", "A♭"], }; // AudioEngine classes //////////////////////////////////////////////////////////////// var AudioEngine = function () {}; AudioEngine.prototype.init = function (cb) { this.volume = 0.6; this.sounds = {}; this.paused = true; return this; }; AudioEngine.prototype.load = function (id, url, cb) {}; AudioEngine.prototype.play = function () {}; AudioEngine.prototype.stop = function () {}; AudioEngine.prototype.setVolume = function (vol) { this.volume = vol; }; AudioEngine.prototype.resume = function () { this.paused = false; }; AudioEngineWeb = function () { this.threshold = 0; this.worker = new Worker("/workerTimer.js"); var self = this; this.worker.onmessage = function (event) { if (event.data.args) if (event.data.args.action == 0) { self.actualPlay( event.data.args.id, event.data.args.vol, event.data.args.time, event.data.args.part_id, ); } else { self.actualStop( event.data.args.id, event.data.args.time, event.data.args.part_id, ); } }; }; AudioEngineWeb.prototype = new AudioEngine(); AudioEngineWeb.prototype.init = function (cb) { AudioEngine.prototype.init.call(this); this.context = new AudioContext({ latencyHint: "interactive" }); this.masterGain = this.context.createGain(); this.masterGain.connect(this.context.destination); this.masterGain.gain.value = this.volume; this.limiterNode = this.context.createDynamicsCompressor(); this.limiterNode.threshold.value = -10; this.limiterNode.knee.value = 0; this.limiterNode.ratio.value = 20; this.limiterNode.attack.value = 0; this.limiterNode.release.value = 0.1; this.limiterNode.connect(this.masterGain); // for synth mix this.pianoGain = this.context.createGain(); this.pianoGain.gain.value = 0.5; this.pianoGain.connect(this.limiterNode); this.synthGain = this.context.createGain(); this.synthGain.gain.value = 0.5; this.synthGain.connect(this.limiterNode); this.playings = {}; if (cb) setTimeout(cb, 0); return this; }; AudioEngineWeb.prototype.load = function (id, url, cb) { var audio = this; var req = new XMLHttpRequest(); req.open("GET", url); req.responseType = "arraybuffer"; req.addEventListener("readystatechange", function (evt) { if (req.readyState !== 4) return; try { audio.context.decodeAudioData(req.response, function (buffer) { audio.sounds[id] = buffer; if (cb) cb(); }); } catch (e) { /*throw new Error(e.message + " / id: " + id + " / url: " + url + " / status: " + req.status + " / ArrayBuffer: " + (req.response instanceof ArrayBuffer) + " / byteLength: " + (req.response && req.response.byteLength ? req.response.byteLength : "undefined"));*/ new Notification({ id: "audio-download-error", title: "Problem", text: "For some reason, an audio download failed with a status of " + req.status + ". ", target: "#piano", duration: 10000, }); } }); req.send(); }; AudioEngineWeb.prototype.actualPlay = function (id, vol, time, part_id) { //the old play(), but with time insted of delay_ms. if (this.paused) return; if (!this.sounds.hasOwnProperty(id)) return; var source = this.context.createBufferSource(); source.buffer = this.sounds[id]; var gain = this.context.createGain(); gain.gain.value = vol; source.connect(gain); gain.connect(this.pianoGain); source.start(time); // Patch from ste-art remedies stuttering under heavy load if (this.playings[id]) { var playing = this.playings[id]; playing.gain.gain.setValueAtTime(playing.gain.gain.value, time); playing.gain.gain.linearRampToValueAtTime(0.0, time + 0.2); playing.source.stop(time + 0.21); if (enableSynth && playing.voice) { playing.voice.stop(time); } } this.playings[id] = { source: source, gain: gain, part_id: part_id }; if (enableSynth) { this.playings[id].voice = new synthVoice(id, time); } }; AudioEngineWeb.prototype.play = function (id, vol, delay_ms, part_id) { if (!this.sounds.hasOwnProperty(id)) return; var time = this.context.currentTime + delay_ms / 1000; //calculate time on note receive. var delay = delay_ms - this.threshold; if (delay <= 0) this.actualPlay(id, vol, time, part_id); else { this.worker.postMessage({ delay: delay, args: { action: 0 /*play*/, id: id, vol: vol, time: time, part_id: part_id, }, }); // but start scheduling right before play. } }; AudioEngineWeb.prototype.actualStop = function (id, time, part_id) { if ( this.playings.hasOwnProperty(id) && this.playings[id] && this.playings[id].part_id === part_id ) { var gain = this.playings[id].gain.gain; gain.setValueAtTime(gain.value, time); gain.linearRampToValueAtTime(gain.value * 0.1, time + 0.16); gain.linearRampToValueAtTime(0.0, time + 0.4); this.playings[id].source.stop(time + 0.41); if (this.playings[id].voice) { this.playings[id].voice.stop(time); } this.playings[id] = null; } }; AudioEngineWeb.prototype.stop = function (id, delay_ms, part_id) { var time = this.context.currentTime + delay_ms / 1000; var delay = delay_ms - this.threshold; if (delay <= 0) this.actualStop(id, time, part_id); else { this.worker.postMessage({ delay: delay, args: { action: 1 /*stop*/, id: id, time: time, part_id: part_id, }, }); } }; AudioEngineWeb.prototype.setVolume = function (vol) { AudioEngine.prototype.setVolume.call(this, vol); this.masterGain.gain.value = this.volume; }; AudioEngineWeb.prototype.resume = function () { this.paused = false; this.context.resume(); }; // Renderer classes //////////////////////////////////////////////////////////////// var Renderer = function () {}; Renderer.prototype.init = function (piano) { this.piano = piano; this.resize(); return this; }; Renderer.prototype.resize = function (width, height) { if (typeof width == "undefined") width = $(this.piano.rootElement).width(); if (typeof height == "undefined") height = Math.floor(width * 0.2); $(this.piano.rootElement).css({ height: height + "px", marginTop: Math.floor($(window).height() / 2 - height / 2) + "px", }); this.width = width * window.devicePixelRatio; this.height = height * window.devicePixelRatio; }; Renderer.prototype.visualize = function (key, color) {}; var CanvasRenderer = function () { Renderer.call(this); }; CanvasRenderer.prototype = new Renderer(); CanvasRenderer.prototype.init = function (piano) { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); piano.rootElement.appendChild(this.canvas); Renderer.prototype.init.call(this, piano); // calls resize() // create render loop var self = this; var render = function () { self.redraw(); requestAnimationFrame(render); }; requestAnimationFrame(render); // add event listeners var mouse_down = false; var last_key = null; $(piano.rootElement).mousedown(function (event) { mouse_down = true; //event.stopPropagation(); if (!gNoPreventDefault) event.preventDefault(); var pos = CanvasRenderer.translateMouseEvent(event); var hit = self.getHit(pos.x, pos.y); if (hit) { press(hit.key.note, hit.v); last_key = hit.key; } }); piano.rootElement.addEventListener( "touchstart", function (event) { mouse_down = true; //event.stopPropagation(); if (!gNoPreventDefault) event.preventDefault(); for (var i in event.changedTouches) { var pos = CanvasRenderer.translateMouseEvent(event.changedTouches[i]); var hit = self.getHit(pos.x, pos.y); if (hit) { press(hit.key.note, hit.v); last_key = hit.key; } } }, false, ); $(window).mouseup(function (event) { if (last_key) { release(last_key.note); } mouse_down = false; last_key = null; }); /*$(piano.rootElement).mousemove(function(event) { if(!mouse_down) return; var pos = CanvasRenderer.translateMouseEvent(event); var hit = self.getHit(pos.x, pos.y); if(hit && hit.key != last_key) { press(hit.key.note, hit.v); last_key = hit.key; } });*/ return this; }; CanvasRenderer.prototype.resize = function (width, height) { Renderer.prototype.resize.call(this, width, height); if (this.width < 52 * 2) this.width = 52 * 2; if (this.height < this.width * 0.2) this.height = Math.floor(this.width * 0.2); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.style.width = this.width / window.devicePixelRatio + "px"; this.canvas.style.height = this.height / window.devicePixelRatio + "px"; // calculate key sizes this.whiteKeyWidth = Math.floor(this.width / 52); this.whiteKeyHeight = Math.floor(this.height * 0.9); this.blackKeyWidth = Math.floor(this.whiteKeyWidth * 0.75); this.blackKeyHeight = Math.floor(this.height * 0.5); this.blackKeyOffset = Math.floor( this.whiteKeyWidth - this.blackKeyWidth / 2, ); this.keyMovement = Math.floor(this.whiteKeyHeight * 0.015); this.whiteBlipWidth = Math.floor(this.whiteKeyWidth * 0.7); this.whiteBlipHeight = Math.floor(this.whiteBlipWidth * 0.8); this.whiteBlipX = Math.floor( (this.whiteKeyWidth - this.whiteBlipWidth) / 2, ); this.whiteBlipY = Math.floor( this.whiteKeyHeight - this.whiteBlipHeight * 1.2, ); this.blackBlipWidth = Math.floor(this.blackKeyWidth * 0.7); this.blackBlipHeight = Math.floor(this.blackBlipWidth * 0.8); this.blackBlipY = Math.floor( this.blackKeyHeight - this.blackBlipHeight * 1.2, ); this.blackBlipX = Math.floor( (this.blackKeyWidth - this.blackBlipWidth) / 2, ); // prerender white key this.whiteKeyRender = document.createElement("canvas"); this.whiteKeyRender.width = this.whiteKeyWidth; this.whiteKeyRender.height = this.height + 10; var ctx = this.whiteKeyRender.getContext("2d"); if (ctx.createLinearGradient) { var gradient = ctx.createLinearGradient(0, 0, 0, this.whiteKeyHeight); gradient.addColorStop(0, "#eee"); gradient.addColorStop(0.75, "#fff"); gradient.addColorStop(1, "#dad4d4"); ctx.fillStyle = gradient; } else { ctx.fillStyle = "#fff"; } ctx.strokeStyle = "#000"; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.lineWidth = 10; ctx.strokeRect( ctx.lineWidth / 2, ctx.lineWidth / 2, this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth, ); ctx.lineWidth = 4; ctx.fillRect( ctx.lineWidth / 2, ctx.lineWidth / 2, this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth, ); // prerender black key this.blackKeyRender = document.createElement("canvas"); this.blackKeyRender.width = this.blackKeyWidth + 10; this.blackKeyRender.height = this.blackKeyHeight + 10; var ctx = this.blackKeyRender.getContext("2d"); if (ctx.createLinearGradient) { var gradient = ctx.createLinearGradient(0, 0, 0, this.blackKeyHeight); gradient.addColorStop(0, "#000"); gradient.addColorStop(1, "#444"); ctx.fillStyle = gradient; } else { ctx.fillStyle = "#000"; } ctx.strokeStyle = "#222"; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.lineWidth = 8; ctx.strokeRect( ctx.lineWidth / 2, ctx.lineWidth / 2, this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth, ); ctx.lineWidth = 4; ctx.fillRect( ctx.lineWidth / 2, ctx.lineWidth / 2, this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth, ); // prerender shadows this.shadowRender = []; var y = -this.canvas.height * 2; for (var j = 0; j < 2; j++) { var canvas = document.createElement("canvas"); this.shadowRender[j] = canvas; canvas.width = this.canvas.width; canvas.height = this.canvas.height; var ctx = canvas.getContext("2d"); var sharp = j ? true : false; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.lineWidth = 1; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.shadowBlur = this.keyMovement * 3; ctx.shadowOffsetY = -y + this.keyMovement; if (sharp) { ctx.shadowOffsetX = this.keyMovement; } else { ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -y + this.keyMovement; } for (var i in this.piano.keys) { if (!this.piano.keys.hasOwnProperty(i)) continue; var key = this.piano.keys[i]; if (key.sharp != sharp) continue; if (key.sharp) { ctx.fillRect( this.blackKeyOffset + this.whiteKeyWidth * key.spatial + ctx.lineWidth / 2, y + ctx.lineWidth / 2, this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth, ); } else { ctx.fillRect( this.whiteKeyWidth * key.spatial + ctx.lineWidth / 2, y + ctx.lineWidth / 2, this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth, ); } } } // update key rects for (var i in this.piano.keys) { if (!this.piano.keys.hasOwnProperty(i)) continue; var key = this.piano.keys[i]; if (key.sharp) { key.rect = new Rect( this.blackKeyOffset + this.whiteKeyWidth * key.spatial, 0, this.blackKeyWidth, this.blackKeyHeight, ); } else { key.rect = new Rect( this.whiteKeyWidth * key.spatial, 0, this.whiteKeyWidth, this.whiteKeyHeight, ); } } }; CanvasRenderer.prototype.visualize = function (key, color) { key.timePlayed = Date.now(); key.blips.push({ time: key.timePlayed, color: color }); }; CanvasRenderer.prototype.redraw = function () { var now = Date.now(); var timeLoadedEnd = now - 1000; var timePlayedEnd = now - 100; var timeBlipEnd = now - 1000; this.ctx.save(); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // draw all keys for (var j = 0; j < 2; j++) { this.ctx.globalAlpha = 1.0; this.ctx.drawImage(this.shadowRender[j], 0, 0); var sharp = j ? true : false; for (var i in this.piano.keys) { if (!this.piano.keys.hasOwnProperty(i)) continue; var key = this.piano.keys[i]; if (key.sharp != sharp) continue; if (!key.loaded) { this.ctx.globalAlpha = 0.2; } else if (key.timeLoaded > timeLoadedEnd) { this.ctx.globalAlpha = ((now - key.timeLoaded) / 1000) * 0.8 + 0.2; } else { this.ctx.globalAlpha = 1.0; } var y = 0; if (key.timePlayed > timePlayedEnd) { y = Math.floor( this.keyMovement - ((now - key.timePlayed) / 100) * this.keyMovement, ); } var x = Math.floor( key.sharp ? this.blackKeyOffset + this.whiteKeyWidth * key.spatial : this.whiteKeyWidth * key.spatial, ); var image = key.sharp ? this.blackKeyRender : this.whiteKeyRender; this.ctx.drawImage(image, x, y); var keyName = key.baseNote[0].toUpperCase(); if (sharp) keyName += "#"; keyName += key.octave + 1; if (gShowPianoNotes) { this.ctx.font = `${ (key.sharp ? this.blackKeyWidth : this.whiteKeyWidth) / 2 }px Arial`; this.ctx.fillStyle = key.sharp ? "white" : "black"; this.ctx.textAlign = "center"; // do two passes to render both sharps and flat names. if (keyName.includes("#")) { this.ctx.fillText( keyName, x + (key.sharp ? this.blackKeyWidth : this.whiteKeyWidth) / 2, y + (key.sharp ? this.blackKeyHeight : this.whiteKeyHeight) - 30 - this.ctx.lineWidth, ); } keyName = keyName.replace("C#", "D♭"); keyName = keyName.replace("D#", "E♭"); keyName = keyName.replace("F#", "G♭"); keyName = keyName.replace("G#", "A♭"); keyName = keyName.replace("A#", "B♭"); this.ctx.fillText( keyName, x + (key.sharp ? this.blackKeyWidth : this.whiteKeyWidth) / 2, y + (key.sharp ? this.blackKeyHeight : this.whiteKeyHeight) - 10 - this.ctx.lineWidth, ); } const highlightScale = BASIC_PIANO_SCALES[gHighlightScaleNotes]; if (highlightScale && key.loaded) { keyName = keyName.replace("C#", "D♭"); keyName = keyName.replace("D#", "E♭"); keyName = keyName.replace("F#", "G♭"); keyName = keyName.replace("G#", "A♭"); keyName = keyName.replace("A#", "B♭"); const keynameNoOctave = keyName.slice(0, -1); if (highlightScale.includes(keynameNoOctave)) { const prev = this.ctx.globalAlpha; this.ctx.globalAlpha = 0.3; this.ctx.fillStyle = "#0f0"; if (key.sharp) { this.ctx.fillRect(x, y, this.blackKeyWidth, this.blackKeyHeight); } else { this.ctx.fillRect(x, y, this.whiteKeyWidth, this.whiteKeyHeight); } this.ctx.globalAlpha = prev; } } // render blips if (key.blips.length) { var alpha = this.ctx.globalAlpha; var w, h; if (key.sharp) { x += this.blackBlipX; y = this.blackBlipY; w = this.blackBlipWidth; h = this.blackBlipHeight; } else { x += this.whiteBlipX; y = this.whiteBlipY; w = this.whiteBlipWidth; h = this.whiteBlipHeight; } for (var b = 0; b < key.blips.length; b++) { var blip = key.blips[b]; if (blip.time > timeBlipEnd) { this.ctx.fillStyle = blip.color; this.ctx.globalAlpha = alpha - ((now - blip.time) / 1000) * alpha; this.ctx.fillRect(x, y, w, h); } else { key.blips.splice(b, 1); --b; } y -= Math.floor(h * 1.1); } } } } this.ctx.restore(); }; CanvasRenderer.prototype.renderNoteLyrics = function () { // render lyric for (var part_id in this.noteLyrics) { if (!this.noteLyrics.hasOwnProperty(i)) continue; var lyric = this.noteLyrics[part_id]; var lyric_x = x; var lyric_y = this.whiteKeyHeight + 1; this.ctx.fillStyle = key.lyric.color; var alpha = this.ctx.globalAlpha; this.ctx.globalAlpha = alpha - ((now - key.lyric.time) / 1000) * alpha; this.ctx.fillRect(x, y, 10, 10); } }; CanvasRenderer.prototype.getHit = function (x, y) { for (var j = 0; j < 2; j++) { var sharp = j ? false : true; // black keys first for (var i in this.piano.keys) { if (!this.piano.keys.hasOwnProperty(i)) continue; var key = this.piano.keys[i]; if (key.sharp != sharp) continue; if (key.rect.contains(x, y)) { var v = y / (key.sharp ? this.blackKeyHeight : this.whiteKeyHeight); v += 0.25; v *= DEFAULT_VELOCITY; if (v > 1.0) v = 1.0; return { key: key, v: v }; } } } return null; }; CanvasRenderer.isSupported = function () { var canvas = document.createElement("canvas"); return !!(canvas.getContext && canvas.getContext("2d")); }; CanvasRenderer.translateMouseEvent = function (evt) { var element = evt.target; var offx = 0; var offy = 0; do { if (!element) break; // wtf, wtf? offx += element.offsetLeft; offy += element.offsetTop; } while ((element = element.offsetParent)); return { x: (evt.pageX - offx) * window.devicePixelRatio, y: (evt.pageY - offy) * window.devicePixelRatio, }; }; // Soundpack Stuff by electrashave ♥ //////////////////////////////////////////////////////////////// if (window.location.hostname === "localhost") { var soundDomain = `http://${location.host}`; } else { var soundDomain = "https://multiplayerpiano.net"; } function SoundSelector(piano) { this.initialized = false; this.keys = piano.keys; this.loading = {}; this.notification; this.packs = []; this.piano = piano; this.soundSelection = localStorage.soundSelection ? localStorage.soundSelection : "mppclassic"; this.addPack({ name: "MPP Classic", keys: Object.keys(this.piano.keys), ext: ".mp3", url: "/sounds/mppclassic/", }); } 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") { let useDomain = true; if (pack.match(/^(http|https):\/\//i)) useDomain = false; $.getJSON((useDomain ? soundDomain : "") + 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("
Current Sound: " + self.soundSelection + "
"); 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"; pack.html.setAttribute("translated", ""); 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; let useDomain = true; if (pack.url.match(/^(http|https):\/\//i)) useDomain = false; self.piano.audio.load( key.note, (useDomain ? soundDomain : "") + pack.url + key.note + pack.ext, function () { key.loaded = true; key.timeLoaded = Date.now(); }, ); })(); } if (localStorage) 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!"); }; // Pianoctor //////////////////////////////////////////////////////////////// var PianoKey = function (note, octave) { this.note = note + octave; this.baseNote = note; this.octave = octave; this.sharp = note.indexOf("s") != -1; this.loaded = false; this.timeLoaded = 0; this.domElement = null; this.timePlayed = 0; this.blips = []; }; var Piano = function (rootElement) { var piano = this; piano.rootElement = rootElement; piano.keys = {}; var white_spatial = 0; var black_spatial = 0; var black_it = 0; var black_lut = [2, 1, 2, 1, 1]; var addKey = function (note, octave) { var key = new PianoKey(note, octave); piano.keys[key.note] = key; if (key.sharp) { key.spatial = black_spatial; black_spatial += black_lut[black_it % 5]; ++black_it; } else { key.spatial = white_spatial; ++white_spatial; } }; if (test_mode) { addKey("c", 2); } else { addKey("a", -1); addKey("as", -1); addKey("b", -1); var notes = "c cs d ds e f fs g gs a as b".split(" "); for (var oct = 0; oct < 7; oct++) { for (var i in notes) { addKey(notes[i], oct); } } addKey("c", 7); } this.renderer = new CanvasRenderer().init(this); window.addEventListener("resize", function () { piano.renderer.resize(); }); window.AudioContext = window.AudioContext || window.webkitAudioContext || undefined; var audio_engine = AudioEngineWeb; this.audio = new audio_engine().init(); }; Piano.prototype.play = function (note, vol, participant, delay_ms, lyric) { if (!this.keys.hasOwnProperty(note) || !participant) return; var key = this.keys[note]; if (key.loaded) this.audio.play(key.note, vol, delay_ms, participant.id); if (gMidiOutTest) gMidiOutTest(key.note, vol * 100, delay_ms, participant.id); var self = this; setTimeout(function () { self.renderer.visualize(key, participant.color); if (lyric) { } var jq_namediv = $(participant.nameDiv); jq_namediv.addClass("play"); setTimeout(function () { jq_namediv.removeClass("play"); }, 30); }, delay_ms || 0); }; Piano.prototype.stop = function (note, participant, delay_ms) { if (!this.keys.hasOwnProperty(note)) return; var key = this.keys[note]; if (key.loaded) this.audio.stop(key.note, delay_ms, participant.id); if (gMidiOutTest) gMidiOutTest(key.note, 0, delay_ms, participant.id); }; var gPiano = new Piano(document.getElementById("piano")); var gSoundSelector = new SoundSelector(gPiano); gSoundSelector.addPacks([ "/sounds/Emotional/", "/sounds/Emotional_2.0/", "/sounds/GreatAndSoftPiano/", "/sounds/HardAndToughPiano/", "/sounds/HardPiano/", "/sounds/Harp/", "/sounds/Harpsicord/", "/sounds/LoudAndProudPiano/", "/sounds/MLG/", "/sounds/Music_Box/", "/sounds/NewPiano/", "/sounds/Orchestra/", "/sounds/Piano2/", "/sounds/PianoSounds/", "/sounds/Rhodes_MK1/", "/sounds/SoftPiano/", "/sounds/Steinway_Grand/", "/sounds/Untitled/", "/sounds/Vintage_Upright/", "/sounds/Vintage_Upright_Soft/", ]); //gSoundSelector.addPacks(["/sounds/Emotional_2.0/", "/sounds/Harp/", "/sounds/Music_Box/", "/sounds/Vintage_Upright/", "/sounds/Steinway_Grand/", "/sounds/Emotional/", "/sounds/Untitled/"]); gSoundSelector.init(); var gAutoSustain = false; var gSustain = false; var gHeldNotes = {}; var gSustainedNotes = {}; function press(id, vol) { if (!gClient.preventsPlaying() && gNoteQuota.spend(1)) { gHeldNotes[id] = true; gSustainedNotes[id] = true; gPiano.play( id, vol !== undefined ? vol : DEFAULT_VELOCITY, gClient.getOwnParticipant(), 0, ); gClient.startNote(id, vol); } } function release(id) { if (gHeldNotes[id]) { gHeldNotes[id] = false; if ((gAutoSustain || gSustain) && !enableSynth) { gSustainedNotes[id] = true; } else { if (gNoteQuota.spend(1)) { gPiano.stop(id, gClient.getOwnParticipant(), 0); gClient.stopNote(id); gSustainedNotes[id] = false; } } } } function pressSustain() { gSustain = true; } function releaseSustain() { gSustain = false; if (!gAutoSustain) { for (var id in gSustainedNotes) { if ( gSustainedNotes.hasOwnProperty(id) && gSustainedNotes[id] && !gHeldNotes[id] ) { gSustainedNotes[id] = false; if (gNoteQuota.spend(1)) { gPiano.stop(id, gClient.getOwnParticipant(), 0); gClient.stopNote(id); } } } } } function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ""; return decodeURIComponent(results[2].replace(/\+/g, " ")); } //html/css overrides for multiplayerpiano.com if (window.location.hostname === "multiplayerpiano.com") { //disable autocomplete $("#chat-input")[0].autocomplete = "off"; //add rules button let aElement = document.createElement("a"); aElement.href = "https://docs.google.com/document/d/1wQvGwQdaI8PuEjSWxKDDThVIoAlCYIxQOyfyi4o6HcM/edit?usp=sharing"; aElement.title = "Multiplayer Piano Rules"; aElement.target = "_blank"; let buttonElement = document.createElement("button"); buttonElement.style = "height: 24px; font-size: 12px; background: #111; border: 1px solid #444; padding: 5px; cursor: pointer; line-height: 12px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; overflow: hidden; white-space: nowrap; color: #fff; position: absolute; right: 6px; top: 0px; z-index: 20001;"; buttonElement.innerText = "Rules"; aElement.appendChild(buttonElement); document.body.appendChild(aElement); } function getRoomNameFromURL() { var channel_id = decodeURIComponent(window.location.pathname); if (channel_id.substr(0, 1) == "/") channel_id = channel_id.substr(1); if (!channel_id) { channel_id = getParameterByName("c"); } if (!channel_id) channel_id = "lobby"; return channel_id; } // internet science //////////////////////////////////////////////////////////////// var channel_id = getRoomNameFromURL(); var loginInfo; if (getParameterByName("callback") === "discord") { var code = getParameterByName("code"); if (code) { loginInfo = { type: "discord", code, }; } history.pushState({ name: "lobby" }, "Piano > lobby", "/"); channel_id = "lobby"; } if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") { var gClient = new Client("ws://"+window.location.hostname+":8443"); } else { var gClient = new Client("wss://"+location.hostname); } if (loginInfo) { gClient.setLoginInfo(loginInfo); } gClient.setChannel(channel_id); gClient.on("disconnect", function (evt) { //console.log(evt); }); var tabIsActive = true; var youreMentioned = false; var youreReplied = false; window.addEventListener("focus", function (event) { tabIsActive = true; youreMentioned = false; youreReplied = false; var count = Object.keys(MPP.client.ppl).length; if (count > 0) { document.title = "Piano (" + count + ")"; } else { document.title = "Multiplayer Piano"; } }); window.addEventListener("blur", function (event) { tabIsActive = false; }); // Setting status (function () { gClient.on("status", function (status) { $("#status").text(status); }); gClient.on("count", function (count) { if (count > 0) { $("#status").html( '' + count + " " + window.i18nextify.i18next.t("people are playing", { count }), ); if (!tabIsActive) { if (youreMentioned || youreReplied) { return; } } document.title = "Piano (" + count + ")"; } else { document.title = "Multiplayer Piano"; } }); })(); // Show moderator buttons (function () { let receivedHi = false; gClient.on("hi", function (msg) { if (receivedHi) return; receivedHi = true; if (!msg.motd) msg.motd = "This site makes a lot of sound! You may want to adjust the volume before continuing."; document.getElementById("motd-text").innerHTML = msg.motd; openModal("#motd"); $(document).off("keydown", modalHandleEsc); var user_interact = function (evt) { if ( (evt.path || (evt.composedPath && evt.composedPath())).includes( document.getElementById("motd"), ) || evt.target === document.getElementById("motd") ) { closeModal(); } document.removeEventListener("click", user_interact); gPiano.audio.resume(); }; document.addEventListener("click", user_interact); if (gClient.permissions.clearChat) { $("#clearchat-btn").show(); } if (gClient.permissions.vanish) { $("#vanish-btn").show(); } else { $("#vanish-btn").hide(); } }); })(); var participantTouchhandler; //declare this outside of the smaller functions so it can be used below and setup later // Handle changes to participants (function () { function setupParticipantDivs(part) { var hadNameDiv = Boolean(part.nameDiv); var nameDiv; if (hadNameDiv) { nameDiv = part.nameDiv; $(nameDiv).empty(); } else { nameDiv = document.createElement("div"); nameDiv.addEventListener("mousedown", (e) => participantTouchhandler(e, nameDiv), ); nameDiv.addEventListener("touchstart", (e) => participantTouchhandler(e, nameDiv), ); nameDiv.style.display = "none"; $(nameDiv).fadeIn(2000); nameDiv.id = "namediv-" + part._id; nameDiv.className = "name"; nameDiv.participantId = part.id; $("#names")[0].appendChild(nameDiv); part.nameDiv = nameDiv; } nameDiv.style.backgroundColor = part.color || "#777"; var tagText = typeof part.tag === "object" ? part.tag.text : part.tag; if (tagText === "BOT") nameDiv.title = "This is an authorized bot."; if (tagText === "MOD") nameDiv.title = "This user is an official moderator of the site."; if (tagText === "ADMIN") nameDiv.title = "This user is an official administrator of the site."; if (tagText === "OWNER") nameDiv.title = "This user is the owner of the site."; if (tagText === "MEDIA") nameDiv.title = "This is a well known person on Twitch, Youtube, or another platform."; updateLabels(part); var hasOtherDiv = false; if (part.vanished) { hasOtherDiv = true; var vanishDiv = document.createElement("div"); vanishDiv.className = "nametag"; vanishDiv.textContent = "VANISH"; vanishDiv.style.backgroundColor = "#00ffcc"; vanishDiv.id = "namevanish-" + part._id; part.nameDiv.appendChild(vanishDiv); } if (part.tag) { hasOtherDiv = true; var tagDiv = document.createElement("div"); tagDiv.className = "nametag"; tagDiv.textContent = tagText || ""; tagDiv.style.backgroundColor = tagColor(part.tag); tagDiv.id = "nametag-" + part._id; part.nameDiv.appendChild(tagDiv); } if (part.afk) { var afkDiv = document.createElement("div"); afkDiv.className = "nametag"; afkDiv.textContent = "AFK"; afkDiv.style.backgroundColor = "#00000040"; afkDiv.style["margin-left"] = "5px"; afkDiv.style["margin-right"] = "0px"; afkDiv.style.float = "right"; afkDiv.id = "afktag-" + part._id; part.nameDiv.appendChild(afkDiv); } var textDiv = document.createElement("div"); textDiv.className = "nametext"; textDiv.textContent = part.name || ""; textDiv.id = "nametext-" + part._id; if (hasOtherDiv) textDiv.style.float = "left"; part.nameDiv.appendChild(textDiv); part.nameDiv.setAttribute("translated", ""); var arr = $("#names .name"); arr.sort(function (a, b) { if (a.id > b.id) return 1; else if (a.id < b.id) return -1; else return 0; }); $("#names").html(arr); } gClient.on("participant added", function (part) { if (shouldHideUser(part)) return; part.displayX = 150; part.displayY = 50; var tagText = typeof part.tag === "object" ? part.tag.text : part.tag; // add nameDiv setupParticipantDivs(part); // add cursorDiv if ( (gClient.participantId !== part.id || gSeeOwnCursor) && !gCursorHides.includes(part.id) && !gHideAllCursors ) { var div = document.createElement("div"); div.className = "cursor"; div.style.display = "none"; part.cursorDiv = $("#cursors")[0].appendChild(div); $(part.cursorDiv).fadeIn(2000); var div = document.createElement("div"); div.className = "name"; div.style.backgroundColor = part.color || "#777"; if (part.tag) { var tagDiv = document.createElement("span"); tagDiv.className = "curtag"; tagDiv.textContent = tagText || ""; tagDiv.style.backgroundColor = tagColor(part.tag); tagDiv.id = "nametag-" + part._id; div.appendChild(tagDiv); } var namep = document.createElement("span"); namep.className = "nametext"; namep.textContent = part.name || ""; // namep.style.backgroundColor = part.color || "#777" div.setAttribute("translated", ""); div.appendChild(namep); part.cursorDiv.appendChild(div); } else { part.cursorDiv = undefined; } }); gClient.on("participant removed", function (part) { if (shouldHideUser(part)) return; // remove nameDiv var nd = $(part.nameDiv); var cd = $(part.cursorDiv); cd.fadeOut(2000); nd.fadeOut(2000, function () { nd.remove(); cd.remove(); part.nameDiv = undefined; part.cursorDiv = undefined; }); }); gClient.on("participant update", function (part) { if (shouldHideUser(part)) return; var name = part.name || ""; var color = part.color || "#777"; setupParticipantDivs(part); $(part.cursorDiv).find(".name .nametext").text(name); $(part.cursorDiv).find(".name").css("background-color", color); }); gClient.on("ch", function (msg) { for (var id in gClient.ppl) { if (gClient.ppl.hasOwnProperty(id)) { var part = gClient.ppl[id]; updateLabels(part); } } }); gClient.on("participant added", function (part) { if (shouldHideUser(part)) return; updateLabels(part); }); function updateLabels(part) { if (part.id === gClient.participantId) { $(part.nameDiv).addClass("me"); } else { $(part.nameDiv).removeClass("me"); } if ( gClient.channel.crown && gClient.channel.crown.participantId === part.id ) { $(part.nameDiv).addClass("owner"); $(part.cursorDiv).addClass("owner"); } else { $(part.nameDiv).removeClass("owner"); $(part.cursorDiv).removeClass("owner"); } if (gPianoMutes.indexOf(part._id) !== -1) { $(part.nameDiv).addClass("muted-notes"); } else { $(part.nameDiv).removeClass("muted-notes"); } if (gChatMutes.indexOf(part._id) !== -1) { $(part.nameDiv).addClass("muted-chat"); } else { $(part.nameDiv).removeClass("muted-chat"); } } function tagColor(tag) { if (typeof tag === "object") return tag.color; if (tag === "BOT") return "#55f"; if (tag === "OWNER") return "#a00"; if (tag === "ADMIN") return "#f55"; if (tag === "MOD") return "#0a0"; if (tag === "MEDIA") return "#f5f"; return "#777"; } function updateCursor(msg) { const part = gClient.ppl[msg.id]; if (shouldHideUser(part)) return; if (part && part.cursorDiv) { if (gSmoothCursor) { part.cursorDiv.style.transform = "translate3d(" + msg.x + "vw, " + msg.y + "vh, 0)"; } else { part.cursorDiv.style.left = msg.x + "%"; part.cursorDiv.style.top = msg.y + "%"; } } } gClient.on("m", updateCursor); gClient.on("participant added", updateCursor); })(); // Handle changes to crown (function () { var jqcrown = $('').appendTo(document.body).hide(); var jqcountdown = $("").appendTo(jqcrown); var countdown_interval; jqcrown.click(function () { gClient.sendArray([{ m: "chown", id: gClient.participantId }]); }); gClient.on("ch", function (msg) { if (msg.ch.crown) { var crown = msg.ch.crown; if (!crown.participantId || !gClient.ppl[crown.participantId]) { var land_time = crown.time + 2000 - gClient.serverTimeOffset; var avail_time = crown.time + 15000 - gClient.serverTimeOffset; jqcountdown.text(""); jqcrown.show(); if (land_time - Date.now() <= 0) { jqcrown.css({ left: crown.endPos.x + "%", top: crown.endPos.y + "%", }); } else { jqcrown.css({ left: crown.startPos.x + "%", top: crown.startPos.y + "%", }); jqcrown.addClass("spin"); jqcrown.animate( { left: crown.endPos.x + "%", top: crown.endPos.y + "%", }, 2000, "linear", function () { jqcrown.removeClass("spin"); }, ); } clearInterval(countdown_interval); countdown_interval = setInterval(function () { var time = Date.now(); if (time >= land_time) { var ms = avail_time - time; if (ms > 0) { jqcountdown.text(Math.ceil(ms / 1000) + "s"); } else { jqcountdown.text(""); clearInterval(countdown_interval); } } }, 1000); } else { jqcrown.hide(); } } else { jqcrown.hide(); } }); gClient.on("disconnect", function () { jqcrown.fadeOut(2000); }); })(); // Playing notes gClient.on("n", function (msg) { var t = msg.t - gClient.serverTimeOffset + TIMING_TARGET - Date.now(); var participant = gClient.findParticipantById(msg.p); if (gPianoMutes.indexOf(participant._id) !== -1) return; for (var i = 0; i < msg.n.length; i++) { var note = msg.n[i]; var ms = t + (note.d || 0); if (ms < 0) { ms = 0; } else if (ms > 10000) continue; if (note.s) { gPiano.stop(note.n, participant, ms); } else { var vel = typeof note.v !== "undefined" ? parseFloat(note.v) : DEFAULT_VELOCITY; if (!vel) vel = 0; else if (vel < 0) vel = 0; else if (vel > 1) vel = 1; gPiano.play(note.n, vel, participant, ms); if (enableSynth) { gPiano.stop(note.n, participant, ms + 1000); } } } }); // Send cursor updates var mx = 0, last_mx = -10, my = 0, last_my = -10; setInterval(function () { if (Math.abs(mx - last_mx) > 0.1 || Math.abs(my - last_my) > 0.1) { last_mx = mx; last_my = my; gClient.sendArray([{ m: "m", x: mx, y: my }]); if (gSeeOwnCursor) { gClient.emit("m", { m: "m", id: gClient.participantId, x: mx, y: my, }); } var part = gClient.getOwnParticipant(); if (part) { part.x = mx; part.y = my; } } }, 50); $(document).mousemove(function (event) { mx = ((event.pageX / $(window).width()) * 100).toFixed(2); my = ((event.pageY / $(window).height()) * 100).toFixed(2); }); // Room settings button (function () { gClient.on("ch", function (msg) { if (gClient.isOwner() || gClient.permissions.chsetAnywhere) { $("#room-settings-btn").show(); } else { $("#room-settings-btn").hide(); } if ( !gClient.channel.settings.lobby && (gClient.permissions.chownAnywhere || gClient.channel.settings.owner_id === gClient.user._id) ) { $("#getcrown-btn").show(); } else { $("#getcrown-btn").hide(); } }); $("#room-settings-btn").click(function (evt) { if ( gClient.channel && (gClient.isOwner() || gClient.permissions.chsetAnywhere) ) { var settings = gClient.channel.settings; openModal("#room-settings"); setTimeout(function () { $("#room-settings .checkbox[name=visible]").prop( "checked", settings.visible, ); $("#room-settings .checkbox[name=chat]").prop( "checked", settings.chat, ); $("#room-settings .checkbox[name=crownsolo]").prop( "checked", settings.crownsolo, ); $("#room-settings .checkbox[name=nocussing]").prop( "checked", settings["no cussing"], ); $("#room-settings input[name=color]").val(settings.color); $("#room-settings input[name=color2]").val(settings.color2); $("#room-settings .checkbox[name=noindex]").prop( "checked", settings.noindex, ); $("#room-settings input[name=limit]").val(settings.limit); }, 100); } }); $("#room-settings .submit").click(function () { var settings = { visible: $("#room-settings .checkbox[name=visible]").is(":checked"), chat: $("#room-settings .checkbox[name=chat]").is(":checked"), crownsolo: $("#room-settings .checkbox[name=crownsolo]").is(":checked"), "no cussing": $("#room-settings .checkbox[name=nocussing]").is( ":checked", ), noindex: $("#room-settings .checkbox[name=noindex]").is(":checked"), color: $("#room-settings input[name=color]").val(), color2: $("#room-settings input[name=color2]").val(), limit: $("#room-settings input[name=limit]").val(), }; gClient.setChannelSettings(settings); closeModal(); }); $("#room-settings .drop-crown").click(function () { closeModal(); if (confirm("This will drop the crown...!")) gClient.sendArray([{ m: "chown" }]); }); })(); // Clear chat button $("#clearchat-btn").click(function (evt) { if (confirm("Are you sure you want to clear chat?")) gClient.sendArray([{ m: "clearchat" }]); }); // Get crown button $("#getcrown-btn").click(function (evt) { gClient.sendArray([{ m: "chown", id: MPP.client.getOwnParticipant().id }]); }); // Vanish or unvanish button $("#vanish-btn").click(function (evt) { gClient.sendArray([ { m: "v", vanish: !gClient.getOwnParticipant().vanished }, ]); }); gClient.on("participant update", (part) => { if (part._id === gClient.getOwnParticipant()._id) { if (part.vanished) { $("#vanish-btn").text("Unvanish"); } else { $("#vanish-btn").text("Vanish"); } } }); gClient.on("participant added", (part) => { if (part._id === gClient.getOwnParticipant()._id) { if (part.vanished) { $("#vanish-btn").text("Unvanish"); } else { $("#vanish-btn").text("Vanish"); } } }); // Handle notifications gClient.on("notification", function (msg) { new Notification(msg); }); // Don't foget spin gClient.on("ch", function (msg) { var chidlo = msg.ch._id.toLowerCase(); if (chidlo === "spin" || chidlo.substr(-5) === "/spin") { $("#piano").addClass("spin"); } else { $("#piano").removeClass("spin"); } }); /*function eb() { if(gClient.channel && gClient.channel._id.toLowerCase() === "test/fishing") { ebsprite.start(gClient); } else { ebsprite.stop(); } } if(ebsprite) { gClient.on("ch", eb); eb(); }*/ // Crownsolo notice gClient.on("ch", function (msg) { let notice = ""; let has_notice = false; if (msg.ch.settings.crownsolo) { has_notice = true; notice += 'This room is set to "only the owner can play."
'; } if (msg.ch.settings["no cussing"]) { has_notice = true; notice += 'This room is set to "no cussing."
'; } let notice_div = $("#room-notice"); if (has_notice) { notice_div.html(notice); if (notice_div.is(":hidden")) notice_div.fadeIn(1000); } else { if (notice_div.is(":visible")) notice_div.fadeOut(1000); } }); gClient.on("disconnect", function () { $("#room-notice").fadeOut(1000); }); var gPianoMutes = (localStorage.pianoMutes ? localStorage.pianoMutes : "") .split(",") .filter((v) => v); var gChatMutes = (localStorage.chatMutes ? localStorage.chatMutes : "") .split(",") .filter((v) => v); var gShowIdsInChat = localStorage.showIdsInChat == "true"; var gShowTimestampsInChat = localStorage.showTimestampsInChat == "true"; var gNoChatColors = localStorage.noChatColors == "true"; var gNoBackgroundColor = localStorage.noBackgroundColor == "true"; var gOutputOwnNotes = localStorage.outputOwnNotes ? localStorage.outputOwnNotes == "true" : true; var gVirtualPianoLayout = localStorage.virtualPianoLayout == "true"; var gSmoothCursor = localStorage.smoothCursor == "true"; var gShowChatTooltips = localStorage.showChatTooltips == "true"; var gShowPianoNotes = localStorage.showPianoNotes == "true"; var gHighlightScaleNotes = localStorage.highlightScaleNotes; var gCursorHides = (localStorage.cursorHides ? localStorage.cursorHides : "") .split(",") .filter((v) => v); var gHideAllCursors = localStorage.hideAllCursors == "true"; var gHidePiano = localStorage.hidePiano == "true"; var gHideChat = localStorage.hideChat == "true"; var gNoPreventDefault = localStorage.noPreventDefault == "true"; var gHideBotUsers = localStorage.hideBotUsers == "true"; var gSnowflakes = new Date().getMonth() === 11 && localStorage.snowflakes !== "false"; // var gWarnOnLinks = localStorage.warnOnLinks ? loalStorage.warnOnLinks == "true" : true; var gDisableMIDIDrumChannel = localStorage.disableMIDIDrumChannel ? localStorage.disableMIDIDrumChannel == "true" : true; function shouldShowSnowflakes() { const snowflakes = document.querySelector(".snowflakes"); if (gSnowflakes) { snowflakes.style.visibility = "visible"; } else { snowflakes.style.visibility = "hidden"; } } shouldShowSnowflakes(); // This code is not written specficially for readibility, it is a heavily used function and performance matters. // If someone finds this code and knows a more performant way to do this (with proof of it being more performant) // it may be replaced with the more performant code. // Returns true if we should hide the user, and returns false when we should not. function shouldHideUser(user) { if (gHideBotUsers) { if (user) { if (user.tag && user.tag.text === "BOT") { return true; } else { return false; } } } else { return false; } } // Hide piano attribute if (gHidePiano) { $("#piano").hide(); } else { $("#piano").show(); } // Hide chat attribute if (gHideChat) { $("#chat").hide(); } else { $("#chat").show(); } // smooth cursor attribute if (gSmoothCursor) { $("#cursors").attr("smooth-cursors", ""); } else { $("#cursors").removeAttr("smooth-cursors"); } // Background color (function () { var old_color1 = new Color("#000000"); var old_color2 = new Color("#000000"); function setColor(hex, hex2) { var color1 = new Color(hex); var color2 = new Color(hex2 || hex); if (!hex2) color2.add(-0x40, -0x40, -0x40); var bottom = document.getElementById("bottom"); var duration = 500; var step = 0; var steps = 30; var step_ms = duration / steps; var difference = new Color(color1.r, color1.g, color1.b); difference.r -= old_color1.r; difference.g -= old_color1.g; difference.b -= old_color1.b; var inc1 = new Color( difference.r / steps, difference.g / steps, difference.b / steps, ); difference = new Color(color2.r, color2.g, color2.b); difference.r -= old_color2.r; difference.g -= old_color2.g; difference.b -= old_color2.b; var inc2 = new Color( difference.r / steps, difference.g / steps, difference.b / steps, ); var iv; iv = setInterval(function () { old_color1.add(inc1.r, inc1.g, inc1.b); old_color2.add(inc2.r, inc2.g, inc2.b); document.body.style.background = "radial-gradient(ellipse at center, " + old_color1.toHexa() + " 0%," + old_color2.toHexa() + " 100%)"; bottom.style.background = old_color2.toHexa(); if (++step >= steps) { clearInterval(iv); old_color1 = color1; old_color2 = color2; document.body.style.background = "radial-gradient(ellipse at center, " + color1.toHexa() + " 0%," + color2.toHexa() + " 100%)"; bottom.style.background = color2.toHexa(); } }, step_ms); } function setColorToDefault() { setColor("#220022", "#000022"); } window.setBackgroundColor = setColor; window.setBackgroundColorToDefault = setColorToDefault; setColorToDefault(); gClient.on("ch", function (ch) { if (gNoBackgroundColor) { setColorToDefault(); return; } if (ch.ch.settings) { if (ch.ch.settings.color) { setColor(ch.ch.settings.color, ch.ch.settings.color2); } else { setColorToDefault(); } } }); })(); var volume_slider = document.getElementById("volume-slider"); volume_slider.value = gPiano.audio.volume; $("#volume-label").text( "Volume: " + Math.floor(gPiano.audio.volume * 100) + "%", ); volume_slider.addEventListener("input", function (evt) { var v = +volume_slider.value; gPiano.audio.setVolume(v); if (window.localStorage) localStorage.volume = v; $("#volume-label").text("Volume: " + Math.floor(v * 100) + "%"); }); var Note = function (note, octave) { this.note = note; this.octave = octave || 0; }; var n = function (a, b) { return { note: new Note(a, b), held: false }; }; var layouts = { MPP: { 65: n("gs"), 90: n("a"), 83: n("as"), 88: n("b"), 67: n("c", 1), 70: n("cs", 1), 86: n("d", 1), 71: n("ds", 1), 66: n("e", 1), 78: n("f", 1), 74: n("fs", 1), 77: n("g", 1), 75: n("gs", 1), 188: n("a", 1), 76: n("as", 1), 190: n("b", 1), 191: n("c", 2), 222: n("cs", 2), 49: n("gs", 1), 81: n("a", 1), 50: n("as", 1), 87: n("b", 1), 69: n("c", 2), 52: n("cs", 2), 82: n("d", 2), 53: n("ds", 2), 84: n("e", 2), 89: n("f", 2), 55: n("fs", 2), 85: n("g", 2), 56: n("gs", 2), 73: n("a", 2), 57: n("as", 2), 79: n("b", 2), 80: n("c", 3), 189: n("cs", 3), 173: n("cs", 3), // firefox why 219: n("d", 3), 187: n("ds", 3), 61: n("ds", 3), // firefox why 221: n("e", 3), }, VP: { 112: n("c", -1), 113: n("d", -1), 114: n("e", -1), 115: n("f", -1), 116: n("g", -1), 117: n("a", -1), 118: n("b", -1), 49: n("c"), 50: n("d"), 51: n("e"), 52: n("f"), 53: n("g"), 54: n("a"), 55: n("b"), 56: n("c", 1), 57: n("d", 1), 48: n("e", 1), 81: n("f", 1), 87: n("g", 1), 69: n("a", 1), 82: n("b", 1), 84: n("c", 2), 89: n("d", 2), 85: n("e", 2), 73: n("f", 2), 79: n("g", 2), 80: n("a", 2), 65: n("b", 2), 83: n("c", 3), 68: n("d", 3), 70: n("e", 3), 71: n("f", 3), 72: n("g", 3), 74: n("a", 3), 75: n("b", 3), 76: n("c", 4), 90: n("d", 4), 88: n("e", 4), 67: n("f", 4), 86: n("g", 4), 66: n("a", 4), 78: n("b", 4), 77: n("c", 5), }, }; var key_binding = gVirtualPianoLayout ? layouts.VP : layouts.MPP; var capsLockKey = false; var transpose = 0; function handleKeyDown(evt) { if (evt.target.type) return; //console.log(evt); var code = parseInt(evt.keyCode); if (key_binding[code] !== undefined) { var binding = key_binding[code]; if (!binding.held) { binding.held = true; var note = binding.note; var octave = 1 + note.octave; if (!gVirtualPianoLayout) { if (evt.shiftKey) ++octave; else if (capsLockKey || evt.ctrlKey) --octave; else if (evt.altKey) octave += 2; } note = note.note + octave; var index = Object.keys(gPiano.keys).indexOf(note); if (gVirtualPianoLayout && evt.shiftKey) { note = Object.keys(gPiano.keys)[index + transpose + 1]; } else note = Object.keys(gPiano.keys)[index + transpose]; if (note === undefined) return; var vol = velocityFromMouseY(); press(note, vol); } if (++gKeyboardSeq == 3) { gKnowsYouCanUseKeyboard = true; if (window.gKnowsYouCanUseKeyboardTimeout) clearTimeout(gKnowsYouCanUseKeyboardTimeout); if (localStorage) localStorage.knowsYouCanUseKeyboard = true; if (window.gKnowsYouCanUseKeyboardNotification) gKnowsYouCanUseKeyboardNotification.close(); } if (!gNoPreventDefault) evt.preventDefault(); evt.stopPropagation(); return false; } else if (code == 20) { // Caps Lock capsLockKey = true; if (!gNoPreventDefault) evt.preventDefault(); } else if (code === 0x20) { // Space Bar pressSustain(); if (!gNoPreventDefault) evt.preventDefault(); } else if (code === 38 && transpose <= 100) { transpose += 12; sendTransposeNotif(); } else if (code === 40 && transpose >= -100) { transpose -= 12; sendTransposeNotif(); } else if (code === 39 && transpose < 100) { transpose++; sendTransposeNotif(); } else if (code === 37 && transpose > -100) { transpose--; sendTransposeNotif(); } else if (code == 9) { // Tab (don't tab away from the piano) if (!gNoPreventDefault) evt.preventDefault(); } else if (code == 8) { // Backspace (don't navigate Back) gAutoSustain = !gAutoSustain; if (!gNoPreventDefault) evt.preventDefault(); } } function sendTransposeNotif() { new Notification({ title: "Transposing", html: "Transpose level: " + transpose, target: "#midi-btn", duration: 1500, }); } function handleKeyUp(evt) { if (evt.target.type) return; var code = parseInt(evt.keyCode); if (key_binding[code] !== undefined) { var binding = key_binding[code]; if (binding.held) { binding.held = false; var note = binding.note; var octave = 1 + note.octave; if (!gVirtualPianoLayout) { if (evt.shiftKey) ++octave; else if (capsLockKey || evt.ctrlKey) --octave; else if (evt.altKey) octave += 2; } note = note.note + octave; var index = Object.keys(gPiano.keys).indexOf(note); if (gVirtualPianoLayout && evt.shiftKey) { note = Object.keys(gPiano.keys)[index + transpose + 1]; } else note = Object.keys(gPiano.keys)[index + transpose]; if (note === undefined) return; release(note); } if (!gNoPreventDefault) evt.preventDefault(); evt.stopPropagation(); return false; } else if (code == 20) { // Caps Lock capsLockKey = false; if (!gNoPreventDefault) evt.preventDefault(); } else if (code === 0x20) { // Space Bar releaseSustain(); if (!gNoPreventDefault) evt.preventDefault(); } } function handleKeyPress(evt) { if (evt.target.type) return; if (!gNoPreventDefault) evt.preventDefault(); evt.stopPropagation(); if (evt.keyCode == 27 || evt.keyCode == 13) { //$("#chat input").focus(); } return false; } var recapListener = function (evt) { captureKeyboard(); }; var capturingKeyboard = false; function captureKeyboard() { if (!capturingKeyboard) { capturingKeyboard = true; $("#piano").off("mousedown", recapListener); $("#piano").off("touchstart", recapListener); $(document).on("keydown", handleKeyDown); $(document).on("keyup", handleKeyUp); $(window).on("keypress", handleKeyPress); } } function releaseKeyboard() { if (capturingKeyboard) { capturingKeyboard = false; $(document).off("keydown", handleKeyDown); $(document).off("keyup", handleKeyUp); $(window).off("keypress", handleKeyPress); $("#piano").on("mousedown", recapListener); $("#piano").on("touchstart", recapListener); } } captureKeyboard(); var velocityFromMouseY = function () { return 0.1 + (my / 100) * 0.6; }; // NoteQuota var gNoteQuota = (function () { var last_rat = 0; var nqjq = $("#quota .value"); setInterval(function () { gNoteQuota.tick(); }, 2000); return new NoteQuota(function (points) { // update UI var rat = (points / this.max) * 100; if (rat <= last_rat) nqjq.stop(true, true).css("width", rat.toFixed(0) + "%"); else nqjq .stop(true, true) .animate({ width: rat.toFixed(0) + "%" }, 2000, "linear"); last_rat = rat; }); })(); gClient.on("nq", function (nq_params) { gNoteQuota.setParams(nq_params); }); gClient.on("disconnect", function () { gNoteQuota.setParams(NoteQuota.PARAMS_OFFLINE); }); //DMs var gDmParticipant; var gIsDming = false; var gKnowsHowToDm = localStorage.knowsHowToDm === "true"; gClient.on("participant removed", (part) => { if (gIsDming && part._id === gDmParticipant._id) { chat.endDM(); chat.endDM(); } }); //Replies var gReplyParticipant; var gIsReplying = false; var gMessageId; gClient.on(`participant removed`, (part) => { if (gIsReplying && part._id === gReplyParticipant._id) { MPP.chat.cancelReply(); } }); // click participant names (function () { participantTouchhandler = function (e, ele) { var target = ele; var target_jq = $(target); if (!target_jq) return; if (target_jq.hasClass("name")) { target_jq.addClass("play"); var id = target.participantId; if (id == gClient.participantId) { openModal("#rename", "input[name=name]"); setTimeout(function () { $("#rename input[name=name]").val( gClient.ppl[gClient.participantId].name, ); $("#rename input[name=color]").val( gClient.ppl[gClient.participantId].color, ); }, 100); } else if (id) { var part = gClient.ppl[id] || null; if (part) { participantMenu(part); e.stopPropagation(); } } } }; var releasehandler = function (e) { $("#names .name").removeClass("play"); }; document.body.addEventListener("mouseup", releasehandler); document.body.addEventListener("touchend", releasehandler); var removeParticipantMenus = function () { $(".participant-menu").remove(); $(".participantSpotlight").hide(); document.removeEventListener("mousedown", removeParticipantMenus); document.removeEventListener("touchstart", removeParticipantMenus); }; var participantMenu = function (part) { if (!part) return; removeParticipantMenus(); document.addEventListener("mousedown", removeParticipantMenus); document.addEventListener("touchstart", removeParticipantMenus); $("#" + part.id) .find(".enemySpotlight") .show(); var menu = $(''); $("body").append(menu); // move menu to name position var jq_nd = $(part.nameDiv); var pos = jq_nd.position(); menu.css({ top: pos.top + jq_nd.height() + 15, left: pos.left + 6, background: part.color || "black", }); menu.on("mousedown touchstart", function (evt) { evt.stopPropagation(); var target = $(evt.target); if (target.hasClass("menu-item")) { target.addClass("clicked"); menu.fadeOut(200, function () { removeParticipantMenus(); }); } }); // this spaces stuff out but also can be used for informational $('') .appendTo(menu) .text(part._id) .on("mousedown touchstart", (evt) => { navigator.clipboard.writeText(part._id); evt.target.innerText = "Copied!"; setTimeout(() => { evt.target.innerText = part._id; }, 2500); }); // add menu items if (gPianoMutes.indexOf(part._id) == -1) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { gPianoMutes.push(part._id); if (localStorage) localStorage.pianoMutes = gPianoMutes.join(","); $(part.nameDiv).addClass("muted-notes"); }); } else { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var i; while ((i = gPianoMutes.indexOf(part._id)) != -1) gPianoMutes.splice(i, 1); if (localStorage) localStorage.pianoMutes = gPianoMutes.join(","); $(part.nameDiv).removeClass("muted-notes"); }); } if (gChatMutes.indexOf(part._id) == -1) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { gChatMutes.push(part._id); if (localStorage) localStorage.chatMutes = gChatMutes.join(","); $(part.nameDiv).addClass("muted-chat"); }); } else { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var i; while ((i = gChatMutes.indexOf(part._id)) != -1) gChatMutes.splice(i, 1); if (localStorage) localStorage.chatMutes = gChatMutes.join(","); $(part.nameDiv).removeClass("muted-chat"); }); } if ( !(gPianoMutes.indexOf(part._id) >= 0) || !(gChatMutes.indexOf(part._id) >= 0) ) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { gPianoMutes.push(part._id); if (localStorage) localStorage.pianoMutes = gPianoMutes.join(","); gChatMutes.push(part._id); if (localStorage) localStorage.chatMutes = gChatMutes.join(","); $(part.nameDiv).addClass("muted-notes"); $(part.nameDiv).addClass("muted-chat"); }); } if ( gPianoMutes.indexOf(part._id) >= 0 || gChatMutes.indexOf(part._id) >= 0 ) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var i; while ((i = gPianoMutes.indexOf(part._id)) != -1) gPianoMutes.splice(i, 1); while ((i = gChatMutes.indexOf(part._id)) != -1) gChatMutes.splice(i, 1); if (localStorage) localStorage.pianoMutes = gPianoMutes.join(","); if (localStorage) localStorage.chatMutes = gChatMutes.join(","); $(part.nameDiv).removeClass("muted-notes"); $(part.nameDiv).removeClass("muted-chat"); }); } if (gIsDming && gDmParticipant._id === part._id) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { chat.endDM(); }); } else { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { if (!gKnowsHowToDm) { localStorage.knowsHowToDm = true; gKnowsHowToDm = true; new Notification({ target: "#piano", duration: 20000, title: window.i18nextify.i18next.t("How to DM"), text: window.i18nextify.i18next.t( "After you click the button to direct message someone, future chat messages will be sent to them instead of to everyone. To go back to talking in public chat, send a blank chat message, or click the button again.", ), }); } chat.startDM(part); }); } if (gCursorHides.indexOf(part._id) == -1) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { gCursorHides.push(part._id); if (localStorage) localStorage.cursorHides = gCursorHides.join(","); $(part.cursorDiv).hide(); }); } else { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var i; while ((i = gCursorHides.indexOf(part._id)) != -1) gCursorHides.splice(i, 1); if (localStorage) localStorage.cursorHides = gCursorHides.join(","); $(part.cursorDiv).show(); }); } $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { $("#chat-input")[0].value += "@" + part.id + " "; setTimeout(() => { $("#chat-input").focus(); }, 1); }); if (gClient.isOwner() || gClient.permissions.chownAnywhere) { if (!gClient.channel.settings.lobby) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { if (confirm("Give room ownership to " + part.name + "?")) gClient.sendArray([{ m: "chown", id: part.id }]); }); } $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var minutes = prompt("How many minutes? (0-300)", "30"); if (minutes === null) return; minutes = parseFloat(minutes) || 0; var ms = minutes * 60 * 1000; gClient.sendArray([{ m: "kickban", _id: part._id, ms: ms }]); }); } if (gClient.permissions.siteBan) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { openModal("#siteban"); setTimeout(function () { $("#siteban input[name=id]").val(part._id); $("#siteban input[name=reasonText]").val( "Discrimination against others", ); $("#siteban input[name=reasonText]").attr("disabled", true); $("#siteban select[name=reasonSelect]").val( "Discrimination against others", ); $("#siteban input[name=durationNumber]").val(5); $("#siteban input[name=durationNumber]").attr("disabled", false); $("#siteban select[name=durationUnit]").val("hours"); $("#siteban textarea[name=note]").val(""); $("#siteban p[name=errorText]").text(""); if (gClient.permissions.siteBanAnyReason) { $( "#siteban select[name=reasonSelect] option[value=custom]", ).attr("disabled", false); } else { $( "#siteban select[name=reasonSelect] option[value=custom]", ).attr("disabled", true); } }, 100); }); } if (gClient.permissions.usersetOthers) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var color = prompt("What color?", part.color); if (color === null) return; gClient.sendArray([{ m: "setcolor", _id: part._id, color: color }]); }); } if (gClient.permissions.usersetOthers) { $( ` `, ) .appendTo(menu) .on("mousedown touchstart", function (evt) { var name = prompt("What name?", part.name); if (name === null) return; gClient.sendArray([{ m: "setname", _id: part._id, name: name }]); }); } menu.fadeIn(100); }; })(); // Notification class //////////////////////////////////////////////////////////////// var Notification = function (par) { if (this instanceof Notification === false) throw "yeet"; EventEmitter.call(this); var par = par || {}; this.id = "Notification-" + (par.id || Math.random()); this.title = par.title || ""; this.text = par.text || ""; this.html = par.html || ""; this.target = $(par.target || "#piano"); this.duration = par.duration || 30000; this["class"] = par["class"] || "classic"; var self = this; var eles = $("#" + this.id); if (eles.length > 0) { eles.remove(); } this.domElement = $( '