Advertisement
Guest User

Untitled

a guest
Apr 19th, 2019
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.68 KB | None | 0 0
  1. const host = window.document.location.host.replace(/:.*/, '');
  2.  
  3. const client = new Colyseus.Client(location.protocol.replace("http", "ws") + host + (location.port ? ':' + location.port : ''));
  4. const room = client.join("state_handler");
  5.  
  6. const placedStackElement = $( ".placed-stack" );
  7. const guessedStackElement = $( ".guessed-stack" );
  8. const donePlacingBtnElement = $( ".done-placing-btn" );
  9. const doneGuessingBtnElement = $( ".done-guessing-btn" );
  10. const popPlacedBtnElement = $( ".pop-placed-btn" );
  11. const popGuessedBtnElement = $( ".pop-guessed-btn" );
  12. const placeBtnToolbarElement = $( ".place-btn-toolbar" );
  13. const guessBtnToolbarElement = $( ".guess-btn-toolbar" );
  14. const placeBtnGroupElement = $( ".place-btn-group" );
  15. const guessBtnGroupElement = $( ".guess-btn-group" );
  16. const announcementContainerElement = $( ".announcement-container" );
  17. const announcementParagraphElement = $( ".announcement-paragraph" );
  18. const winsParagraphElement = $( ".wins-paragraph" );
  19.  
  20.  
  21. function redrawStackElement(balls, stackElement) {
  22. stackElement.empty();
  23. balls.forEach(color => {
  24. stackElement.append( `<div class="ball" style="background: ${color}"></div>` );
  25. });
  26. }
  27.  
  28. function updateButtons(balls, doneBtnElement, popBtnElement, btnGroupElement) {
  29. popBtnElement.prop('disabled', !balls.length);
  30. doneBtnElement.prop('disabled', balls.length < 5);
  31. btnGroupElement.children().prop('disabled', balls.length === 5);
  32. }
  33.  
  34. function hideShowElements() {
  35. placeBtnToolbarElement.children().hide();
  36. guessBtnToolbarElement.children().hide();
  37. announcementContainerElement.hide();
  38. placedStackElement.hide();
  39.  
  40. if (state.phase === 1) {
  41. if (state.role === 1) {
  42. placeBtnToolbarElement.children().show();
  43. placedStackElement.show();
  44. }
  45.  
  46. } else if (state.phase === 2) {
  47. announcementContainerElement.show();
  48. placedStackElement.show();
  49. countDown();
  50.  
  51.  
  52. } else if (state.phase === 3) {
  53. if (state.role === 2) {
  54. guessBtnToolbarElement.children().show();
  55. }
  56.  
  57. }
  58. }
  59.  
  60. function update() {
  61. hideShowElements();
  62.  
  63. redrawStackElement(state.placedBalls, placedStackElement);
  64. redrawStackElement(state.guessedBalls, guessedStackElement);
  65.  
  66. updateButtons(state.placedBalls, donePlacingBtnElement, popPlacedBtnElement, placeBtnGroupElement);
  67. updateButtons(state.guessedBalls, doneGuessingBtnElement, popGuessedBtnElement, guessBtnGroupElement);
  68.  
  69. winsParagraphElement.text("Wins: " + state.wins);
  70. }
  71.  
  72. async function countDown() {
  73. function timer(ms) {
  74. return new Promise(res => setTimeout(res, ms));
  75. }
  76.  
  77. async function load () {
  78. for (var i = 5; i >= 0; i--) {
  79. announcementParagraphElement.text(i);
  80. await timer(1000);
  81. }
  82. }
  83.  
  84. load();
  85. await timer(5000);
  86. doneWatching();
  87. }
  88.  
  89. class State {
  90. players = {};
  91. placedBalls = [];
  92. guessedBalls = [];
  93. phase = 1;
  94. role = 1;
  95. wins = 0;
  96. playerTaken = null;
  97.  
  98. refresh() {
  99. this.placedBalls = [];
  100. this.guessedBalls = [];
  101. this.phase = 1;
  102. this.role = 1;
  103. this.wins = 0;
  104.  
  105. update();
  106. }
  107. }
  108.  
  109. const state = new State();
  110.  
  111. update();
  112.  
  113. room.listen("players/:id", change => {
  114. if (change.operation === "add") {
  115. if (!change.value.taken) {
  116. takePlayer(change.path.id);
  117. }
  118. state.players[change.path.id] = 1;
  119. } else if (change.operation === "remove") {
  120. delete state.players[change.path.id];
  121. state.refresh();
  122. }
  123. update();
  124. });
  125.  
  126. room.listen("players/:taken", change => {
  127. if (change.value && !state.playerTaken && !change.value.taken) {
  128. state.players[change.path.taken] = 1;
  129. state.playerTaken = change.path.taken;
  130. state.role = Object.keys(state.players).length;
  131. state.placedBalls = change.value.placedBallColors;
  132. state.guessedBalls = change.value.guessedBallColors;
  133. }
  134. update();
  135. });
  136.  
  137. room.listen("players/:role", change => {
  138. update();
  139. });
  140.  
  141. room.listen("placedBallColors/:", change => {
  142. if (change.operation === "add") {
  143. state.placedBalls.push(change.value);
  144. } else if (change.operation === "remove") {
  145. state.placedBalls.pop();
  146. }
  147. update();
  148. });
  149.  
  150. room.listen("guessedBallColors/:", change => {
  151. if (change.operation === "add") {
  152. state.guessedBalls.push(change.value);
  153. } else if (change.operation === "remove") {
  154. state.guessedBalls.pop();
  155. }
  156. update();
  157. });
  158.  
  159. room.listen("switchRoles/:n", change => {
  160. state.role = state.role === 2 ? 1 : 2;
  161. update();
  162. });
  163.  
  164. room.listen("phase/:id", change => {
  165. state.phase = change.value;
  166. update();
  167. });
  168.  
  169. room.listen("guesserWon/:win", change => {
  170. console.log(change.value, state.role)
  171. if (change.value && state.role === 1) {
  172. state.wins++;
  173. }
  174. update();
  175. });
  176.  
  177.  
  178. function takePlayer (playerId) {
  179. room.send({ takePlayer: playerId });
  180. }
  181.  
  182. function placeRed () {
  183. room.send({ placed: "red" });
  184. }
  185.  
  186. function placeGreen () {
  187. room.send({ placed: "green" });
  188. }
  189.  
  190. function placeBlue () {
  191. room.send({ placed: "blue" })
  192. }
  193.  
  194. function placeYellow () {
  195. room.send({ placed: "yellow" })
  196. }
  197.  
  198. function popPlaced () {
  199. room.send({ popPlaced: true })
  200. }
  201.  
  202.  
  203. function guessRed () {
  204. room.send({ guessed: "red" });
  205. }
  206.  
  207. function guessGreen () {
  208. room.send({ guessed: "green" });
  209. }
  210.  
  211. function guessBlue () {
  212. room.send({ guessed: "blue" })
  213. }
  214.  
  215. function guessYellow () {
  216. room.send({ guessed: "yellow" })
  217. }
  218.  
  219. function popGuessed () {
  220. room.send({ popGuessed: true })
  221. }
  222.  
  223. function donePlacing () {
  224. room.send({ donePlacing: true });
  225. }
  226.  
  227. function doneWatching () {
  228. room.send({ doneWatching: true })
  229. }
  230.  
  231. function doneGuessing () {
  232. room.send({ doneGuessing: true })
  233. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement