Frontend for viewing Dungeon Defender layouts
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

viewer.js 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. $(function() {
  2. var thisLevel;
  3. var layout;
  4. function updateDefenseUnits() {
  5. var used = 0;
  6. $.each(layout.towers, function() {
  7. used += towers[this.type].units;
  8. });
  9. $('#du_used').text(used);
  10. var hasClass = $('#du_wrapper').hasClass('over');
  11. $('#du_wrapper').removeClass('over');
  12. if (used > thisLevel.du) {
  13. $('#du_wrapper').addClass('over');
  14. if (!hasClass) {
  15. $('#du_wrapper').effect('pulsate', {times: 2}, 'fast');
  16. }
  17. }
  18. }
  19. function createBaseElForTower(key) {
  20. var type = towers[key];
  21. return $('<img>')
  22. .attr('src', type.image)
  23. .attr('alt', type.name)
  24. .data('type', key)
  25. .addClass(type.class.toLowerCase())
  26. .addClass('tower');
  27. }
  28. function createElForTower(tower) {
  29. return createBaseElForTower(tower.type)
  30. .data('tower', tower)
  31. .draggable({
  32. containment: 'document',
  33. start: function(evt) {
  34. return !evt.shiftKey;
  35. },
  36. stop: function() {
  37. $(this).data('tower').position = adjustMapOffset($(this).offsetFrom('#mapcontainer'), thisLevel, 1);
  38. }
  39. })
  40. .css('position', 'absolute')
  41. .offset(adjustMapOffset(tower.position, thisLevel))
  42. .rotate(tower.rotation)
  43. .dblclick(function() {
  44. layout.towers = $.grep(layout.towers, function(value) { return value != tower; });
  45. $(this).remove();
  46. updateDefenseUnits();
  47. })
  48. .mousedown(function(e) {
  49. if (!e.shiftKey) {
  50. return;
  51. }
  52. var el = $(this);
  53. var centre = el.offsetCentre();
  54. var mouseX = e.pageX - centre.left, mouseY = e.pageY - centre.top;
  55. var initialMouseAngle = Math.atan2(mouseY, mouseX);
  56. var initialRotation = tower.rotation;
  57. var moveHandler = function(evt) {
  58. var mouseX = evt.pageX - centre.left, mouseY = evt.pageY - centre.top;
  59. var newMouseAngle = Math.atan2(mouseY, mouseX);
  60. var mouseDelta = newMouseAngle - initialMouseAngle;
  61. var rotation = initialRotation + newMouseAngle * (180 / Math.PI);
  62. tower.rotation = rotation;
  63. el.rotate(rotation);
  64. };
  65. var upHandler = function() {
  66. $(document).unbind('mousemove', moveHandler);
  67. $(document).unbind('mouseup', upHandler);
  68. };
  69. $(document).mousemove(moveHandler);
  70. $(document).mouseup(upHandler);
  71. return false;
  72. });
  73. }
  74. function adjustMapOffset(towerOffset, level, reverse) {
  75. var res = $.extend({}, towerOffset);
  76. if (level.offsets && !reverse) {
  77. res.left += level.offsets.left;
  78. res.top += level.offsets.top;
  79. }
  80. if (level.scale) {
  81. if (reverse) {
  82. res.left /= level.scale.left;
  83. res.top /= level.scale.top;
  84. } else {
  85. res.left *= level.scale.left;
  86. res.top *= level.scale.top;
  87. }
  88. }
  89. if (level.offsets && reverse) {
  90. res.left -= level.offsets.left;
  91. res.top -= level.offsets.top;
  92. }
  93. return res;
  94. }
  95. $.each(towers, function(key) {
  96. createBaseElForTower(key, this).appendTo($('#palette'));
  97. });
  98. $('.tower,.core').draggable({
  99. helper: 'clone',
  100. containment: 'document',
  101. stop: function(evt, ui) {
  102. if (!$(this).data('type')) {
  103. return;
  104. }
  105. var tower = {
  106. type: $(this).data('type'),
  107. rotation: 0,
  108. position: adjustMapOffset(ui.helper.offsetFrom('#mapcontainer'), thisLevel, 1)
  109. };
  110. layout.towers.push(tower);
  111. createElForTower(tower).appendTo($('#mapcontainer'));
  112. updateDefenseUnits();
  113. }
  114. });
  115. function clearLayout() {
  116. $('#mapcontainer .tower').remove();
  117. if (layout) {
  118. layout.towers = [];
  119. }
  120. }
  121. $.each(levels, function(key) {
  122. $('<button>')
  123. .append($('<img>').attr('src', this.image))
  124. .append($('<p>').text(this.name))
  125. .click(function() {
  126. updateLayout({level: key + 1, towers:[]});
  127. closePicker();
  128. })
  129. .appendTo($('#layoutpicker .container'));
  130. });
  131. function showPicker() {
  132. $('#layoutcontainer').show();
  133. }
  134. function closePicker() {
  135. $('#layoutcontainer').hide();
  136. }
  137. function saveLayout() {
  138. layout.notes = $('#notecontent').val();
  139. $('#save_inprogress').show();
  140. $('#save_done').hide();
  141. $('#savecontainer').show();
  142. $('#save_error').hide();
  143. $.ajax({
  144. type: 'POST',
  145. url: 'res/data/layouts/new',
  146. data: {layout: JSON.stringify(layout)},
  147. success: function(res) {
  148. var url = window.location.href + "?id=" + res;
  149. $('#link').children().remove();
  150. $('<a>').attr('href', url).text(url).appendTo($('#link'));
  151. $('#save_inprogress').hide();
  152. $('#save_done').show();
  153. },
  154. error: function(xhr, status, error) {
  155. $('#save_error').text('Save failed! Server said: ' + error).show();
  156. }
  157. });
  158. }
  159. $('#createlayout').click(showPicker);
  160. $('#layoutmask').click(closePicker);
  161. $('#layoutclose').click(closePicker);
  162. $('#savelayout').click(saveLayout);
  163. function updateLayout(data) {
  164. clearLayout();
  165. layout = data;
  166. thisLevel = levels[layout.level - 1];
  167. $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")');
  168. $('#notecontent').val(layout.notes);
  169. $.each(layout.towers, function() {
  170. createElForTower(this).appendTo($('#mapcontainer'));
  171. });
  172. updateDefenseUnits();
  173. $('#du_total').text(thisLevel.du);
  174. }
  175. function getLayout(id) {
  176. $.getJSON('res/data/layouts/' + id + '.js', updateLayout);
  177. }
  178. var id = getURLParameter('id');
  179. if (id === null || id === 'null') {
  180. updateLayout({level: key + 1, towers:[]});
  181. } else {
  182. getLayout(id);
  183. }
  184. });