archive
/
dundef-viewer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!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 src="res/data/layout.js" type="text/javascript"></script>
  <script type="text/javascript">
   $(function() {
    $.fn.rotate = function(rot) {
     return this.css('-webkit-transform', 'rotate(' + rot + 'deg)')
                .css('-moz-transform', 'rotate(' + rot + 'deg');
    };

    function createElForTower(type) {
     return $('<img>')
       .attr('src', type.image)
       .attr('alt', type.name)
       .addClass('tower');
    }

    function adjustMapOffset(towerOffset, level) {
     var res = $.extend({}, towerOffset);

     if (level.offsets) {
      res.left += level.offsets.left;
      res.top += level.offsets.top;
     }

     if (level.scale) {
      res.left *= level.scale.left;
      res.top *= level.scale.top;
     }

     return res;
    }

    $.each(towers, function() {
     createElForTower(this)
       .appendTo($('#palette'));
    });

    $('.tower,.core').draggable({
     helper: 'clone',
     containment: 'window',
     stop: function(evt, ui) {
      $(this).clone()
        .draggable()
        .css('position', 'absolute')
        .offset(ui.helper.offset())
        .appendTo(document.body);
     }
    });

    $.each(layout.towers, function() {
     createElForTower(towers[this.type])
       .draggable()
       .css('position', 'absolute')
       .offset(adjustMapOffset(this.position, levels[layout.level - 1]))
       .rotate(this.rotation)
       .appendTo($('#palette'));
    });
   });
  </script>
  <style type="text/css">
   .tower { width: 40px; height: 40px; }
  </style>
 </head>
 <body>
  <img src="res/images/minimaps/TheSpires.png" alt="Minimap" id="map">
  <img src="res/images/coreIcon.png" alt="core" class="core">

  <div id="palette">
  </div>
 </body>
</html>