randomly place images on the walls

5 files changed, 97 insertions, 11 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
new file mode 100644
index 0000000..4f1144a
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
@@ -0,0 +1,77 @@
+/*
+  // get the list of media we want to place
+  var media_data = $(".mediaContainer").toArray().map(function(el){
+    return $(el).data("media")
+  })
+  Scenery.randomize( media_data )
+*/
+
+Scenery.randomize = function (media_data) {
+  var media_list = media_data.map(function(media){
+    var width, height
+    if (media.width > media.height) {
+      width = Math.min(300, media.width)
+      height = media.height/media.width * width
+    }
+    else {
+      height = Math.min(300, media.height)
+      width = media.width/media.height * height
+    }
+    return {
+      dimensions: new vec2( width, height ),
+      media: media,
+    }
+  })
+
+  // get a list of all walls
+  var walls = {}
+  Walls.forEach(function(wall){
+    walls[wall.id] = wall
+  })
+
+  // remove the walls that already have stuff on them
+  Scenery.forEach(function(scenery){
+    delete walls[scenery.wall.id] 
+  })
+
+  var wall_ids = _.keys(walls)
+  if (! wall_ids.length) {
+    return
+  }
+
+  // randomize walls
+  shuffle(wall_ids)
+
+  // assign each of the media to the walls, until we run out of either
+  media_list.some(function(media){
+    if (wall_ids.length == 0) {
+      return true
+    }
+  
+    var i, fits = -1
+
+    for (i = 0; i < wall_ids.length; i++) {
+      if (walls[wall_ids[i]].surface.fits(media.dimensions)) {
+        // walls[wall_ids[i]]
+        fits = i
+        break
+      }
+    }
+
+    if (fits != -1) {
+      var wall = walls[wall_ids[fits]]
+      wall_ids.splice(fits, 1)
+    
+      Scenery.add({
+        media: media.media,
+        wall: wall,
+        index: 0,
+      })
+    }
+    else {
+      // artwork won't fit anywhere??
+    }
+  
+    return false
+  })
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js
index 53977c8..c85682a 100644
--- a/public/assets/javascripts/rectangles/models/surface.js
+++ b/public/assets/javascripts/rectangles/models/surface.js
@@ -36,7 +36,7 @@
 	Surface.prototype.fits = function(v){
 		var faces = this.faces
 		var scratch
-		if (this.bounds.x.b < v.a || this.bounds.y.b < v.b) {
+		if (this.bounds.width() < v.a || this.bounds.height() < v.b) {
 			return null
 		}
 		for (var i = 0; i < faces.length; i++) {
@@ -46,7 +46,7 @@
 		}
 		scratch = new Rect (0,0,0,0)
 		for (var i = 0; i < faces.length; i++) {
-			if (faces[i].y.length() < v.b) {
+			if (faces[i].height() < v.b) {
 				continue
 			}
 			scratch.x.a = faces[i].x.a
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index e2ed341..b51d8f2 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -3,6 +3,7 @@ var MediaViewer = ModalView.extend({
 	el: ".mediaDrawer.mediaViewer",
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
+	loaded: false,
 	
 	events: {
 		'click .foundToggle': "foundToggle",
@@ -19,7 +20,7 @@ var MediaViewer = ModalView.extend({
 		this.$foundMedia = this.$(".foundMedia")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
-	},
+  },
 
 	foundToggle: function(){
     this.$foundMedia.addClass("active");
@@ -52,9 +53,7 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", function(data){
-		  this.populate()
-		}.bind(this))
+		$.get("/api/media/user", this.populate.bind(this))
 	},
 	
 	loadTrending: function(){
@@ -90,11 +89,20 @@ var MediaViewer = ModalView.extend({
 		  if (img.complete && ! loaded) { img.onload() }
 		}.bind(this))
 	},
+	
+	randomize: function(){
+    var media_data = $(".mediaContainer").toArray().map(function(el){
+      return $(el).data("media")
+    })
+    Scenery.randomize( media_data )
+  },
 
 	populate: function(data){
 		this.loaded = true
 		if (data && data.length) {
-		  data.forEach(this.add.bind(this))
+		  data.forEach(function(media){
+		    this.add(media, this.$myMedia)
+		  }.bind(this))
       this.$deleteMedia.show()
 		}
 		else {
@@ -104,7 +112,6 @@ var MediaViewer = ModalView.extend({
 	},
 	
 	add: function(media, $container){
-	  $container = $container || this.$myMedia
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -131,7 +138,7 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		$container.prepend($span)		
+		$container.prepend($span)
 	},
 
 	deleteIsArmed: false,
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 5a89c48..76c5c7b 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -92,9 +92,10 @@ function smoothstep(min,max,n){
 }
 
 function shuffle(a){
+  var r, swap
   for (var i = a.length; i > 0; i--){
-    var r = randint(i)
-    var swap = a[i-1]
+    r = randint(i)
+    swap = a[i-1]
     a[i-1] = a[r]
     a[r] = swap
   }
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 11512b9..349d0d0 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -51,6 +51,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/move.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/resize.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/randomize.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/undo.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/image.js"></script>