/ public_html / script / src / devcard.js
devcard.js
  1  'use strict';
  2  
  3  import {CONST} from './const.js';
  4  import {default as $} from 'jquery';
  5  import {showAlert} from './alert.js';
  6  const GEN = Symbol(), SOCKET = Symbol(), PLAYER = Symbol();
  7  
  8  export class DevCard {
  9      constructor(g, s, p) {
 10          this[GEN] = g;
 11          this[SOCKET] = s;
 12          this[PLAYER] = p;
 13      }
 14  
 15      formHide() {
 16          $('#request-overlay')
 17              .css('display', 'none');
 18          $('#request-form')
 19              .html('');
 20      }
 21  
 22      buy(data) {
 23          this[SOCKET].emit('devcard:buy', null, (err, res) => {
 24              showAlert(`Got a ${res[1]} card.`, 'success');
 25              this[GEN].next([err, res]);
 26          });
 27      }
 28      buyShow(data) {
 29          if( data.players[this[PLAYER]].hand[CONST.RESOURCE][CONST.ORE] > 0 &&
 30              data.players[this[PLAYER]].hand[CONST.RESOURCE][CONST.WHEAT] > 0 &&
 31              data.players[this[PLAYER]].hand[CONST.RESOURCE][CONST.WOOL] > 0 &&
 32              data.devCards.length > 0) {
 33              $('#buy-dev-card')
 34                  .css('display', 'block')
 35                  .off('click')
 36                  .click(() => {
 37                      $('#buy-dev-card')
 38                          .off('click');
 39                      this.buy(data);
 40                  });
 41          }
 42      }
 43  
 44      play(data, type) {
 45          this[SOCKET].emit('devcard:play', type, (err, res) => {
 46              this[GEN].next([null, [res, type]]);
 47          });
 48          this.formHide();
 49      }
 50      playButtonShow(data) {
 51          if( data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.MONOPOLY] > 0 ||
 52              data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.ROAD_BUILDING] > 0 ||
 53              data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.YEAR_OF_PLENTY] > 0) {
 54              $('#play-dev-card')
 55                  .css('display', 'block')
 56                  .off('click')
 57                  .click(() => {
 58                      this.playShow(data);
 59                  });
 60          }
 61      }
 62      playShow(data) {
 63          let cont;
 64          $('#request-overlay').css('display', 'block');
 65          $('#request-form')
 66              .append($('<h2></h2>')
 67                  .text('Play a development card')
 68              )
 69              .append($('<div></div>')
 70                  .addClass('card-container')
 71                  .attr('id', 'devcard-list')
 72                  .append((cont = $('<div></div>')
 73                      .addClass('devcard-container')
 74                  ))
 75              )
 76              .append($('<button></button>')
 77                  .text('Cancel')
 78                  .click(() => {
 79                      this.formHide();
 80                  }));
 81          if(data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.MONOPOLY]) {
 82              cont
 83                  .append($('<div></div>')
 84                      .addClass('devcard monopoly')
 85                      .css('cursor', 'pointer')
 86                      .click(() => {
 87                          data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.MONOPOLY] -= 1;
 88                          this.play(data, CONST.MONOPOLY);
 89                      })
 90                  );
 91          }
 92          if(data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.ROAD_BUILDING]) {
 93              cont
 94                  .append($('<div></div>')
 95                      .addClass('devcard road-building')
 96                      .css('cursor', 'pointer')
 97                      .click(() => {
 98                          data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.ROAD_BUILDING] -= 1;
 99                          this.play(data, CONST.ROAD_BUILDING);
100                      })
101                  );
102          }
103          if(data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.YEAR_OF_PLENTY]) {
104              cont
105                  .append($('<div></div>')
106                      .addClass('devcard year-of-plenty')
107                      .css('cursor', 'pointer')
108                      .click(() => {
109                          data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.YEAR_OF_PLENTY] -= 1;
110                          this.play(data, CONST.YEAR_OF_PLENTY);
111                      })
112                  );
113          }
114      }
115  
116      playKnightShow(data) {
117          if(data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.KNIGHT] > 0) {
118              $('#request-overlay').css('display', 'block');
119              $('#request-form')
120                  .append($('<h2></h2>')
121                      .text('Play the knight card?')
122                  )
123                  .append($('<button></button>')
124                      .text('Yes')
125                      .click(() => {
126                          this.formHide();
127                          this[SOCKET].emit('devcard:play', CONST.KNIGHT, (err, res) => {
128                              this[GEN].next([err, [res, true]]);
129                          });
130                          data.players[this[PLAYER]].hand[CONST.DEVELOPMENT][CONST.READY][CONST.KNIGHT] -= 1;
131                      })
132                  )
133                  .append($('<button></button>')
134                      .text('No')
135                      .click(() => {
136                          this.formHide();
137                          this[GEN].next([null, [data, false]]);
138                      })
139                  );
140          } else {
141              window.setTimeout(() => {
142                  this[GEN].next([null, [data, false]]);
143              }, 0);
144          }
145      }
146  
147      monopoly() {
148          $('#request-overlay').css('display', 'block');
149          $('#request-form')
150              .append($('<h2></h2>')
151                  .text('Take all of which resource?')
152              )
153              .append($('<div></div>')
154                  .addClass('card-container')
155                  .attr('id', 'resource-list')
156                  .append($('<div></div>')
157                      .addClass('resource-container')
158                      .append($('<div></div>')
159                          .addClass('card wool')
160                          .css('cursor', 'pointer')
161                          .click(() => {
162                              this.formHide();
163                              this[SOCKET].emit('devcard:monopoly', CONST.WOOL, (err, res) => {
164                                  this[GEN].next([err, res]);
165                              });
166                          })
167                      )
168                      .append($('<div></div>')
169                          .addClass('card wheat')
170                          .css('cursor', 'pointer')
171                          .click(() => {
172                              this.formHide();
173                              this[SOCKET].emit('devcard:monopoly', CONST.WHEAT, (err, res) => {
174                                  this[GEN].next([err, res]);
175                              });
176                          })
177                      )
178                      .append($('<div></div>')
179                          .addClass('card wood')
180                          .css('cursor', 'pointer')
181                          .click(() => {
182                              this.formHide();
183                              this[SOCKET].emit('devcard:monopoly', CONST.WOOD, (err, res) => {
184                                  this[GEN].next([err, res]);
185                              });
186                          })
187                      )
188                      .append($('<div></div>')
189                          .addClass('card brick')
190                          .css('cursor', 'pointer')
191                          .click(() => {
192                              this.formHide();
193                              this[SOCKET].emit('devcard:monopoly', CONST.BRICK, (err, res) => {
194                                  this[GEN].next([err, res]);
195                              });
196                          })
197                      )
198                      .append($('<div></div>')
199                          .addClass('card ore')
200                          .css('cursor', 'pointer')
201                          .click(() => {
202                              this.formHide();
203                              this[SOCKET].emit('devcard:monopoly', CONST.ORE, (err, res) => {
204                                  this[GEN].next([err, res]);
205                              });
206                          })
207                      )
208                  )
209              );
210      }
211  
212      yearOfPlenty() {
213          let addResource = (type) => {
214              $('#to-take')
215                  .append($('<div></div>')
216                      .attr('data-card-type', type)
217                      .addClass(`card ${['wool','wheat','wood','brick','ore'][type]}`)
218                      .click(function() {
219                          $(this).remove();
220                      }));
221          };
222          $('#request-overlay').css('display', 'block');
223          $('#request-form')
224              .append($('<h2></h2>')
225                  .text('Choose 2 resources')
226              )
227              .append($('<p></p>')
228                  .text('Chosen')
229              )
230              .append($('<hr>'))
231              .append($('<div></div>')
232                  .addClass('card-container')
233                  .append($('<div></div>')
234                      .addClass('resource-container')
235                      .attr('id', 'to-take')
236                  )
237              )
238              .append($('<p></p>')
239                  .text('Pick')
240              )
241              .append($('<hr>'))
242              .append($('<div></div>')
243                  .addClass('card-container')
244                  .attr('id', 'resource-list')
245                  .append($('<div></div>')
246                      .addClass('resource-container')
247                      .append($('<div></div>')
248                          .addClass('card wool')
249                          .css('cursor', 'pointer')
250                          .click(() => addResource(CONST.WOOL))
251                      )
252                      .append($('<div></div>')
253                          .addClass('card wheat')
254                          .css('cursor', 'pointer')
255                          .click(() => addResource(CONST.WHEAT))
256                      )
257                      .append($('<div></div>')
258                          .addClass('card wood')
259                          .css('cursor', 'pointer')
260                          .click(() => addResource(CONST.WOOD))
261                      )
262                      .append($('<div></div>')
263                          .addClass('card brick')
264                          .css('cursor', 'pointer')
265                          .click(() => addResource(CONST.BRICK))
266                      )
267                      .append($('<div></div>')
268                          .addClass('card ore')
269                          .css('cursor', 'pointer')
270                          .click(() => addResource(CONST.ORE))
271                      )
272                  )
273              )
274              .append($('<button></button>')
275                  .text('Submit')
276                  .click(() => {
277                      let cards = $('#to-take').children('.card');
278                      if(cards.length == 2) {
279                          let a = cards.eq(0).attr('data-card-type'),
280                              b = cards.eq(1).attr('data-card-type');
281                          this.formHide();
282                          this[SOCKET].emit('devcard:plenty', [a, b], (err, res) => {
283                              this[GEN].next([err, res]);
284                          });
285                      } else {
286                          showAlert('Choose two cards', 'error');
287                      }
288                  }));
289      }
290  }