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>
|