diff options
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/rooms/builder.js | 20 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/rooms/grouper.js | 153 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/scenery/_scenery.js | 20 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/scenery/move.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/scenery/types/_object.js | 4 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/rect.js | 3 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/room.js | 76 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/surface.js | 179 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/wall.js | 137 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/util/colors.js | 3 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/util/sort.js | 33 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 4 | ||||
| -rw-r--r-- | server/index.js | 2 | ||||
| -rw-r--r-- | test/06-test-grouper.js | 288 | ||||
| -rw-r--r-- | test/07-test-surface.js | 60 | ||||
| -rw-r--r-- | test/mocks/mx.js | 2 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 4 |
17 files changed, 820 insertions, 170 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index dfabc86..f321f71 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -7,7 +7,7 @@ } else { MX = require('../../../../../../test/mocks/mx.js') - scene = MX.scene + scene = MX.Scene Rooms = require('./_rooms') sort = require('../../util/sort') FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 @@ -43,7 +43,7 @@ if (window.scene) { base.clear() base.build() - base.bind_walls() + Rooms.grouper.build() } } @@ -62,18 +62,7 @@ }) }.bind(this)) } - - base.bind_walls = function (){ - Rooms.forEach(function(room){ - room.walls = room.group_mx_walls() - room.walls.forEach(function(wall){ - Rooms.walls[ wall.id ] = wall - wall.bind() - wall.randomize_colors() - }) - }) - } - + base.clear = function (){ els.forEach(function(el){ scene.remove(el) @@ -84,7 +73,6 @@ this.build_walls = function (region) { var room = Rooms.list[ region.id ] - var list = [], el = null var width = region.x.length() @@ -305,7 +293,7 @@ el.side = 0 el.rect = null el.destroy = function(){ - this.el = this.rect = null + this.el = this.rect = this.face = null } // possible if walls are opaque diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js new file mode 100644 index 0000000..4ad3bd8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -0,0 +1,153 @@ +(function(){ + + var vec2, Rect, Rooms, UidGenerator, Wall, Surface, sort + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + Surface = window.Surface + Rooms = window.Rooms + UidGenerator = window.UidGenerator + Wall = window.Wall + sort = window.sort + } + else { + Rooms = require('./_rooms') + UidGenerator = require('../../util/uid') + vec2 = require('../../models/vec2') + Rect = require('../../models/rect') + Wall = require('../../models/wall') + Surface = require('../../models/surface') + sort = require('../../util/sort') + FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 + PI = Math.PI + HALF_PI = PI/2 + TOP = CEILING, BOTTOM = FLOOR + function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s + } + } + + Rooms.grouper = new function(){ + + var base = this + + base.list = {} + + base.uid = new UidGenerator(base.list) + + base.build = function (){ + var walls = [] + var collections = base.collect() + base.cull(collections) + base.group(walls, collections, FRONT) + base.group(walls, collections, BACK) + base.group(walls, collections, LEFT) + base.group(walls, collections, RIGHT) + Rooms.walls = walls + base.bind() + } + base.collect = function(){ + var collections = {} + collections[FRONT] = [] + collections[BACK] = [] + collections[LEFT] = [] + collections[RIGHT] = [] + + Rooms.forEach(function(room){ + room.mx_walls.forEach(function(mx){ + var side = mx.side || mx.half_side + collections[side].push(mx) + }) + }) + + base.cull(collections) + + return collections + } + base.cull = function(collections){ + [FRONT, BACK, LEFT, RIGHT].forEach(function(side){ + var collection = collections[side] + var useX = side & FRONT_BACK + var useA = side & (FRONT | RIGHT) + var last_mx + var widthVec, heightVec + + collection.sort( useX ? sort.compare_zx : sort.compare_xz ) + collection.forEach(function(mx){ + if (last_mx && last_mx.rect.eq(mx.rect)) { + if (last_mx.rect.id == mx.rect.id) { + last_mx.height += mx.height/2 + last_mx.y += mx.height/4 + last_mx.face.y.b += mx.height/2 + } + last_mx.side = side + mx.culled = true + mx.destroy() + scene.remove(mx) + return + } + widthVec = mx.rect[useX ? 'x' : 'y'].clone() + heightVec = new vec2( mx.y - mx.height/2, mx.y + mx.height/2 ) + mx.face = new Rect( widthVec, heightVec ) + last_mx = mx + }) + }) + return collections + } + base.group = function(walls, collections, side){ + var collection = collections[side] + var wall + var useX = side & FRONT_BACK + var useA = side & (FRONT | RIGHT) + + // collection.sort( useX ? sort.compare_zx : sort.compare_xz ) + + collection.forEach(function(mx){ + if (mx.culled) return + var coplanar = wall && wall.edge == mx.rect[useX ? 'y': 'x'][useA ? 'a': 'b'] + + if (wall && coplanar) { + if (useX && wall.vec.b == mx.rect.x.a) { + wall.vec.b = mx.rect.x.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + else if (! useX && wall.vec.b == mx.rect.y.a) { + wall.vec.b = mx.rect.y.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + } + wall = new Wall ({ + id: base.uid(), + side: side, + mx: [ mx ], + surface: new Surface( mx.face ), + vec: mx.rect[ useX ? 'x' : 'y' ].clone(), + edge: mx.rect[ useX ? 'y' : 'x' ][ useA ? 'a' : 'b' ], + }) + walls.push(wall) + }) + + return walls + } + + base.bind = function(){ + Rooms.walls.forEach(function(wall){ + wall.bind() + wall.randomize_colors() + }) + } + + } + +})() diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index c96885c..c43ef14 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -12,25 +12,29 @@ var Scenery = new function(){ base.resize.init() } - base.add = function(wall, media, id){ + base.add = function(opt){ var scene_media switch (media.type) { case 'image': - scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.image (opt) break case 'video': case 'youtube': case 'vimeo': - scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.video (opt) break } base.list[scene_media.id] = scene_media return scene_media } - base.addNextToWall = function(wall){ - var media = base.add(wall, base.nextMedia) + base.addNextToWall = function(wall, mx){ + base.add({ + wall: wall, + media: base.nextMedia, + mx: mx + }) base.nextMedia = null return media } @@ -69,7 +73,11 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ var wall = Rooms.walls[data.wall_id] - var scene_media = base.add(wall, data.media, data.id) + var scene_media = base.add({ + wall: wall, + media: data.media, + id: data.id + }) scene_media.deserialize(data) }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index c3f78d7..fa247e1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -87,7 +87,7 @@ Scenery.move = function(base){ function switch_wall (e, new_wall, cursor){ if (! dragging) return - if (new_wall.uid == base.wall.uid) return + if (new_wall.id == base.wall.id) return if (! new_wall.fits(base.media, base.scale)) return var old_wall_side = base.wall.side diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 66e0faf..46bc0e7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -12,7 +12,7 @@ Scenery.types.base = Fiber.extend(function(base){ this.scale = this.media.scale if (opt.wall) { - this.set_wall(opt.wall) + this.set_wall(opt.wall, opt.mx) } }, @@ -60,7 +60,7 @@ Scenery.types.base = Fiber.extend(function(base){ } }, - set_wall: function(wall){ + set_wall: function(wall, mx){ this.wall = wall || this.wall this.bounds = this.wall.bounds_for(this.media, this.scale) this.center = this.wall.center() diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 3f94740..5952f6a 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -111,6 +111,9 @@ Rect.prototype.eq = function(r){ return this.x.eq(r.x) && this.y.eq(r.y) } + Rect.prototype.fits = function(v){ + return this.x.length() >= v.a && this.y.length() >= v.b + } Rect.prototype.zero = function(){ this.a.zero() this.b.zero() diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index aa18f6d..33a94d0 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -93,83 +93,7 @@ }) }) } - - Room.prototype.group_mx_walls = function(){ - var base = this - var side_groups = {}, walls = [] - - // group the walls by side - base.mx_walls.forEach(function(wall){ - - // ignore half-walls for now - var side = wall.side || wall.half_side - - if (side_groups[side]) { - side_groups[side].push(wall) - } - else { - side_groups[side] = [wall] - } - }) - - // sort the subgroups, and then combine mx objects under wall objects - pairs(side_groups).forEach(function(pair){ - var side = pair[0], els = pair[1] - - if (side & LEFT_RIGHT) { - els.sort(sort.compare_rect_x) - } - else if (side & FRONT_BACK) { - els.sort(sort.compare_rect_y) - } - - // wall holds state for the last wall we created/saw.. - // right now we keep walls subdivided where there are half-walls to simplify - // calculations involving placing media on walls, calculating wall boundaries, etc.. - // one consequence of this is we can't place things on the walls above "doorways". - // in the future, we should have more robust placement algorithm, which takes - // this into account, and only use one wall "object" per plane - var wall - els.forEach(function(el){ - if (el.half_side) { - wall = new_wall(el) - walls.push(wall) - wall = null - } - else if (! wall) { - wall = new_wall(el) - walls.push(wall) - } - else if (side & FRONT_BACK && wall.rect.x.b == el.rect.x.a) { - wall.rect.x.b = el.rect.x.b - wall.mx.push(el) - } - else if (side & LEFT_RIGHT && wall.rect.y.b == el.rect.y.a) { - wall.rect.y.b = el.rect.y.b - wall.mx.push(el) - } - else { - wall = new_wall(el) - walls.push(wall) - } - }) - }) - - function new_wall (el) { - return new Wall ({ - id: base.id + "_" + (el.side | el.half_side) + "_" + walls.length, - room: base.id, - side: el.side | el.half_side, - half_side: el.half_side, - rect: el.rect.clone(), - el: el, - }) - } - - return walls - } - Room.prototype.clipTo = function(r){ // for each of this rect's regions split the region if necessary var regions = this.regions diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js new file mode 100644 index 0000000..171376f --- /dev/null +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -0,0 +1,179 @@ +(function(){ + + var vec2, Rect + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + } + + var Surface = function (face){ + this.width = 0 + this.height = 0 + this.faces = [] + if (face) { + this.add(face) + } + } + Surface.prototype.add = function(rect){ + this.faces.push(rect) + this.width += rect.width() + this.height = Math.max(this.height, rect.height()) + } + Surface.prototype.fits_scale = function(v, scale){ + v = v.clone().mul(scale) + return this.fits(v) + } + Surface.prototype.fits = function(v){ + var faces = this.faces + var scratch + if (this.width < v.a || this.height < v.b) { + return null + } + for (var i = 0; i < faces.length; i++) { + if (faces[i].fits(v)) { + return faces[i] + } + } + scratch = new Rect (0,0,0,0) + for (var i = 0; i < faces.length; i++) { + if (faces[i].y.length() < v.b) { + continue + } + scratch.x.a = faces[i].x.a + scratch.x.b = faces[i].x.b + scratch.y.a = faces[i].y.a + scratch.y.b = faces[i].y.b + SEARCH: for (var j = i+1; j < faces.length; j++) { + if (faces[j].y.a > scratch.y.a) { + scratch.y.a = faces[j].y.a + } + if (faces[j].y.b < scratch.y.b) { + scratch.y.b = faces[j].y.b + } + if (scratch.y.b <= scratch.y.a || scratch.y.length() < v.b) { + break SEARCH + } + scratch.x.b = faces[j].x.b + if (scratch.fits(v)) { + return scratch + } + } + } + return null + } + Surface.prototype.place = function(v, index){ + var face, faces = this.faces + } + Surface.prototype.bounds = function(index){ + var bounds = faces[index].clone() + var height = faces[index].height() + bounds.first = bounds.last = index + + for (var i = index-1; i >= 0; i--) { + var face = faces[i] + if (face.y.length() < height) { + continue + } + if (face.y.a > bounds.y.a) { + continue + } + if (face.y.b < bounds.y.b) { + continue + } + bounds.x.a = bounds.x.a + bounds.first = i + } + + for (var i = index+1; i < faces.length; i++) { + var face = faces[i] + if (face.y.length() < height) { + continue + } + if (face.y.a > bounds.y.a) { + continue + } + if (face.y.b < bounds.y.b) { + continue + } + bounds.x.b = bounds.x.b + bounds.last = i + } + return bounds + } + Surface.prototype.clamp = function (bounds, dimension, position, dx, dy) { + // we start out with a set of boundaries where we know the object should fall + // we then check if we've moved the box off any edge of the bounds + // if so, check if the new position is valid with respect to the surface. + // for horizontal movement, this means checking the height and boundaries of + // faces with adjacent indexes + var p = position.clone(), nextIndex, nextFace, newBounds + p.a += dx + p.b += dy + + // left edge + if (p.a < bounds.x.a) { + if (bounds.first == 0) { + p.a = bounds.x.a + } + else { + nextIndex = bounds.first - 1 + nextFace = this.faces[nextIndex] + if (nextFace.y.a <= p.b && p.b + dimension.b <= nextFace.y.b) { + // it appears the div to the left will accomodate this element + } + else { + p.a = bounds.x.a + } + } + } + // right edge + else if (p.a + dimension.a > bounds.x.b) { + if (bounds.last == this.faces.length-1) { + p.a = bounds.x.b - dimension.a + } + else { + nextIndex = bounds.last + 1 + nextFace = this.faces[nextIndex] + if (nextFace.y.a <= p.b && p.b + dimension.b <= nextFace.y.b) { + // it appears the div to the right will accomodate this element + } + else { + p.a = bounds.x.b - dimension.a + } + } + } + + // for vertical movement, this means checking the height and boundaries of + // elements in the set of bounds' indexes + if (p.b < bounds.y.a) { + for (var i = Math.min(nextIndex, bounds.first), last = Math.max(nextIndex, bounds.last); i < last; i++) { + face = this.faces[i] + // loop over each of the faces in the list + // given a face, figure out if the new top-left is in its bounds + // if so, find which one contains its right edge + // get the lowest height of this set + // then clamp to that lowest height + // additionally, this is the new center-index + // recalculate the bounds +// if (face.x.b < p. +// for (var j = bounds.first+1; j < bounds.last + } + } + // bottom edge, so we can clamp here trivially + else if (p.b + dimension.b > bounds.y.b) { + p.b = bounds.y.b - dimension.b + } + // if we're able to move out of bounds in that direction, recalculate the bounds + } + + if ('window' in this) { + window.Surface = Surface + } + else { + module.exports = Surface + } +})() diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 6e2c728..f015a44 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -1,21 +1,28 @@ -window.Wall = (function(){ +(function(){ + var vec2, Rect, sort + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + sort = window.sort + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + UidGenerator = require('../util/uid') + } + var Wall = function(opt){ this.id = opt.id - this.uid = Uid() - this.room = opt.room - this.rect = opt.rect || new Rect (0,0,0,0) - this.rect.sides = opt.side + this.vec = opt.vec + this.edge = opt.edge this.side = opt.side - this.mx = [] - this.els = [] - if (opt.el) { - this.mx.push(opt.el) - } + this.surface = opt.surface + this.mx = opt.mx } Wall.prototype.toString = function(){ - return this.rect.toString() + return this.vec.toString() } Wall.prototype.reset = function(){ @@ -25,39 +32,42 @@ window.Wall = (function(){ this.mx.forEach(function(mx){ mx.destroy && mx.destroy() }) - this.room = this.rect = this.mx = this.els = null + this.room = this.vec = this.mx = null } Wall.prototype.bind = function(){ var base = this base.$walls = $( this.mx.map(function(mx){ return mx.el }) ) - base.$walls.bind({ - mouseover: function(){ - }, - mouseenter: function(e){ - Scenery.mouse.mouseenter(e, base) - }, - mousemove: function(e){ - }, - mousedown: function(){ - // base.randomize_colors() - // console.log(sidesToString(base.side)) - if (Scenery.nextMedia) { + + this.mx.forEach(function(mx){ + $(mx.el).bind({ + mouseover: function(){ + }, + mouseenter: function(e){ + Scenery.mouse.mouseenter(e, base, mx) + }, + mousemove: function(e){ + }, + mousedown: function(){ + // base.randomize_colors() + // console.log(sidesToString(base.side)) + if (Scenery.nextMedia) { var scenery = Scenery.addNextToWall(base) - UndoStack.push({ - type: 'create-scenery', - undo: { id: scenery.id }, - redo: scenery.serialize(), - }) - } - else if (Scenery.nextWallpaper) { - base.wallpaper() + UndoStack.push({ + type: 'create-scenery', + undo: { id: scenery.id }, + redo: scenery.serialize(), + }) + } + else if (Scenery.nextWallpaper) { + base.wallpaper() + } + else { + app.controller.hideExtras() + } } - else { - app.controller.hideExtras() - } - } + }) }) this.outline() } @@ -72,6 +82,12 @@ window.Wall = (function(){ new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } + Wall.prototype.bounds_for_mx = function(img, scale, mx) { + // + } + Wall.prototype.fits_mx = function(img, scale, mx) { + } + Wall.prototype.fits = function(img, scale){ if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { return false @@ -144,32 +160,30 @@ window.Wall = (function(){ var ctx = canvas.getContext('2d') var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) + var mx = this.mx - var sortedWalls = this.siblings().reduce(function(a,w){ - return a.concat(w.mx) - }, []).sort( useX ? sort.compare_x : sort.compare_z ) - - if (shouldFlip) { - sortedWalls = sortedWalls.reverse() + // console.log( sidesToString(this.side), mx.length ) + if (! shouldFlip) { + mx = mx.reverse() } - var len = sortedWalls.length + var len = this.mx.length zz = window.zz || 0 - sortedWalls.forEach(function(mx, i){ + mx.forEach(function(mx, i){ if (mx.outlined) return mx.outlined = true canvas.width = mx.width canvas.height = mx.height - ctx.fillStyle = "rgba(255,255,255,0.9)" + ctx.fillStyle = "rgba(255,255,255,0.95)" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "rgba(0,0,0,1.0)" - // all walls except top-half walls get bottom lines + // all walls get bottom lines ctx.fillRect(0, 0, canvas.width, 1) - // all walls except bottom-half walls get top lines + // all walls get top lines ctx.fillRect(0, canvas.height-1, canvas.width, 1) // walls on initial sides get left lines @@ -181,32 +195,27 @@ window.Wall = (function(){ // walls on terminal sides get right lines.... // if their right edge lines up with the rect edge if (i == len-1) { - // ctx.fillStyle = "rgba(255,0,0,1.0)" ctx.fillRect(canvas.width-1, 0, 1, canvas.height) } var dataUrl = canvas.toDataURL() mx.el.style.backgroundImage = "url(" + dataUrl + ")" }) - window.zz += 1 } Wall.prototype.siblings = function(){ - var base = this - var match = base.side | base.half_side - var walls = Rooms.list[this.room].walls.filter(function(w){ - return (w.side | w.half_side) & match && w.$walls - }) - return walls + return this +// var base = this +// var match = base.side | base.half_side +// var walls = Rooms.list[this.room].walls.filter(function(w){ +// return (w.side | w.half_side) & match && w.$walls +// }) +// return walls } Wall.prototype.randomize_colors = function(){ var color = window.grayColors[ this.side | this.half_side ] - var siblings = this.siblings() - siblings.forEach(function(w, i){ - if (! w.$walls) return - w.color(color) - }) + this.color(color) } Wall.prototype.stroke_colors = function(){ @@ -226,6 +235,12 @@ window.Wall = (function(){ }) } - return Wall + if ('window' in this) { + window.Wall = Wall + } + else { + module.exports = Wall + } + })() diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 95827cc..16d34dd 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -58,7 +58,8 @@ select.blur() }) - window.colors = color_palettes[select ? select.value : 'alphaQuad'] + window.colors = color_palettes[select ? select.value : 'colors'] +// window.colors = color_palettes[select ? select.value : 'alphaQuad'] window.grayColors = {} _.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.alphaQuad).map(function(pair){ window.grayColors[pair[0]] = pair[1] diff --git a/public/assets/javascripts/rectangles/util/sort.js b/public/assets/javascripts/rectangles/util/sort.js index 7aa40a2..cf8d6b1 100644 --- a/public/assets/javascripts/rectangles/util/sort.js +++ b/public/assets/javascripts/rectangles/util/sort.js @@ -95,9 +95,38 @@ return a.x < b.x ? -1 : a.x == b.x ? 0 : 1 } sort.compare_z = function (a,b){ - return a.z > b.z ? -1 : a.z == b.z ? 0 : 1 + return a.z < b.z ? -1 : a.z == b.z ? 0 : 1 } - + sort.compare_xz = function(a,b){ + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + return 0 + } + sort.compare_zx = function(a,b){ + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + return 0 + } if ("window" in this) { window.sort = sort } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e15ba84..7cc41f5 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -610,8 +610,8 @@ iframe.embed { .back { background-color: #fff; } .left { background-color: #fff; } .right { background-color: #fff; } -.floor { background-color: #f8f8f8; } -.ceiling { background-color: rgba(255,525,255,0.3); } +.floor { background-color: #f6f6f6; } +.ceiling { background-color: rgba(255,255,255,0.9); } .active.floor { background-color: #f8f8f8; } diff --git a/server/index.js b/server/index.js index 32dc709..e6afdb8 100644 --- a/server/index.js +++ b/server/index.js @@ -50,7 +50,7 @@ site.setup = function(){ app.use(express.session({ key: 'vvalls.sid', secret: 'flibbertigibbet', - cookie: { domain: '.' + config.hostName, maxAge: 432000000 }, + cookie: { domain: '.' + config.hostName, maxAge: 43200000000 }, store: SessionStore })); app.use(bodyParser()); diff --git a/test/06-test-grouper.js b/test/06-test-grouper.js new file mode 100644 index 0000000..0f14217 --- /dev/null +++ b/test/06-test-grouper.js @@ -0,0 +1,288 @@ +var assert = require("assert") +var vec = require("../public/assets/javascripts/rectangles/models/vec2.js") +var Rect = require("../public/assets/javascripts/rectangles/models/rect.js") +var Room = require("../public/assets/javascripts/rectangles/models/room.js") +var Rooms = require("../public/assets/javascripts/rectangles/engine/rooms/_rooms.js") +var Clipper = require("../public/assets/javascripts/rectangles/engine/rooms/clipper.js") +var Builder = require("../public/assets/javascripts/rectangles/engine/rooms/builder.js") +var Grouper = require("../public/assets/javascripts/rectangles/engine/rooms/grouper.js") +var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 +var ALL = FRONT | BACK | LEFT | RIGHT +function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s +} +function bitcount(v) { + v = v - ((v >>> 1) & 0x55555555); + v = (v & 0x33333333) + ((v >>> 2) & 0x33333333); + return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24; +} + +var rect = new Rect( new vec(1,5), new vec(1,5) ) +var east = new Rect( new vec(2,6), new vec(1,5) ) +var corner = new Rect( new vec(3,7), new vec(3,7) ) +var peninsula = new Rect( new vec(4,6), new vec(6,8) ) + +var big_rect = new Rect( new vec(1,5), new vec(1,5) ) +var hall_rect = new Rect( new vec(3,4), new vec(4,8) ) + +var rect_room = new Room({ id: "rect", rect: rect, height: 2 }) +var east_room = new Room({ id: "east", rect: east, height: 2 }) +var corner_room = new Room({ id: "corner", rect: corner, height: 2 }) +var peninsula_room = new Room({ id: "peninsula", rect: peninsula, height: 2 }) +var peninsula_taller = new Room({ id: "peninsula", rect: peninsula, height: 3 }) +var peninsula_shorter = new Room({ id: "peninsula", rect: peninsula, height: 1 }) + +var taller_room = new Room({ id: "taller", rect: rect, height: 3 }) + +var big_room = new Room({ id: "big_room", rect: big_rect, height: 4 }) +var hallway = new Room({ id: "hallway", rect: hall_rect, height: 2 }) + +function report(a) { + console.log( a.join("\n") ) +} +function reportSides(walls) { + console.log(walls.map(function(w){ return sidesToString(w.side) }).join("\n")) +} +function reset(){ + Rooms.forEach(function(room){ + room.reset() + }) + Rooms.list = {} + Rooms.regions = [] +} +function rebuild(){ + Rooms.clipper.solve_rects() + Rooms.builder.build() +} + +describe('grouper(rect)', function(){ + reset() + Rooms.add( rect_room ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#collect(rect)', function(){ + it("should return 4 sets of 1 wall each", function(){ + assert.equal(1, collections[FRONT].length) + assert.equal(1, collections[BACK].length) + assert.equal(1, collections[LEFT].length) + assert.equal(1, collections[RIGHT].length) + }) + }) +}) + +describe('grouper(rect,east)', function(){ + reset() + Rooms.add( rect_room ) + Rooms.add( east_room ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#collect(rect, east)', function(){ + it("should find 3 walls on front/back, 1 wall on left/right", function(){ + assert.equal(3, collections[FRONT].length) + assert.equal(3, collections[BACK].length) + assert.equal(1, collections[LEFT].length) + assert.equal(1, collections[RIGHT].length) + }) + }) + + describe('#group(rect, east)', function(){ + var front_walls = Rooms.grouper.group([], collections, FRONT) + var back_walls = Rooms.grouper.group([], collections, BACK) + var left_walls = Rooms.grouper.group([], collections, LEFT) + var right_walls = Rooms.grouper.group([], collections, RIGHT) + + it("each side now has one wall", function(){ + assert.equal(1, left_walls.length) + assert.equal(1, right_walls.length) + assert.equal(1, front_walls.length) + assert.equal(1, back_walls.length) + }) + it("front wall is now 5 units long, contains 3 mx elements", function(){ + var wall = front_walls[0] + assert.equal(5, wall.vec.length()) + assert.equal(3, wall.mx.length) + }) + it("back wall is also 5 units long, contains 3 mx elements", function(){ + var wall = back_walls[0] + assert.equal(5, wall.vec.length()) + assert.equal(3, wall.mx.length) + }) + it("left wall is still 4 units long, contains 1 mx element", function(){ + var wall = left_walls[0] + assert.equal(4, wall.vec.length()) + assert.equal(1, wall.mx.length) + }) + }) +}) + +describe('grouper(rect,corner)', function(){ + reset() + Rooms.add( rect_room ) + Rooms.add( corner_room ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#group(rect,corner)', function(){ + var front_walls = Rooms.grouper.group([], collections, FRONT) + var back_walls = Rooms.grouper.group([], collections, BACK) + var left_walls = Rooms.grouper.group([], collections, LEFT) + var right_walls = Rooms.grouper.group([], collections, RIGHT) + + it("left has 2 walls", function(){ + assert.equal(2, left_walls.length) + }) + it("right has 2 walls", function(){ + assert.equal(2, right_walls.length) + }) + it("front has 2 walls", function(){ + assert.equal(2, front_walls.length) + }) + it("back has 2 walls", function(){ + assert.equal(2, back_walls.length) + }) + it("front/right walls are one narrow, one wide", function(){ + assert.equal(4, front_walls[0].vec.length()) + assert.equal(2, front_walls[1].vec.length()) + assert.equal(2, right_walls[0].vec.length()) + assert.equal(4, right_walls[1].vec.length()) + }) + it("back/left walls are one wide, one narrow", function(){ + assert.equal(2, back_walls[0].vec.length()) + assert.equal(4, back_walls[1].vec.length()) + assert.equal(4, left_walls[0].vec.length()) + assert.equal(2, left_walls[1].vec.length()) + }) + }) +}) + +describe('grouper(rect,corner,peninsula)', function(){ + reset() + Rooms.add( rect_room ) + Rooms.add( corner_room ) + Rooms.add( peninsula_room ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#collect(rect,corner,peninsula)', function(){ + it("should find an appropriate number of wall segments", function(){ + assert.equal(3, collections[FRONT].length) + assert.equal(4, collections[BACK].length) + assert.equal(5, collections[LEFT].length) + assert.equal(5, collections[RIGHT].length) + }) + }) + + describe('#group(rect,corner,peninsula)', function(){ + var front_walls = Rooms.grouper.group([], collections, FRONT) + var back_walls = Rooms.grouper.group([], collections, BACK) + var left_walls = Rooms.grouper.group([], collections, LEFT) + var right_walls = Rooms.grouper.group([], collections, RIGHT) + + it("left has 3 walls", function(){ + assert.equal(3, left_walls.length) + }) + it("right has 4 walls", function(){ + assert.equal(4, right_walls.length) + }) + it("front has 2 walls", function(){ + assert.equal(2, front_walls.length) + }) + it("back has 4 walls", function(){ + assert.equal(4, back_walls.length) + }) + }) +}) + + +describe('grouper(rect,corner,peninsula_taller)', function(){ + reset() + Rooms.add( rect_room ) + Rooms.add( corner_room ) + Rooms.add( peninsula_taller ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#collect(rect,corner,peninsula_taller)', function(){ + it("should find an appropriate number of wall segments", function(){ + assert.equal(5, collections[FRONT].length) + assert.equal(4, collections[BACK].length) + assert.equal(6, collections[LEFT].length) + assert.equal(6, collections[RIGHT].length) + }) + }) + + describe('#group(rect,corner,peninsula_taller)', function(){ + var front_walls = Rooms.grouper.group([], collections, FRONT) + var back_walls = Rooms.grouper.group([], collections, BACK) + var left_walls = Rooms.grouper.group([], collections, LEFT) + var right_walls = Rooms.grouper.group([], collections, RIGHT) + + it("left has 4 walls", function(){ + assert.equal(4, left_walls.length) + }) + it("right has 5 walls", function(){ + assert.equal(5, right_walls.length) + // console.log(right_walls.map(function(m){ return m.vec + " " + m.edge + " " + m.surface +"" })) + }) + it("front has 3 walls", function(){ + assert.equal(3, front_walls.length) + }) + it("back has 4 walls", function(){ + assert.equal(4, back_walls.length) + }) + }) +}) + +describe('grouper(room,hallway)', function(){ + reset() + Rooms.add( big_room ) + Rooms.add( hallway ) + rebuild() + + var collections = Rooms.grouper.collect() + + describe('#collect(room,hallway)', function(){ + it("should find an appropriate number of wall segments", function(){ + assert.equal(3, collections[FRONT].length) + assert.equal(4, collections[BACK].length) + assert.equal(3, collections[LEFT].length) + assert.equal(3, collections[RIGHT].length) + }) + }) + + describe('#group(rect,corner,peninsula_taller)', function(){ + var front_walls = Rooms.grouper.group([], collections, FRONT) + var back_walls = Rooms.grouper.group([], collections, BACK) + var left_walls = Rooms.grouper.group([], collections, LEFT) + var right_walls = Rooms.grouper.group([], collections, RIGHT) + + it("left has 2 walls", function(){ + assert.equal(2, left_walls.length) + }) + it("right has 2 walls", function(){ + assert.equal(2, right_walls.length) + }) + it("front has 1 wall", function(){ + assert.equal(1, front_walls.length) + }) + it("back has 2 walls", function(){ + assert.equal(2, back_walls.length) + // console.log(back_walls.map(function(m){ return m.vec + " " + m.edge + " " + m.surface +"" })) + }) + }) +}) + diff --git a/test/07-test-surface.js b/test/07-test-surface.js new file mode 100644 index 0000000..8f69e77 --- /dev/null +++ b/test/07-test-surface.js @@ -0,0 +1,60 @@ +var assert = require("assert") +var vec2 = require("../public/assets/javascripts/rectangles/models/vec2.js") +var Rect = require("../public/assets/javascripts/rectangles/models/rect.js") +var Surface = require("../public/assets/javascripts/rectangles/models/surface.js") + +// [[1 3] [0 4]] front back left right +// [[3 4] [2 4]] front back left right +// [[4 5] [0 4]] front back left right + +describe('basic surface', function(){ + var surface = new Surface () + surface.add( new Rect( new vec2(1, 3), new vec2(0, 4) ) ) + surface.add( new Rect( new vec2(3, 4), new vec2(2, 4) ) ) + surface.add( new Rect( new vec2(4, 6), new vec2(0, 4) ) ) + + var small = new vec2(2, 2) + var large = new vec2(10, 10) + var oblong = new vec2(4, 1) + + describe('#fits()', function(){ + it("fits something small", function(){ + assert.equal(true, !! surface.fits(small)) + }) + it("doesn't fit something large", function(){ + assert.equal(false, !! surface.fits(large)) + }) + it("fits something oblong", function(){ + assert.equal(true, !! surface.fits(oblong)) + }) + }) + describe('#fits_scale()', function(){ + it("fits something large, scaled down", function(){ + assert.equal(true, !! surface.fits_scale(large, 0.1)) + }) + it("doesn't fit something small, scaled up", function(){ + assert.equal(false, !! surface.fits_scale(small, 10)) + }) + it("doesn't fit something oblong, scaled up", function(){ + assert.equal(false, !! surface.fits_scale(oblong, 10)) + }) + }) + + describe('#place()', function(){ + it("fits a small element on the top left", function(){ + var bounds = surface.place(small, new vec2(1,3)) + console.log(bounds) + }) + it("places a small element on the right", function(){ + var bounds = surface.place(small, new vec2(4,6)) + console.log(bounds) + }) + }) + + describe('#clamp()', function(){ + it("", function(){ + }) + }) + +}) + diff --git a/test/mocks/mx.js b/test/mocks/mx.js index 2a76ffc..889f4bc 100644 --- a/test/mocks/mx.js +++ b/test/mocks/mx.js @@ -16,7 +16,7 @@ MX.Object3D = function (klass) { MX.Scene = { els: [], add: function (el) { - els.push(el) + MX.Scene.els.push(el) } } diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index dfb3a83..d0454d6 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -34,6 +34,7 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/models/vec3.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/mat4.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/rect.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/models/surface.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/tree.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/room.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/wall.js"></script> @@ -41,6 +42,7 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_rooms.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/builder.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/clipper.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/grouper.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/mover.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/_scenery.js"></script> @@ -102,4 +104,4 @@ <!-- external dependencies --> <script src="http://www.youtube.com/player_api"></script> -<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
\ No newline at end of file +<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> |