You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

318 lines
9.8 KiB

  1. export default class Style {
  2. constructor(gameInstanz) {
  3. this._game = gameInstanz;
  4. this._cardOnDeck = null;
  5. this._drawCardRunnig = false;
  6. this._firstDraw = $('#first-draw');
  7. this._firstPut = $('#first-put');
  8. this._firstPutAnim = $('#first-put-anim');
  9. this._unohover = false;
  10. this._unoClicked = false;
  11. $('#sayUno').on('mouseenter', () => {
  12. if (this._unoClicked) return;
  13. this.unoHover = true;
  14. $('.uno').css('width', '28vw');
  15. $('#sayUno-glow').css('opacity', 1);
  16. })
  17. $('#sayUno').on('mouseleave', () => {
  18. if (this._unoClicked) return;
  19. this.unoHover = false;
  20. $('.uno').css('width', '25vw');
  21. $('#sayUno-glow').css('opacity', 0.3);
  22. this.startUnoLoop();
  23. })
  24. $('#sayUno').on('click', () => {
  25. this.unoHover = true;
  26. this._unoClicked = true;
  27. $('.uno').css('transition', 'width ease-out 0.2s, filter 0.1s');
  28. $('.uno').css('width', '22vw');
  29. $('.uno').css('filter', 'grayscale(80%)');
  30. $('#sayUno-glow').css('opacity', 1);
  31. this.game.currentPlayerInstanz.sayUno();
  32. })
  33. $('#drawCard').on('click', () => {
  34. this.game.currentPlayerInstanz.drawCard(1, true, true);
  35. this.refreshDebug();
  36. });
  37. this.firstDraw.on('mouseenter', () => {
  38. this.drawCardAnim(true, false);
  39. });
  40. this.firstDraw.on('mouseleave', () => {
  41. this.drawCardAnim(false, false);
  42. });
  43. this.firstDraw.on('click', () => {
  44. let playerInstanz = this.game.currentPlayerInstanz;
  45. this.drawCardAnim(false, true);
  46. playerInstanz.drawCard(1, true, true);
  47. });
  48. this.startUnoLoop();
  49. }
  50. refreshHtml() {
  51. this.refreshCardOnDeck();
  52. this.showPlayerDeck(this.game.currentPlayerInstanz, true, false, true)
  53. this.refreshDebug();
  54. }
  55. refreshCardOnDeck() {
  56. if (this._cardOnDeck !== this.game.cardOnDeck) {
  57. console.log(" ewfw")
  58. this.putCardAnim();
  59. this._cardOnDeck = this.game.cardOnDeck;
  60. } else {
  61. this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
  62. this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
  63. }
  64. }
  65. refreshDebug() {
  66. $('#drawCard').css('background-color', 'white');
  67. $("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
  68. $("#playerCards").html("Karten: ");
  69. for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++) {
  70. $('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
  71. $('#playerCards').append('<button id="button' + i + '">+</button> | ');
  72. $('#button' + i).on('click', () => {
  73. this.game.currentPlayerInstanz.putCard(i);
  74. setTimeout(() => {
  75. this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
  76. }, 100);
  77. });
  78. if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
  79. }
  80. $('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
  81. $("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
  82. $("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);
  83. if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red');
  84. }
  85. showUnoButton(){
  86. $('#uno').css('opacity', 1);
  87. this.unoHover = false;
  88. this._unoClicked = false;
  89. this.startUnoLoop();
  90. }
  91. hideUnoButton(){
  92. $('#uno').css('opacity', 0);
  93. }
  94. startUnoLoop() {
  95. if (!this.unoHover && !this._unoClicked) setTimeout(() => {
  96. $('.uno').css('width', '28vw');
  97. $('#sayUno-glow').css('opacity', 0.8);
  98. setTimeout(() => {
  99. if (!this.unoHover && !this._unoClicked) {
  100. $('.uno').css('width', '25vw');
  101. $('#sayUno-glow').css('opacity', 0.3);
  102. this.startUnoLoop();
  103. }
  104. }, 500);
  105. }, 500);
  106. }
  107. stopUnoLoop(){
  108. this._unoClicked = true;
  109. this.unoHover = true;
  110. }
  111. putCardAnim() {
  112. this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
  113. this.firstPutAnim.css('transition', 'top 0.5s, opacity 0.3s');
  114. this.firstPutAnim.css('top', '47vh');
  115. this.firstPutAnim.css('opacity', '1');
  116. setTimeout(() => {
  117. this.firstPutAnim.css('transition', '');
  118. this.firstPutAnim.css('top', '30vh');
  119. this.firstPutAnim.css('opacity', '0');
  120. this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
  121. this.firstPut.css('opacity', '1');
  122. }, 500);
  123. }
  124. showPlayerDeck(player, click, lastDraw, anim) {
  125. $('#playerDeck').html("");
  126. let currentPlayerHand = player.hand;
  127. let width = window.innerWidth;
  128. let height = window.innerHeight;
  129. let percent = 0;
  130. let top = window.innerHeight * 0.68;
  131. let cardAmount = currentPlayerHand.length;
  132. for (let i = 0; i < cardAmount; i++) {
  133. currentPlayerHand.xPos = 0;
  134. currentPlayerHand.yPos = 0;
  135. $('#playerDeck').append('<div id="card' + i + '" class="pictureCard">' + '<img src="./img/cards/' + currentPlayerHand[i].color + '/' + currentPlayerHand[i].name + '.png' + '"></div>');
  136. currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
  137. currentPlayerHand[i].yPos = top;
  138. console.log(i + ' ' + currentPlayerHand[i].yPos);
  139. let card = $('#card' + i);
  140. let put = false;
  141. if (click) {
  142. let yPos = currentPlayerHand[i].yPos;
  143. card.on('mouseenter', () => {
  144. if (!put && !anim) card.css('top', yPos - 60 + 'px');
  145. })
  146. card.on('mouseleave', () => {
  147. if (!put && !anim) card.css('top', yPos);
  148. })
  149. card.on('click', () => {
  150. if (!this.game.players[this.game.currentPlayer].hand[i].canPut || anim) return;
  151. put = true
  152. let lastPlayer = player;
  153. player.putCard(i);
  154. card.css('top', yPos - height * 0.2);
  155. card.css('opacity', 0);
  156. setTimeout(() => {
  157. this.refreshCardOnDeck();
  158. }, 400);
  159. })
  160. }
  161. if (anim) {
  162. card.css('top', height);
  163. setTimeout(() => {
  164. card.css('top', top + 'px')
  165. card.css('left', (width * 45 / 100));
  166. setTimeout(() => {
  167. card.css('left', currentPlayerHand[i].xPos + 'px');
  168. card.css('top', top + 'px')
  169. anim = false;
  170. }, 250);
  171. }, 100);
  172. } else {
  173. card.css('left', currentPlayerHand[i].xPos + 'px');
  174. card.css('top', top + 'px')
  175. }
  176. if (lastDraw && i === cardAmount - 1) {
  177. card.css('opacity', 0);
  178. card.css('top', currentPlayerHand[i].yPos - 100);
  179. setTimeout(() => {
  180. card.css('left', currentPlayerHand[i].xPos + 'px');
  181. card.css('top', top + 'px')
  182. card.css('opacity', 1);
  183. }, 50);
  184. }
  185. percent += 5;
  186. }
  187. }
  188. drawCardAnim(enable, playerDraw) {
  189. if (this.drawCardRunning) return;
  190. this.drawCardRunning = true;
  191. if (playerDraw) {
  192. this.firstDraw.css('transition', 'min-width 0.5s, top 0.5s, opacity 0.5s');
  193. this.firstDraw.css('min-width', '35vh');
  194. this.firstDraw.css('top', '60vh');
  195. this.firstDraw.css('opacity', 0);
  196. setTimeout(() => {
  197. this.firstDraw.css('transition', '');
  198. this.firstDraw.css('top', '47vh');
  199. this.firstDraw.css('min-width', '20vh');
  200. this.firstDraw.css('opacity', '1');
  201. this.drawCardRunning = false;
  202. }, 500);
  203. } else {
  204. if (enable) {
  205. this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s');
  206. this.firstDraw.css('min-width', '27vh');
  207. this.firstDraw.css('top', '50vh');
  208. } else {
  209. this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
  210. this.firstDraw.css('top', '47vh');
  211. this.firstDraw.css('min-width', '20vh');
  212. }
  213. this.drawCardRunning = false;
  214. }
  215. }
  216. showDebug() {
  217. $('#debug').show();
  218. this.refreshDebug();
  219. }
  220. hideDebug() {
  221. $('#debug').hide();
  222. }
  223. get game() {
  224. return this._game;
  225. }
  226. get firstDraw() {
  227. return this._firstDraw;
  228. }
  229. get firstPut() {
  230. return this._firstPut;
  231. }
  232. get firstPutAnim() {
  233. return this._firstPutAnim;
  234. }
  235. get drawCardRunning() {
  236. return this._drawCardRunnig;
  237. }
  238. set drawCardRunning(bool) {
  239. this._drawCardRunnig = bool;
  240. }
  241. get unoHover() {
  242. return this._unohover;
  243. }
  244. set unoHover(bool) {
  245. this._unohover = bool;
  246. }
  247. }