import canvas from 'canvas';

export default {
  isOutOfBounds: function(prop) {
    return (
      prop.y === canvas.height ||
      prop.y === 0 ||
      prop.x === canvas.width ||
      prop.x === 0
    );
  },

  isColliding: function(prop1, prop2) {
    // Axis-Aligned Bounding Box Collision Detection
    // https://www.youtube.com/watch?v=ghqD3e37R7E

    // I need to not mutate data. Just want it in scope of here.
    prop1.foo = 2;


    const AX = prop1.x + prop1.width;
    const AY = prop1.y + prop1.height;

    const BX = prop2.x + prop2.width;
    const BY = prop2.y + prop2.height;

    const onSameYAxis = (AY >= prop2.y && AY <= BY) || (prop1.y >= prop2.y && prop1.y <= BY);
    const onSameXAxis = (AX >= prop2.x && AX <= BX) || (prop1.x >= prop2.x && prop1.x <= BX);

    return onSameYAxis && onSameXAxis;

    // Not sure if this is more easy to reason about. Leaving here for now.
    // return !(
    //   AX < prop2.x ||
    //   BX < prop1.x ||
    //   AY < prop2.y ||
    //   BY < prop1.y
    // );
  },

  // Detect when hit left / right hand canvas side
  // Detect when hit top / bottom canvas side
  // Detect when object touches other object.
};

@@ -78,61 +78,91 @@
 ) %7B%0A
+%0A
     
-return (%0A      prop.y === canvas
+const AX = prop.x + prop.width;%0A    const AY = prop.y + prop
 .height
- %7C%7C
+;%0A
 %0A    
-  
+if (
 prop
@@ -173,51 +173,169 @@
 == 0
- %7C%7C
+) %7B
 %0A      
-prop.x === canvas.width %7C%7C%0A      
+return 'north';%0A    %7D%0A%0A    if (AY === canvas.height) %7B%0A      return 'south';%0A    %7D%0A%0A    if (AX === canvas.width) %7B%0A      return 'east';%0A    %7D%0A%0A    if (
 prop
@@ -346,14 +346,56 @@
 == 0
+) %7B
 %0A    
-)
+  return 'west';%0A    %7D%0A%0A    return false
 ;%0A  

Update out of bounds function to return the side of the canvas hit