From d8637f78753af20022c9b6cd55717a5f905dd0ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 12:11:43 -0400 Subject: splitting wallpaper url / position --- public/assets/javascripts/ui/editor/EditorView.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 67687fe..f95d909 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -52,6 +52,10 @@ var EditorView = View.extend({ } }, + pickWall: function(wall, pos){ + this.hideExtras() + }, + hideExtras: function(){ this.mediaEditor.hide() this.textEditor.hide() -- cgit v1.2.3-70-g09d2 From f5ab61241bf9519325a36b86ee74ab2df13a4331 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 14:43:45 -0400 Subject: colorpicker presets --- .../assets/javascripts/rectangles/models/wall.js | 2 -- .../assets/javascripts/ui/editor/LightControl.js | 33 ++++++++++++++++++++++ public/assets/javascripts/ui/reader/MediaPlayer.js | 4 +-- public/assets/stylesheets/app.css | 8 ++++-- views/controls/editor/light-control.ejs | 10 +++---- 5 files changed, 46 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 93e1f42..820fb5f 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -230,8 +230,6 @@ this.background = background this.background.src = this.background.src.replace("url(","").replace(")","") - console.log(background) - if (this.background.src == "none") { this.wallpaperLoad(this.background.src) return diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..2b7cfaa 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -10,6 +10,7 @@ var LightControl = View.extend({ "input #brightness-control": "updateBrightness", "input #outline-hue": "updateShadow", "input #wall-hue": "updateShadow", + "click .presets span": "selectPreset", }, initialize: function(){ @@ -114,6 +115,38 @@ var LightControl = View.extend({ this.setMode(mode) }, + presets: { + wireframe: { + wall: [255,255,255], + outline: [0,0,0], + floor: [246,246,246], + ceiling: [255,255,255], + }, + shaded: { + wall: [205,205,204], + outline: [0,0,0], + floor: [109,116,106], + ceiling: [159,163,157], + }, + pfunk: { + wall: [255,63,78], + outline: [255,246,0], + floor: [255,255,0], + ceiling: [225,118,252], + }, + seapunk: { + wall: [110,255,255], + outline: [146,133,255], + floor: [89,221,255], + ceiling: [139,255,173], + }, + }, + selectPreset: function(e){ + var preset = $(e.currentTarget).data('preset') + if (! this.presets[preset]) return + this.load(this.presets[preset]) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index df2d075..6195ab6 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -53,8 +53,8 @@ var MediaPlayer = FormView.extend({ this.bind(scenery) this.$el.addClass("active") - this.$name.html(media.title) - this.$description.html(media.description) + this.$name.html( sanitize(media.title) ) + this.$description.html( marked(media.description) ) switch (media.type) { case "image": diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eb3bd87..15f29c3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1475,13 +1475,17 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } -.color-swatches.defaults { +.presets { margin-top: 10px; } -.color-swatches.defaults span{ +.presets span { font-size:12px; font-weight:500; + display: inline-block; + width: 50%; + float:left; + cursor:pointer; } .color-swatches span { display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index fdf95a7..1fc4484 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -23,17 +23,17 @@

Preset Styles

-
- +
+ Wireframe - + Shaded - + P.Funk - + SeaPunk
-- cgit v1.2.3-70-g09d2 From 816c603b03f037fecde9168daccaa5bd344d4c0d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 16:37:26 -0400 Subject: nomenclature for addressing floors, ceilings --- .../javascripts/rectangles/engine/rooms/_walls.js | 11 ++ .../javascripts/rectangles/engine/rooms/clipper.js | 2 +- .../javascripts/rectangles/engine/rooms/grouper.js | 19 +++ .../assets/javascripts/rectangles/models/floor.js | 146 +++++++++++++++++++++ .../assets/javascripts/rectangles/models/room.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 6 +- .../javascripts/rectangles/util/constants.js | 3 +- public/assets/javascripts/ui/editor/TextEditor.js | 5 +- views/partials/scripts.ejs | 1 + 9 files changed, 186 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/models/floor.js (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f0cd558..b3611c8 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -35,6 +35,7 @@ var base = this base.list = [] + base.floors = [] base.lookup = {} base.colors = {} @@ -57,11 +58,21 @@ base.lookup[wall.id] = wall }) } + + base.assignFloors = function(floors){ + base.floors = floors + floors.forEach(function(floor){ + base.lookup[floor.id] = floor + }) + } base.bind = function(){ base.list.forEach(function(wall){ wall.bind() }) + base.floors.forEach(function(floor){ + floor.bind() + }) } base.count = function(){ diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js index 33e3a84..0382758 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js @@ -49,7 +49,7 @@ Rooms.regions = regions = [] return } - + base.reset_rects() base.clip_rects() var culled = base.cull_rects_iterative() diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index 663d29d..ec776a2 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -48,13 +48,16 @@ base.build = function (){ var walls = [] + var floors = [] 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) + base.groupFloors(floors, collections) Walls.assign( walls ) + Walls.assignFloors( floors ) Walls.bind() } base.collect = function(){ @@ -63,12 +66,16 @@ collections[BACK] = [] collections[LEFT] = [] collections[RIGHT] = [] + collections[FLOOR] = [] + collections[CEILING] = [] Rooms.forEach(function(room){ room.mx_walls.forEach(function(mx){ var side = mx.side || mx.half_side collections[side].push(mx) }) + collections[FLOOR] = collections[FLOOR].concat( room.mx_floor ) + collections[CEILING] = collections[CEILING].concat( room.mx_ceiling ) }) base.cull(collections) @@ -161,6 +168,18 @@ return walls } + base.groupFloors = function(floors, collections){ + var floor = new Floor ({ + id: 'floor', + mx: collections[FLOOR] + }) + var ceiling = new Floor ({ + id: 'ceiling', + mx: collections[CEILING] + }) + floors.push(floor) + floors.push(ceiling) + } } diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js new file mode 100644 index 0000000..ee264c7 --- /dev/null +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -0,0 +1,146 @@ +(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 Floor = function(opt){ + this.id = opt.id + this.side = opt.side + this.mx = opt.mx + } + + Floor.prototype.serialize = function(){ + return { + id: this.id, + background: this.background, + } + } + + Floor.prototype.deserialize = function(data){ + this.wallpaper( data.background ) + } + + Floor.prototype.bind = function(){ + var base = this + base.$els = $( this.mx.map(function(mx){ return mx.el }) ) + console.log("HELLO") + this.mx.forEach(function(mx, index){ + $(mx.el).bind({ + mousedown: function(e){ + console.log("clicked on", base.id) + if (Scenery.nextWallpaper) { + var oldState = base.serialize() + base.wallpaper(Scenery.nextWallpaper) + Scenery.nextWallpaper = null + + UndoStack.push({ + type: 'update-wallpaper', + undo: oldState, + redo: base.serialize(), + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + } + } + }) + }) + + // flip the mx order + var shouldFlip = this.side & (CEILING) + if (! shouldFlip) { + this.mx.reverse() + } + } + + Floor.prototype.color = function(color){ + this.$els.css("background-color", color) + } + + Floor.prototype.wallpaper = function(background){ + if (! background) { + background = { src: "none" } + } + else if (typeof background == "string") { + background = { src: background } + } + else if (! background.src) { + background = { src: "none" } + } + background.x = background.x || 0 + background.y = background.y || 0 + background.scale = background.scale || 1 + + this.background = background + this.background.src = this.background.src.replace("url(","").replace(")","") + + if (this.background.src == "none") { + this.wallpaperLoad(this.background.src) + return + } + + var img = new Image () + img.onload = function(){ + this.backgroundImage = img + this.wallpaperLoad(this.background.src) + this.wallpaperPosition(background) + }.bind(this) + img.src = this.background.src + img.complete && img.onload() + } + + Floor.prototype.wallpaperLoad = function(url){ + if (url !== "none") { + url = "url(" + url + ")" + } + this.mx.forEach(function(mx){ + mx.el.style.backgroundImage = url + }) + } + + Floor.prototype.wallpaperPosition = function(background){ + if (this.background.src == "none") { return } + this.background.x = background.x || this.background.x + this.background.y = background.y || this.background.y + this.background.scale = background.scale || this.background.scale || 1 + + var shouldFlip = this.side & (CEILING) + + var mx, dx, dy + var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) + var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) + + this.surface.faces.forEach(function(face, i){ + + if (shouldFlip) { + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.a ) + dy = Math.round( this.background.y + face.y.b ) + } + else { + mx = this.mx[i] + dx = Math.round( this.background.x - face.x.b ) + dy = Math.round( this.background.y + face.y.b ) + } + + mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px' + mx.el.style.backgroundSize = w + 'px ' + h + 'px' + }.bind(this)) + } + + if ('window' in this) { + window.Floor = Floor + } + else { + module.exports = Floor + } +})() diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 0f09325..1a4606c 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -154,7 +154,7 @@ } // if (bitcount(wall_collision) > 1) { // collision |= wall_collision -// } +// } }) return collision } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 820fb5f..8174de7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -19,7 +19,7 @@ this.side = opt.side this.surface = opt.surface this.mx = opt.mx - this.background = "" + this.background = { src: "none" } } Wall.prototype.toString = function(){ @@ -127,8 +127,6 @@ if (! shouldFlip) { this.mx.reverse() } - - // this.outline(wallColor, outlineColor) } Wall.prototype.serialize = function(){ @@ -283,10 +281,8 @@ mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px' mx.el.style.backgroundSize = w + 'px ' + h + 'px' }.bind(this)) - bbb = this } - Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK var mx = this.mx diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 4c6b3cc..198cc41 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -1,5 +1,6 @@ var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 - FRONT_BACK = FRONT | BACK, LEFT_RIGHT = LEFT | RIGHT, FLOOR_CEILING = FLOOR | CEILING +var FRONT_BACK = FRONT | BACK, LEFT_RIGHT = LEFT | RIGHT, FLOOR_CEILING = FLOOR | CEILING +var WALL_SIDES = FRONT | BACK | LEFT | RIGHT var TOP = CEILING, BOTTOM = FLOOR, TOP_LEFT = TOP | LEFT, diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 1e35c12..0aa5aad 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -39,12 +39,15 @@ var TextEditor = FormView.extend({ scale: 0.5, font: { family: 'Lato', size: 12, align: 'left' }, } - this.createMode(true) } + else { + $("[data-role='toggle-text-editor']").removeClass("inuse") + } }, hide: function(scenery){ + Scenery.nextMedia = null if (this.scenery) { this.unbind() } diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index f768160..21bed03 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -46,6 +46,7 @@ + -- cgit v1.2.3-70-g09d2 From 4dede1ce3a31cfb17cbad80749863725a9957d19 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 18:38:43 -0400 Subject: inverse colors --- public/assets/javascripts/ui/editor/LightControl.js | 11 ++++++----- public/assets/stylesheets/app.css | 6 +++++- views/controls/editor/light-control.ejs | 6 +++--- 3 files changed, 14 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 2b7cfaa..51e6be7 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -134,17 +134,18 @@ var LightControl = View.extend({ floor: [255,255,0], ceiling: [225,118,252], }, - seapunk: { - wall: [110,255,255], - outline: [146,133,255], - floor: [89,221,255], - ceiling: [139,255,173], + inverse: { + wall: [0,0,0], + outline: [0,230,255], + floor: [0,0,0], + ceiling: [0,0,0], }, }, selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return this.load(this.presets[preset]) + $(e.currentTarget).addClass('active') }, beginBrightness: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b4d176f..f770637 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1529,6 +1529,10 @@ input[type="range"]::-webkit-slider-thumb { width: 50%; float:left; cursor:pointer; + border-bottom: 1px transparent solid; +} +.presets span.active { + border-bottom: 1px dotted; } .color-swatches span { display: inline-block; @@ -1589,7 +1593,7 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; -webkit-transform: translateY(500px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(450px); + transform: translateY(500px); transition: -webkit-transform 0.2s ease-in-out; width: 210px; } diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 1fc4484..8f42d8d 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -30,11 +30,11 @@ Shaded + + Inverse + P.Funk - - SeaPunk -
-- cgit v1.2.3-70-g09d2 From 8ae73f097e27cd54f685c562081f3a1bc7c9b13d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 18:59:04 -0400 Subject: resize/scale wallpaper --- public/assets/javascripts/ui/editor/EditorView.js | 1 + .../javascripts/ui/editor/WallpaperPicker.js | 57 +++++++++++++++++++++- public/assets/stylesheets/app.css | 12 +++++ public/assets/test/bg.html | 2 +- views/controls/editor/wallpaper.ejs | 6 +++ 5 files changed, 76 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index f95d909..f60b149 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -54,6 +54,7 @@ var EditorView = View.extend({ pickWall: function(wall, pos){ this.hideExtras() + this.wallpaperPicker.pickWall(wall) }, hideExtras: function(){ diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 7f9b8f7..3694095 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -6,8 +6,11 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { + "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', + "input [data-role='wallpaper-scale']": 'updateScale', + }, initialize: function(){ @@ -15,6 +18,11 @@ var WallpaperPicker = UploadView.extend({ this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") this.$remove.hide() + + this.$position = this.$("[data-role='wallpaper-position']") + this.$scale = this.$("[data-role='wallpaper-scale']") + + this.initializePositionCursor() }, loaded: false, @@ -122,5 +130,52 @@ var WallpaperPicker = UploadView.extend({ _followCursor(e); }) }, - + + wall: null, + pickWall: function(wall){ + if (wall.background.src == "none") { + return; + } + console.log(wall) + this.wall = wall + }, + + updateScale: function(){ + if (! this.wall) return; + s = parseFloat(this.$scale.val()) + this.wall.wallpaperPosition({ scale: s }) + }, + + initializePositionCursor: function(){ + var base = this + var dx = 0, dy = 0, dragging = false + var x = 0, y = 0, s = 1 + var mymouse = new mouse({ + el: this.$position[0], + down: function(e, cursor){ + if (! base.wall) return + s = parseFloat( base.$scale.val() ) + x = base.wall.background.x + y = base.wall.background.y + dragging = true + }, + drag: function(e, cursor){ + if (! dragging) return + delta = cursor.delta() + delta.a = - delta.a + dx = delta.a*s + dy = delta.b*s + base.wall.wallpaperPosition({ + scale: s, + x: x+dx, + y: y+dy, + }) + }, + up: function(e, cursor, new_cursor){ + delta.zero() + dragging = false + }, + }) + }, + }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index f770637..6e23962 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1487,6 +1487,18 @@ input[type="range"]::-webkit-slider-thumb { border:3px solid #000; } +.wallpaperResizeControls input[type=range] { + width: 130px; + position: relative; + top: -10px; +} +.wallpaperResizeControls { + font-size: 30px; +} +.wallpaperResizeControls span { + cursor: pointer; +} + #color-picker { position: relative; } diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html index cd7eaa8..fecf811 100644 --- a/public/assets/test/bg.html +++ b/public/assets/test/bg.html @@ -88,7 +88,7 @@ var x0 = 0, y0 = 0 var mymouse = new mouse({ el: cursor, down: function(e, cursor){ - console.log(cursor.x.a, cursor.y.a) + console.log(cursor.x.a, cursor.y.a) dragging = true }, drag: function(e, cursor){ diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 97a9232..719c8ff 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -25,6 +25,12 @@ + +
+ + +
+
-- cgit v1.2.3-70-g09d2 From bd952badbe37dcd1c4089b2b869a6a4d85c0b198 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 19:01:10 -0400 Subject: update when u click wall --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 3694095..140076d 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -136,8 +136,8 @@ var WallpaperPicker = UploadView.extend({ if (wall.background.src == "none") { return; } - console.log(wall) this.wall = wall + this.$scale.val( this.wall.background.scale ) }, updateScale: function(){ -- cgit v1.2.3-70-g09d2