const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
  console.log('Done');
  init(resource);
})

const emojiContainer = new PIXI.Container();

app.stage.addChild(emojiContainer);

function init(item) {
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  emojiContainer.addChild(sprite);
  sprite.vy = 5;
  app.ticker.add((delta) => {
    tickerLoop(delta);
  })
  function tickerLoop(delta) {
    sprite.y += sprite.vy;
    let status = contain(sprite, {x: 28, y: 0, width: 488, height: 480});
    if(status === 'top' || status === 'bottom') {
      sprite.vy *= -1;
    }
  }
}



function contain(sprite, container) {
  let collision = undefined;
  //Left
  if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
  }
  //Top
  if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
  }
  //Right
  if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
  }
  //Bottom
  if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
  }
  //Return the `collision` value
  return collision;
}