--- /dev/null
+const vf = new ViewFrame();
+vf.reloadChunkList();
+
+// the event handlers are in iifes so they dont make unneeded globals.
+// resize, delay re-render to reduce lag.
+(function () {
+ var id;
+ window.addEventListener('resize', () => {
+ clearTimeout(id);
+ id = setTimeout(() => {
+ vf.render();
+ }, 500);
+ });
+}());
+
+// panning
+(function () {
+ var id;
+ vf.map.canvas.addEventListener('mousedown', event => {
+ clearTimeout(id);
+ vf.moveCenter(event.pageX, event.pageY);
+ id = setTimeout(() => {
+ vf.render();
+ }, 250);
+ });
+}());
+
+
+// #### CONTROLS ####
+// hovering
+(function () {
+ var lastX = 0;
+ var lastY = 0;
+ vf.map.canvas.addEventListener('mousemove', event => {
+ // only count if the mouse moved more than a chunk
+ let x = Math.floor(vf.x +
+ (event.clientX - vf.width / 2) / vf.zoom);
+ let y = Math.floor(vf.y +
+ (event.clientY - vf.height / 2) / vf.zoom);
+ if (x == lastX && y == lastY) return;
+ lastX = x;
+ lastY = y;
+ vf.updateInfobox(x + '_' + y);
+ });
+}());
+
+// scroll/zoom
+(function () {
+ var id;
+ vf.map.canvas.addEventListener('wheel', event => {
+ clearTimeout(id);
+ vf.zoom += -Math.sign(event.deltaY);
+ id = setTimeout(() => {
+ vf.render();
+ }, 250);
+ });
+}());
+
+// reload the chunk list every six seconds
+(function () {
+ setInterval(() => {
+ vf.reloadChunkList();
+ }, 6000);
+}());
+//
+// var i = 500;
+// setTimeout(() => {
+// vf.map.dispatchEvent(new MouseEvent('mousedown', {
+// clientX: 879,
+// clientY: 926
+// }));
+// }, i += 1000);
+//
+// setTimeout(() => {
+// vf.map.dispatchEvent(new MouseEvent('mousedown', {
+// clientX: 666,
+// clientY: 924
+// }));
+// }, i += 2000);
+//
+// setTimeout(() => {
+// vf.map.dispatchEvent(new MouseEvent('mousedown', {
+// clientX: 1090,
+// clientY: 936
+// }));
+// }, i += 2000);
+//
+// setTimeout(() => {
+// vf.map.dispatchEvent(new MouseEvent('mousedown', {
+// clientX: 29,
+// clientY: 785
+// }));
+// }, i += 2000);
\ No newline at end of file