diff options
Diffstat (limited to 'public/assets/javascripts')
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/rooms/mover.js | 85 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/room.js | 6 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/_router.js | 26 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/ColorControl.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/HelpCursor.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/MediaPlayer.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/ReaderView.js | 1 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/ShareView.js | 27 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/z_share.js | 25 | ||||
| -rw-r--r-- | public/assets/javascripts/vendor/canvasutilities.js | 145 |
10 files changed, 262 insertions, 59 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index fae2ce6..8ce00fe 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -34,7 +34,7 @@ Rooms.mover = new function(){ } // check if we've breached one of the walls.. clamp position if so - var collision = base.room.collidesDisc(pos.x, pos.z, radius) + var collision = base.room.collidesDisc(cam, pos, radius) if (collision && ! base.noclip) { cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x @@ -48,6 +48,89 @@ Rooms.mover = new function(){ base.room = null } +/* + var dz = new vec2( cam.z, pos.z ) + dz.normalize() + + var dx = new vec2( cam.x, pos.x ) + dx.normalize() + + // first check if the cam-pos movement intersects the wall. + // next check if it intersects any of the surface frames + // if we can pass through the wall at this point, we do not need to clamp. + // otherwise, get the distance along the cam-pos vector where we would hit the wall and clamp to it. + Walls.list.forEach(function(wall){ + var t = -1 + switch (wall.side) { + case FRONT: + if (cam.z >= wall.edge + radius && wall.edge + radius >= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, radius ) + } + break + case BACK: + // console.log(cam.z|0, wall.edge-radius, pos.z|0, wall.vec.intersects(dx)) + if (cam.z <= wall.edge - radius && wall.edge - radius <= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, -radius ) + console.log(t) + } + break + case LEFT: + if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, radius ) + } + break + case RIGHT: + if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, -radius ) + } + break + } + if (0 <= t && t <= 1) { + pos.x = cam.x + (pos.x - cam.x) * t + pos.z = cam.z + (pos.z - cam.z) * t + + dz = new vec2( cam.z, pos.z ) + dz.normalize() + + dx = new vec2( cam.x, pos.x ) + dx.normalize() + } + }) + + function check_intersection(intersection_function, cam, pos, cam_pos_vector, wall, radius) { + var t = -1 + wall.surface.faces.some(function(face, i){ + if (face.y.a == 0 && face.x.intersects(cam_pos_vector)) { + t = intersection_function( cam, pos, wall, face, radius ) + console.log(">>", t) + if (0 <= t && t <= 1) { + return true + } + else { + t = -1 + } + } + return false + }) + return t + } + function left_right_intersection (cam, pos, wall, face, radius) { + var perp_n = (face.x.a - face.x.b) * (wall.edge - cam.z + radius) + var perp_d = (face.x.a - face.x.b) * (pos.z - cam.z) + if (perp_d == 0) return Infinity + return perp_n / perp_d + } + function front_back_intersection (cam, pos, wall, face, radius) { + // va.vx*vb.vy - va.vy*vb.vx + var perp_n = (face.x.b - face.x.a) * (wall.edge - cam.x + radius) + var perp_d = (face.x.b - face.x.a) * (pos.x - cam.x) + + console.log((pos.x - cam.x), wall.edge - cam.x, radius) + + if (perp_d == 0) return Infinity + return perp_n / perp_d + } +*/ // collision test failed, so update position cam.x = pos.x cam.z = pos.z diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index b0344a1..26bf055 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -122,7 +122,8 @@ return collision } - Room.prototype.collidesDisc = function(x,y,radius){ + Room.prototype.collidesDisc = function(src, dest, radius){ + var x = dest.x, y = dest.z var collision = 0, wall_collision, contains_x, contains_y this.regions.forEach(function(r){ if (! r.sides) return @@ -152,9 +153,6 @@ if (contains_y) { collision |= wall_collision & LEFT_RIGHT } -// if (bitcount(wall_collision) > 1) { -// collision |= wall_collision -// } }) return collision } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index c7b625a..0c95664 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -40,8 +40,6 @@ var SiteRouter = Router.extend({ "/project/:name": 'projectViewer', "/project/:name/edit": 'projectEditor', "/project/:name/view": 'projectViewer', - - "/test/wallpaper": 'testWallpaper', }, mobileRoutes: { @@ -213,29 +211,5 @@ var SiteRouter = Router.extend({ // this.documentModal.destroy(name) }, - testWallpaper: function(e){ - var content = document.getElementById("content") - content.style.width = "680px" - content.style.margin = "0 auto" - var wm = new WallpaperManager() - app.on('wallpaper-ready', function(){ - var black = [0,0,0,0] - var white = [255,255,255,1.0] - var swatches = wm.buildSwatches(black, white, 4) - document.body.style.backgroundColor = "#eee" - swatches.forEach(function(swatch){ - swatch.style.margin = "4px" - swatch.style.border = "1px solid lime" - swatch.style.backgroundColor = "#888" - content.appendChild(swatch) - swatch.onclick = function(){ - dataUrl = swatch.toDataURL() - document.body.style.backgroundImage = "url(" + dataUrl + ")" - } - }) - }) - wm.init() - }, - }) diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 72e9fb1..d1a8c7b 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -101,7 +101,7 @@ var ColorControl = View.extend({ initialState: null, - begin: function(){ + begin: function(){ this.initialState = this.serialize() }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 7268b32..8ada237 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -10,7 +10,7 @@ var HelpCursor = View.extend({ addmedia: "Great, now click a wall to place this image.", resize: "Drag the image to position it, or use the dots to resize.", presets: "These are some basic presets to get you started. Click em! :-)", - wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + wallpaper: "Click the wallpaper you want then apply it to the walls. Feel free to upload your own too!", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 7f73e1b..e40c6ff 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -44,7 +44,7 @@ var MediaPlayer = FormView.extend({ this.unbind() } if (media.type == "image") { - if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length) || (media.title == filenameFromUrl(media.url)) ) { + if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) { this.hide() return } diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 8531244..c132609 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -9,6 +9,7 @@ var ReaderView = View.extend({ initialize: function(){ this.mediaPlayer = new MediaPlayer ({ parent: this }) + this.shareView = new ShareView ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js new file mode 100644 index 0000000..35c23ca --- /dev/null +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -0,0 +1,27 @@ +var ShareView = View.extend({ + el: ".share", + + events: { + "click #share_facebook": "facebook", + "click #share_twitter": "twitter", + }, + + initialize: function(opt){ + this.parent = opt.parent + }, + + facebook: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(window.location.origin + window.location.pathname) + "&t=" + encodeURIComponent(msg); + window.open(url, "_blank") + }, + + twitter: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://twitter.com/home?status=" + encodeURIComponent(window.location.origin + window.location.pathname + " " + msg); + window.open(url, "_blank") + } + +}) diff --git a/public/assets/javascripts/ui/z_share.js b/public/assets/javascripts/ui/z_share.js deleted file mode 100644 index d31aa89..0000000 --- a/public/assets/javascripts/ui/z_share.js +++ /dev/null @@ -1,25 +0,0 @@ -var share = { - init: function(){ - share.bind() - }, - bind: function(){ - $("#facebook").click(share.facebook) - $("#twitter").click(share.twitter) - }, - url: "http://vvalls.com/", - facebook_msg: "", - twitter_msg: "", - openLink: function (url) { - window.open(url, "_blank"); - }, - facebook: function () { - var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(share.url) + "&t=" + encodeURIComponent(share.facebook_msg); - share.openLink(url); - return false; - }, - twitter: function () { - var url = "https://twitter.com/home?status=" + encodeURIComponent(share.url + " " + share.twitter_msg); - share.openLink(url); - return false; - } -} diff --git a/public/assets/javascripts/vendor/canvasutilities.js b/public/assets/javascripts/vendor/canvasutilities.js new file mode 100644 index 0000000..011ebb0 --- /dev/null +++ b/public/assets/javascripts/vendor/canvasutilities.js @@ -0,0 +1,145 @@ +var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) { + 'use strict'; + // Ceason pointed to a problem when x1 or y1 were a string, and concatenation + // would happen instead of addition + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + style = typeof(style) != 'undefined' ? style : 3; + which = typeof(which) != 'undefined' ? which : 1; // end point gets arrow + angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8; + d = typeof(d) != 'undefined' ? d : 10; + // default to using drawHead to draw the head, but if the style + // argument is a function, use it instead + var toDrawHead = typeof(style) != 'function' ? drawHead : style; + + // For ends with arrow we actually want to stop before we get to the arrow + // so that wide lines won't put a flat end on the arrow. + // + var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + var ratio = (dist - d / 3) / dist; + var tox, toy, fromx, fromy; + if (which & 1) { + tox = Math.round(x1 + (x2 - x1) * ratio); + toy = Math.round(y1 + (y2 - y1) * ratio); + } else { + tox = x2; + toy = y2; + } + if (which & 2) { + fromx = x1 + (x2 - x1) * (1 - ratio); + fromy = y1 + (y2 - y1) * (1 - ratio); + } else { + fromx = x1; + fromy = y1; + } + + // Draw the shaft of the arrow + ctx.beginPath(); + ctx.moveTo(fromx, fromy); + ctx.lineTo(tox, toy); + ctx.stroke(); + + // calculate the angle of the line + var lineangle = Math.atan2(y2 - y1, x2 - x1); + // h is the line length of a side of the arrow head + var h = Math.abs(d / Math.cos(angle)); + + if (which & 1) { // handle far end arrow head + var angle1 = lineangle + Math.PI + angle; + var topx = x2 + Math.cos(angle1) * h; + var topy = y2 + Math.sin(angle1) * h; + var angle2 = lineangle + Math.PI - angle; + var botx = x2 + Math.cos(angle2) * h; + var boty = y2 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style); + } + if (which & 2) { // handle near end arrow head + var angle1 = lineangle + angle; + var topx = x1 + Math.cos(angle1) * h; + var topy = y1 + Math.sin(angle1) * h; + var angle2 = lineangle - angle; + var botx = x1 + Math.cos(angle2) * h; + var boty = y1 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style); + } +} + +var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) { + 'use strict'; + if (typeof(x0) == 'string') x0 = parseInt(x0); + if (typeof(y0) == 'string') y0 = parseInt(y0); + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + var radius = 3; + var twoPI = 2 * Math.PI; + + // all cases do this. + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + switch (style) { + case 0: + // curved filled, add the bottom as an arcTo curve and fill + var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + ctx.arcTo(x1, y1, x0, y0, .55 * backdist); + ctx.fill(); + break; + case 1: + // straight filled, add the bottom as a line and fill. + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.lineTo(x0, y0); + ctx.fill(); + break; + case 2: + // unfilled head, just stroke. + ctx.stroke(); + break; + case 3: + //filled head, add the bottom as a quadraticCurveTo curve and fill + var cpx = (x0 + x1 + x2) / 3; + var cpy = (y0 + y1 + y2) / 3; + ctx.quadraticCurveTo(cpx, cpy, x0, y0); + ctx.fill(); + break; + case 4: + //filled head, add the bottom as a bezierCurveTo curve and fill + var cp1x, cp1y, cp2x, cp2y, backdist; + var shiftamt = 5; + if (x2 == x0) { + // Avoid a divide by zero if x2==x0 + backdist = y2 - y0; + cp1x = (x1 + x0) / 2; + cp2x = (x1 + x0) / 2; + cp1y = y1 + backdist / shiftamt; + cp2y = y1 - backdist / shiftamt; + } else { + backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + var xback = (x0 + x2) / 2; + var yback = (y0 + y2) / 2; + var xmid = (xback + x1) / 2; + var ymid = (yback + y1) / 2; + + var m = (y2 - y0) / (x2 - x0); + var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt; + var dy = m * dx; + cp1x = xmid - dx; + cp1y = ymid - dy; + cp2x = xmid + dx; + cp2y = ymid + dy; + } + + ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0); + ctx.fill(); + break; + } + ctx.restore(); +} |
