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();
const textContainer = new PIXI.Container();

app.stage.addChild(emojiContainer);
app.stage.addChild(textContainer);

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;
      hurt(status);
    }
  }
}

function hurt(status) {
  if(status === 'top') {
    const containerEffect  = new PIXI.Container();
    const graphics = new PIXI.Graphics();
    const startText = new PIXI.Text('1000',{
      fill: 0xDDD00D,
    });
    // graphics.lineStyle(5, 0x000000, 1);
    graphics.beginFill(0x9D482E);
    graphics.drawStar(0, 0, 10, 100);
    graphics.endFill();
    
    graphics.x = getRandom(150);
    graphics.y = getRandom(150);
    
    startText.x = graphics.x - startText.width / 2;
    startText.y = graphics.y - startText.height / 2;
    
    containerEffect.addChild(graphics);
    containerEffect.addChild(startText);
    
    app.stage.addChild(containerEffect);
    
    removeContainer(containerEffect);
  }
}

function getRandom(x){
  return Math.floor(Math.random()*x)+1;
};


function removeContainer(item) {
  const s = setInterval(() => {
    item.alpha -= 0.05;
  },100);
  setTimeout(() => {
    clearInterval(s);
    app.stage.removeChild(item);
  },10000);
}

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;
}