diff options
Diffstat (limited to 'client/assets/javascripts/mx/mx.minimap.js')
| -rw-r--r-- | client/assets/javascripts/mx/mx.minimap.js | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/client/assets/javascripts/mx/mx.minimap.js b/client/assets/javascripts/mx/mx.minimap.js new file mode 100644 index 0000000..252305c --- /dev/null +++ b/client/assets/javascripts/mx/mx.minimap.js @@ -0,0 +1,211 @@ +MX.Minimap = function () { + var canvas = document.createElement("canvas") + var ctx = canvas.getContext("2d") + var w = canvas.width = 200 + var h = canvas.height = 200 + + var gridSpace; + var zoom = 2.7 + + var gridStroke = '#ddd' + var boxFill = '#fff' + var boxStroke = '#000' + var playerColor = '#888' + + var xmin, xmax, ymin, ymax, xpos, ypos, scale, side; + + this.update = function(){ + this.draw() + } + + this.bounds = function(){ + gridSpace = Math.pow(10, ~~(zoom-0.5)+0.5) + side = Math.pow(10, zoom+1) + scale = w / side + xpos = -cam.x + ypos = 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 xmod = xmin-(xmin % gridSpace) + var ymod = ymin-(ymin % gridSpace) + + for (var x = xmin; x < xmax+gridSpace; x += gridSpace) { + var xline = (x-xmod) * scale + line(xline, 0, xline, h) + } + for (var y = ymin; y < ymax+gridSpace; y += gridSpace) { + var yline = (y-ymod) * scale + 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.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") { + + ctx.save() + ctx.fillStyle = obj.color + ctx.strokeStyle = obj.borderColor + + var obj_scale = (obj.scale || 1) * scale + + var tx = ~~((obj.x) * obj_scale), + ty = ~~((obj.z) * obj_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") { + + ctx.save() + ctx.strokeStyle = "#444" + + var obj_scale = (obj.scale || 1) * scale + + var tx = ~~((obj.x) * obj_scale), + ty = ~~((obj.z) * obj_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; + canvas.addEventListener("mousedown", function(e){ + e.stopPropagation() + var rect = canvas.getBoundingClientRect() + dragging = true; + mx = e.pageX - rect.left + my = e.pageY - rect.top + mdx = (mx - w/2) / scale + mdy = (my - h/2) / scale + cx = cam.x // -= mdx + cy = cam.z // += mdy + + minimap.update() + }) + 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 + + cam.x = cx + mdx + cam.z = cy - mdy + minimap.update() + } + }) + document.addEventListener("mouseup", function(e){ + dragging = false; + }) + + canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); + canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false); + function onDocumentMouseWheel (e) { + e.preventDefault() + e.stopPropagation() + // WebKit + if ( event.wheelDeltaY ) { + zoom -= event.wheelDeltaY * 0.0003; + } + // Opera / Explorer 9 + else if ( event.wheelDelta ) { + zoom -= event.wheelDelta * 0.0003; + } + // Firefox + else if ( event.detail ) { + zoom += event.detail * 0.01; + } + minimap.update() + } + + this.draw() + document.querySelector("#minimap .el").appendChild(canvas) + + return this; +}
\ No newline at end of file |