var widthSqrs = 10, heightSqrs = 15,
    sqrSize = 28, bolaSpeed = sqrSize*0.5, bolaR = sqrSize*0.15,
    minX = 0, maxX = widthSqrs*sqrSize,
    minY = 0, maxY = heightSqrs*sqrSize;
var wait = ms => new Promise((r, j)=>setTimeout(r, ms));

var ntypes = 9, types = [
  {
    "name": "square",
    "polygon": [[0,0],[1,0],[1,1],[0,1],[0,0]],
    offsety: 0,
    offsetx: 0
  },
  {
    "name": "diamond",
    "polygon": [[0.5,0], [1,0.5], [0.5,1], [0,0.5], [0.5,0]],
    offsety: 0,
    offsetx: 0
  },
  {
    "name": "hex",
    "polygon": [[0.3,0], [0.7,0], [1,0.5], [0.7,1], [0.3,1], [0,0.5],[0.3,0]],
    offsety: 0,
    offsetx: 0
  },
  {
    "name": "triangle",
    "polygon": [[0.45,0],[0.55,0], [1,0.95], [0.95,1], [0.05,1], [0, 0.95], [0.45,0]],
    offsety: 5,
    offsetx: 0
  },
  {
    "name": "triangle",
    "polygon": [[0,0], [1,0], [0.55,1], [0.45,1], [0,0]],
    offsety: -5,
    offsetx: 0
  },
  {
    "name": "triangle",
    "polygon": [[0,0], [1,0.45], [1,0.55], [0,1], [0,0]],
    offsety: 0,
    offsetx: -5
  },
  {
    "name": "triangle",
    "polygon": [[0,0.55], [0,0.45], [1,0], [1,1], [0,0.55]],
    offsety: 0,
    offsetx: 5
  },
  {
    "name": "triangle",
    "polygon": [[0,0], [1,1], [0,1], [0,0]],
    offsety: 5,
    offsetx: -5
  },
  {
    "name": "triangle",
    "polygon": [[0,0], [1,0], [1,1], [0,0]],
    offsety: -7,
    offsetx: 5
  },
  {
    "name": "triangle",
    "polygon": [[0,0], [1,0], [0,1], [0,0]],
    offsety: -7,
    offsetx: -5
  },
  {
    "name": "triangle",
    "polygon": [[1,0], [1,1], [0,0], [1,0]],
    offsety: -14,
    offsetx: 6
  }
]

var vueInstance = new Vue({
  el: '#output',
  data: function () {
    var bolas = [];
    for (var i = 0; i<=20; i++) 
      bolas.push(this.genBola());
    return {
      lost: false,
      enemies: [], bolas: bolas,
      rowOffset: 0,
      probSquare: 0.4,
      minBoxValue: 5,
      maxBoxValue: 5,
      mX: 0, mY: 0, mouseOver: false,
      throwing: false
    };
  },
  computed: {
  },
  methods: {
    genBola () {
      return {
          x: maxX/2, y: maxY-bolaR-15,
          dx: 0, dy: 0,
          flying: false
      };
    },
    init () {
      this.svg = document.getElementById("svg-output");
      this.svgPoint = this.svg.createSVGPoint();
      this.$delete(this, "enemies");
      this.$data.rowOffset = 0;
      this.$data.probSquare = 0.4;
      this.$data.minBoxValue = 3;
      this.$data.maxBoxValue = 10;
      this.$data.lost = false;
      this.$data.throwing = false;
      this.$set(this, "enemies", []);
      for(var i=0; i< 5; i++) vueInstance.insertRow()
      var bolas = [];
      for (var i = 0; i<=20; i++) 
        bolas.push(this.genBola());
      this.$data.bolas = bolas;
    },
    pause () {
      stop = !stop;
    },
    hitBox (box) {
      box.n -= 1;
    },
    bolasTick () {
      var that = this,
          nextLevel = false;
      this.$data.bolas.forEach((bola) => {
        if (bola.flying && Math.abs(bola.dy) < 1) bola.dy = bola.dy>0?1:-1;
        if (bola.dx!=0 || bola.dy!=0) {
          var cx = bola.x + bola.dx,
              cy = bola.y + bola.dy;  
          // Collision with box
          // We are simplifying this and limiting the collisions to the grid only,
          // and to the 3 enemies in the direction of the ball movement.
          var row = that.$data.rowOffset - Math.floor(bola.y/sqrSize), column = Math.floor(bola.x/sqrSize), 
              nearCols = [column, column+1, column-1], 
              nearRows = [row, row+1, row-1],
              boxes = that.$data.enemies.filter((e) => {
                    return e.n > 0 && e.column >= column-1 && e.column <= column+1  && e.row >= row-1 && e.row <= row+1; });
          
          var sboxes = boxes.map((box) => {
            var retPol = new SAT.Polygon(new SAT.Vector(box.column*sqrSize, (that.$data.rowOffset - box.row)*sqrSize), box.type.polygon.slice(0,box.type.polygon.length-1).map(function (point) {
              return new SAT.Vector(point[0]*sqrSize, point[1]*sqrSize);
            }));
            return retPol;
          });
          // if any
          if (sboxes.length>0) {
            // make 4 balls and evaluate them in order to detect collisions in the move trajetctory 
            var sbolas = [1,2,3,4].map((i) => {
                  return new SAT.Circle(new SAT.Vector(bola.x + bola.dx*0.25*i,
                                                bola.y + bola.dy*0.25*i), bolaR)
                }),
                overlap = null, response = null;
            
            sbolas.forEach((bola, i)=> {
              if (overlap) return;
              sboxes.forEach((box, j)=> {
                if (overlap) return;
                response = new SAT.Response();
                if (SAT.testCirclePolygon(bola, box, response)) {
                  overlap = { bolaIndex: i, boxIndex: j, response: response };
                }
              });
            });
  
            if (overlap !== null) {
              that.hitBox(boxes[overlap.boxIndex]);
              cx = bola.x + bola.dx*0.25*(overlap.bolaIndex+1) - overlap.response.overlapV.x;
              cy = bola.y + bola.dy*0.25*(overlap.bolaIndex+1) - overlap.response.overlapV.y;
              var d_n_norm = bola.dx * overlap.response.overlapN.x + bola.dy * overlap.response.overlapN.y;
              if (d_n_norm > 0) {
                bola.dx = bola.dx - 2 * d_n_norm * overlap.response.overlapN.x;
                bola.dy = bola.dy - 2 * d_n_norm * overlap.response.overlapN.y;
              }
            }
          }
          
          // Collision with walls
          if (cx-bolaR < minX)      {cx = minX+bolaR; bola.dx *= -1;}
          else if (cx+bolaR > maxX) {cx = maxX-bolaR; bola.dx *= -1;}
          if (cy-bolaR < minY)      {cy  = minY+bolaR; bola.dy *= -1;}
          else if (cy+bolaR > maxY-15) {
            cy = maxY-bolaR-15; bola.dy *= -1;
            bola.dx = 0; bola.dy = 0;
            bola.flying = false;
            if (this.$data.throwing && ! this.$data.bolas.reduce( (acc, bola) => { return bola.flying || acc; }, false ) )
              nextLevel = true;
          }
            
          bola.x = cx;
          bola.y = cy;
        }
      });
      if (nextLevel) this.nextLevel();
    },
    nextLevel () {
      this.$data.throwing = false;
      this.$data.maxBoxValue += 1;
      //this.$data.minBoxValue += this.$data.minBoxValue< 20? 1:0;
      this.$data.probSquare = this.$data.probSquare<0.6 ? this.$data.probSquare * 1.05 : 0.6;
      var that = this;
      if (this.$data.bolas.length < 50)
        this.$data.bolas.push(this.genBola());
      this.$data.bolas.forEach((bola)=> {
        bola.x = that.$data.bolas[that.$data.bolas.length-1].x;
      });
      this.insertRow();
      if (this.$data.enemies.filter((box) => {
            return box.row <= this.$data.rowOffset-heightSqrs+2 && box.n > 0;
          }).length > 0)
        this.loose();
      this.$data.enemies = this.$data.enemies.filter((box) => {
            return box.row > this.$data.rowOffset-heightSqrs+1 && box.n > 0;
          });
    },
    loose () {
      this.lost = true;
    },
    async throwBolas () {
      var mx = this.$data.mX, my = this.$data.mY;
      if (this.$data.throwing) return;
      if (this.$data.mY > maxY-25-bolaR) return;
      this.$data.throwing = true;
      for (var i = 0; i< this.$data.bolas.length; i++) {
        var x = mx - this.$data.bolas[i].x,
            y = my - this.$data.bolas[i].y,
            d = Math.sqrt(x*x + y*y);
      
        this.$data.bolas[i].dx = bolaSpeed*x/d;
        this.$data.bolas[i].dy = bolaSpeed*y/d;
        this.$data.bolas[i].flying = true;
        await wait(50);
      }
    },
    insertRow () {
      this.$data.rowOffset += 1;
      var multiplier = 1;
      if (this.$data.rowOffset > 20) multiplier = 2*Math.random();
      for(var i = 0; i<widthSqrs; i++) {
        if (Math.random() < this.$data.probSquare*multiplier ) {
          var type = Math.random()<0.6? types[0] : types[Math.floor(ntypes*Math.random())];
          this.$data.enemies.push({
            row: this.$data.rowOffset,
            n : parseInt(this.$data.minBoxValue+this.$data.maxBoxValue*Math.random()),
            column: i,
            type: type
          })
        }
      }
    },
    beginUpdateTrigger (event) {
      if (this.$data.lost) return;
      
      this.$data.mouseOver = true;
      event.preventDefault();
      this.updateTrigger(event);
    },
    endUpdateTrigger (event) {
      this.$data.mouseOver = false;
      event.preventDefault();
      if (this.$data.lost) return;

      this.throwBolas();
    },
    updateTrigger  (event) {
      if (!this.$data.mouseOver) return;
      event.preventDefault();
      if (event.touches && event.touches.length) {
        this.svgPoint.x = event.touches[0].clientX; 
        this.svgPoint.y = event.touches[0].clientY;
      }
      else {
        this.svgPoint.x = event.offsetX; 
        this.svgPoint.y = event.offsetY;
      }
      var svgP = this.svgPoint.matrixTransform(this.svg.getScreenCTM().inverse());
      this.$data.mX = svgP.x;
      this.$data.mY = svgP.y;
    }
  }
});

var rowDelay = 10000, lastRowTime = -1, deltaTime = 20, timer = 0, stop = false;
function tick() {
  if (stop) return;
  
  timer += deltaTime;

  vueInstance.bolasTick();
  
}
vueInstance.init();
setInterval(tick, deltaTime)