123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <!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 activeTower, thisLevel;
-
- $.fn.rotate = function(rot) {
- return this.css('-webkit-transform', 'rotate(' + rot + 'deg)')
- .css('-moz-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};
- }
-
- 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()
- .css('position', 'absolute')
- .offset(adjustMapOffset(tower.position, thisLevel))
- .rotate(tower.rotation);
- }
-
- 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: 'window',
- stop: function(evt, ui) {
- 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">
- #mapcontainer { position: relative; width: 1024px; height: 1024px; }
- .tower, .core { width: 40px; height: 40px; }
- </style>
- </head>
- <body>
- <div id="mapcontainer"></div>
- <img src="res/images/coreIcon.png" alt="core" class="core">
-
- <div id="palette">
- </div>
- </body>
- </html>
|