tj · thinkt4nk · Aug 31, 2011 · Aug 31, 2011 · Aug 31, 2011 · Aug 31, 2011
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+*.swp
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="public/style.css">
     <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
     <script src="public/move.js"></script>
-    <!-- <script src="public/tools.js"></script> -->
+    <script src="public/tools.js"></script>
     <script src="public/game.js"></script>
   </head>
   <body>
@@ -35,6 +35,7 @@
       <div id="guy-eye-right-bounds"><div id="guy-eye-right"></div></div>
       <div id="guy-shadow"></div>
     </div>
+    <div id="cat_box"></div>
     <div id="cat"></div>
   </body>
-</html>
+</html>
diff --git a/public/game.js b/public/game.js
@@ -1,5 +1,5 @@
 
-var o = $
+  var o = $
   , min = Math.min
   , max = Math.max;
 
@@ -13,6 +13,17 @@ o(function(){
     move('#cat')
       [dirx]('left', Math.random() * 30 | 0)
       [diry]('top', Math.random() * 30 | 0)
+      /*
+      // will translate to top attr
+      .contain({
+        bottom : '+30-50' 
+      })
+      // maintain cat at least 430px and no more than 460px from top
+      .contain({
+        top : '+430-460' 
+      })
+      */
+      .contain('#cat_box')
       .duration('1s')
       .ease('out')
       .then()
@@ -108,6 +119,10 @@ o(function(){
     , dx = 10
     , dy = 2;
 
+  cat.click(function() {
+    alert('mrrrrrow');
+  });
+
   var go = guy.offset()
     , gox = go.left
     , goy = go.top;
@@ -156,4 +171,4 @@ o(function(){
     prev = e;
     lookat(e.clientX, e.clientY);
   });
-});
+});
diff --git a/public/move.js b/public/move.js
@@ -1,4 +1,3 @@
-
 /*!
  * move
  * Copyright(c) 2011 TJ Holowaychuk <tj@vision-media.ca>
@@ -288,7 +287,7 @@
    */
 
   Move.prototype.scaleX = function(n){
-    return this.transform('scaleX(' + n + ')')
+    return this.transform('scaleX(' + n + ')');
   };
 
   /**
@@ -300,7 +299,7 @@
    */
 
   Move.prototype.scaleY = function(n){
-    return this.transform('scaleY(' + n + ')')
+    return this.transform('scaleY(' + n + ')');
   };
 
   /**
@@ -379,6 +378,33 @@
     return this;
   };
 
+  /*
+   * Checks if position property is set
+   *
+   * @param {String} prop
+   */
+  Move.prototype.hasPositionProperty = function(prop) {
+    if( prop === 'top' || prop === 'bottom' )
+    {
+      return 'undefined' !== typeof this._props['top'] || 'undefined' !== typeof this._props['bottom'];
+    }
+    if( prop === 'left' || prop === 'right' )
+    {
+      return 'undefined' !== typeof this._props['left'] || 'undefined' !== typeof this._props['right'];
+    }
+  };
+
+  /*
+   * Gets the value of a position property
+   *
+   * @param {String} prop
+   */
+  Move.prototype.getPositionProperty = function(prop) {
+    if( typeof this._props[prop] !== 'undefined' ) {
+      return this._props[prop];
+    }
+  };
+
   /**
    * Set a vendor prefixed `prop` with the given `val`.
    *
@@ -413,6 +439,199 @@
     return this;
   };
 
+  /*
+   * Set containment for Move object
+   *
+   * @param {Object} container
+   */
+  Move.prototype.contain = function(container)
+  {
+    if( typeof container === 'string' )
+    {
+      // selector containment
+      var container = $(container);
+      if( container.length > 0 )
+      {
+        var offset = container.offset()
+          , left = offset.left
+          , top = offset.top
+          , right = left + container.width()
+          , bottom = top + container.height()
+          ;
+
+        this.contain({
+          left : '+' + left + '-' + right,
+          top : '+' + top + '-' + bottom,
+        });
+      }
+    }
+    else if( typeof container === 'object' ) {
+      if( typeof container.top !== 'undefined' ) {
+        this.setContainment('top',container.top);
+      }
+      if( typeof container.right !== 'undefined' ) {
+        this.setContainment('right',container.right);
+      }
+      if( typeof container.bottom !== 'undefined' ) {
+        this.setContainment('bottom',container.bottom);
+      }
+      if( typeof container.left !== 'undefined' ) {
+        this.setContainment('left',container.left);
+      }
+    }
+    this.on('start',function() {
+      this.getContainment().applyContainment(this)
+    }.bind(this));
+    // return for chaining
+    return this;
+  };
+
+  /*
+   * Containment constructor, class for containing moving objects
+   *
+   */
+  Containment = function() {
+    // stub
+  };
+
+  /*
+   * Set containment property
+   *
+   * @param {String} prop
+   * @param {String} val
+   */
+  Containment.prototype.set = function(prop,val) {
+    var _prop = this._prop || {};
+    _prop[prop] = val;
+    this._prop = _prop;
+    return this;
+  };
+
+  /*
+   * Apply containment for each containment property, allows for competing constraints for single properties, as well
+   *
+   * @param {Move} move
+   * TODO: Allow for competing, converse properties when only a single property is set for x and y
+   */
+  Containment.prototype.applyContainment = function(move) {
+    $.each(this._prop, function(prop, val) {
+      if( move.hasPositionProperty(prop) ) {
+        var operations = {};
+        operations[val[0]] = {
+          value : parseInt(val.split('').slice(1).join('')),
+          prop : prop
+        };
+        // two constraints
+        var split_vals = val.split(/[\+\-]/);
+        if( split_vals.length > 2 )
+        {
+          var second_attr = (val.indexOf('+') > val.indexOf('-')) ? '+' : '-';
+          operations = {};
+          operations[val[0]] = {
+            value : split_vals[1],
+            prop : prop
+          };
+          operations[second_attr] = {
+            value : split_vals[2],
+            prop : prop
+          };
+        }
+        $.each(operations, function(operator, operation) {
+          this.applyPropertyContainment(move,operator,operation.prop,operation.value);
+        }.bind(this));
+      }
+    }.bind(this));
+  };
+
+  Containment.prototype.applyPropertyContainment = function(move,operator,prop,value)
+  {
+    var move_position = move.translatePosition(prop,value);
+    if( operator === '+' )
+    {
+      // apply greater than
+      if( move_position.el_value < move_position.dest_value )
+      {
+        console.log(move_position.el_value + ' < ' + move_position.dest_value);
+        move.set(move_position.property,move_position.dest_value);
+      }
+    }
+    else if( operator === '-' )
+    {
+      // apply less than
+      if( move_position.el_value > move_position.dest_value )
+      {
+        console.log(move_position.el_value + ' > ' + move_position.dest_value);
+        move.set(move_position.property,move_position.dest_value);
+      }
+    }
+  }
+
+  Move.prototype.translatePosition = function(prop,value)
+  {
+    if (typeof this._props[prop] !== 'undefined') {
+      // return as-is
+      return {
+        property: prop,
+        dest_value: value,
+        el_value: parseInt(this.getPositionProperty(prop).replace(/(.*)px$/,'$1'))
+      };
+    }
+    else {
+      // translate
+      var object_attr = (prop === 'top' || prop === 'bottom') ? 'height' : 'width';
+      // set converse property
+      var property = 'top';
+      if( prop !== 'bottom' )
+      {
+        if( $.inArray(prop,['left','right']) )
+        {
+          property = (prop === 'left') ? 'right' : 'left';
+        } else {
+          property = 'bottom';
+        }
+      }
+      var window_val = $(document)[object_attr]();
+      console.log([window_val,document]);
+      var object_val = $(this.el)[object_attr]();
+      var converse_el_val = parseInt(this.getPositionProperty(property).replace(/(.*)px$/,'$1'));
+      var translated_el_val =  window_val - converse_el_val - object_val;
+      var translated_dest_val = window_val - value - object_val;
+      console.log('converting ' + prop + ':' + converse_el_val + ' => ' + translated_el_val + ', window:' + window_val + ',object:' + object_val);
+      console.log('converting ' + property + ':' + value + ' => ' + translated_dest_val + ', window:' + window_val + ',object:' + object_val);
+      return {
+        property: property,
+        el_value: translated_el_val,
+        dest_value: translated_dest_val
+      }
+    }
+  }
+
+  /**
+   * Get containment singleton
+   *
+   * @api public
+   */
+  Move.prototype.getContainment = function()
+  {
+    if( 'undefined' === typeof this._containment )
+    {
+      this._containment = new Containment;
+    }
+    return this._containment;
+  }
+
+  /**
+   * Set containment property
+   *
+   * @param {String} prop
+   * @param {String} val
+   * @return {Containment} for chaining
+   */
+  Move.prototype.setContainment = function(prop, val)
+  {
+    return this.getContainment().set(prop,val);
+  };
+
   /**
    * Increment `prop` by `val`, deferred until `.end()` is invoked
    * and adds the property to the list of transition props.
@@ -536,6 +755,7 @@
     // chain
     } else {
       var clone = new Move(this.el);
+      // inherit transforms, not sure why
       clone._transforms = this._transforms.slice(0);
       this.then(clone);
       clone.parent = this;

diff --git a/public/style.css b/public/style.css
@@ -82,6 +82,25 @@ body {
   background: url(images/hill-1.png) no-repeat;
   z-index: 10;
 }
+/*
+#cat {
+  position: absolute;
+  top: 440px;
+  left: 540px;
+  width: 53px;
+  height: 60px;
+  background: url(images/cat.png) no-repeat;
+  z-index: 20;
+}
+*/
+#cat_box {
+  position: absolute;
+  top: 400px;
+  left: 500px;
+  width: 400px;
+  height: 200px;
+  border:1px solid red;
+}
 #cat {
   position: absolute;
   top: 440px;
@@ -183,4 +202,4 @@ body {
 }
 .grass {
   -webkit-animation: wind 5s alternate infinite;
-}
+}