123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <!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() {
- var thisLevel;
-
- $.fn.rotate = function(rot) {
- this.data('rotation', rot);
-
- return this.css('-webkit-transform', 'rotate(' + rot + 'deg)')
- .css('-moz-transform', 'rotate(' + rot + 'deg')
- .css('-o-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 createBaseElForTower(key) {
- var type = towers[key];
-
- return $('<img>')
- .attr('src', type.image)
- .attr('alt', type.name)
- .data('type', key)
- .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();
- })
- .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 = el.data('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'));
- }
- });
-
- thisLevel = levels[layout.level - 1];
- $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")');
-
- $.each(layout.towers, function() {
- createElForTower(this).appendTo($('#mapcontainer'));
- });
- });
- </script>
- <style type="text/css">
- body {
- font-family: sans-serif;
- margin: 0;
- padding: 0;
- }
-
- #header, #header h1 {
- margin: 0;
- padding: 0;
- }
-
- #header {
- padding: 10px 20px;
- background-image: linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
- background-image: -o-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
- background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
- background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
- background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.28, rgb(255,255,255)),
- color-stop(0.64, rgb(244,245,242))
- );
- border-bottom: 1px solid rgb(244, 245, 242);
- }
-
- #header img {
- vertical-align: bottom;
- }
-
- #header span {
- display: inline-block;
- padding-bottom: 10px;
- margin-left: 20px;
- color: #300;
- }
-
- #sidebar {
- float: left;
- width: 200px;
- padding: 10px;
- min-height: 1024px;
- border-right: 1px solid rgb(244, 245, 242);
- }
-
- #palette {
- text-align: center;
- }
-
- #palette h2 {
- margin: 0;
- color: #300;
- }
-
- #palette p {
- font-size: x-small;
- margin-top: 0;
- }
-
- #mapcontainer {
- position: relative;
- width: 1024px;
- height: 1024px;
- margin-left: 221px;
- }
-
- .tower, .core { width: 40px; height: 40px; }
- </style>
- </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>
- <img src="res/images/coreIcon.png" alt="core" class="core">
- </div>
- <div id="mapcontainer"></div>
- </body>
- </html>
|