$(function() { var thisLevel; var layout; function updateDefenseUnits() { var used = 0; $.each(layout.towers, function() { used += towers[this.type].units; }); $('#du_used').text(used); var hasClass = $('#du_wrapper').hasClass('over'); $('#du_wrapper').removeClass('over'); if (used > thisLevel.du) { $('#du_wrapper').addClass('over'); if (!hasClass) { $('#du_wrapper').effect('pulsate', {times: 2}, 'fast'); } } } function createBaseElForTower(key) { var type = towers[key]; return $('') .attr('src', type.image) .attr('alt', type.name) .data('type', key) .addClass(type.class.toLowerCase()) .addClass('tower'); } function createElForTower(tower) { return createBaseElForTower(tower.type) .data('tower', tower) .draggable({ containment: 'document', start: function(evt) { return !evt.shiftKey; }, stop: function() { $(this).data('tower').position = adjustMapOffset($(this).offsetFrom('#mapcontainer'), thisLevel, 1); } }) .css('position', 'absolute') .offset(adjustMapOffset(tower.position, thisLevel)) .rotate(tower.rotation) .dblclick(function() { layout.towers = $.grep(layout.towers, function(value) { return value != tower; }); $(this).remove(); updateDefenseUnits(); }) .mousedown(function(e) { if (!e.shiftKey) { return; } var el = $(this); var centre = el.offsetCentre(); var mouseX = e.pageX - centre.left, mouseY = e.pageY - centre.top; var initialMouseAngle = Math.atan2(mouseY, mouseX); var initialRotation = tower.rotation; var moveHandler = function(evt) { var mouseX = evt.pageX - centre.left, mouseY = evt.pageY - centre.top; var newMouseAngle = Math.atan2(mouseY, mouseX); var mouseDelta = newMouseAngle - initialMouseAngle; var rotation = initialRotation + newMouseAngle * (180 / Math.PI); tower.rotation = rotation; el.rotate(rotation); }; var upHandler = function() { $(document).unbind('mousemove', moveHandler); $(document).unbind('mouseup', upHandler); }; $(document).mousemove(moveHandler); $(document).mouseup(upHandler); return false; }); } function adjustMapOffset(towerOffset, level, reverse) { var res = $.extend({}, towerOffset); if (level.offsets && !reverse) { res.left += level.offsets.left; res.top += level.offsets.top; } if (level.scale) { if (reverse) { res.left /= level.scale.left; res.top /= level.scale.top; } else { res.left *= level.scale.left; res.top *= level.scale.top; } } if (level.offsets && reverse) { res.left -= level.offsets.left; res.top -= level.offsets.top; } return res; } $.each(towers, function(key) { createBaseElForTower(key, this).appendTo($('#palette')); }); $('.tower,.core').draggable({ helper: 'clone', containment: 'document', stop: function(evt, ui) { if (!$(this).data('type')) { return; } var tower = { type: $(this).data('type'), rotation: 0, position: adjustMapOffset(ui.helper.offsetFrom('#mapcontainer'), thisLevel, 1) }; layout.towers.push(tower); createElForTower(tower).appendTo($('#mapcontainer')); updateDefenseUnits(); } }); function clearLayout() { $('#mapcontainer .tower').remove(); if (layout) { layout.towers = []; } } $.each(levels, function(key) { $('') .append($('').attr('src', this.image)) .append($('').text(this.name)) .click(function() { updateLayout({level: key + 1, towers:[]}); closePicker(); }) .appendTo($('#layoutpicker .container')); }); function showPicker() { $('#layoutcontainer').show(); } function closePicker() { $('#layoutcontainer').hide(); } function saveLayout() { layout.notes = $('#notecontent').val(); $('#save_inprogress').show(); $('#save_done').hide(); $('#savecontainer').show(); $('#save_error').hide(); $.ajax({ type: 'POST', url: 'res/data/layouts/new', data: {layout: JSON.stringify(layout)}, success: function(res) { var url = window.location.href + "?id=" + res; $('#link').children().remove(); $('').attr('href', url).text(url).appendTo($('#link')); $('#save_inprogress').hide(); $('#save_done').show(); }, error: function(xhr, status, error) { $('#save_error').text('Save failed! Server said: ' + error).show(); } }); } $('#createlayout').click(showPicker); $('#layoutmask').click(closePicker); $('#layoutclose').click(closePicker); $('#savelayout').click(saveLayout); function updateLayout(data) { clearLayout(); layout = data; thisLevel = levels[layout.level - 1]; $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")'); $('#notecontent').val(layout.notes); $.each(layout.towers, function() { createElForTower(this).appendTo($('#mapcontainer')); }); updateDefenseUnits(); $('#du_total').text(thisLevel.du); } function getLayout(id) { $.getJSON('res/data/layouts/' + id + '.js', updateLayout); } var id = getURLParameter('id'); if (id === null || id === 'null') { updateLayout({level: key + 1, towers:[]}); } else { getLayout(id); } });
').text(this.name)) .click(function() { updateLayout({level: key + 1, towers:[]}); closePicker(); }) .appendTo($('#layoutpicker .container')); }); function showPicker() { $('#layoutcontainer').show(); } function closePicker() { $('#layoutcontainer').hide(); } function saveLayout() { layout.notes = $('#notecontent').val(); $('#save_inprogress').show(); $('#save_done').hide(); $('#savecontainer').show(); $('#save_error').hide(); $.ajax({ type: 'POST', url: 'res/data/layouts/new', data: {layout: JSON.stringify(layout)}, success: function(res) { var url = window.location.href + "?id=" + res; $('#link').children().remove(); $('').attr('href', url).text(url).appendTo($('#link')); $('#save_inprogress').hide(); $('#save_done').show(); }, error: function(xhr, status, error) { $('#save_error').text('Save failed! Server said: ' + error).show(); } }); } $('#createlayout').click(showPicker); $('#layoutmask').click(closePicker); $('#layoutclose').click(closePicker); $('#savelayout').click(saveLayout); function updateLayout(data) { clearLayout(); layout = data; thisLevel = levels[layout.level - 1]; $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")'); $('#notecontent').val(layout.notes); $.each(layout.towers, function() { createElForTower(this).appendTo($('#mapcontainer')); }); updateDefenseUnits(); $('#du_total').text(thisLevel.du); } function getLayout(id) { $.getJSON('res/data/layouts/' + id + '.js', updateLayout); } var id = getURLParameter('id'); if (id === null || id === 'null') { updateLayout({level: key + 1, towers:[]}); } else { getLayout(id); } });