From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 19:16:45 -0400 Subject: load more on media drawer and some other stuff --- public/assets/javascripts/rectangles/engine/rooms/mover.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/rooms/mover.js') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..a2d2223 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -43,6 +43,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") + $("#header").removeClass("black") $("body").css("background-color", "transparent") base.room = null } @@ -59,6 +60,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] + $("#header").toggleClass("black", Walls.luminance() < 100) $("body").css("background-color", rgb_string( Walls.colors.wall )) app.tube("change-room", { room: base.room }) } -- cgit v1.2.3-70-g09d2 From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:04:00 -0400 Subject: cursor that follows mouse --- .../javascripts/mx/extensions/mx.movements.js | 14 ++++---- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/rectangles/engine/rooms/mover.js | 3 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/HelpCursor.js | 38 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 33 ++++++++++++++----- public/assets/stylesheets/app.css | 18 +++++++--- views/controls/editor/media-drawer.ejs | 13 +++++++- views/controls/editor/settings.ejs | 2 ++ views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js (limited to 'public/assets/javascripts/rectangles/engine/rooms/mover.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 5ba5d69..b158625 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -226,12 +226,14 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - cam.rotationY += deltaX / 20 - - pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 - pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 - - app.tube("move", pos) + if (e.shiftKey) { + cam.rotationY -= deltaY / 150 + } + else { + pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 + pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 + app.tube("move", pos) + } }, update: function () { diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 119a659..f2348f0 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -135,7 +135,7 @@ } base.luminance = function(rgb){ - rgb = rgb || Walls.colors.wall + rgb = rgb || Walls.colors.ceiling var rgb_max = Math.max.apply(0, rgb) var rgb_min = Math.min.apply(255, rgb) return (rgb_max + rgb_min ) / 2 diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index a2d2223..dd63db2 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -11,7 +11,8 @@ Rooms.mover = new function(){ base.bind = function(){ app.on("move", base.update) - keys.on("backslash", function(){ + keys.on("backslash", function(e){ + if ( ! (e.ctrlKey || e.metaKey) ) return base.noclip = ! base.noclip base.room = null app.movements.gravity( ! base.noclip ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index ccd6c63..05d1bec 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -9,6 +9,7 @@ var EditorView = View.extend({ }, initialize: function(){ + this.cursor = new HelpCursor ({ parent: this }) this.toolbar = new EditorToolbar ({ parent: this }) this.settings = new EditorSettings ({ parent: this }) this.info = new BuilderInfo ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..842e871 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,38 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + messages: { + start: "Welcome to Vvalls!", + move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + }, + shown: {}, + + initialize: function(){ + $(window).mousemove(function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }.bind(this)) + this.show("start") + }, + + show: function(name){ + if (name) this.showMessage(name) + this.$el.show() + }, + + hide: function(){ + this.$el.hide() + }, + + showMessage: function(name){ + if (+(this.shown[name] || 0) < 2) { + this.$el.html(this.messages[name]) + this.shown[name] = (+this.shown[name] || 0) + 1 + } + else { + this.$el.html("") + } + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 10819af..b270be5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({ initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent + this.$myMedia = this.$(".myMedia") this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") + this.$foundMedia = this.$(".foundMedia") this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") + + this.$wallpaperMedia = this.$(".wallpaperMedia") + this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container") + this.$wallpaperToggle = this.$(".wallpaperToggle") + this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, + wallpaperToggle: function(){ + this.$wallpaperMedia.addClass("active") + this.$foundMedia.addClass("inactive") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") + }, + foundToggle: function(){ - this.$foundMedia.addClass("active"); - this.$myMedia.addClass("inactive"); - this.$("a").removeClass("active"); - this.$foundToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.addClass("active") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") }, userToggle: function(){ - this.$foundMedia.removeClass("active"); - this.$myMedia.removeClass("inactive"); - this.$("a").removeClass("active"); - this.$userToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.removeClass("active") + this.$myMedia.removeClass("inactive") + this.$("a").removeClass("active") + this.$userToggle.addClass("active") }, show: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index cf98170..0140dc6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -901,7 +901,7 @@ border-left: 1px solid black; .face { background-color: #fff; - transition: 0.1s background-color ease; + transition: 0.1s background-color ease, 0.05s background-color ease; } .front { background-color: #fff; } .back { background-color: #fff; } @@ -1271,7 +1271,7 @@ border-left: 1px solid black; .noMedia { margin: 40px; } -.foundMedia { +.foundMedia, .wallpaperMedia { position:absolute; top:0; left:0; @@ -1282,8 +1282,7 @@ border-left: 1px solid black; padding-top:40px; width: 100%; } - -.foundMedia.active { +.foundMedia.active, .wallpaperMedia.active { -webkit-transform: translateX(0%); transform: translateX(0%); } @@ -1718,6 +1717,17 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; } +#helpCursor { + position: fixed; + max-width: 200px; + font-size: 13px; + color: black; + background: #fff; + margin: 8px 0 0 8px; + padding: 4px; + font-weight: 500; + z-index: 22; +} .settings.info { right: auto; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 7996f84..d1e2c99 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -6,7 +6,13 @@ X
-

Your Media – Found Media


+

+ Your Media + – Found Media + +


@@ -29,4 +35,9 @@
+ +
+ +
+
\ No newline at end of file diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 7c40a75..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,3 +1,5 @@ + +

Room Settings

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..05f4b58 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From c13532ec95c2d410354f7d342df70fd68dd78272 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 02:21:46 -0400 Subject: matrix mode --- .../javascripts/rectangles/engine/rooms/_walls.js | 31 ++++++++++++++++- .../javascripts/rectangles/engine/rooms/mover.js | 8 ++--- .../assets/javascripts/rectangles/models/wall.js | 4 +-- .../assets/javascripts/ui/editor/ColorControl.js | 21 ++++++++---- public/assets/javascripts/ui/editor/Presets.js | 39 ++++++++++++++++++++-- public/assets/stylesheets/app.css | 22 +++++++----- views/controls/editor/presets.ejs | 12 ------- 7 files changed, 101 insertions(+), 36 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms/mover.js') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f2348f0..5c16ce6 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -140,6 +140,36 @@ var rgb_min = Math.min.apply(255, rgb) return (rgb_max + rgb_min ) / 2 } + + base.setBodyColor = function(){ + $("#header").toggleClass("black", Walls.luminance() < 100) + $("body").css("background-color", rgb_string( Walls.colors.wall )) + } + base.clearBodyColor = function(){ + $("#header").removeClass("black") + $("body").css("background-color", "transparent") + } + + base.setWallpaper = { + wall: function(background){ + var img = new Image () + img.onload = function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper(background, img) + }) + }.bind(this) + img.src = background.src + img.complete && img.onload() + } + } + + base.clearWallpaper = { + wall: function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper("none") + }) + } + } base.setColor = { @@ -181,7 +211,6 @@ room.setCeilingColor(rgbColor) }) }, - } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index dd63db2..fae2ce6 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -44,8 +44,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") - $("#header").removeClass("black") - $("body").css("background-color", "transparent") + Walls.clearBodyColor() base.room = null } @@ -61,8 +60,9 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] - $("#header").toggleClass("black", Walls.luminance() < 100) - $("body").css("background-color", rgb_string( Walls.colors.wall )) + if (! base.noclip) { + Walls.setBodyColor() + } app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 2ee88d9..542c99a 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -213,7 +213,7 @@ this.$walls.css("background-color", color) } - Wall.prototype.wallpaper = function(background){ + Wall.prototype.wallpaper = function(background, img){ if (! background) { background = { src: "none" } } @@ -235,7 +235,7 @@ return } - var img = new Image () + img = img || new Image () img.onload = function(){ this.backgroundImage = img this.wallpaperLoad(this.background.src) diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 26358f1..61a7ef6 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -4,9 +4,10 @@ var ColorControl = View.extend({ events: { "mousedown": "stopPropagation", - "click .color-swatches span": "select", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", + "click .color-swatches span": "setSurface", + "click .colors span": "setHue", }, colors: [ @@ -48,16 +49,15 @@ var ColorControl = View.extend({ $swatch.css("background-color","rgb(" + color + ")") $swatch.data('color', color) this.$colors.append($swatch) - }.bind(this)) - + }.bind(this)) }, modes: [ "wall", "outline", "floor", "ceiling" ], load: function(data){ this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) }.bind(this)) this.setMode("wall") }, @@ -134,11 +134,20 @@ var ColorControl = View.extend({ this.$brightnessControl.val( this.labColor[0] ) }, - select: function(e){ + setSurface: function(e){ var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, + setHue: function(e){ + var color = $(e.currentTarget).data('color') + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + + this.pick(color, this.labColor) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index a3dc610..c34c826 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -19,8 +19,9 @@ var Presets = View.extend({ outline: [0,0,0], floor: [109,116,106], ceiling: [159,163,157], + background: [109,116,106], }, - pfunk: { + "p.funk": { wall: [255,63,78], outline: [255,246,0], floor: [255,255,0], @@ -32,10 +33,24 @@ var Presets = View.extend({ floor: [0,0,0], ceiling: [0,0,0], }, + matrix: { + wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] }, + outline: [0,0,0], + floor: [10,15,10], + ceiling: [0,0,0], + }, }, initialize: function(opt){ this.parent = opt.parent + + this.$presets = this.$(".presets") + _.keys(this.presets).forEach(function(name){ + var $swatch = $("") + $swatch.html(capitalize(name)) + $swatch.data('preset', name) + this.$presets.append($swatch) + }.bind(this)) }, toggle: function(state){ @@ -54,9 +69,9 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') + this.load(this.presets[preset]) }, selectColor: function(e){ @@ -64,4 +79,24 @@ var Presets = View.extend({ console.log(preset) }, + lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]}, + load: function(preset){ + this.parent.colorControl.modes.forEach(function(mode){ + if (! preset[mode].length) { + Walls.setWallpaper[mode](preset[mode]) + Walls.setColor[mode](preset[mode].color) + } + else { + if (! this.lastPreset[mode].length) { + Walls.clearWallpaper[mode]() + } + Walls.setColor[mode](preset[mode]) + this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode])) + } + }.bind(this)) + this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor") + Walls.setBodyColor() + this.lastPreset = preset + }, + }) \ No newline at end of file diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d7999b9..bd2d42c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1445,12 +1445,12 @@ border-left: 1px solid black; .wallpaper, #presets { right: 80px; margin-top: 77px; - width: 172px; + width: 202px; -webkit-transition: -webkit-transform 0.1s ease-in-out; -webkit-transform: translateX(400px); transition: transform 0.1s ease-in-out; transform: translateX(400px); - padding: 5px 5px 9px 5px; + padding: 10px 12px 12px 12px; } #presets { @@ -1467,6 +1467,7 @@ border-left: 1px solid black; display: inline-block; border: 1px solid; background-size: contain; + margin: 0 2px 4px 2px; -webkit-transition: -webkit-transform 0.1s ease-in-out; line-height: 0; vertical-align: text-bottom; @@ -1486,7 +1487,7 @@ border-left: 1px solid black; } .vvbox .colors { - max-width: 170px; + max-width: 155px; margin-bottom: 5px; } .vvbox .colors span { @@ -1585,7 +1586,7 @@ border-left: 1px solid black; .colorcontrol { margin-top: 8%; right: 80px; - padding: 13px 20px 20px 20px; + padding: 10px 12px 12px 12px; -webkit-transform: translateX(400px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateX(400px); @@ -1607,8 +1608,8 @@ input[type=range] { -moz-appearance: none; cursor: pointer; background-color: black; - width: 180px; - height:3px; + width: 155px; + height: 3px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; @@ -1702,8 +1703,7 @@ input[type="range"]::-webkit-slider-thumb { margin-bottom:5px; } .color-swatches span.active, .color-swatches span.active:hover{ - background:#000; - color:white; + background: #fff; } .color-swatches span:nth-child(3){ clear:left; @@ -1711,10 +1711,14 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches span:hover { background:#eee; } +.color-swatches span.active label, +.color-swatches span:hover label { + border-bottom: 1px solid; +} .color-swatches label { position: relative; - padding-left: 5px; + margin-left: 5px; display: inline-block; cursor: pointer; } diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 8dd1986..04b1cf1 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,17 +1,5 @@

Preset Styles

- - Inverse - - - Shaded - - - Wireframe - - - P.Funk -
-- cgit v1.2.3-70-g09d2