API tools faq
paste
Advertisement
TheMichelle

MPPUI BETA 0.5

TheMichelle
Sep 29th, 2016
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 16.15 KB | None | 0 0
raw download clone embed print report
  1. var verNum = "MPPUI BETA 0.5";
  2.  
  3. //  SETUP   //////////////////////////////
  4.  
  5. var element = document.getElementById("social");
  6.  
  7. var verTitle = document.createElement("h2");
  8. var verNode = document.createTextNode(verNum);
  9. verTitle.appendChild(verNode);
  10.  
  11. var backTitle = document.createElement("h3");
  12. var backTitleNode = document.createTextNode("Colors (requires crown)");
  13. backTitle.appendChild(backTitleNode);
  14.  
  15. var backW = document.createElement("button");   //0
  16. var backWNode = document.createTextNode("•");
  17. backW.appendChild(backWNode);
  18.  
  19. var backPnk = document.createElement("button"); //1
  20. var backPnkNode = document.createTextNode("•");
  21. backPnk.appendChild(backPnkNode);
  22.  
  23. var backR = document.createElement("button");   //2
  24. var backRNode = document.createTextNode("•");
  25. backR.appendChild(backRNode);
  26.  
  27. var backO = document.createElement("button");   //3
  28. var backONode = document.createTextNode("•");
  29. backO.appendChild(backONode);
  30.  
  31. var backY = document.createElement("button");   //4
  32. var backYNode = document.createTextNode("•");
  33. backY.appendChild(backYNode);
  34.  
  35. var backG = document.createElement("button");   //5
  36. var backGNode = document.createTextNode("•");
  37. backG.appendChild(backGNode);
  38.  
  39. var backBlu = document.createElement("button"); //6
  40. var backBluNode = document.createTextNode("•");
  41. backBlu.appendChild(backBluNode);
  42.  
  43. var backPrp = document.createElement("button"); //7
  44. var backPrpNode = document.createTextNode("•");
  45. backPrp.appendChild(backPrpNode);
  46.  
  47. var backBlk = document.createElement("button"); //8
  48. var backBlkNode = document.createTextNode("•");
  49. backBlk.appendChild(backBlkNode);
  50.  
  51. var mpc = document.createElement("p");
  52. var mpcNode = document.createTextNode("Rainbow (select milliseconds):");
  53. mpc.appendChild(mpcNode);
  54.  
  55. var msList = [2750, 500, 5000, 10000, 30000, 60000, 120000, 180000];
  56. var selectList = document.createElement("select");
  57. selectList.id = "msSelect";
  58.  
  59. for (var i = 0; i < msList.length; i++) {
  60.     var option = document.createElement("option");
  61.     option.value = msList[i];
  62.     option.text = msList[i];
  63.     selectList.appendChild(option);
  64. }
  65.  
  66. var rainStart = document.createElement("button");   //9
  67. var rainStartNode = document.createTextNode("START");
  68. rainStart.appendChild(rainStartNode);
  69. rainStart.className = "ugly-button";
  70. rainStart.style.height = "22px";
  71. rainStart.style.width = "auto";
  72.  
  73. var mouseTitle = document.createElement("h3");
  74. var mouseNode = document.createTextNode("Mouse");
  75. mouseTitle.appendChild(mouseNode);
  76.  
  77. /*var physTitle = document.createElement("p");
  78. var physNode = document.createTextNode("Elastic Follow:   Pong:");
  79. physTitle.appendChild(physNode);*/
  80.  
  81. var physOnButt = document.createElement("button");  //10
  82. var physOnNode = document.createTextNode("Follow: OFF");
  83. physOnButt.appendChild(physOnNode);
  84. physOnButt.className = "ugly-button";
  85. physOnButt.style.height = "22px";
  86. physOnButt.style.width = "auto";
  87.  
  88. /*var pongTitle = document.createElement("p");
  89. var pongNode = document.createTextNode("Pong:");
  90. pongTitle.appendChild(pongNode);*/
  91.  
  92. var pongOnButt = document.createElement("button");  //11
  93. var pongOnNode = document.createTextNode("Pong: OFF");
  94. pongOnButt.appendChild(pongOnNode);
  95. pongOnButt.className = "ugly-button";
  96. pongOnButt.style.height = "22px";
  97. pongOnButt.style.width = "auto";
  98.  
  99. element.appendChild(verTitle);
  100. element.appendChild(backTitle);
  101. element.appendChild(backW);
  102. element.appendChild(backPnk);
  103. element.appendChild(backR);
  104. element.appendChild(backO);
  105. element.appendChild(backY);
  106. element.appendChild(backG);
  107. element.appendChild(backBlu);
  108. element.appendChild(backPrp);
  109. element.appendChild(backBlk);
  110. element.appendChild(mpc);
  111. element.appendChild(selectList);
  112. element.appendChild(rainStart);
  113. element.appendChild(mouseTitle);
  114. //element.appendChild(physTitle)
  115. element.appendChild(physOnButt);
  116. //element.appendChild(pongTitle);
  117. element.appendChild(pongOnButt);
  118.  
  119. document.getElementById("inclinations").style.marginTop = "0";
  120. document.getElementById("inclinations").style.height = "24px";
  121. document.getElementById("social").style.width = "364px";
  122. document.getElementById("social").style.textAlign = "right";
  123.  
  124. document.getElementsByTagName("BUTTON")[0].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#FFFFFF" } }]); };
  125. document.getElementsByTagName("BUTTON")[0].style.backgroundColor = "#FFFFFF";
  126. document.getElementsByTagName("BUTTON")[0].style.color = "#FFFFFF";
  127. document.getElementsByTagName("BUTTON")[0].style.border = "1px solid black";
  128. document.getElementsByTagName("BUTTON")[1].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#FF2F97" } }]); };
  129. document.getElementsByTagName("BUTTON")[1].style.backgroundColor = "#FF2F97";
  130. document.getElementsByTagName("BUTTON")[1].style.color = "#FF2F97";
  131. document.getElementsByTagName("BUTTON")[1].style.border = "1px solid black";
  132. document.getElementsByTagName("BUTTON")[2].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#800000" } }]); };
  133. document.getElementsByTagName("BUTTON")[2].style.backgroundColor = "#800000";
  134. document.getElementsByTagName("BUTTON")[2].style.color = "#800000";
  135. document.getElementsByTagName("BUTTON")[2].style.border = "1px solid black";
  136. document.getElementsByTagName("BUTTON")[3].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#B86B03" } }]); };
  137. document.getElementsByTagName("BUTTON")[3].style.backgroundColor = "#B86B03";
  138. document.getElementsByTagName("BUTTON")[3].style.color = "#B86B03";
  139. document.getElementsByTagName("BUTTON")[3].style.border = "1px solid black";
  140. document.getElementsByTagName("BUTTON")[4].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#D7D700" } }]); };
  141. document.getElementsByTagName("BUTTON")[4].style.backgroundColor = "#D7D700";
  142. document.getElementsByTagName("BUTTON")[4].style.color = "#D7D700";
  143. document.getElementsByTagName("BUTTON")[4].style.border = "1px solid black";
  144. document.getElementsByTagName("BUTTON")[5].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#008000" } }]); };
  145. document.getElementsByTagName("BUTTON")[5].style.backgroundColor = "#008000";
  146. document.getElementsByTagName("BUTTON")[5].style.color = "#008000";
  147. document.getElementsByTagName("BUTTON")[5].style.border = "1px solid black";
  148. document.getElementsByTagName("BUTTON")[6].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#000080" } }]); };
  149. document.getElementsByTagName("BUTTON")[6].style.backgroundColor = "#000080";
  150. document.getElementsByTagName("BUTTON")[6].style.color = "#000080";
  151. document.getElementsByTagName("BUTTON")[6].style.border = "1px solid black";
  152. document.getElementsByTagName("BUTTON")[7].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#800080" } }]); };
  153. document.getElementsByTagName("BUTTON")[7].style.backgroundColor = "#800080";
  154. document.getElementsByTagName("BUTTON")[7].style.color = "#800080";
  155. document.getElementsByTagName("BUTTON")[7].style.border = "1px solid black";
  156. document.getElementsByTagName("BUTTON")[8].onclick = function() { clearInterval(colorInterval); MPP.client.sendArray([{ m: 'chset', set: { color: "#202020" } }]); };
  157. document.getElementsByTagName("BUTTON")[8].style.backgroundColor = "#202020";
  158. document.getElementsByTagName("BUTTON")[8].style.color = "#202020";
  159. document.getElementsByTagName("BUTTON")[8].style.border = "1px solid black";
  160.  
  161. document.getElementsByTagName("SELECT")[0].style.width = "108px";
  162.  
  163. document.getElementById("more-button").style.display = "none";
  164. document.getElementById("like-button").style.display = "none";
  165. var colorInterval;
  166.  
  167. //  RAINBOW ROOM    //////////////////////////////
  168.  
  169. var mssVal = document.getElementById("msSelect").value;
  170. document.getElementsByTagName("BUTTON")[9].onclick = function() { rainWhole(); };
  171.  
  172. function rainWhole() {
  173.     document.getElementsByTagName("BUTTON")[9].innerHTML = "STOP";
  174.     var intervalTime = mssVal;
  175.     var colorList = ["800000", "800200", "800400", "800600", "800900", "800B00", "800D00", "800F00", "801100", "801300", "801500", "801700", "801A00", "801C00", "801E00", "802000", "802200", "802400", "802600", "802900", "802B00", "802D00", "802F00", "803100", "803300", "803500", "803700", "803A00", "803C00", "803E00", "804000", "804200", "804400", "804600", "804900", "804B00", "804D00", "804F00", "805100", "805300", "805500", "805700", "805A00", "805C00", "805E00", "806000", "806200", "806400", "806600", "806900", "806B00", "806D00", "806F00", "807100", "807300", "807500", "807700", "807A00", "807C00", "807E00", "808000", "7E8000", "7C8000", "7A8000", "778000", "758000", "738000", "718000", "6F8000", "6D8000", "6B8000", "698000", "668000", "648000", "628000", "608000", "5E8000", "5C8000", "5A8000", "578000", "558000", "538000", "518000", "4F8000", "4D8000", "4B8000", "498000", "468000", "448000", "428000", "408000", "3E8000", "3C8000", "3A8000", "378000", "358000", "338000", "318000", "2F8000", "2D8000", "2B8000", "298000", "268000", "248000", "228000", "208000", "1E8000", "1C8000", "1A8000", "178000", "158000", "138000", "118000", "0F8000", "0D8000", "0B8000", "098000", "068000", "048000", "028000", "008000", "008002", "008004", "008006", "008009", "00800B", "00800D", "00800F", "008011", "008013", "008015", "008017", "00801A", "00801C", "00801E", "008020", "008022", "008024", "008026", "008029", "00802B", "00802D", "00802F", "008031", "008033", "008035", "008037", "00803A", "00803C", "00803E", "008040", "008042", "008044", "008046", "008049", "00804B", "00804D", "00804F", "008051", "008053", "008055", "008057", "00805A", "00805C", "00805E", "008060", "008062", "008064", "008066", "008069", "00806B", "00806D", "00806F", "008071", "008073", "008075", "008077", "00807A", "00807C", "00807E", "008080", "007E80", "007C80", "007A80", "007780", "007580", "007380", "007180", "006F80", "006D80", "006B80", "006980", "006680", "006480", "006280", "006080", "005E80", "005C80", "005A80", "005780", "005580", "005380", "005180", "004F80", "004D80", "004B80", "004980", "004680", "004480", "004280", "004080", "003E80", "003C80", "003A80", "003780", "003580", "003380", "003180", "002F80", "002D80", "002B80", "002980", "002680", "002480", "002280", "002080", "001E80", "001C80", "001A80", "001780", "001580", "001380", "001180", "000F80", "000D80", "000B80", "000980", "000680", "000480", "000280", "000080", "020080", "040080", "060080", "090080", "0B0080", "0D0080", "0F0080", "110080", "130080", "150080", "170080", "1A0080", "1C0080", "1E0080", "200080", "220080", "240080", "260080", "290080", "2B0080", "2D0080", "2F0080", "310080", "330080", "350080", "370080", "3A0080", "3C0080", "3E0080", "400080", "420080", "440080", "460080", "490080", "4B0080", "4D0080", "4F0080", "510080", "530080", "550080", "570080", "5A0080", "5C0080", "5E0080", "600080", "620080", "640080", "660080", "690080", "6B0080", "6D0080", "6F0080", "710080", "730080", "750080", "770080", "7A0080", "7C0080", "7E0080", "800080", "80007E", "80007C", "80007A", "800077", "800075", "800073", "800071", "80006F", "80006D", "80006B", "800069", "800066", "800064", "800062", "800060", "80005E", "80005C", "80005A", "800057", "800055", "800053", "800051", "80004F", "80004D", "80004B", "800049", "800046", "800044", "800042", "800040", "80003E", "80003C", "80003A", "800037", "800035", "800033", "800031", "80002F", "80002D", "80002B", "800029", "800026", "800024", "800022", "800020", "80001E", "80001C", "80001A", "800017", "800015", "800013", "800011", "80000F", "80000B", "800009", "800006", "800004", "800002"]; //Put whatever hex colors you want, and however many you want.
  176.     var counter = 0;
  177.     function updateColor(color) {
  178.         MPP.client.sendArray([{
  179.             m: 'chset',
  180.             set: {
  181.                 color: '#' + color
  182.             }
  183.         }]);
  184.     };
  185.     function foo() {
  186.         if (counter < colorList.length - 1) {
  187.                 counter++;
  188.                 updateColor(`${colorList[counter]}`)
  189.         } else {
  190.             counter = 0;
  191.             updateColor(`${colorList[counter]}`)
  192.         }
  193.     };
  194.     var colorInterval = setInterval(foo, intervalTime);
  195.     var cycleMin = "";
  196.     var cycleSec = Math.round(colorList.length * intervalTime / 1000) + " second";
  197.     if (colorList.length * intervalTime >= 60000) {
  198.         cycleMin = Math.floor(colorList.length * intervalTime / 1000 / 60 * 100) / 100 + " minute";
  199.         cycleSec = ""
  200.     };
  201.     console.log(verNum + ": Rainbow started. (" + mssVal + "ms/color, " + cycleMin + cycleSec + " cycle time).");
  202. document.getElementsByTagName("BUTTON")[9].onclick = function() { clearInterval(colorInterval); console.log("Rainbow stopped.");  document.getElementsByTagName("BUTTON")[9].innerHTML = "START"; document.getElementsByTagName("BUTTON")[9].onclick = function() { rainWhole(); };
  203.     };
  204. };
  205.  
  206. //  PHYSICS BY ELECTRASHAVE //////////////////////////////
  207.  
  208. document.getElementsByTagName("BUTTON")[10].onclick = function() { physOn(); };
  209. function physOn() {
  210. var mass = 100;
  211. var gravity = 5;
  212. var friction = 4;
  213. var pos = {x: 50, y: 50};
  214. var pos2 = {x: 50, y: 50};
  215. var acc = {x: 0, y: 0};
  216. var vel = {x: 0, y: 0};
  217. var followPos = {x: 50, y: 50};
  218. MPP.client.on("m", function(msg) {
  219.     var part = MPP.client.findParticipantById(msg.id);
  220.     if (part._id == MPP.client.user._id) return;
  221.     followPos.x = +msg.x;
  222.     followPos.y = +msg.y;
  223. });
  224. var physInterval = setInterval(function() {
  225.     pos2.x = followPos.x;
  226.     pos2.y = followPos.y;
  227.     acc.x = ((pos2.x-pos.x) - (friction*vel.x))/mass;
  228.     acc.y = ((pos2.y-pos.y) - (friction*vel.y) + gravity)/mass;
  229.     vel.x += acc.x;
  230.     vel.y += acc.y;
  231.     pos.x += vel.x;
  232.     pos.y += vel.y;
  233.     MPP.client.sendArray([{m: "m", x: MPP.client.getOwnParticipant().x = pos.x, y: MPP.client.getOwnParticipant().y = pos.y}]);
  234. }, 15);
  235. document.getElementsByTagName("BUTTON")[10].innerHTML = "Follow: ON"
  236. document.getElementsByTagName("BUTTON")[10].onclick = function() { clearInterval(physInterval); document.getElementsByTagName("BUTTON")[10].innerHTML = "Follow: OFF"; document.getElementsByTagName("BUTTON")[10].onclick = function() { physOn(); };
  237.     };
  238. };
  239.  
  240. //Errors...
  241. var err_00 = verNum + " Error - Speed must be above 500ms!"
  242. var err_01 = verNum + " Error - Stop rainbow to change color manually!"
  243.  
  244. // PONG BY ELECTRASHAVE //////////////////////////////
  245.  
  246.     function Pong() {
  247.         this.enabled = false;
  248.         this.client = MPP.client; //change MPP.client to whichever variable you're using
  249.         this.vx = 0.5;
  250.         this.vy = 1.2;
  251.         this.x = 0.0;
  252.         this.y = 0.0;
  253.         let self = this;
  254.     }
  255.     Pong.prototype.tick = function() {
  256.         this.x += this.vx;
  257.         this.y += this.vy;
  258.         if (this.x < 0) {
  259.             this.vx = -this.vx;
  260.         } else if (this.x > 100) {
  261.             this.vx = -this.vx;
  262.         }
  263.         if (this.y < 0) {
  264.             this.vy = -this.vy;
  265.         } else if (this.y > 100) {
  266.             this.vy = -this.vy;
  267.         }
  268.         this.client.getOwnParticipant().x = this.x;
  269.         this.client.getOwnParticipant().y = this.y;
  270.         this.client.sendArray([{
  271.             m: "m",
  272.             x: this.x,
  273.             y: this.y
  274.         }]);
  275.     }
  276.     Pong.prototype.start = function (speed) {
  277.         if (this.enabled) return;
  278.         if (!this.speed) {
  279.             if (!speed) speed = 50;
  280.             this.speed = speed;
  281.         }
  282.         this.enabled = true;
  283.         var self = this;
  284.         this.interval = setInterval(function() {
  285.             self.tick();
  286.         }, this.speed);
  287.     }
  288.  
  289.     Pong.prototype.stop = function() {
  290.         if (!this.enabled) return;
  291.         this.enabled = false;
  292.         clearInterval(this.interval);
  293.     }
  294.     Pong.prototype.setSpeed = function(speed) {
  295.         if (!speed) {
  296.             throw new Error("Speed not defined! Defaulting to 50..");
  297.             speed = 50;
  298.         }
  299.         this.speed = speed;
  300.         if (this.enabled) {
  301.             clearInterval(this.interval);
  302.             var self = this;
  303.             this.interval = setInterval(function() {
  304.                 self.tick();
  305.             }, this.speed);
  306.         }
  307.     }
  308.     var pong = new Pong();
  309. document.getElementsByTagName("BUTTON")[11].onclick = function() {
  310.     pong.start();
  311.     document.getElementsByTagName("BUTTON")[11].innerHTML = "Pong: ON"
  312.     document.getElementsByTagName("BUTTON")[11].onclick = function() { pong.stop();
  313.     document.getElementsByTagName("BUTTON")[11].innerHTML = "Pong: OFF"; document.getElementsByTagName("BUTTON")[11].onclick = function() { pong.start(); };
  314.     };
  315. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!