Split up JS into separate files

index.html

@@ -6,185 +6,8 @@
   <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>
+  <script src="res/js/util.js" type="text/javascript"></script>
+  <script src="res/js/viewer.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="res/style.css">
  </head>
  <body>

res/js/util.js

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

res/js/viewer.js

@@ -0,0 +1,154 @@
+$(function() {
+ var thisLevel;
+
+ 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 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);
+});