diff options
Diffstat (limited to 'assets/javascripts/rectangles/engine/scenery.js')
| -rw-r--r-- | assets/javascripts/rectangles/engine/scenery.js | 75 |
1 files changed, 42 insertions, 33 deletions
diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js index c9be6ef..4ac03b8 100644 --- a/assets/javascripts/rectangles/engine/scenery.js +++ b/assets/javascripts/rectangles/engine/scenery.js @@ -7,6 +7,8 @@ wall_rotation[RIGHT] = -HALF_PI var scenery = new function(){ var base = this; + + base.mouse = new mouse () base.init = function(){ var urls = [ @@ -15,7 +17,6 @@ var scenery = new function(){ "http://2.bp.blogspot.com/-apEunnES6wU/UGdc6skZqzI/AAAAAAAAB3k/D6yO6llpFcg/s1600/Sunny+Side+Duck.JPG", "http://imagecache.artistrising.com/artwork/lrg//5/559/5UD2000A.jpg", "http://media-cache-ec0.pinimg.com/736x/fc/a7/31/fca731130ffb964a434fb90edecd22c3.jpg", - ] var loader = new Loader(function(){ base.load(loader.images) @@ -38,41 +39,25 @@ var scenery = new function(){ function new_image (wall, img) { var x, z - if (wall.side & FRONT_BACK && wall.rect.x.length() < img.width) { - return - } - if (wall.side & LEFT_RIGHT && wall.rect.y.length() < img.width) { - return - } - - switch (wall.side) { - case FRONT: - x = wall.rect.x.a + wall.rect.x.length()/2 - z = wall.rect.y.a + 10 - break - case BACK: - x = wall.rect.x.a + wall.rect.x.length()/2 - z = wall.rect.y.b - 10 - break - case LEFT: - x = wall.rect.x.a + 10 - z = wall.rect.y.a + wall.rect.y.length()/2 - break - case RIGHT: - x = wall.rect.x.b - 10 - z = wall.rect.y.a + wall.rect.y.length()/2 - break - } + + if (! wall.fits(img)) return var mx_img = new MX.Image({ src: img.src, - x: x, + x: 0, y: clipper.rooms[wall.room].height/2 - img.height/2 - 20, - z: z, + z: 0, scale: 300/img.naturalWidth, - rotationY: wall_rotation[ wall.side ], + rotationY: 0, backface: false, }) + + var center = wall.center_for(img) + mx_img.move({ + x: center.a, + z: center.b, + rotationY: wall_rotation[ wall.side ] + }) scene.add(mx_img) // https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png @@ -81,15 +66,37 @@ var scenery = new function(){ // should be proportional to distance from wall var cursor_amp = 1.5 + var dragging = false - my_mouse = new mouse ({ el: mx_img.el }) - my_mouse.tube.on("down", function(e, cursor){ + base.mouse.bind_el(mx_img.el) + base.mouse.tube.on("down", function(e, cursor){ + if (e.target != mx_img.el) return; + dragging = true x = mx_img.x y = mx_img.y z = mx_img.z + mx_img.el.style.pointerEvents = "none" bounds = wall.bounds_for(img) }) - my_mouse.tube.on("drag", function(e, cursor){ + base.mouse.tube.on("enter", function(e, new_wall, cursor){ + if (! dragging) return + if (new_wall.uid == wall.uid) return + if (! new_wall.fits(img)) return + bounds = new_wall.bounds_for(img) + center = new_wall.center_for(img, cursor.x.magnitude()) + + mx_img.move({ + x: center.a, + z: center.b, + rotationY: wall_rotation[ new_wall.side ] + }) + + cursor.x.invert() + + wall = new_wall + }) + base.mouse.tube.on("drag", function(e, cursor){ + if (! dragging) return mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) switch (wall.side) { case FRONT: @@ -106,7 +113,9 @@ var scenery = new function(){ break } }) - my_mouse.tube.on("up", function(e, cursor){ + base.mouse.tube.on("up", function(e, cursor){ + dragging = false + mx_img.el.style.pointerEvents = "auto" }) } |