server.js

const BODIES = [];
const COLLISIONS = [];

class Vector{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }  
   
    set(x, y){
        this.x = x;
        this.y = y;
    }

    add(v){
        return new Vector(this.x+v.x, this.y+v.y);
    }

    subtr(v){
        return new Vector(this.x-v.x, this.y-v.y);
    }

    mag(){
        return Math.sqrt(this.x**2 + this.y**2);
    }

    mult(n){
        return new Vector(this.x*n, this.y*n);
    }

    normal(){
        return new Vector(-this.y, this.x).unit();
    }

    unit(){
        if(this.mag() === 0){
            return new Vector(0,0);
        } else {
            return new Vector(this.x/this.mag(), this.y/this.mag());
        }
    }

    drawVec(start_x, start_y, n, color){
        ctx.beginPath();
        ctx.moveTo(start_x, start_y);
        ctx.lineTo(start_x + this.x * n, start_y + this.y * n);
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
    }
    
    static dot(v1, v2){
        return v1.x*v2.x + v1.y*v2.y;
    }

    static cross(v1, v2){
        return v1.x*v2.y - v1.y*v2.x;
    }
}

class Matrix{
    constructor(rows, cols){
        this.rows = rows;
        this.cols = cols;
        this.data = [];

        for (let i = 0; i<this.rows; i++){
            this.data[i] = [];
            for (let j=0; j<this.cols; j++){
                this.data[i][j] = 0;
            }
        }
    }

    multiplyVec(vec){
        let result = new Vector(0,0);
        result.x = this.data[0][0]*vec.x + this.data[0][1]*vec.y;
        result.y = this.data[1][0]*vec.x + this.data[1][1]*vec.y;
        return result;
    }

    rotMx22(angle){
        this.data[0][0] = Math.cos(angle);
        this.data[0][1] = -Math.sin(angle);
        this.data[1][0] = Math.sin(angle);
        this.data[1][1] = Math.cos(angle);
    }
}

class Line{
    constructor(x0, y0, x1, y1){
        this.vertex = [];
        this.vertex[0] = new Vector(x0, y0);
        this.vertex[1] = new Vector(x1, y1);
        this.dir = this.vertex[1].subtr(this.vertex[0]).unit();
        this.mag = this.vertex[1].subtr(this.vertex[0]).mag();
        this.pos = new Vector((this.vertex[0].x+this.vertex[1].x)/2, (this.vertex[0].y+this.vertex[1].y)/2);
    }

    draw(color){
        ctx.beginPath();
        ctx.moveTo(this.vertex[0].x, this.vertex[0].y);
        ctx.lineTo(this.vertex[1].x, this.vertex[1].y);
        if (color === ""){
            ctx.strokeStyle = "black";
            ctx.stroke();
        } else {
            ctx.strokeStyle = color;
            ctx.stroke();
        }
        ctx.strokeStyle = "";
        ctx.closePath();
    }
}

class Circle{
    constructor(x, y, r){
        this.vertex = [];
        this.pos = new Vector(x, y);
        this.r = r;
    }

    draw(color){
        ctx.beginPath();
        ctx.arc(this.pos.x, this.pos.y, this.r, 0, 2*Math.PI);
        if (color === ""){
            ctx.strokeStyle = "black";
            ctx.stroke();
        } else {
            ctx.fillStyle = color;
            ctx.fill();
        }
        ctx.fillStyle = "";
        ctx.closePath();
    }
}

class Rectangle{
    constructor(x1, y1, x2, y2, w){
        this.vertex = [];
        this.vertex[0] = new Vector(x1, y1);
        this.vertex[1] = new Vector(x2, y2);
        this.dir = this.vertex[1].subtr(this.vertex[0]).unit();
        this.refDir = this.vertex[1].subtr(this.vertex[0]).unit();
        this.length = this.vertex[1].subtr(this.vertex[0]).mag();
        this.width = w;
        this.vertex[2] = this.vertex[1].add(this.dir.normal().mult(this.width));
        this.vertex[3] = this.vertex[2].add(this.dir.normal().mult(-this.length));
        this.pos = this.vertex[0].add(this.dir.mult(this.length/2)).add(this.dir.normal().mult(this.width/2));
        this.angle = 0;
        this.rotMat = new Matrix(2,2);
    }

    draw(color){
        ctx.beginPath();
        ctx.moveTo(this.vertex[0].x, this.vertex[0].y);
        ctx.lineTo(this.vertex[1].x, this.vertex[1].y);
        ctx.lineTo(this.vertex[2].x, this.vertex[2].y);
        ctx.lineTo(this.vertex[3].x, this.vertex[3].y);
        ctx.lineTo(this.vertex[0].x, this.vertex[0].y);
        if (color === ""){
            ctx.strokeStyle = "black";
            ctx.stroke();
        } else {
            ctx.fillStyle = color;
            ctx.fill();
        }
        ctx.fillStyle = "";
        ctx.closePath();
    }

    getVertices(angle){
        this.rotMat.rotMx22(angle);
        this.dir = this.rotMat.multiplyVec(this.refDir);
        this.vertex[0] = this.pos.add(this.dir.mult(-this.length/2)).add(this.dir.normal().mult(this.width/2));
        this.vertex[1] = this.pos.add(this.dir.mult(-this.length/2)).add(this.dir.normal().mult(-this.width/2));
        this.vertex[2] = this.pos.add(this.dir.mult(this.length/2)).add(this.dir.normal().mult(-this.width/2));
        this.vertex[3] = this.pos.add(this.dir.mult(this.length/2)).add(this.dir.normal().mult(this.width/2));
    }
}

class Triangle{
    constructor(x1, y1, x2, y2, x3, y3){
        this.vertex = [];
        this.vertex[0] = new Vector(x1, y1);
        this.vertex[1] = new Vector(x2, y2);
        this.vertex[2] = new Vector(x3, y3);
        this.pos = new Vector((this.vertex[0].x+this.vertex[1].x+this.vertex[2].x)/3, (this.vertex[0].y+this.vertex[1].y+this.vertex[2].y)/3);
        this.dir = this.vertex[0].subtr(this.pos).unit();
        this.refDir = this.dir;
        this.refDiam = [];
        this.refDiam[0] = this.vertex[0].subtr(this.pos);
        this.refDiam[1] = this.vertex[1].subtr(this.pos);
        this.refDiam[2] = this.vertex[2].subtr(this.pos);
        this.angle = 0;
        this.rotMat = new Matrix(2,2);
    }

    draw(color){
        ctx.beginPath();
        ctx.moveTo(this.vertex[0].x, this.vertex[0].y);
        ctx.lineTo(this.vertex[1].x, this.vertex[1].y);
        ctx.lineTo(this.vertex[2].x, this.vertex[2].y);
        ctx.lineTo(this.vertex[0].x, this.vertex[0].y);
        if (color === ""){
            ctx.strokeStyle = "black";
            ctx.stroke();
        } else {
            ctx.fillStyle = color;
            ctx.fill();
        }
        ctx.fillStyle = "";
        ctx.closePath();
    }

    getVertices(angle){
        this.rotMat.rotMx22(angle);
        this.dir = this.rotMat.multiplyVec(this.refDir);
        this.vertex[0] = this.pos.add(this.rotMat.multiplyVec(this.refDiam[0]));
        this.vertex[1] = this.pos.add(this.rotMat.multiplyVec(this.refDiam[1]));
        this.vertex[2] = this.pos.add(this.rotMat.multiplyVec(this.refDiam[2]));
    }
}

class Body{
    constructor(x, y){
        this.comp = [];
        this.pos = new Vector(x, y);
        this.m = 0;
        this.inv_m = 0;
        this.inertia = 0;
        this.inv_inertia = 0;
        this.elasticity = 1;

        this.friction = 0;
        this.angFriction = 0;
        this.maxSpeed = 0;
        this.color = "";
        this.layer = 0;

        this.up = false;
        this.down = false;
        this.left = false;
        this.right = false;
        this.action = false;

        this.vel = new Vector(0, 0);
        this.acc = new Vector(0, 0);
        this.keyForce = 1;
        this.angKeyForce = 0.1;
        this.angle = 0;
        this.angVel = 0;
        this.player = false;
        BODIES.push(this);
    }

    render(){
        for (let i in this.comp){
            this.comp[i].draw(this.color);
        }
    }
    reposition(){
        this.acc = this.acc.unit().mult(this.keyForce);
        this.vel = this.vel.add(this.acc);
        this.vel = this.vel.mult(1-this.friction);
        if (this.vel.mag() > this.maxSpeed && this.maxSpeed !== 0){
            this.vel = this.vel.unit().mult(this.maxSpeed);
        }
        this.angVel *= (1-this.angFriction);
    }
    keyControl(){}
    remove(){
        if (BODIES.indexOf(this) !== -1){
            BODIES.splice(BODIES.indexOf(this), 1);
        }
    }
}

class Ball extends Body{
    constructor(x, y, r, m){
        super();
        this.pos = new Vector(x, y);
        this.comp = [new Circle(x, y, r)];
        this.m = m;
        if (this.m === 0){
            this.inv_m = 0;
        } else {
            this.inv_m = 1 / this.m;
        }
    }

    setPosition(x, y, a = this.angle){
        this.pos.set(x, y);
        this.comp[0].pos = this.pos;
    }

    reposition(){
        super.reposition();
        this.setPosition(this.pos.add(this.vel).x, this.pos.add(this.vel).y);
    }

    keyControl(){
        if(this.left){
            this.acc.x = -this.keyForce;
        }
        if(this.up){
            this.acc.y = -this.keyForce;
        }
        if(this.right){
            this.acc.x = this.keyForce;
        }
        if(this.down){
            this.acc.y = this.keyForce;
        }
        if(!this.left && !this.right){
            this.acc.x = 0;
        }
        if(!this.up && !this.down){
            this.acc.y = 0;
        }
    }
}

class Capsule extends Body{
    constructor(x1, y1, x2, y2, r, m){
        super();
        this.comp = [new Circle(x1, y1, r), new Circle(x2, y2, r)];
        let recV1 = this.comp[1].pos.add(this.comp[1].pos.subtr(this.comp[0].pos).unit().normal().mult(r));
        let recV2 = this.comp[0].pos.add(this.comp[1].pos.subtr(this.comp[0].pos).unit().normal().mult(r));
        this.comp.unshift(new Rectangle(recV1.x, recV1.y, recV2.x, recV2.y, 2*r));
        this.pos = this.comp[0].pos;
        this.m = m;
        if (this.m === 0){
            this.inv_m = 0;
        } else {
            this.inv_m = 1 / this.m;
        }
        this.inertia = this.m * ((2*this.comp[0].width)**2 +(this.comp[0].length+2*this.comp[0].width)**2) / 12;
        if (this.m === 0){
            this.inv_inertia = 0;
        } else {
            this.inv_inertia = 1 / this.inertia;
        }
    }

    keyControl(){
        if(this.up){
            this.acc = this.comp[0].dir.mult(-this.keyForce);
        }
        if(this.down){
            this.acc = this.comp[0].dir.mult(this.keyForce);
        }
        if(this.left){
            this.angVel = -this.angKeyForce;
        }
        if(this.right){
            this.angVel = this.angKeyForce;
        }
        if(!this.up && !this.down){
            this.acc.set(0, 0);
        }
    }

    setPosition(x, y, a = this.angle){
        this.pos.set(x, y);
        this.angle = a;
        this.comp[0].pos = this.pos;
        this.comp[0].getVertices(this.angle + this.angVel);
        this.comp[1].pos = this.comp[0].pos.add(this.comp[0].dir.mult(-this.comp[0].length/2));
        this.comp[2].pos = this.comp[0].pos.add(this.comp[0].dir.mult(this.comp[0].length/2));
        this.angle += this.angVel;
    }

    reposition(){
        super.reposition();
        this.setPosition(this.pos.add(this.vel).x, this.pos.add(this.vel).y);
    }
}

class Box extends Body{
    constructor(x1, y1, x2, y2, w, m){
        super();
        this.comp = [new Rectangle(x1, y1, x2, y2, w)];
        this.pos = this.comp[0].pos;
        this.m = m;
        if (this.m === 0){
            this.inv_m = 0;
        } else {
            this.inv_m = 1 / this.m;
        }
        this.inertia = this.m * (this.comp[0].width**2 +this.comp[0].length**2) / 12;
        if (this.m === 0){
            this.inv_inertia = 0;
        } else {
            this.inv_inertia = 1 / this.inertia;
        }
    }

    keyControl(){
        if(this.up){
            this.acc = this.comp[0].dir.mult(-this.keyForce);;
        }
        if(this.down){
            this.acc = this.comp[0].dir.mult(this.keyForce);;
        }
        if(this.left){
            this.angVel = -this.angKeyForce;
        }
        if(this.right){
            this.angVel = this.angKeyForce;
        }
        if(!this.up && !this.down){
            this.acc.set(0,0);
        }
    }

    setPosition(x, y, a = this.angle){
        this.pos.set(x, y);
        this.angle = a;
        this.comp[0].pos = this.pos;
        this.comp[0].getVertices(this.angle + this.angVel);
        this.angle += this.angVel;
    }

    reposition(){
        super.reposition();
        this.setPosition(this.pos.add(this.vel).x, this.pos.add(this.vel).y);
    }
}

class Star extends Body{
    constructor(x1, y1, r, m){
        super();
        this.comp = [];
        this.r = r;
        let center = new Vector(x1, y1);
        let upDir = new Vector(0, -1);
        let p1 = center.add(upDir.mult(r));
        let p2 = center.add(upDir.mult(-r/2)).add(upDir.normal().mult(-r*Math.sqrt(3)/2));
        let p3 = center.add(upDir.mult(-r/2)).add(upDir.normal().mult(r*Math.sqrt(3)/2));
        this.comp.push(new Triangle(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y));
        p1 = center.add(upDir.mult(-r));
        p2 = center.add(upDir.mult(r/2)).add(upDir.normal().mult(-r*Math.sqrt(3)/2));
        p3 = center.add(upDir.mult(r/2)).add(upDir.normal().mult(r*Math.sqrt(3)/2));
        this.comp.push(new Triangle(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y));
        this.pos = this.comp[0].pos;
        
        this.m = m;
        if (this.m === 0){
            this.inv_m = 0;
        } else {
            this.inv_m = 1 / this.m;
        }
        this.inertia = this.m * ((2*this.r)**2) / 12;
        if (this.m === 0){
            this.inv_inertia = 0;
        } else {
            this.inv_inertia = 1 / this.inertia;
        }
    }

    keyControl(){
        if(this.up){
            this.acc = this.comp[0].dir.mult(-this.keyForce);
        }
        if(this.down){
            this.acc = this.comp[0].dir.mult(this.keyForce);
        }
        if(this.left){
            this.angVel = -this.angKeyForce;
        }
        if(this.right){
            this.angVel = this.angKeyForce;
        }
        if(!this.up && !this.down){
            this.acc.set(0,0);
        }
    }

    setPosition(x, y, a = this.angle){
        this.pos.set(x, y);
        this.angle = a;
        this.comp[0].pos = this.pos;
        this.comp[1].pos = this.pos;
        this.comp[0].getVertices(this.angle + this.angVel);
        this.comp[1].getVertices(this.angle + this.angVel);
        this.angle += this.angVel;
    }

    reposition(){
        super.reposition();
        this.setPosition(this.pos.add(this.vel).x, this.pos.add(this.vel).y);
   }
}

class Wall extends Body{
    constructor(x1, y1, x2, y2){
        super();
        this.comp = [new Line(x1, y1, x2, y2)];
        this.pos = new Vector((x1+x2)/2, (y1+y2)/2);
    }
}
class CollData{
    constructor(o1, o2, normal, pen, cp){
        this.o1 = o1;
        this.o2 = o2;
        this.normal = normal;
        this.pen = pen;
        this.cp = cp;
    }

    penRes(){
        let penResolution = this.normal.mult(this.pen / (this.o1.inv_m + this.o2.inv_m));
        this.o1.pos = this.o1.pos.add(penResolution.mult(this.o1.inv_m));
        this.o2.pos = this.o2.pos.add(penResolution.mult(-this.o2.inv_m));
    }

    collRes(){
        //1. Closing velocity
        let collArm1 = this.cp.subtr(this.o1.comp[0].pos);
        let rotVel1 = new Vector(-this.o1.angVel * collArm1.y, this.o1.angVel * collArm1.x);
        let closVel1 = this.o1.vel.add(rotVel1);
        let collArm2 = this.cp.subtr(this.o2.comp[0].pos);
        let rotVel2= new Vector(-this.o2.angVel * collArm2.y, this.o2.angVel * collArm2.x);
        let closVel2 = this.o2.vel.add(rotVel2);

        let impAug1 = Vector.cross(collArm1, this.normal);
        impAug1 = impAug1 * this.o1.inv_inertia * impAug1;
        let impAug2 = Vector.cross(collArm2, this.normal);
        impAug2 = impAug2 * this.o2.inv_inertia * impAug2;

        let relVel = closVel1.subtr(closVel2);
        let sepVel = Vector.dot(relVel, this.normal);
        let new_sepVel = -sepVel * Math.min(this.o1.elasticity, this.o2.elasticity);
        let vsep_diff = new_sepVel - sepVel;

        let impulse = vsep_diff / (this.o1.inv_m + this.o2.inv_m + impAug1 + impAug2);
        let impulseVec = this.normal.mult(impulse);

        //3. Changing the velocities
        this.o1.vel = this.o1.vel.add(impulseVec.mult(this.o1.inv_m));
        this.o2.vel = this.o2.vel.add(impulseVec.mult(-this.o2.inv_m));

        this.o1.angVel += this.o1.inv_inertia * Vector.cross(collArm1, impulseVec);
        this.o2.angVel -= this.o2.inv_inertia * Vector.cross(collArm2, impulseVec); 
    }
}

function round(number, precision){
    let factor = 10**precision;
    return Math.round(number * factor) / factor;
}

function randInt(min, max){
    return Math.floor(Math.random() * (max-min+1)) + min;
}

function testCircle(x, y, color="black"){
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2*Math.PI);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
}

function closestPointOnLS(p, w1){
    let ballToWallStart = w1.start.subtr(p);
    if(Vector.dot(w1.dir, ballToWallStart) > 0){
        return w1.start;
    }

    let wallEndToBall = p.subtr(w1.end);
    if(Vector.dot(w1.dir, wallEndToBall) > 0){
        return w1.end;
    }

    let closestDist = Vector.dot(w1.dir, ballToWallStart);
    let closestVect = w1.dir.mult(closestDist);
    return w1.start.subtr(closestVect);
}

function sat(o1, o2){
    let minOverlap = null;
    let smallestAxis;
    let vertexObj;

    let axes = findAxes(o1, o2);
    let proj1, proj2 = 0;
    let firstShapeAxes = getShapeAxes(o1);

    for(let i=0; i<axes.length; i++){
        proj1 = projShapeOntoAxis(axes[i], o1);
        proj2 = projShapeOntoAxis(axes[i], o2);
        let overlap = Math.min(proj1.max, proj2.max) - Math.max(proj1.min, proj2.min);
        if (overlap < 0){
            return false;
        }

        if((proj1.max > proj2.max && proj1.min < proj2.min) ||
          (proj1.max < proj2.max && proj1.min > proj2.min)){
              let mins = Math.abs(proj1.min - proj2.min);
              let maxs = Math.abs(proj1.max - proj2.max);
              if (mins < maxs){
                  overlap += mins;
              } else {
                  overlap += maxs;
                  axes[i] = axes[i].mult(-1);
              }
          }

        if (overlap < minOverlap || minOverlap === null){
            minOverlap = overlap;
            smallestAxis = axes[i];
            if (i<firstShapeAxes){
                vertexObj = o2;
                if(proj1.max > proj2.max){
                    smallestAxis = axes[i].mult(-1);
                }
            } else {
                vertexObj = o1;
                if(proj1.max < proj2.max){
                    smallestAxis = axes[i].mult(-1);
                }
            }
        }  
    };

    let contactVertex = projShapeOntoAxis(smallestAxis, vertexObj).collVertex;

    if(vertexObj === o2){
        smallestAxis = smallestAxis.mult(-1);
    }

    return {
        pen: minOverlap,
        axis: smallestAxis,
        vertex: contactVertex
    }
}


function projShapeOntoAxis(axis, obj){
    setBallVerticesAlongAxis(obj, axis);
    let min = Vector.dot(axis, obj.vertex[0]);
    let max = min;
    let collVertex = obj.vertex[0];
    for(let i=0; i<obj.vertex.length; i++){
        let p = Vector.dot(axis, obj.vertex[i]);
        if(p<min){
            min = p;
            collVertex = obj.vertex[i];
        } 
        if(p>max){
            max = p;
        }
    }
    return {
        min: min,
        max: max, 
        collVertex: collVertex
    }
}

function findAxes(o1, o2){
    let axes = [];
    if(o1 instanceof Circle && o2 instanceof Circle){
        if(o2.pos.subtr(o1.pos).mag() > 0){
            axes.push(o2.pos.subtr(o1.pos).unit());
        } else {
            axes.push(new Vector(Math.random(), Math.random()).unit());
        }        
        return axes;
    }
    if(o1 instanceof Circle){
        axes.push(closestVertexToPoint(o2, o1.pos).subtr(o1.pos).unit());
    }
    if(o1 instanceof Line){
        axes.push(o1.dir.normal());
    }   
    if (o1 instanceof Rectangle){
        axes.push(o1.dir.normal());
        axes.push(o1.dir);
    }
    if (o1 instanceof Triangle){
        axes.push(o1.vertex[1].subtr(o1.vertex[0]).normal());
        axes.push(o1.vertex[2].subtr(o1.vertex[1]).normal());
        axes.push(o1.vertex[0].subtr(o1.vertex[2]).normal());
    }
    if (o2 instanceof Circle){
        axes.push(closestVertexToPoint(o1, o2.pos).subtr(o2.pos).unit());
    }
    if (o2 instanceof Line){
        axes.push(o2.dir.normal());
    }   
    if (o2 instanceof Rectangle){
        axes.push(o2.dir.normal());
        axes.push(o2.dir);
    }
    if (o2 instanceof Triangle){
        axes.push(o2.vertex[1].subtr(o2.vertex[0]).normal());
        axes.push(o2.vertex[2].subtr(o2.vertex[1]).normal());
        axes.push(o2.vertex[0].subtr(o2.vertex[2]).normal());
    }
    return axes;
}

function closestVertexToPoint(obj, p){
    let closestVertex;
    let minDist = null;
    for(let i=0; i<obj.vertex.length; i++){
        if(p.subtr(obj.vertex[i]).mag() < minDist || minDist === null){
            closestVertex = obj.vertex[i];
            minDist = p.subtr(obj.vertex[i]).mag();
        }
    }
    return closestVertex;
}

function getShapeAxes(obj){
    if(obj instanceof Circle || obj instanceof Line){
        return 1;
    }
    if(obj instanceof Rectangle){
        return 2;
    }
    if(obj instanceof Triangle){
        return 3;
    }
}

function setBallVerticesAlongAxis(obj, axis){
    if(obj instanceof Circle){
        obj.vertex[0] = obj.pos.add(axis.unit().mult(-obj.r));
        obj.vertex[1] = obj.pos.add(axis.unit().mult(obj.r));
    }
}

function putWallsAround(x1, y1, x2, y2){
    let edge1 = new Wall(x1, y1, x2, y1);
    let edge2 = new Wall(x2, y1, x2, y2);
    let edge3 = new Wall(x2, y2, x1, y2);
    let edge4 = new Wall(x1, y2, x1, y1);
}

function collide(o1, o2){
    let bestSat = {
        pen: null,
        axis: null,
        vertex: null
    }
    for(let o1comp=0; o1comp<o1.comp.length; o1comp++){
        for(let o2comp=0; o2comp<o2.comp.length; o2comp++){
            if(sat(o1.comp[o1comp], o2.comp[o2comp]).pen > bestSat.pen){
                bestSat = sat(o1.comp[o1comp], o2.comp[o2comp]);
            }
        }
    }
    if (bestSat.pen !== null){
        return bestSat;
    } else {
        return false;
    }
}

function userInteraction(){
    BODIES.forEach((b) => {
        b.keyControl();
    })
}

function gameLogic(){}

function physicsLoop(timestamp) {
    COLLISIONS.length = 0;
    
    BODIES.forEach((b) => {
        b.reposition();
    })
    
    BODIES.forEach((b, index) => {
        for(let bodyPair = index+1; bodyPair < BODIES.length; bodyPair++){
           if((BODIES[index].layer === BODIES[bodyPair].layer ||
               BODIES[index].layer === 0 || BODIES[bodyPair].layer === 0) && 
               collide(BODIES[index], BODIES[bodyPair])){
                    let bestSat = collide(BODIES[index], BODIES[bodyPair]);
                    COLLISIONS.push(new CollData(BODIES[index], BODIES[bodyPair], bestSat.axis, bestSat.pen, bestSat.vertex));
           }
        }
    });

    COLLISIONS.forEach((c) => {
        c.penRes();
        c.collRes();
    });
}

function renderLoop(){
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    BODIES.forEach((b) => {
        b.render();
    })
}

function mainLoop(){
    userInteraction();
    physicsLoop();
    renderLoop();
    gameLogic();
    requestAnimationFrame(mainLoop);
}

function renderOnly(){
    renderLoop();
    requestAnimationFrame(renderOnly);
}


const express = require('express')
const app = express()

const PORT = process.env.PORT || 5500;
app.use(express.static('public'));
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'));

http.listen(PORT, function(){
    console.log(`listening on ${PORT}`);
})

buildStadium();
let playerReg = {};
let serverBalls = {};
let football = {};
let footballPos = {};
let clientNo = 0;
let roomNo;
let gameIsOn = {};

io.on('connection', connected);
setInterval(serverLoop, 1000/60);

function connected(socket){
    clientNo++;
    roomNo = Math.round(clientNo / 2);
    socket.join(roomNo);
    console.log(`New client no.: ${clientNo}, room no.: ${roomNo}`);
    if (clientNo % 2 === 1){
        // player 1
        serverBalls[socket.id] = new Capsule(80, 270, 150, 270, 25, 10);
        serverBalls[socket.id].maxSpeed = 4;
        serverBalls[socket.id].angFriction = 0.01;
        serverBalls[socket.id].angKeyForce = 0.08;
        serverBalls[socket.id].score = 0;
        serverBalls[socket.id].no = 1;
        serverBalls[socket.id].layer = roomNo;
        playerReg[socket.id] = {id: socket.id, x: 115, y: 270, roomNo: roomNo, no: 1};
    }
    else if (clientNo % 2 === 0){
        // player 2
        serverBalls[socket.id] = new Capsule(560, 270, 490, 270, 25, 10);
        serverBalls[socket.id].maxSpeed = 4;
        serverBalls[socket.id].angFriction = 0.01;
        serverBalls[socket.id].angKeyForce = 0.08;
        serverBalls[socket.id].score = 0;
        serverBalls[socket.id].no = 2;
        serverBalls[socket.id].layer = roomNo;
        playerReg[socket.id] = {id: socket.id, x: 525, y: 270, roomNo: roomNo, no: 2};
        football[roomNo] = new Ball(320, 270, 20, 6);
        football[roomNo].layer = roomNo;
        io.emit('updateFootball', {x: football[roomNo].pos.x, y: football[roomNo].pos.y});
    }

    for (let id in serverBalls){
        io.to(serverBalls[id].layer).emit('updateConnections', playerReg[id]);
    }

    socket.on('disconnect', function(){
        if(football[serverBalls[socket.id].layer]){
            football[serverBalls[socket.id].layer].remove();
            delete football[football[serverBalls[socket.id].layer]];
        }
        serverBalls[socket.id].remove();
        io.to(serverBalls[socket.id].layer).emit('deletePlayer', playerReg[socket.id]);
        delete serverBalls[socket.id];
        delete playerReg[socket.id];
        console.log(playerReg);
        console.log(`Number of players: ${Object.keys(playerReg).length}`)
        console.log(`Number of balls: ${Object.keys(football).length}`)
        console.log(`Number of BODIES: ${BODIES.length-12}`);
        console.log(`Joined players ever: ${clientNo}`)
        io.emit('updateConnections', playerReg);
    })

    console.log(playerReg);
        console.log(`Number of players: ${Object.keys(playerReg).length}`)
        console.log(`Number of balls: ${Object.keys(football).length}`)
        console.log(`Number of BODIES: ${BODIES.length-12}`);
        console.log(`Joined players ever: ${clientNo}`)

    socket.on('userCommands', data => {
        serverBalls[socket.id].left = data.left;
        serverBalls[socket.id].up = data.up;
        serverBalls[socket.id].right = data.right;
        serverBalls[socket.id].down = data.down;
        serverBalls[socket.id].action = data.action;
    })

    socket.on('clientName', data => {
        serverBalls[socket.id].name = data;
        console.log(`${data} is in room no.${serverBalls[socket.id].layer}`);
        if (playersReadyInRoom(serverBalls[socket.id].layer) === 2){
            for (let id in serverBalls){
                if(serverBalls[id].layer === serverBalls[socket.id].layer){
                    io.to(serverBalls[id].layer).emit('playerName', {id: id, name: serverBalls[id].name});
                }
            }
            gameIsOn[serverBalls[socket.id].layer] = true;
        } else {
            gameIsOn[serverBalls[socket.id].layer] = false;
        }
    })
}

function serverLoop(){
    userInteraction();
    physicsLoop();
    for (let room = 1; room <= roomNo; room++){
        if (gameIsOn[room] === true){
            gameLogic(room);
            for (let id in serverBalls){
                if (serverBalls[id].layer === room){
                    io.to(room).emit('positionUpdate', {
                        id: id,
                        x: serverBalls[id].pos.x,
                        y: serverBalls[id].pos.y,
                        angle: serverBalls[id].angle
                    });
                }
            }
            io.to(room).emit('updateFootball', {
                x: football[room].pos.x,
                y: football[room].pos.y
            });
        } else {
        }
    }
}

function gameLogic(room){
    if(football[room].pos.x < 45 || football[room].pos.x > 595){
        scoring(room);
    }
    for(let id in serverBalls){
        if(serverBalls[id].score === 3 && serverBalls[id].layer === room){
            gameOver(room);
        }
    }
}

function gameOver(room){
    gameSetup(room);
    io.to(room).emit('updateScore', null);
    setTimeout(() => {
        for(let id in serverBalls){
            if(serverBalls[id].layer === room){
                serverBalls[id].score = 0;
            }
        }
    }, 2000);
}

function scoring(room){
    let scorerId;
    if(football[room].pos.x < 45){
        for(let id in serverBalls){
            if (serverBalls[id].no === 2 && serverBalls[id].layer === room){
                serverBalls[id].score++;
                scorerId = id;
                console.log("score for player 2!");
            }
        }
    }
    if(football[room].pos.x > 595){
        for(let id in serverBalls){
            if (serverBalls[id].no === 1 && serverBalls[id].layer === room){
                serverBalls[id].score++;
                scorerId = id;
                console.log("score for player 1!");
            }
        }
    }
    gameSetup(room);
    io.to(room).emit('updateScore', scorerId);
}

function gameSetup(room){
    for(let id in serverBalls){
        if (serverBalls[id].no === 1 && serverBalls[id].layer === room){
            serverBalls[id].vel.set(0, 0);
            serverBalls[id].angVel = 0;
            serverBalls[id].setPosition(115, 270, 0);
        }
        if (serverBalls[id].no === 2 && serverBalls[id].layer === room){
            serverBalls[id].vel.set(0, 0);
            serverBalls[id].angVel = 0;
            serverBalls[id].setPosition(525, 270, 0);
        }
    }
    football[room].pos.set(320, 270);
    football[room].vel.set(0, 0);
}

function buildStadium(){
    new Wall(60, 80, 580, 80);
    new Wall(60, 460, 580, 460);

    new Wall(60, 80, 60, 180);
    new Wall(60, 460, 60, 360);
    new Wall(580, 80, 580, 180);
    new Wall(580, 460, 580, 360);

    new Wall(50, 360, 10, 360);
    new Wall(0, 360, 0, 180);
    new Wall(10, 180, 50, 180);
    new Wall(590, 360, 630, 360);
    new Wall(640, 360, 640, 180);
    new Wall(630, 180, 590, 180);
}

function playersReadyInRoom(room){
    let pno = 0;
    for (let id in serverBalls){
        if(serverBalls[id].layer === room && serverBalls[id].name){
            pno++;
        }
    }
    return pno;
}