archive
/
dundef-viewer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html>
 <head>
  <title>Dungeon Defenders Viewer</title>
  <script src="res/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="res/js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
  <script src="res/data/levels.js" type="text/javascript"></script>
  <script src="res/data/towers.js" type="text/javascript"></script>
  <script type="text/javascript">
   $(function() {
    var thisLevel;

    $.fn.rotate = function(rot) {
     return this.css('-webkit-transform', 'rotate(' + rot + 'deg)')
                .css('-moz-transform', 'rotate(' + rot + 'deg')
                .css('-o-transform', 'rotate(' + rot + 'deg')
                .css('-ms-transform', 'rotate(' + rot + 'deg')
                .css('transform', 'rotate(' + rot + 'deg');
    };

    $.fn.offsetFrom = function(el) {
     var offset = this.offset();
     var otherOffset = $(el).offset();
     return {top: offset.top - otherOffset.top, left: offset.left - otherOffset.left};
    }

    $.fn.offsetCentre = function() {
     var offset = this.offset();
     return {top: offset.top + this.height() / 2, left: offset.left + this.width() / 2};
    }

    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 getURLParameter(name) {
     return decodeURIComponent((location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]);
    }

    function createBaseElForTower(key) {
     var type = towers[key];

     return $('<img>')
       .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({
        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 updateLayout() {
     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) {
     $.getScript('res/data/layouts/' + id + '.js', updateLayout);
    }

    getLayout(parseInt(getURLParameter('id')) || 13934);
   });
  </script>
  <link rel="stylesheet" type="text/css" href="res/style.css">
 </head>
 <body>
  <div id="header">
   <h1><img src="res/images/dd-logo.png" alt="Dungeon Defenders"><span>Layout Editor</span></h1>
  </div>
  <div id="sidebar">
   <div id="palette">
    <h2>Palette</h2>
    <p>Drag and drop towers onto the map</p>
   </div>
   <div id="stats">
    <h2>Stats</h2>
    <p id="du_wrapper">Defense Units: <span id="du_used">0</span>/<span id="du_total">0</span></p>
   </div>
   <div id="notes">
    <h2>Notes</h2>
    <textarea id="notecontent"></textarea>
   </div>
   <img src="res/images/coreIcon.png" alt="core" class="core">
  </div>
  <div id="mapcontainer"></div>
 </body>
</html>