summaryrefslogtreecommitdiff
path: root/assets/javascripts/map
diff options
context:
space:
mode:
Diffstat (limited to 'assets/javascripts/map')
-rw-r--r--assets/javascripts/map/map.js337
-rw-r--r--assets/javascripts/map/map_editor.js102
2 files changed, 0 insertions, 439 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)
-}
-
diff --git a/assets/javascripts/map/map_editor.js b/assets/javascripts/map/map_editor.js
deleted file mode 100644
index 754172b..0000000
--- a/assets/javascripts/map/map_editor.js
+++ /dev/null
@@ -1,102 +0,0 @@
-var editor = new function (){
-
- var base = this;
-
- var cube = null
- var cx, cy
-
- base.init = function(){
- map.on("mousedown", base.mousedown)
- map.on("mousemove", base.mousemove)
- map.on("mousedrag", base.mousedrag)
- map.on("mouseup", base.mouseup)
- map.on("mousewheel", base.mousewheel)
- document.getElementById("export").addEventListener("keydown", base.stopPropagation)
- document.getElementById("export").addEventListener("mousedown", base.stopPropagation)
- document.getElementById("export").addEventListener("mousemove", base.stopPropagation)
- document.getElementById("export").addEventListener("mouseup", base.stopPropagation)
- window.addEventListener('keydown', base.keydown)
- }
-
- base.mousedown = function(e,x,y) {
- if (! e.shiftKey) return
- cx = x
- cy = y
- cube = new MX.BoxDimensions({
- x: cx,
- y: -10,
- z: cy,
- width: 1,
- height: 1,
- depth: 1,
- borderWidth: 1,
- borderColor: "#000",
- color: "#fff"
- })
- cube.persisted = false
- scene.add( cube );
- }
-
- base.mousemove = function(e,x,y) {
- }
-
- base.mousedrag = function(e,dx,dy) {
- if (! cube) return
- cube.x = cx + dx/2
- cube.z = cy + dy/2
- cube.setWidth( abs(dx) )
- cube.setDepth( abs(dy) )
- cube.setHeight( max( cube.width, cube.depth ) )
- cube.update()
- }
-
- base.mouseup = function(e){
- cube = null
- }
-
- base.mousewheel = function(e,x,z,delta){
- if (! e.shiftKey) return;
-
- scene.inner.children.some(function(s){
- if (s.contains(-x, null, z)) {
- s.y += delta * 1000
- s.persisted = false
- console.log(s.id)
- return true
- }
- return false
- })
-
- }
-
- base.stopPropagation = function(e){ e.stopPropagation() }
-
- base.exportObjects = function(){
- var s = scene.inner.children
- .filter(function(s){ return ! s.persisted })
- .map(function(s){ return s.toString() })
- .join("\n\n")
- document.getElementById("export").value = s
- }
-
- base.exportCamera = function(){
- var s = scene.camera.toString()
- document.getElementById("export").value = s
- console.log(s)
- }
-
- base.keydown = function(e){
- switch (e.keyCode) {
-
- case 67: // c
- base.exportCamera()
- break;
-
- case 86: // v
- base.exportObjects()
- break;
-
- }
- }
-
-}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-15 23:28:37 +0000