diff options
Diffstat (limited to 'assets/javascripts/map/map.js')
| -rw-r--r-- | assets/javascripts/map/map.js | 337 |
1 files changed, 0 insertions, 337 deletions
diff --git a/assets/javascripts/map/map.js b/assets/javascripts/map/map.js deleted file mode 100644 index a90963f..0000000 --- a/assets/javascripts/map/map.js +++ /dev/null @@ -1,337 +0,0 @@ - -MX.Map = function(){ - var base = this; - - var parent = document.querySelector("#map") - var canvas = document.createElement("canvas") - var ctx = canvas.getContext("2d") - var w, h - - var visible = parent.style.display == "block" - if (visible) resize() - - var center = {x:0,y:0} - var gridSpace; - var zoom = 3.0 - - var gridStroke = '#ddd' - var boxFill = '#fff' - var boxStroke = '#000' - var playerColor = '#888' - - var xmin, xmax, ymin, ymax, xpos, ypos, scale, side; - - var tube = base.tube = new Tube () - - this.zoom = function(n){ if (n) zoom = n; return zoom } - this.recenter = function(){ center.x = cam.x; center.y = cam.z } - - function resize(){ - var rect = parent.getBoundingClientRect() - w = canvas.width = ~~rect.width - h = canvas.height = ~~rect.height - } - - this.on = function(){ - base.tube.on.apply(base.tube, arguments) - } - this.off = function(){ - base.tube.off.apply(base.tube, arguments) - } - - this.update = function(){ - if (! visible) return; - this.draw() - } - - this.bounds = function(){ - gridSpace = pow(10, ~~(zoom-0.25) + 0.25) - side = Math.pow(10, zoom+1) - scale = w / side - xpos = center.x // -cam.x - ypos = center.y // cam.z - - xmin = side/-2 - xpos - xmax = side/2 - xpos - ymin = side/-2 - ypos - ymax = side/2 - ypos - } - - this.draw = function(){ - ctx.clearRect(0,0,w,h) - - ctx.fillStyle = "#fff" - ctx.fillRect(0,0,w,h) - this.bounds() - this.grid() - this.boxes() - this.player() - } - - this.grid = function(){ - ctx.strokeStyle = gridStroke - ctx.lineWidth = 1 - ctx.fillStyle = "transparent" - - var x0 = norm(0, xmin, xmax) - var y0 = norm(0, ymin, ymax) - - var xg = norm(gridSpace, xmin, xmax) - var yg = norm(gridSpace, ymin, ymax) - - var xgw = (xg-x0) - - var xmod = mod(x0, xgw) - var ymod = mod(y0, xgw) - - var xend = 1 + xgw - var yend = h/w + xgw - - var xline, yline; - for (var x = -xmod; x < xend; x += xgw) { - xline = x * w - line(xline, 0, xline, h) - } - for (var y = -ymod; y < yend; y += xgw) { - yline = y * w - line(0, yline, w, yline) - } - - function line(x0,y0,x1,y1) { - ctx.beginPath() - ctx.moveTo(x0, y0) - ctx.lineTo(x1, y1) - ctx.stroke() - } - } - this.player = function(){ - ctx.save() - - ctx.translate(~~(w/2),~~(h/2)); - ctx.lineWidth = 0.5 - var tx = ((-xpos) * scale), - ty = ((-ypos) * scale); - ctx.translate(tx, ty) - - var obj_scale = (1) * scale - - var tx = ~~((cam.x) * obj_scale), - ty = ~~((cam.z) * obj_scale); - ctx.translate(-tx, ty) - ctx.rotate(-cam.rotationY) - - var radius = 5 - - ctx.fillStyle = playerColor; - - ctx.beginPath(); - ctx.arc(0, 0, radius, 0, 2*Math.PI, false); - ctx.fill(); - - ctx.beginPath(); - ctx.moveTo(0,0) - ctx.lineTo(-radius,0) - ctx.lineTo(0,radius*3) - ctx.lineTo(radius,0) - ctx.moveTo(0,0) - ctx.fill() - - ctx.fillStyle = "transparent" - ctx.restore() - } - - this.boxes = function(){ - - ctx.save() - ctx.translate(~~(w/2),~~(h/2)); - ctx.lineWidth = 0.5 - var tx = ((-xpos) * scale), - ty = ((-ypos) * scale); - ctx.translate(tx, ty) - - scene.inner.children.forEach(function(obj){ - if (obj.type == "BoxDimensions" || obj.type == "ScaleBox") { - - ctx.save() - ctx.fillStyle = obj.color - ctx.strokeStyle = "#222" - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * scale), - ty = ~~((obj.z) * scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - var hh = ~~(obj.depth/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, hh) - - ctx.lineTo(ww, -hh) - ctx.lineTo(-ww, -hh) - ctx.lineTo(-ww, hh) - ctx.closePath() - ctx.fill() - ctx.stroke() - ctx.restore() - } - if (obj.type == "Image" || obj.type == "Cutout") { - ctx.save() - ctx.strokeStyle = "#444" - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * scale), - ty = ~~((obj.z) * scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, 0) - ctx.lineTo(-ww, 0) - ctx.closePath() - ctx.stroke() - ctx.restore() - } - }) - ctx.restore() - } - - - var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy, - creating = false, moving = false; - - function positionFromMouse(e) { - var rect = canvas.getBoundingClientRect() - cx = center.x - cy = center.y - mx = e.pageX - rect.left - my = e.pageY - rect.top - mdx = (mx - w/2) / scale + cx - mdy = (my - h/2) / scale + cy - } - - canvas.addEventListener("mousedown", function(e){ - e.stopPropagation() - dragging = true - - positionFromMouse(e) - - if (e.shiftKey) { - creating = true - } - - hud.update( mdx, mdy ) - - base.tube("mousedown", e, -mdx, mdy) - }) - document.addEventListener("mousemove", function(e){ - if (dragging) { - e.stopPropagation() - - var rect = canvas.getBoundingClientRect() - var mnx = e.pageX - rect.left - var mny = e.pageY - rect.top - - mdx = (mnx - mx) / scale - mdy = (mny - my) / scale - - if (creating) { - hud.update( mdx, mdy ) - } - else if (moving) { - cam.x = cx - mdx - cam.z = cy + mdy - } - else { - center.x = cx - mdx - center.y = cy - mdy - hud.update(center.x, center.y) - } - - base.tube("mousedrag", e, -mdx, mdy) - } - else { - positionFromMouse(e) - hud.update( mdx, mdy ) - base.tube("mousemove", e, -mdx, mdy) - } - }) - document.addEventListener("mouseup", function(e){ - creating = dragging = moving = false; - base.tube("mouseup", e) - }) - - canvas.addEventListener("contextmenu", function(e){ - e.preventDefault() - e.stopPropagation() - dragging = true - - positionFromMouse(e) - - moving = true - cx = cam.x = -mdx - cy = cam.z = mdy - - hud.update( mdx, mdy ) - - base.tube("contextmenu", e) - }) - - canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); - canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false); - function onDocumentMouseWheel (e) { - e.preventDefault() - e.stopPropagation() - var delta = 0 - - // WebKit - if ( event.wheelDeltaY ) { - delta = - event.wheelDeltaY * 0.0003; - } - // Opera / Explorer 9 - else if ( event.wheelDelta ) { - delta = - event.wheelDelta * 0.0003; - } - // Firefox - else if ( event.detail ) { - delta = event.detail * 0.01; - } - - if (! e.shiftKey) { - zoom += delta - } - - positionFromMouse(e) - base.tube("mousewheel", e, mdx, mdy, delta) - - map.update() - } - - window.addEventListener('resize', resize) - - this.toggle = function(){ - (visible = ! visible) ? base.show() : base.hide() - } - this.show = function(){ - parent.style.display = "block" - resize() - } - this.hide = function(){ - parent.style.display = "none" - } - - var hud = new function(){ - var el = document.querySelector("#map .hud") - this.update = function(){ - el.innerHTML = Array.prototype.slice.call(arguments,0).map(function(s){ return typeof s == "number" ? Math.round(s) : s }).join(" ") - } - } - hud.update() - - this.update() - document.querySelector("#map .el").appendChild(canvas) -} - |