const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement('div');
Object.assign(ballDiv.style, {
  position: 'absolute',
  left: '0',
  top: '0',
});
container.appendChild(ballDiv);

const Game = {
  width: screenWidth,
  height: screenHeight,
  ball: {
      x: 50,
      y: 50,
      dx: 1,
      dy: 1,
      size: 20,
  },
  tick() {
      this.ball.x += this.ball.dx;
      this.ball.y += this.ball.dy;
  },
  draw() {
      const b = this.ball;
      ballDiv.style.boxShadow = `${b.x}px ${b.y}px 0 ${b.size/2}px #fff`;
  }
};

function universe() {
  Game.tick();
  Game.draw();
  frameId = requestAnimationFrame(universe)
}

universe();
container.addEventListener('unload', () => cancelAnimationFrame(frameId))

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});

const Game = {
  width: screenWidth,
  height: screenHeight,
  balls: [],
  addBall(x = this.width / 2, y = this.height / 2, speed = 8) {
    const angle = Math.random() * 2 * Math.PI;
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 20,
    });
  },
  tick() {
    const { width: w, height: h } = this;
    this.balls.forEach((b) => {
      b.x += b.dx;
      b.y += b.dy;
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x -= b.dx;
        b.dx *= -1;
      }
      if (b.y + b.size / 2 > h || b.y < b.size / 2) {
        b.y -= b.dy;
        b.dy *= -1;
      }
    });
  },
  draw() {
    ballDiv.style.boxShadow = this.balls
      .map((b) => `${b.x}px ${b.y}px 0 ${b.size / 2}px #fff`)
      .join();
  },
};

Game.addBall();
Game.addBall();
Game.addBall();

function universe() {
  Game.tick();
  Game.draw();
  frameId = requestAnimationFrame(universe);
}

universe();
container.addEventListener('unload', () => cancelAnimationFrame(frameId))

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement('div');
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: 'absolute',
  left: '0',
  top: '0',
});
const brickDiv = document.createElement('div');
container.appendChild(brickDiv);
const BRICK_SIZE = [60, 15];
Object.assign(brickDiv.style, {
  position: 'absolute',
  borderRadius: '2px',
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const Game = {
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  addBall(x = this.width / 2, y = this.height / 2, speed = 8) {
    const angle = 75 *(Math.PI / 180);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle)*speed,
      dy: Math.sin(angle)*speed,
      size: 10,
    });
  },
  addBrick(x = this.width / 2, y = this.height / 2) {
    this.bricks.push({
      x,
      y,
    });
  },
  tick() {
    const {width: w, height: h} = this;
    this.balls.forEach((b) => {
      b.x += b.dx;
      b.y += b.dy;
      if (b.x + b.size/2 > w || b.x < b.size/2) {
          b.x -= b.dx;
          b.dx *= -1;
      }
      if (b.y + b.size/2 > h || b.y < b.size/2) {
          b.y -= b.dy;
          b.dy *= -1;
      }
    });
  },
  draw() {
    ballDiv.style.boxShadow = this.balls.map(b => `${b.x}px ${b.y}px 0 ${b.size/2}px #fff`).join();

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks.map(b => `${b.x + bW/2}px ${b.y +bH/2}px 0 0 #fff`).join();
  }
};

Game.addBall(60, Game.height - 60);
Game.addBrick();

function universe() {
  Game.tick();
  Game.draw();
  frameId = requestAnimationFrame(universe);
}

universe();
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement('div');
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: 'absolute',
  left: '0',
  top: '0',
});
const brickDiv = document.createElement('div');
container.appendChild(brickDiv);
const BRICK_SIZE = [60, 15];
Object.assign(brickDiv.style, {
  position: 'absolute',
  borderRadius: '2px',
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const Game = {
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  addBall(x = this.width / 2, y = this.height / 2, speed = 6) {
    const angle = -78 * (Math.PI / 180);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
    });
  },
  addBrick(x = this.width / 2, y = this.height / 2) {
    this.bricks.push({
      x,
      y,
    });
  },
  tick() {
    const { width: w, height: h } = this;
    this.balls.forEach((b) => {
      b.x += b.dx;
      b.y += b.dy;
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x -= b.dx;
        b.dx *= -1;
      }
      if (b.y + b.size / 2 > h || b.y < b.size / 2) {
        b.y -= b.dy;
        b.dy *= -1;
      }

      const [brickWidth, brickHeight] = BRICK_SIZE;
      const ballL = b.x - b.size / 2;
      const ballR = b.x + b.size / 2;
      const ballT = b.y - b.size / 2;
      const ballB = b.y + b.size / 2;
      for (const brick of this.bricks) {
        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if ((ballL > brickR || ballR < brickL)) {
          continue;
        }
        if ((ballT > brickB || ballB < brickT)) {
          continue;
        }
        const xDif = Math.min(ballR - brickL, brickR - ballL);
        const yDif = Math.min(ballB - brickT, brickB - ballT);
        if (xDif < yDif) {
          b.x -= b.dx;
          b.dx *= -1;
        } else if (xDif > yDif) {
          b.y -= b.dy;
          b.dy *= -1;
        } else {
          b.x -= b.dx;
          b.dx *= -1;
          b.y -= b.dy;
          b.dy *= -1;
        }
        // we are done.
        break;
      };
    });
  },
  draw() {
    ballDiv.style.boxShadow = this.balls.map(b => `${b.x}px ${b.y}px 0 ${b.size / 2}px #fff`).join();

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks.map(b => `${b.x + bW / 2}px ${b.y + bH / 2}px 0 0 #fff`).join();
  }
};

Game.addBall(60, Game.height - 60);
Game.addBrick();

function universe() {
  Game.tick();
  Game.draw();
  frameId = requestAnimationFrame(universe);
}

universe();
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [60, 15];
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});
const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [100, 10];
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const Game = {
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],

  handleMouseOrTouchInput(event) {
    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach((p) => (p.x = x));
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, speed = 6) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    if (Math.random() > 0.5) {
      angle += Math.PI;
    }
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
    });
  },
  addBrick(x = this.width / 2, y = this.height / 2) {
    this.bricks.push({
      x,
      y,
      isAlive: true,
    });
  },
  tick() {
    const { width: w, height: h } = this;
    this.balls.forEach((b) => {
      b.x += b.dx;
      b.y += b.dy;
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x -= b.dx;
        b.dx *= -1;
      }
      if (b.y + b.size / 2 > h || b.y < b.size / 2) {
        b.y -= b.dy;
        b.dy *= -1;
      }

      const ballL = b.x - b.size / 2;
      const ballR = b.x + b.size / 2;
      const ballT = b.y - b.size / 2;
      const ballB = b.y + b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      for (const brick of this.bricks) {
        if (!brick.isAlive) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (ballL > brickR || ballR < brickL) {
          continue;
        }
        if (ballT > brickB || ballB < brickT) {
          continue;
        }
        const xDif = Math.min(ballR - brickL, brickR - ballL);
        const yDif = Math.min(ballB - brickT, brickB - ballT);
        if (xDif < yDif) {
          b.x -= b.dx;
          b.dx *= -1;
        } else if (xDif > yDif) {
          b.y -= b.dy;
          b.dy *= -1;
        } else {
          b.x -= b.dx;
          b.dx *= -1;
          b.y -= b.dy;
          b.dy *= -1;
        }

        brick.isAlive = false;
        break;
      }

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        b.x -= b.dx;
        b.y -= b.dy;
        const angle = Math.atan2(b.y - p.y, b.x - p.x);
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;
        // yup vectors work too ;)
        {
          /* let dirX = (b.x - p.x);
                let dirY = (b.y - p.y);
                const mag = Math.sqrt(dirX*dirX + dirY * dirY);
                dirX /= mag;
                dirY /= mag;
                b.dx = speed * dirX;
                b.dy = speed * dirY; */
        }
        break;
      }
    });

    this.bricks = this.bricks.filter((b) => b.isAlive);
  },
  draw() {
    ballDiv.style.boxShadow = this.balls
      .map((b) => `${b.x}px ${b.y}px 0 ${b.size / 2}px #fff`)
      .join();

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map((b) => `${b.x + bW / 2}px ${b.y + bH / 2}px 0 0 #fff`)
      .join();

    const [pW, pH] = PADDLE_SIZE;
    paddleDiv.style.boxShadow = this.paddles
      .map((p) => `${p.x + pW / 2}px ${p.y + pH / 2}px 0 0 #fff`)
      .join();
  },
};

Game.addBall(60, Game.height - 60);
Game.addBrick();
Game.addPaddle();

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));

function universe() {
  Game.tick();
  Game.draw();
  frameId = requestAnimationFrame(universe);
}

universe();
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [60, 15];
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});
const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [100, 10];
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const Game = {
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  handleMouseOrTouchInput(event) {
    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, speed = 360) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    if (Math.random() > 0.5) {
      angle += Math.PI;
    }
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
    });
  },
  addBrick(x = this.width / 2, y = this.height / 2) {
    this.bricks.push({
      x,
      y,
      isAlive: true,
    });
  },
  tick(dt) {
    const { width: w, height: h } = this;
    this.balls.forEach((b) => {
      let didBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
        b.dx *= -1;
        didBounce = true;
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        b.y =
          ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
        b.dy *= -1;
        didBounce = true;
        break;
      }

      // check bounds
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        didBounce = true;
      }
      if (b.y + b.size / 2 > h || b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        didBounce = true;
      }

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        } else {
          b.y += b.y > p.y ? yDif : -yDif;
        }

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;
        break;
      }
    });

    this.bricks = this.bricks.filter((b) => b.isAlive);
  },
  draw() {
    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px #fff`
      )
      .join();

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map((b) => `${b.x + bW / 2}px ${b.y + bH / 2}px 0 0 #fff`)
      .join();

    const [pW, pH] = PADDLE_SIZE;
    paddleDiv.style.boxShadow = this.paddles
      .map((p) => `${p.x + pW / 2}px ${p.y + pH / 2}px 0 0 #fff`)
      .join();
  },
};

Game.addBall(60, Game.height - 60);
Game.addBrick();
Game.addPaddle();

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

universe(lastTime);
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement('div');
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: 'absolute',
  left: '0',
  top: '0',
});
const brickDiv = document.createElement('div');
container.appendChild(brickDiv);
const BRICK_SIZE = [60, 15];
Object.assign(brickDiv.style, {
  position: 'absolute',
  borderRadius: '2px',
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});
const paddleDiv = document.createElement('div');
container.appendChild(paddleDiv);
const PADDLE_SIZE = [100, 10];
Object.assign(paddleDiv.style, {
  position: 'absolute',
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const lerp = (from, to, time) => from + (to-from) * time;

const Game = {
    camera: {
      scale: 1,
      offsetX: 0,
      offsetY: 0,
    },
    width: screenWidth,
    height: screenHeight,
    balls: [],
    bricks: [],
    paddles: [],
    tweens: new Set(),

    tween(target, prop, keyframes, duration, delay = 0) {
      this.tweens.add({target, prop, keyframes, duration: duration/1000, delay: delay/1000, t: 0});
    },

    handleMouseOrTouchInput(event) {
      event.preventDefault();
      event.stopPropagation();
      const x = (event?.touches?.[0]?.clientX) ?? event.offsetX;
      const y = (event?.touches?.[0]?.clientY) ?? event.offsetY;
      this.paddles.forEach(p => p.x = Math.min(this.width-p.width/2, Math.max(p.width/2, x)));
    },

    addPaddle(x = this.width /2, y = this.height - PADDLE_SIZE[1]*2) {
      this.paddles.push({
        x,
        y,
        width: PADDLE_SIZE[0],
        height: PADDLE_SIZE[1],
        scale: 1,
        offsetX: 0,
        offsetY: 0,
        color: [255,255,255],
      });
    },
    addBall(x = this.width / 2, y = this.height / 2, speed = 360) {
      const thresholdDegrees = 20;
      const arc = thresholdDegrees * (Math.PI / 180);
      let angle = arc + Math.random() * (Math.PI - 2 * arc);
      if (Math.random() > 0.5) {
        angle += Math.PI;
      }

      this.balls.push({
        x,
        y,
        dx: Math.cos(angle)*speed,
        dy: Math.sin(angle)*speed,
        size: 10,
        scale: 1,
        offsetX: 0,
        offsetY: 0,
        color: [255,255,255],
      });
    },
    addBrick(x = this.width / 2, y = this.height / 2) {
      this.bricks.push({
        x,
        y,
        isAlive: true,
        scale: 1,
        offsetX: 0,
        offsetY: 0,
        color: [255,255,255],
      });
    },

    tick(dt) {
        const {width: w, height: h} = this;
        this.balls.forEach((b) => {
            let didBounce = false;
            const ballDx = b.dx * dt;
            const ballDy = b.dy * dt;
            b.x += ballDx;
            b.y += ballDy;
            if (b.x + b.size/2 > w || b.x < b.size/2) {
                b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
                b.dx *= -1;
                this.shakeIt(this.camera, 3);
                didBounce = true;
            }
            if (b.y + b.size/2 > h || b.y < b.size/2) {
                b.y = ballDy > 0 ? h - b.size / 2: b.size / 2;
                b.dy *= -1;
                this.shakeIt(this.camera, 3);
                didBounce = true;
            }

            const ballL = b.x - b.size/2;
            const ballR = b.x + b.size/2;
            const ballT = b.y - b.size/2;
            const ballB = b.y + b.size/2;

            // check bricks.
            const [brickWidth, brickHeight] = BRICK_SIZE;
            for (const brick of this.bricks) {
                if (!brick.isAlive) {
                    continue;
                }

                const brickL = brick.x - brickWidth/2;
                const brickR = brick.x + brickWidth/2;
                const brickT = brick.y - brickHeight/2;
                const brickB = brick.y + brickHeight/2;
                if ((ballL > brickR || ballR < brickL)) {
                    continue;
                }
                if ((ballT > brickB || ballB < brickT)) {
                    continue;
                }
                const xDif = Math.min(ballR - brickL, brickR - ballL);
                const yDif = Math.min(ballB - brickT, brickB - ballT);
                if (xDif < yDif ) {
                    b.x -= ballDx;
                    b.dx *= -1;
                } else if (xDif > yDif) {
                    b.y -= ballDy;
                    b.dy *= -1;
                } else {
                    b.x -= ballDx;
                    b.dx *= -1;
                    b.y -= ballDy;
                    b.dy *= -1;
                }
                didBounce = true;
                this.flashIt(brick);
                this.shakeIt(brick, 5)
                {/* brick.isAlive = false; */}
                break;
            };

            // check paddles
            for (const p of this.paddles) {
                const pL = p.x - p.width/2;
                const pR = p.x + p.width/2;
                const pT = p.y - p.height/2;
                const pB = p.y + p.height/2;
                if ((ballL > pR || ballR < pL)) {
                    continue;
                }
                if ((ballT > pB || ballB < pT)) {
                    continue;
                }
                didBounce = true;
                const xDif = Math.min(ballR - pL, pR - ballL);
                const yDif = Math.min(ballB - pT, pB - ballT);
                if (xDif < yDif) {
                    b.x += b.x > p.x ? xDif : -xDif;
                } else {
                    b.y += b.y > p.y ? yDif : -yDif;
                }

                const angle = Math.atan2(b.y - (p.y - p.height/2 + p.width/2) , b.x - p.x);
                const speed = Math.sqrt(b.dx*b.dx + b.dy*b.dy);
                b.dx = Math.cos(angle)*speed;
                b.dy = Math.sin(angle)*speed;

                this.shakeIt(p, 3, [0,1]);
                this.flashIt(p);
                break;
            };

            if (didBounce) {
                this.tween(b, 'scale', [0.8, 1.2, 1], 120);
                this.flashIt(b);
            }
        });

        this.bricks = this.bricks.filter(b => b.isAlive);

        // do the tween
        for (const tween of this.tweens) {
            const { target, prop, keyframes, duration } = tween;
            tween.delay -= dt;
            if (tween.delay > 0) continue;
            tween.t += dt;
            const frames = keyframes.length - 1;
            const progress = Math.min(1, tween.t / duration);
            const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
            const localProgress = (progress - kIdx / frames) / (1 / frames);
            target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
            if (tween.t < duration) {
                continue;
            }

            target[prop] = keyframes[keyframes.length - 1];
            this.tweens.delete(tween);
        }
    },

    draw() {
        ballDiv.style.boxShadow = this.balls.map(b => `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${(b.size/2)*b.scale}px rgb(${b.color.join()})`).join();

        const [bW, bH] = BRICK_SIZE;
        brickDiv.style.boxShadow = this.bricks.map(b => `${b.x + (bW)/2 + b.offsetX}px ${b.y + (bH)/2 + b.offsetY}px 0 0 rgb(${b.color.join()})`).join();
        
        const [pW, pH] = PADDLE_SIZE;
        paddleDiv.style.boxShadow = this.paddles.map(p => `${p.x + pW/2 + p.offsetX}px ${p.y + pH/2 + p.offsetY}px 0 0 rgb(${p.color.join()})`).join();

        container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    },

    shakeIt(obj, dist = 4, dir = undefined) {
        let ox = -dist/2 + Math.random()*dist;
        let oy = -dist/2 + Math.random()*dist;
        if (dir) {
            ox = dir[0] * dist;
            oy = dir[1] * dist;
        }
        this.tween(obj, 'offsetX', [0, ox, -ox, ox/2, 0], 260);
        this.tween(obj, 'offsetY', [0, oy, -oy, oy/2, 0], 260);
    },
    flashIt(obj) {
        this.tween(obj.color, '0', [100, 100+Math.random()*155, 255], 180);
        this.tween(obj.color, '1', [100, 100+Math.random()*155, 255], 180);
        this.tween(obj.color, '2', [100, 100+Math.random()*155, 255], 180);
    }
};

Game.addBall(60, Game.height - 60);
Game.addBrick();
Game.addPaddle();

container.addEventListener("pointermove", e => Game.handleMouseOrTouchInput(e));
container.addEventListener("touchmove", e => Game.handleMouseOrTouchInput(e));

let lastTime = 0;
function universe(delta) {
    if (lastTime === 0) {
        lastTime = delta;
    }

    const dt = (delta - lastTime) / 1000;
    Game.tick(dt);
    Game.draw();

    lastTime = delta;
    frameId = requestAnimationFrame(universe);
}

universe(lastTime);
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
};

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  // PaddleSize: 3,
  // GutterGuard: 4,
  // LaserPaddle: 5,
  ExtraLife: 6,
  // BonusPoints: 7,
  // OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
  });
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
    
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.lives += 1;
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
  },
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a'
});

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  tweens: new Set(),

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [255, 255, 255],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 240) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: type === BallTypes.Normal ? [255, 255, 255] : [255, 55, 55],
      color: type === BallTypes.Normal ? [255, 255, 255] : [255, 55, 55],
      type,
    });
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0) {
    this.bricks.push({
      x,
      y,
      isAlive: true,
      type,
      health: 1,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [255, 255, 255],
    });
  },

  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [...PowerUpColors[type]],
    });
  },

  tick(dt) {
    const { width: w, height: h } = this;
    this.frame++;

    this.balls.forEach((b) => {
      let didBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if (b.type !== BallTypes.PowerBall) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        didBounce = true;
        this.damageBrick(brick);
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if (b.type !== BallTypes.PowerBall) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        didBounce = true;
        this.damageBrick(brick);
        break;
      }

      // check bounds
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        didBounce = true;
      }
      if (b.y + b.size / 2 > h || b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        didBounce = true;
      }

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        didBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        } else {
          b.y += b.y > p.y ? yDif : -yDif;
        }

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);
        break;
      }

      if (didBounce) {
        this.tween(b, "scale", [0.8, 1.2, 1], 120);
        this.flashIt(b);
      }
    });

    this.bricks = this.bricks.filter((b) => b.isAlive);

    // power ups
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }

      // fight, fight, fight dah power!
      PowerUpEffects[power.type]?.(this, power);
    }
    
    this.powerUps = this.powerUps.filter((pow) => pow.isAlive);

    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      this.tweens.delete(tween);
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 5);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.9) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) =>
          `${power.x + power.size/2 + power.offsetX}px ${power.y + power.size/2 + power.offsetY}px 0 ${
            (power.size / 2) * (power.scale - 1)
          }px rgb(${power.color.join()})`
      )
      .join();

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    const [pW, pH] = PADDLE_SIZE;
    paddleDiv.style.boxShadow = this.paddles
      .map(
        (p) =>
          `${p.x + pW / 2 + p.offsetX}px ${
            p.y + pH / 2 + p.offsetY
          }px 0 0 rgb(${p.color.join()})`
      )
      .join();

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  flashIt(obj) {
    this.tween(obj.color, "0", [obj.color[0], 100 + Math.random() * 155, obj.baseColor?.[0] || 255], 180);
    this.tween(obj.color, "1", [obj.color[1], 100 + Math.random() * 155, obj.baseColor?.[1] || 255], 180);
    this.tween(obj.color, "2", [obj.color[2], 100 + Math.random() * 155, obj.baseColor?.[2] || 255], 180);
  },
  updateScore(val) {
    this.score += val;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300);
  },

  // levels
  spawnNextLevel() {
    const levels = {
      1: () => this.spawnLevel(),
    };
    levels?.[this.level++]?.();
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const countW = Math.floor(screenWidth / bW);
    const countH = Math.floor(screenHeight / bH);
    const rW = screenWidth % bW;
    const rH = screenHeight % bH;
    const sx = rW / 2 + bW / 2;
    const sy = rH / 2 + bH / 2;
    for (let i = xBrickPad; i < countW - xBrickPad; i++) {
      const x = sx + i * bW;
      if (x < playAreaPxLeft || x > screenWidth - playAreaPxRight) continue;
      for (let j = yBrickPad; j < countH; j++) {
        const y = sy + j * bH;
        if (y < playAreaPxTop || y > screenHeight - playAreaPxBot) continue;
        predicate({ x, y, i, j, countW, countH });
      }
    }
  },
};

Game.addBall(60, Game.height - 60);
Game.addPaddle();
Game.spawnNextLevel();

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

universe(lastTime);
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;
const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
  Laser: 2,
  PowerLaser: 3,
};
const BallColors = {
  [BallTypes.Normal]: [255,255,255],
  [BallTypes.PowerBall]: [255,55,55],
  [BallTypes.Laser]: [55,255,255],
  [BallTypes.PowerLaser]: [255,70,70],
};

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
const PaddleTypes = {
  Normal: 0,
  Laser: 1,
};
const PaddleColors = {
  [PaddleTypes.Normal]: [255, 255, 255],
  [PaddleTypes.Laser]: [55, 255, 255],
};
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  PaddleSize: 3,
  GutterGuard: 4,
  LaserPaddle: 5,
  ExtraLife: 6,
  BonusPoints: 7,
  OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],

  [PowerUpTypes.LaserPaddle]: [200, 255, 255],
  [PowerUpTypes.OmegaDevice]: [255, 0, 255],
  [PowerUpTypes.BonusPoints]: [255, 255, 0],
  [PowerUpTypes.PaddleSize]: [255, 255, 255],
  [PowerUpTypes.GutterGuard]: [255, 255, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
    });
  },
  [PowerUpTypes.PaddleSize]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.width += PADDLE_SIZE[0] * 0.2;
    });
  },
  [PowerUpTypes.GutterGuard]: (game, powerUp) => {
    game.gutterGuardHealth += 3;
    game.tween(gutterDiv.style, 'scale', this.gutterGuardHealth > 0 ? [1, 1] : [0, 1.1, 1], 280);
  },
  [PowerUpTypes.BonusPoints]: (game, powerUp) => {
    game.updateScore(Math.floor(powerUp.scale * 1000));
  },
  [PowerUpTypes.OmegaDevice]: (game, powerUp) => {
    game.omegaDevicePower += 1;
    if (game.omegaDevicePower >= 5) {
      game.omegaDevicePower = 0;
      for (const brick of game.bricks) {
        game.damageBrick(brick);
      }
      game.megaShake(game.camera, 30);
    }
  },
  [PowerUpTypes.LaserPaddle]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.type = PaddleTypes.Laser;
      paddle.baseColor = PaddleColors[PaddleTypes.Laser];
      game.shakeIt(paddle, 6, [0, 1]);
      game.flashIt(paddle);
      game.tween(paddle, 'scale', [1, 0.8, 1.2, 1], 280);
    });
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.lives += 1;
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
  },
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
const BrickTypes = {
  Normal: 0,
  Unbreakable: 1,
  MultiBall: 2,
  PowerBall: 3,
  Explode: 4,
}
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const gutterDiv = document.createElement("div");
const GUTTER_GUARD_SIZE = [screenWidth, 8];
container.appendChild(gutterDiv);

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a'
});

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  gutterGuardHealth: 5,
  omegaDevicePower: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  tweens: new Set(),

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined, iterations = 1) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      iterations,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2, type = PaddleTypes.Normal) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      type,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...PaddleColors[type]],
      color: [...PaddleColors[type]],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 240) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...BallColors[type]],
      color: [...BallColors[type]],
      type,
    });

    if (BallTypes.Laser === type || type === BallTypes.PowerLaser) {
      const ball = this.balls[this.balls.length-1];
      ball.dy = -speed - Math.random()*100;
      ball.dx *= 0.5;
      this.tween(ball, 'size', [12,18,6,16,6], 320, 0, undefined, Infinity);
    }
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0, color = [255,255,255]) {
    this.bricks.push({
      x,
      y,
      type,
      health: 1,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: color,
      color
    });
  },
  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [...PowerUpColors[type]],
    });
  },

  tick(dt) {
    this.frame++;

    this.tickBalls(dt);
    this.balls = this.balls.filter((ball) => ball.isAlive);
    this.bricks = this.bricks.filter((brick) => brick.isAlive);
    this.tickPowerUps(dt);
    this.powerUps = this.powerUps.filter((pow) => pow.isAlive);
    this.tickTweens(dt);
  },

  tickPowerUps(dt) {
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p, power.color);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }
      PowerUpEffects[power.type]?.(this, power);
    }
  },

  tickBalls(dt) {
    const { width: w, height: h } = this;

    this.balls.forEach((b) => {
      if (!b.isAlive) {
        return;
      }

      let didBounce = false;
      let edgeBounce = false;
      let brickBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if (b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if (b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        break;
      }

      // check bounds x
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // bounds y
      if (b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // y bottom
      const ggh = GUTTER_GUARD_SIZE[1];
      if (this.gutterGuardHealth > 0 && b.y + b.size/2 >= h - ggh) {
        b.y = this.height - ggh - b.size/2 - 1;
        b.dy *= -1;
        this.gutterGuardHealth--;
        this.tween(gutterDiv.style, 'opacity', [1, 0.5, 1], 280);
        this.tween(gutterDiv.style, 'marginTop', this.gutterGuardHealth > 1 ? [1, 1] : [1, 1.1, 0], 280);
        edgeBounce = true;
      } else if (b.y + b.size / 2 > h) {
        b.isAlive = false;
      }

      // check paddles
      for (const p of this.paddles) {
        if (b.type === BallTypes.Laser) continue;

        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        edgeBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        } else {
          b.y = p.y - p.height / 2 - b.size/2 - 1;
        }

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);

        if (p.type === PaddleTypes.Laser) {
          const type = b.type === BallTypes.PowerBall ? BallTypes.PowerLaser : BallTypes.Laser;
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
        }
        break;
      }

      didBounce = edgeBounce || brickBounce;
      if (!didBounce) {
        return;
      }
      this.tween(b, "scale", [0.8, 1.2, 1], 60, 0, () => {
        if (b.type === BallTypes.Laser) {
          b.isAlive = false;
        }
        if (b.type === BallTypes.PowerLaser && edgeBounce) {
          b.isAlive = false;
        }
      });
      this.flashIt(b);
    });
  },

  tickTweens(dt) {
    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      tween.iterations -= 1;
      if (tween.iterations <= 0) {
        this.tweens.delete(tween);
      } else {
        tween.t = 0;
      }
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 6);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.7) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    const [w, h] = GUTTER_GUARD_SIZE;
    Object.assign(gutterDiv.style, {
      position: "absolute",
      left: `-${w}`,
      top: `${this.height - h - 1 }px`,
      width: `${w}px`,
      height: `${h}px`,
      display: this.gutterGuardHealth > 0 ? 'initial' : 'none',
      boxShadow: `inset 0 0 0 1px #fff, inset 0 0 0 2px #000, inset 0 0 0 3px #fff`,
    });

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) =>
          `${power.x + power.size/2 + power.offsetX}px ${power.y + power.size/2 + power.offsetY}px 0 ${
            (power.size / 2) * (power.scale - 1)
          }px rgb(${power.color.join()})`
      )
      .join();

    if (this.paddles.length > 0) {
      const paddle = this.paddles[0];
      Object.assign(paddleDiv.style, {
        left: `-${paddle.width}px`,
        top: `-${paddle.height}px`,
        width: `${paddle.width}px`,
        height: `${paddle.height}px`,
      });
      paddleDiv.style.boxShadow = this.paddles
        .map(
          (p) =>
            `${p.x + p.width / 2 + p.offsetX}px ${
              p.y + p.height / 2 + p.offsetY
            }px 0 0 rgb(${p.color.join()})`
        )
        .join();
    }

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  megaShake(obj, dist = 8) {
    let offSets = new Array(10).fill(0).map(() => -dist/2 + Math.random() * dist);
    this.tween(obj, "offsetX", [0, ...offSets, 0], 260);
    this.tween(obj, "offsetY", [0, ...offSets.reverse(), 0], 620);
  },
  flashIt(obj, color,) {
    this.tween(obj.color, "0", [obj.color[0], color?.[0] ?? 100 + Math.random() * 155, obj.baseColor?.[0] || 255], 180);
    this.tween(obj.color, "1", [obj.color[1], color?.[1] ?? 100 + Math.random() * 155, obj.baseColor?.[1] || 255], 180);
    this.tween(obj.color, "2", [obj.color[2], color?.[2] ?? 100 + Math.random() * 155, obj.baseColor?.[2] || 255], 180);
  },
  updateScore(val) {
    this.score += val;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300);
  },

  // levels
  spawnNextLevel() {
    const levels = {
      1: () => this.spawnLevel(),
    };
    levels?.[this.level++]?.();
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const countW = Math.floor(screenWidth / bW);
    const countH = Math.floor(screenHeight / bH);
    const rW = screenWidth % bW;
    const rH = screenHeight % bH;
    const sx = rW / 2 + bW / 2;
    const sy = rH / 2 + bH / 2;
    for (let i = xBrickPad; i < countW - xBrickPad; i++) {
      const x = sx + i * bW;
      if (x < playAreaPxLeft || x > screenWidth - playAreaPxRight) continue;
      for (let j = yBrickPad; j < countH; j++) {
        const y = sy + j * bH;
        if (y < playAreaPxTop || y > screenHeight - playAreaPxBot) continue;
        predicate({ x, y, i, j, countW, countH });
      }
    }
  },
};

Game.addBall(60, Game.height - 60);
Game.addPaddle();
Game.paddles[Game.paddles.length-1].type = PaddleTypes.Laser;
Game.spawnNextLevel();

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

universe(lastTime);
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;

// create menu ui
const menuPaused = document.createElement('div');
container.appendChild(menuPaused);
Object.assign(menuPaused.style, {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backdropFilter: 'blur(2px)',
  backgroundColor: '#0008',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  letterSpacing: '2px',
  alignItems: 'center',
  gap: '32px',
  zIndex: 1,
});
const titleDiv = document.createElement('div');
titleDiv.innerText = 'LOADING';
Object.assign(titleDiv.style, {
  fontSize: '32px',
  fontWeight: 'bold',
  textAlign: 'center',
  textTransform: 'uppercase',
});
const msgDiv = document.createElement('div');
const startButton = document.createElement('button');
startButton.innerText = 'START';
Object.assign(startButton.style, {
  padding: '8px 16px',
  minHeight: '32px',
  minWidth: '120px',
  fontSize: '16px',
  letterSpacing: '4px',
  border: 'none',
  boxShadow: '0 0 0 1px #fffa, 0 0 0 2px #000, 0 0 0 3px #fffa',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
})
menuPaused.appendChild(titleDiv);
menuPaused.appendChild(msgDiv);
menuPaused.appendChild(startButton);

const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
  Laser: 2,
  PowerLaser: 3,
};
const BallColors = {
  [BallTypes.Normal]: [255,255,255],
  [BallTypes.PowerBall]: [255,55,55],
  [BallTypes.Laser]: [55,255,255],
  [BallTypes.PowerLaser]: [255,70,70],
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
const BrickTypes = {
  Normal: 0,
  Unbreakable: 1,
  MultiBall: 2,
  PowerBall: 3,
  Explode: 4,
}
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
const PaddleTypes = {
  Normal: 0,
  Laser: 1,
};
const PaddleColors = {
  [PaddleTypes.Normal]: [255, 255, 255],
  [PaddleTypes.Laser]: [55, 255, 255],
};
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  PaddleSize: 3,
  GutterGuard: 4,
  LaserPaddle: 5,
  ExtraLife: 6,
  BonusPoints: 7,
  OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],

  [PowerUpTypes.LaserPaddle]: [200, 255, 255],
  [PowerUpTypes.OmegaDevice]: [255, 0, 255],
  [PowerUpTypes.BonusPoints]: [255, 255, 0],
  [PowerUpTypes.PaddleSize]: [255, 255, 255],
  [PowerUpTypes.GutterGuard]: [255, 255, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
    });
  },
  [PowerUpTypes.PaddleSize]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.width += PADDLE_SIZE[0] * 0.2;
    });
  },
  [PowerUpTypes.GutterGuard]: (game, powerUp) => {
    game.gutterGuardHealth += 3;
    game.tween(gutterDiv.style, 'scale', this.gutterGuardHealth > 0 ? [1, 1] : [0, 1.1, 1], 280);
  },
  [PowerUpTypes.BonusPoints]: (game, powerUp) => {
    game.updateScore(Math.floor(powerUp.scale * 1000));
  },
  [PowerUpTypes.OmegaDevice]: (game, powerUp) => {
    game.omegaDevicePower += 1;
    if (game.omegaDevicePower >= 5) {
      game.omegaDevicePower = 0;
      for (const brick of game.bricks) {
        game.damageBrick(brick);
      }
      game.megaShake(game.camera, 30);
    }
  },
  [PowerUpTypes.LaserPaddle]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.type = PaddleTypes.Laser;
      paddle.baseColor = PaddleColors[PaddleTypes.Laser];
      game.shakeIt(paddle, 6, [0, 1]);
      game.flashIt(paddle);
      game.tween(paddle, 'scale', [1, 0.8, 1.2, 1], 280);
    });
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.updateLives(1);
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
  },
};

const gutterDiv = document.createElement("div");
const GUTTER_GUARD_SIZE = [screenWidth, 8];
container.appendChild(gutterDiv);

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  fontWeight: 'bold',
  letterSpacing: '2px',
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a',
  zIndex: 2,
});

const livesContainer = document.createElement("div");
container.appendChild(livesContainer);
Object.assign(livesContainer.style, {
  position: "absolute",
  top: '16px',
  left: '16px',
  fontSize: "22px",
  fontWeight: 'bold',
  width: "100%",
  textAlign: "left",
  textShadow: '#0008 1px 1px 0px, #44ff44 3px 1px 0px, #44ff44 1px 2px 0px',
  zIndex: 2,
  width: 'fit-content',
});

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  isPaused: false,
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  gutterGuardHealth: 5,
  omegaDevicePower: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  tweens: new Set(),

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined, iterations = 1) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      iterations,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    if (event.target !== container) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2, type = PaddleTypes.Normal) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      type,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...PaddleColors[type]],
      color: [...PaddleColors[type]],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 240) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...BallColors[type]],
      color: [...BallColors[type]],
      type,
      lastHits: new Set(),
    });

    if (BallTypes.Laser === type || type === BallTypes.PowerLaser) {
      const ball = this.balls[this.balls.length-1];
      ball.dy = -speed - Math.random()*100;
      ball.dx *= 0.5;
      this.tween(ball, 'size', [12,18,6,16,6], 320, 0, undefined, Infinity);
    }
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0, color = [255,255,255]) {
    this.bricks.push({
      x,
      y,
      type,
      health: type === BrickTypes.Unbreakable ? Infinity : 1,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: color,
      color
    });

    return this.bricks[this.bricks.length -1];
  },
  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [...PowerUpColors[type]],
    });
  },

  tick(dt) {
    this.frame++;

    if (!this.isPaused) {
      this.tickBalls(dt);
      this.balls = this.balls.filter((ball) => ball.isAlive);
      this.bricks = this.bricks.filter((brick) => brick.isAlive);
      this.tickPowerUps(dt);
      this.powerUps = this.powerUps.filter((pow) => pow.isAlive);

      if (this.balls.length === 0) {
        if (this.lives > 0) {
          this.lives--;
          this.onLifeLost();
        } else {
          this.onResetGame();
        }
      }
      if (this.bricks.filter(b => b.type !== BrickTypes.Unbreakable).length === 0) {
        this.onWinLevel();
      }
    }

    this.tickTweens(dt);
  },

  tickPowerUps(dt) {
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p, power.color);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }
      PowerUpEffects[power.type]?.(this, power);
    }
  },

  tickBalls(dt) {
    const { width: w, height: h } = this;

    this.balls.forEach((b) => {
      if (!b.isAlive) {
        return;
      }

      let didBounce = false;
      let edgeBounce = false;
      let brickBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        b.lastHits.add(brick);
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        b.lastHits.add(brick);
        break;
      }

      // check bounds x
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // bounds y
      if (b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // y bottom
      const ggh = GUTTER_GUARD_SIZE[1];
      if (this.gutterGuardHealth > 0 && b.y + b.size/2 >= h - ggh) {
        b.y = this.height - ggh - b.size/2 - 1;
        b.dy *= -1;
        this.gutterGuardHealth--;
        this.tween(gutterDiv.style, 'opacity', [1, 0.5, 1], 280);
        this.tween(gutterDiv.style, 'marginTop', this.gutterGuardHealth > 1 ? [1, 1] : [1, 1.1, 0], 280);
        edgeBounce = true;
      } else if (b.y + b.size / 2 > h) {
        b.isAlive = false;
      }

      // check paddles
      for (const p of this.paddles) {
        if (b.type === BallTypes.Laser) continue;

        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        edgeBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        } else {
          b.y = p.y - p.height / 2 - b.size/2 - 1;
        }

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);

        if (p.type === PaddleTypes.Laser) {
          const type = b.type === BallTypes.PowerBall ? BallTypes.PowerLaser : BallTypes.Laser;
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
        }
        break;
      }

      didBounce = edgeBounce || brickBounce;
      if (!didBounce) {
        return;
      }
      if (!brickBounce) {
        b.lastHits.clear();
      }

      this.tween(b, "scale", [0.8, 1.2, 1], 60, 0, () => {
        if (b.type === BallTypes.Laser) {
          b.isAlive = false;
        }
        if (b.type === BallTypes.PowerLaser && edgeBounce) {
          b.isAlive = false;
        }
      });
      this.flashIt(b);
    });
  },

  tickTweens(dt) {
    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      tween.iterations -= 1;
      if (tween.iterations <= 0) {
        this.tweens.delete(tween);
      } else {
        tween.t = 0;
      }
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 6);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.7) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    const [w, h] = GUTTER_GUARD_SIZE;
    Object.assign(gutterDiv.style, {
      position: "absolute",
      left: `-${w}`,
      top: `${this.height - h - 1 }px`,
      width: `${w}px`,
      height: `${h}px`,
      display: this.gutterGuardHealth > 0 ? 'initial' : 'none',
      boxShadow: `inset 0 0 0 1px #fff, inset 0 0 0 2px #000, inset 0 0 0 3px #fff`,
    });

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) =>
          `${power.x + power.size/2 + power.offsetX}px ${power.y + power.size/2 + power.offsetY}px 0 ${
            (power.size / 2) * (power.scale - 1)
          }px rgb(${power.color.join()})`
      )
      .join();

    if (this.paddles.length > 0) {
      const paddle = this.paddles[0];
      Object.assign(paddleDiv.style, {
        left: `-${paddle.width}px`,
        top: `-${paddle.height}px`,
        width: `${paddle.width}px`,
        height: `${paddle.height}px`,
      });
      paddleDiv.style.boxShadow = this.paddles
        .map(
          (p) =>
            `${p.x + p.width / 2 + p.offsetX}px ${
              p.y + p.height / 2 + p.offsetY
            }px 0 0 rgb(${p.color.join()})`
        )
        .join();
    }

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  megaShake(obj, dist = 8) {
    let offSets = new Array(10).fill(0).map(() => -dist/2 + Math.random() * dist);
    this.tween(obj, "offsetX", [0, ...offSets, 0], 260);
    this.tween(obj, "offsetY", [0, ...offSets.reverse(), 0], 620);
  },
  flashIt(obj, color,) {
    this.tween(obj.color, "0", [obj.color[0], color?.[0] ?? 100 + Math.random() * 155, obj.baseColor?.[0] ?? 255], 180);
    this.tween(obj.color, "1", [obj.color[1], color?.[1] ?? 100 + Math.random() * 155, obj.baseColor?.[1] ?? 255], 180);
    this.tween(obj.color, "2", [obj.color[2], color?.[2] ?? 100 + Math.random() * 155, obj.baseColor?.[2] ?? 255], 180);
  },
  updateScore(val) {
    this.score += val;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300);
  },
  updateLives(val = 1) {
    this.lives += val;
    livesContainer.innerText = `${this.lives}`;
    this.tween(livesContainer.style, 'scale', [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680);
  },
  spawnNextLevel() {
    this.level++;
    const levels = {
      0: () => this.spawnLevel(),
      1: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if ((i === midX - 1 || i === midX) || (j === midY - 1 || j === midY)) {
            return;
          }

          let color = (i+j+1) % 3 !== 0 ? [255,255,255] : [100,255,255];
          if ((i+j+1) % 4 === 0) {
            color = [255,200,200];
          }

          const brick = this.addBrick(x, y, 0, color);
          if (j === 0 || j === yBrickCount-1) {
            brick.health = 2;
          }
        }
      }),
      2: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          if (i === midX - 1 || i === midX) {
            return;
          }

          if (i === 0 || j === 0 || i === xBrickCount-1 || j === yBrickCount-1) {
            const brick = this.addBrick(x, y, 0, [75, 0, 130]);
            brick.health = 2;
          } else {
            this.addBrick(x, y, 0, [100, 100, 255]);
          }
        }
      }),
      3: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if ((j+1) % 3 === 0) {
            return;
          }

          const brick = this.addBrick(x, y, 0, j%2 === 0 ? [200,200,200] : [100,100,100]);
          if (j === 0) {
            brick.health = 2;
          } else if (j === yBrickCount-1) {
            brick.health = 5;
          }
        }
      }),
      4: () => this.spawnLevel({
        predicate: ({x, y, i, j}) => {
          const colors = [
            [255, 0, 0],
            [255, 165, 0],
            [255, 255, 0],
            [0, 128, 0],
            [0, 0, 255],
            [75, 0, 130],
            [148, 0, 211] 
          ];

          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          brick.health += Math.floor(Math.random()*3);
        }
      }),
      5: () => this.spawnLevel({
        predicate: ({x, y, i, j}) => {
          if (i % 2 === 0) return;
          const colors = [
            [100, 200, 100],
            [100, 220, 100],
            [100, 255, 100],
            [150, 255, 150],
          ];
          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          if (j % 2 === 0) brick.health =3;
        }
      }),
      6: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (i === midX || j === midY) {
            return;
          }

          this.addBrick(x, y, 0, [255,255,255]);
          this.addBrick(x, y, 0, [55,55,255]);
          this.addBrick(x, y, 0, [255,55,55]);
        }
      }),
      7: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          if (j === yBrickCount-1) {
            this.addBrick(x, y, BrickTypes.Unbreakable, [80,80,80]);
            return;
          }
          if (i === 0 || i === xBrickCount) {
            this.addBrick(x, y, 0, [255,j%2 === 0 ? 55:100, 255]);
            return;
          }
          this.addBrick(x, y, 0, [255,55,55]);
        }
      }),
      8: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (j === yBrickCount-1 || j === 0 || i === 0 || i === xBrickCount -1) {
            const brick = this.addBrick(x, y, 0, [40,40,200]);
            brick.health = 5;
            return;
          }
          if (j === yBrickCount-2 || j === 1 || i === 1 || i === xBrickCount -2) {
            const brick = this.addBrick(x, y, 0, [20,20,180]);
            brick.health = 3;
            return;
          }
          if (i >= midX - 1 && i <= midX+1 && j >= midY - 1 && j <= midY+1) {
            const brick = this.addBrick(x, y, 0, [255, 127, 40]);
            brick.health = 2;
            return;
          }
        }
      }),
      9: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const brick = this.addBrick(x,y,0, [20+5*i, 20+4*(yBrickCount-y), 20+10*(xBrickCount-i)]);
          brick.health = 5;
        }
      }),
    };
    const nLevels = Object.keys(levels).length;
    levels?.[((this.level - 1) % nLevels)]?.();
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const brickAreaW = screenWidth - playAreaPxRight - playAreaPxLeft;
    const brickAreaH = screenHeight - playAreaPxBot - playAreaPxTop;
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const xBrickCount = Math.floor(brickAreaW / bW);
    const yBrickCount = Math.floor(brickAreaH / bH);
    const rW = brickAreaW % bW;
    const rH = brickAreaH % bH;
    const sx = playAreaPxLeft + rW / 2 + bW / 2;
    const sy = playAreaPxTop + rH / 2 + bH / 2;
    for (let i = xBrickPad; i < xBrickCount - xBrickPad; i++) {
      const x = sx + i * bW;
      for (let j = yBrickPad; j < yBrickCount; j++) {
        const y = sy + j * bH;
        predicate({ x, y, i, j, xBrickCount, yBrickCount });
      }
    }
  },

  // events
  onLifeLost() {
    this.showMenu();
    this.megaShake(this.camera, 30);
    this.tween(livesContainer.style, 'scale',
      [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680, 540,
      () => livesContainer.innerText = `${this.lives}`
    );
    this.onResetLevel();
  },
  onDeath() {
    this.showMenu();
  },
  onWinLevel() {
    this.onResetLevel();
    this.bricks = [];
    this.spawnNextLevel();
    this.showMenu();
  },
  onResetLevel() {
    this.balls = [];
    this.powerUps = [];
    this.paddles = [];
    this.addBall(this.width/2, Game.height - 60);
    const b = this.balls[this.balls.length - 1];
    b.dy = -Math.abs(b.dy);
    this.addPaddle(this.width / 2);
  },
  onStartGame() {
    this.paddles.forEach(p => {
      p.x = this.width/2;
    });
    this.hideMenu();
  },
  onResetGame() {
    this.showMenu();
    this.onResetLevel();
    this.bricks = [];
    this.gutterGuardHealth = 0;
    this.score = 0;
    this.lives = 3;
    this.level = 0;
    this.spawnNextLevel();
    livesContainer.innerText = `${this.lives}`;
  },
  hideMenu() {
    this.tween(menuPaused.style, 'opacity', [1,0], 300, 80, () => {
      menuPaused.style.opacity = 1;
      menuPaused.style.scale = 1;
      menuPaused.style.display = 'none';
      this.isPaused = false;
    });
    this.tween(titleDiv.style, 'scale', [1,1.1,0.5], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [1,1.1,0.5], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
  },
  showMenu() {
    this.isPaused = true;
    menuPaused.style.display = 'flex';
    titleDiv.innerText = `Level ${this.level}`;
    this.tween(titleDiv.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
    this.tween(menuPaused.style, 'opacity', [0,1], 300);
  }
};

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));
startButton.addEventListener("click", (e) => {
  Game.hideMenu();
});

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

// document.addEventListener('keydown', e => {
//   Game.bricks = [];
// });

// start it all
Game.onResetGame();
universe(lastTime);
container.addEventListener('unload', () => cancelAnimationFrame(frameId));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;

// create menu ui
const menuPaused = document.createElement('div');
container.appendChild(menuPaused);
Object.assign(menuPaused.style, {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backdropFilter: 'blur(2px)',
  backgroundColor: '#0008',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  letterSpacing: '2px',
  alignItems: 'center',
  gap: '32px',
  zIndex: 1,
});
const titleDiv = document.createElement('div');
titleDiv.innerText = 'LOADING';
Object.assign(titleDiv.style, {
  fontSize: '32px',
  fontWeight: 'bold',
  textAlign: 'center',
  textTransform: 'uppercase',
  textShadow: '#0008 1px 1px 0px, red 3px 1px 0px, red 1px 2px 0px',
});

const msgDiv = document.createElement('div');
const soundToggle = document.createElement('button');
soundToggle.innerText = 'Audio On';
Object.assign(soundToggle.style, {
  position: 'absolute',
  bottom: '8px',
  right: '8px',
  padding: '6px 12px',
  fontSize: '12px',
  border: 'none',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
  borderRadius: '32px',
  boxShadow: '0px -1px 0 0px #fff8, 0px 2px 0 #fff',
});

const startButton = document.createElement('button');
startButton.innerText = 'START';
Object.assign(startButton.style, {
  padding: '8px 16px',
  minHeight: '32px',
  minWidth: '120px',
  fontSize: '16px',
  letterSpacing: '4px',
  border: 'none',
  boxShadow: '0 0 0 1px #fffa, 0 0 0 2px #000, 0 0 0 3px #fffa',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
})
menuPaused.appendChild(titleDiv);
menuPaused.appendChild(soundToggle);
menuPaused.appendChild(startButton);

const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
  Laser: 2,
  PowerLaser: 3,
};
const BallColors = {
  [BallTypes.Normal]: [255,255,255],
  [BallTypes.PowerBall]: [255,55,55],
  [BallTypes.Laser]: [55,255,255],
  [BallTypes.PowerLaser]: [255,70,70],
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
const BrickTypes = {
  Normal: 0,
  Unbreakable: 1,
  MultiBall: 2,
  PowerBall: 3,
  Explode: 4,
}
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
const PaddleTypes = {
  Normal: 0,
  Laser: 1,
};
const PaddleColors = {
  [PaddleTypes.Normal]: [255, 255, 255],
  [PaddleTypes.Laser]: [55, 255, 255],
};
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  PaddleSize: 3,
  GutterGuard: 4,
  LaserPaddle: 5,
  ExtraLife: 6,
  BonusPoints: 7,
  OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],

  [PowerUpTypes.LaserPaddle]: [200, 255, 255],
  [PowerUpTypes.OmegaDevice]: [255, 0, 255],
  [PowerUpTypes.BonusPoints]: [255, 255, 0],
  [PowerUpTypes.PaddleSize]: [255, 255, 255],
  [PowerUpTypes.GutterGuard]: [255, 255, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
    game.playSound('power_split', 1+Math.random()*.2, 1.2);
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
    });
    game.playSound('power_big_ball', 1+Math.random()*.2, 1);
  },
  [PowerUpTypes.PaddleSize]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.width += PADDLE_SIZE[0] * 0.3;
    });
    game.playSound('power_big_paddle', 1+Math.random()*.2, 1.4);
  },
  [PowerUpTypes.GutterGuard]: (game, powerUp) => {
    game.gutterGuardHealth += 3;
    game.tween(gutterDiv.style, 'scale', this.gutterGuardHealth > 0 ? [1, 1] : [0, 1.1, 1], 280);
    game.playSound('power_gg', 1+Math.random()*.2);
  },
  [PowerUpTypes.BonusPoints]: (game, powerUp) => {
    game.updateScore(Math.floor(powerUp.scale * 1000));
    game.playSound('hit_c5_chord', 1+Math.random()*.2);
  },
  [PowerUpTypes.OmegaDevice]: (game, powerUp) => {
    game.omegaDevicePower += 1;
    game.playSound('power_omega', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    if (game.omegaDevicePower > 5) {
      game.omegaDevicePower = 0;
      for (const brick of game.bricks) {
        game.damageBrick(brick);
      }
      game.megaShake(game.camera, 30);
      game.playSound('gameover', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    }
  },
  [PowerUpTypes.LaserPaddle]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.type = PaddleTypes.Laser;
      paddle.baseColor = PaddleColors[PaddleTypes.Laser];
      game.shakeIt(paddle, 6, [0, 1]);
      game.flashIt(paddle);
      game.tween(paddle, 'scale', [1, 0.8, 1.2, 1], 280);
    });
    game.playSound('power_laser', 1 + Math.random()*.2);
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
    game.playSound('power_ball', 1+Math.random()*.2);
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.updateLives(1);
    game.playSound('power_life', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
    game.playSound('power_speed_up', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
    game.playSound('power_speed_down', 1+Math.random()*.2);
  },
};

const gutterDiv = document.createElement("div");
const GUTTER_GUARD_SIZE = [screenWidth, 8];
container.appendChild(gutterDiv);

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  fontWeight: 'bold',
  letterSpacing: '2px',
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a',
  zIndex: 2,
});

const livesContainer = document.createElement("div");
container.appendChild(livesContainer);
Object.assign(livesContainer.style, {
  position: "absolute",
  top: '16px',
  left: '16px',
  fontSize: "22px",
  fontWeight: 'bold',
  width: "100%",
  textAlign: "left",
  textShadow: '#0008 1px 1px 0px, #44ff44 3px 1px 0px, #44ff44 1px 2px 0px',
  zIndex: 2,
  width: 'fit-content',
});

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  isPaused: false,
  isMuted: false,
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  gutterGuardHealth: 5,
  omegaDevicePower: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  worms: [],
  tweens: new Set(),
  bkgSong: '',

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined, iterations = 1) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      iterations,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    if (event.target !== container) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2, type = PaddleTypes.Normal) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      type,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...PaddleColors[type]],
      color: [...PaddleColors[type]],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 240) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      comboCount: 0,
      baseColor: [...BallColors[type]],
      color: [...BallColors[type]],
      type,
      lastHits: new Set(),
    });

    if (BallTypes.Laser === type || type === BallTypes.PowerLaser) {
      const ball = this.balls[this.balls.length-1];
      ball.dy = -speed - Math.random()*100;
      ball.dx *= 0.5;
      this.tween(ball, 'size', [12,18,6,16,6], 320, 0, undefined, Infinity);
    }
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0, color = [255,255,255]) {
    this.bricks.push({
      x,
      y,
      type,
      health: type === BrickTypes.Unbreakable ? Infinity : 1,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: color,
      color
    });

    return this.bricks[this.bricks.length -1];
  },
  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [...PowerUpColors[type]],
    });
  },
  addWorm(x = this.width/2, y = this.height/2, bricks = [], size = 30, speed = 300) {
    this.worms.push({
      x,
      y,
      dx: 0,
      dy: 0,
      size,
      tail: bricks,
      targetX: x,
      targetY: y,
      speed
    });
  },

  tick(dt) {
    this.frame++;

    if (!this.isPaused) {
      this.tickBalls(dt);
      this.balls = this.balls.filter((ball) => ball.isAlive);
      this.bricks = this.bricks.filter((brick) => brick.isAlive);
      this.tickPowerUps(dt);
      this.powerUps = this.powerUps.filter((pow) => pow.isAlive);
      this.tickWorms(dt);

      if (this.balls.length === 0) {
        if (this.lives > 0) {
          this.lives--;
          this.onLifeLost();
        } else {
          this.onResetGame();
        }
      }
      if (this.bricks.filter(b => b.type !== BrickTypes.Unbreakable).length === 0) {
        this.onWinLevel();
      }
    }

    this.tickTweens(dt);
  },

  tickPowerUps(dt) {
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p, power.color);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }

      PowerUpEffects[power.type]?.(this, power);
    }
  },
  tickBalls(dt) {
    const { width: w, height: h } = this;

    this.balls.forEach((b) => {
      if (!b.isAlive) {
        return;
      }

      let didBounce = false;
      let edgeBounce = false;
      let paddleBounce = false;
      let brickBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // check bounds x
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // bounds y
      if (b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // y bottom
      const ggh = GUTTER_GUARD_SIZE[1];
      if (this.gutterGuardHealth > 0 && b.y + b.size/2 >= h - ggh) {
        b.y = this.height - ggh - b.size/2 - 1;
        b.dy *= -1;
        this.gutterGuardHealth--;
        this.tween(gutterDiv.style, 'opacity', [1, 0.5, 1], 280);
        this.tween(gutterDiv.style, 'marginTop', this.gutterGuardHealth > 1 ? [1, 1] : [1, 1.1, 0], 280);
        edgeBounce = true;
      } else if (b.y + b.size / 2 > h) {
        b.isAlive = false;
      }

      // check paddles
      for (const p of this.paddles) {
        if (b.type === BallTypes.Laser) continue;

        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        paddleBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        }
        b.y = p.y - p.height / 2 - b.size/2 - 1;

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);

        if (p.type === PaddleTypes.Laser) {
          const type = b.type === BallTypes.PowerBall ? BallTypes.PowerLaser : BallTypes.Laser;
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
        }
        break;
      }

      didBounce = edgeBounce || brickBounce || paddleBounce;
      if (!didBounce) {
        return;
      }
      if (!brickBounce) {
        b.lastHits.clear();
      }
      if (edgeBounce) this.playSound('edge_hit', 0.5 + Math.random()*0.2, 1);
      if (paddleBounce) {
        this.playSound('paddle_hit', 1 + Math.random()*0.1, .4);
        b.comboCount = 0;
      }
      if (brickBounce) {
        const cycle = Math.floor(b.comboCount / this.hitSounds.length);
        const boost = 0.20;
        const rndPitch = Math.random()*.1;
        this.playSound(this.hitSounds[b.comboCount % this.hitSounds.length], 1 + boost*cycle + rndPitch, 2.2);
        b.comboCount++;
      }

      this.tween(b, "scale", [0.8, 1.2, 1], 60, 0, () => {
        if (b.type === BallTypes.Laser) {
          b.isAlive = false;
        }
        if (b.type === BallTypes.PowerLaser && edgeBounce) {
          b.isAlive = false;
        }
      });
      this.flashIt(b);
    });
  },
  tickWorms(dt) {
    const playAreaHeight = this.height - 100; 
    const bW = BRICK_SIZE[0]+1;
    const bH = BRICK_SIZE[1]+1;
        
    for (const worm of this.worms) {
      let { targetX, targetY, speed } = worm;
      worm.tail = worm.tail.filter(b => b.isAlive);

      const dirX = targetX - worm.x;
      const dirY = targetY - worm.y;
      const dist = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
      worm.dx += dirX / dist * speed * dt;
      worm.dy += dirY / dist * speed * dt;
      worm.dx *= 0.99;
      worm.dy *= 0.98;
      worm.x += worm.dx*dt;
      worm.y += worm.dy*dt;

      if (dist < worm.size / 2) {
        worm.targetX = Math.random()*this.width;
        worm.targetY = Math.random()*playAreaHeight;
      }


      const occupiedGrid = new Map();
      for (const brick of worm.tail) {
        const gx = Math.floor(brick.x / bW);
        const gy = Math.floor(brick.y / bH);
        occupiedGrid.set(`${gx},${gy}`, true); 
      }

      const headRadius = worm.size / 2;
      const minGridX = Math.floor((worm.x - headRadius) / bW);
      const maxGridX = Math.floor((worm.x + headRadius) / bW);
      const minGridY = Math.floor((worm.y - headRadius) / bH);
      const maxGridY = Math.floor((worm.y + headRadius) / bH);
      let targetGridCells = new Map();
      
      for (let gx = minGridX; gx <= maxGridX; gx++) {
        for (let gy = minGridY; gy <= maxGridY; gy++) {
          const key = `${gx},${gy}`;
          if (!occupiedGrid.has(key)) {
            targetGridCells.set(key, {gx, gy})
          }
        }
      }
        
      if (targetGridCells.size > 0) {
        const randomIndex = Math.floor(Math.random() * targetGridCells.size);
        const { gx, gy } = [...targetGridCells.values()][randomIndex];
        const oldestBrick = worm.tail.pop(); 
        const brickKey = `${oldestBrick?.x},${oldestBrick?.y}`;
        if (oldestBrick && !targetGridCells.has(brickKey)) {
          oldestBrick.x = gx * bW + bW / 2;
          oldestBrick.y = gy * bH + bH / 2;
          worm.tail.unshift(oldestBrick);
        }
      }
    }
  },
  tickTweens(dt) {
    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      tween.iterations -= 1;
      if (tween.iterations <= 0) {
        this.tweens.delete(tween);
      } else {
        tween.t = 0;
      }
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 6);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.85) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    const [w, h] = GUTTER_GUARD_SIZE;
    Object.assign(gutterDiv.style, {
      position: "absolute",
      left: `-${w}`,
      top: `${this.height - h - 1 }px`,
      width: `${w}px`,
      height: `${h}px`,
      display: this.gutterGuardHealth > 0 ? 'initial' : 'none',
      boxShadow: `inset 0 0 0 1px #fff, inset 0 0 0 2px #000, inset 0 0 0 3px #fff`,
    });

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) =>
          `${power.x + power.size/2 + power.offsetX}px ${power.y + power.size/2 + power.offsetY}px 0 ${
            (power.size / 2) * (power.scale - 1)
          }px rgb(${power.color.join()})`
      )
      .join();

    if (this.paddles.length > 0) {
      const paddle = this.paddles[0];
      Object.assign(paddleDiv.style, {
        left: `-${paddle.width}px`,
        top: `-${paddle.height}px`,
        width: `${paddle.width}px`,
        height: `${paddle.height}px`,
      });
      paddleDiv.style.boxShadow = this.paddles
        .map(
          (p) =>
            `${p.x + p.width / 2 + p.offsetX}px ${
              p.y + p.height / 2 + p.offsetY
            }px 0 0 rgb(${p.color.join()})`
        )
        .join();
    }

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  megaShake(obj, dist = 8) {
    let offSets = new Array(10).fill(0).map(() => -dist/2 + Math.random() * dist);
    this.tween(obj, "offsetX", [0, ...offSets, 0], 260);
    this.tween(obj, "offsetY", [0, ...offSets.reverse(), 0], 620);
  },
  flashIt(obj, color,) {
    this.tween(obj.color, "0", [obj.color[0], color?.[0] ?? 100 + Math.random() * 155, obj.baseColor?.[0] ?? 255], 180);
    this.tween(obj.color, "1", [obj.color[1], color?.[1] ?? 100 + Math.random() * 155, obj.baseColor?.[1] ?? 255], 180);
    this.tween(obj.color, "2", [obj.color[2], color?.[2] ?? 100 + Math.random() * 155, obj.baseColor?.[2] ?? 255], 180);
  },
  updateScore(val) {
    this.score += val;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300);
  },
  updateLives(val = 1) {
    this.lives += val;
    livesContainer.innerText = `${this.lives}`;
    this.tween(livesContainer.style, 'scale', [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680);
  },
  spawnNextLevel() {
    this.level++;
    const levels = {
      0: () => this.spawnLevel({
        predicate: ({x, y, i, j}) => {
          const brick = this.addBrick(x, y);
          // const delay = (i+j) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      1: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if ((i === midX - 1 || i === midX) || (j === midY - 1 || j === midY)) {
            return;
          }

          let color = (i+j+1) % 3 !== 0 ? [255,255,255] : [100,255,255];
          if ((i+j+1) % 4 === 0) {
            color = [255,200,200];
          }

          const brick = this.addBrick(x, y, 0, color);
          if (j === 0 || j === yBrickCount-1) {
            brick.health = 2;
          }
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, midY) * 60);
        }
      }),
      2: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          if (i === midX - 1 || i === midX) {
            return;
          }

          let brick;
          if (i === 0 || j === 0 || i === xBrickCount-1 || j === yBrickCount-1) {
            brick = this.addBrick(x, y, 0, [75, 0, 130]);
            brick.health = 2;
          } else {
            brick = this.addBrick(x, y, 0, [100, 100, 255]);
          }
          // const delay = (xBrickCount+yBrickCount - i - j) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      3: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if ((j+1) % 3 === 0) {
            return;
          }

          const brick = this.addBrick(x, y, 0, j%2 === 0 ? [200,200,200] : [100,100,100]);
          if (j === 0) {
            brick.health = 2;
          } else if (j === yBrickCount-1) {
            brick.health = 5;
          }

          // const delay = (i + (yBrickCount - j)) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      4: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [255, 0, 0],
            [255, 165, 0],
            [255, 255, 0],
            [0, 128, 0],
            [0, 0, 255],
            [75, 0, 130],
            [148, 0, 211] 
          ];

          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          // brick.health += Math.floor(Math.random()*3);
          // Game.tween(brick, 'scale', [0, 1], 680, distance(i, j, 0, midY) * 60);
        }
      }),
      5: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if (i % 2 === 0) return;
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [100, 200, 100],
            [100, 220, 100],
            [100, 255, 100],
            [150, 255, 150],
          ];
          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          if (j % 2 === 0) brick.health = 3;
          
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, 0) * 60);
        }
      }),
      6: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (i === midX || j === midY) {
            return;
          }

          const b1 = this.addBrick(x, y, 0, [255,255,255]);
          const b2 = this.addBrick(x, y, 0, [55,55,255]);
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          // b1.scale = 0;
          // b2.scale = 0;
          // b3.scale = 0;
          // Game.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
          // Game.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
          // Game.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      7: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          if (j === yBrickCount-1) {
            const b1 = this.addBrick(x, y, BrickTypes.Unbreakable, [80,80,80]);
            // b1.scale = 0;
            // Game.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
            return;
          }
          if (i === 0 || i === xBrickCount) {
            const b2 = this.addBrick(x, y, 0, [255,j%2 === 0 ? 55:100, 255]);
            // b2.scale = 0;
            // Game.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
            return;
          }
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          // b3.scale = 0;
          // Game.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      8: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (j === yBrickCount-1 || j === 0 || i === 0 || i === xBrickCount -1) {
            const brick = this.addBrick(x, y, 0, [40,40,200]);
            brick.health = 5;
            return;
          }
          if (j === yBrickCount-2 || j === 1 || i === 1 || i === xBrickCount -2) {
            const brick = this.addBrick(x, y, 0, [20,20,180]);
            brick.health = 3;
            return;
          }
          if (i >= midX - 1 && i <= midX+1 && j >= midY - 1 && j <= midY+1) {
            const brick = this.addBrick(x, y, 0, [255, 127, 40]);
            brick.health = 2;
            return;
          }
        }
      }),
      9: () => {
        this.spawnLevel({
          predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
            const brick = this.addBrick(-x,-y,0, [20+5*i, 20+4*(yBrickCount-y), 20+10*(xBrickCount-i)]);
            brick.health = 5;
          }
        });

        // this.addWorm(undefined, undefined, this.bricks, 50);
      },
    };
    const nLevels = Object.keys(levels).length;
    levels?.[((this.level - 1) % nLevels)]?.();

    this.stopSound(this.bkgSong);

    this.bkgSong = this.bkgSongs[(this.level - 1) % this.bkgSongs.length];
    this.playSound(this.bkgSong, 1, 0.28, true);
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const brickAreaW = screenWidth - playAreaPxRight - playAreaPxLeft;
    const brickAreaH = screenHeight - playAreaPxBot - playAreaPxTop;
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const xBrickCount = Math.floor(brickAreaW / bW);
    const yBrickCount = Math.floor(brickAreaH / bH);
    const rW = brickAreaW % bW;
    const rH = brickAreaH % bH;
    const sx = playAreaPxLeft + rW / 2 + bW / 2;
    const sy = playAreaPxTop + rH / 2 + bH / 2;
    for (let i = xBrickPad; i < xBrickCount - xBrickPad; i++) {
      const x = sx + i * bW;
      for (let j = yBrickPad; j < yBrickCount; j++) {
        const y = sy + j * bH;
        predicate({ x, y, i, j, xBrickCount, yBrickCount });
      }
    }
  },

  // events
  onLifeLost() {
    this.playSound('gameover', 1 + Math.random()*.2);
    this.showMenu();
    this.megaShake(this.camera, 30);
    this.tween(livesContainer.style, 'scale',
      [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680, 540,
      () => livesContainer.innerText = `${this.lives}`
    );
    this.onResetLevel();
  },
  onDeath() {
    this.showMenu();

  },
  onWinLevel() {
    this.onResetLevel();
    this.bricks = [];
    this.spawnNextLevel();
    this.showMenu();
  },
  onResetLevel() {
    this.balls = [];
    this.powerUps = [];
    this.paddles = [];
    this.addBall(this.width/2, Game.height - 60);
    const b = this.balls[this.balls.length -1];
    b.dy = -Math.abs(b.dy);
    this.addPaddle(this.width / 2);
  },
  onStartGame() {
    this.paddles.forEach(p => {
      p.x = this.width/2;
    });
    this.hideMenu();
  },
  onResetGame() {
    this.showMenu();
    this.onResetLevel();
    this.bricks = [];
    this.gutterGuardHealth = 0;
    this.score = 0;
    this.lives = 3;
    this.level = 0;
    this.spawnNextLevel();
    livesContainer.innerText = `${this.lives}`;
  },
  hideMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.tween(menuPaused.style, 'opacity', [1,0], 300, 80, () => {
      menuPaused.style.opacity = 1;
      menuPaused.style.scale = 1;
      menuPaused.style.display = 'none';
      this.isPaused = false;
    });
    this.tween(titleDiv.style, 'scale', [1,1.1,0.5], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [1,1.1,0.5], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
  },
  showMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.isPaused = true;
    menuPaused.style.display = 'flex';
    titleDiv.innerText = `Level ${this.level}`;
    this.tween(titleDiv.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
    this.tween(menuPaused.style, 'opacity', [0,1], 300);
  },

  audioCtx: new AudioContext(),
  masterGainNode: null,
  audioFiles: new Map(),
  audioSources: new Map(),
  isAudioMuted: false,
  hitSounds: [
    'hit_c5',
    'hit_d5',
    'hit_e5',
    'hit_f5',
    'hit_g5',
    'hit_a5',
    'hit_b5',
    'hit_c6',
    'hit_c5_chord',
    'hit_d5_chord',
    'hit_e5_chord',
    'hit_f5_chord',
  ],
  bkgSongs: [
    'song_1',
    'song_2',
    'song_3',
    'song_4',
    'song_5',
    'song_6',
    'song_7',
    'song_8',
    'song_9',
    'song_10',
  ],
  async preload() {
    const sounds = [
      'paddle_hit',
      'edge_hit',
      'menu_open',
      'power_ball',
      'power_speed_up',
      'power_speed_down',
      'power_split',
      'power_omega',
      'power_laser',
      'power_life',
      'power_gg',
      'power_big_ball',
      'power_big_paddle',
      'turn_on',
      'turn_off',
      'gameover',
      ...this.hitSounds,
      ...this.bkgSongs
    ];
    this.masterGainNode = this.audioCtx.createGain();
    this.masterGainNode.connect(this.audioCtx.destination);

    return Promise.all(sounds.map(sound => 
      fetch(`/sounds/bronc/${sound}.ogg`)
        .then(res => {
          if (!res.ok) throw new Error(`failed to load ${sound}`);
          return res.arrayBuffer();
        })
        .then(ab => this.audioCtx.decodeAudioData(ab))
        .then(buff => {
          this.audioSources.set(sound, new Set());
          this.audioFiles.set(sound, buff);
        }).catch((e) => {
          console.error(e);
        })
    ));
  },
  playSound(name, pitch = 1, volume = 1, loop = false, onComplete = undefined) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops no file to play', name);
      return;
    }

    const sources = this.audioSources.get(name);
    const buff = this.audioFiles.get(name);
    const source = this.audioCtx.createBufferSource();
    source.buffer = buff;
    source.playbackRate.value = pitch;
    source.loop = loop;

    const gainNode = this.audioCtx.createGain(); 
    gainNode.gain.value = volume;
    
    source.connect(gainNode);
    gainNode.connect(this.masterGainNode);

    sources.add(source);
    source.onended = () => {
      sources.delete(source);
      source.disconnect(gainNode);
      gainNode.disconnect(this.masterGainNode);

      if (onComplete) {
        onComplete();
      }
    };
    source.start(0);
  },
  stopSound(name) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops cannot stop missing file', name);
      return;
    }

    const sources = this.audioSources.get(name);
    sources.forEach(s => {
      s.stop(0);
    });
  },
  stopAllSounds() {
    this.audioFiles.forEach((_, name) => {
      this.stopSound(name);
    });
  },
  muteAudio(isMuted = false) {
    this.isMuted = isMuted;
    this.masterGainNode.gain.setTargetAtTime(
      isMuted ? 0 : 1,
      this.audioCtx.currentTime,
      0.1
    );
    soundToggle.innerText = `Sound ${isMuted ? 'Off' : 'On'}`;
    soundToggle.style.boxShadow = isMuted ? '0px -1px 0 0px #fff6, 0px 1px 0 #fff' : '0px 1px 0 1px #fff4, 0px -1px 0 #fff';
    Game.tween(soundToggle.style, 'opacity', isMuted ? [1, 0.5] : [0.5, 1], 300);
  }
};

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));
startButton.addEventListener("click", (e) => {
  Game.onStartGame();
});
soundToggle.addEventListener('click', () => {
  Game.muteAudio(!Game.isMuted);
  Game.playSound(Game.isMuted ? 'turn_off' : 'turn_on', 1 + Math.random()*0.2, 2);
});
soundToggle.addEventListener('pointerdown', () => {
  Game.tween(soundToggle.style, 'scale', [1,1.1,0.8], 200);
});
soundToggle.addEventListener('pointerup', () => {
  Game.tween(soundToggle.style, 'scale', [0.8,0.75,1.1,1], 200);
})

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

// document.addEventListener('keydown', e => {
//   Game.bricks = [];
// });

// load and start it all
Game.preload().then(() => {
  Game.onResetGame();
  Game.muteAudio(false);
  universe(lastTime);
});

container.addEventListener('unload', () => {
  cancelAnimationFrame(frameId);
  Game.stopAllSounds();
});

function distance(p1x, p1y, p2x, p2y) {
  return Math.sqrt((p1x - p2x)*(p1x - p2x) + (p1y - p2y)*(p1y - p2y));

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;

// create menu ui
const menuPaused = document.createElement('div');
container.appendChild(menuPaused);
Object.assign(menuPaused.style, {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backdropFilter: 'blur(2px)',
  backgroundColor: '#0008',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  letterSpacing: '2px',
  alignItems: 'center',
  gap: '32px',
  zIndex: 1,
});
const titleDiv = document.createElement('div');
titleDiv.innerText = 'LOADING';
Object.assign(titleDiv.style, {
  fontSize: '32px',
  fontWeight: 'bold',
  textAlign: 'center',
  textTransform: 'uppercase',
  textShadow: '#0008 1px 1px 0px, red 3px 1px 0px, red 1px 2px 0px',
});

const msgDiv = document.createElement('div');
const soundToggle = document.createElement('button');
soundToggle.innerText = 'Audio On';
Object.assign(soundToggle.style, {
  position: 'absolute',
  bottom: '8px',
  right: '8px',
  padding: '6px 12px',
  fontSize: '12px',
  border: 'none',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
  borderRadius: '32px',
  boxShadow: '0px -1px 0 0px #fff8, 0px 2px 0 #fff',
});

const startButton = document.createElement('button');
startButton.innerText = 'START';
Object.assign(startButton.style, {
  padding: '8px 16px',
  minHeight: '32px',
  minWidth: '120px',
  fontSize: '16px',
  letterSpacing: '4px',
  border: 'none',
  boxShadow: '0 0 0 1px #fffa, 0 0 0 2px #000, 0 0 0 3px #fffa',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
})
menuPaused.appendChild(titleDiv);
menuPaused.appendChild(soundToggle);
menuPaused.appendChild(startButton);

const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
  Laser: 2,
  PowerLaser: 3,
};
const BallColors = {
  [BallTypes.Normal]: [255,255,255],
  [BallTypes.PowerBall]: [255,55,55],
  [BallTypes.Laser]: [55,255,255],
  [BallTypes.PowerLaser]: [255,70,70],
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
const BrickTypes = {
  Normal: 0,
  Unbreakable: 1,
  MultiBall: 2,
  PowerBall: 3,
  Explode: 4,
}
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
const PaddleTypes = {
  Normal: 0,
  Laser: 1,
};
const PaddleColors = {
  [PaddleTypes.Normal]: [255, 255, 255],
  [PaddleTypes.Laser]: [55, 255, 255],
};
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  PaddleSize: 3,
  GutterGuard: 4,
  LaserPaddle: 5,
  ExtraLife: 6,
  BonusPoints: 7,
  OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],

  [PowerUpTypes.LaserPaddle]: [200, 255, 255],
  [PowerUpTypes.OmegaDevice]: [255, 0, 255],
  [PowerUpTypes.BonusPoints]: [255, 255, 0],
  [PowerUpTypes.PaddleSize]: [255, 255, 255],
  [PowerUpTypes.GutterGuard]: [255, 255, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
    game.playSound('power_split', 1+Math.random()*.2, 1.2);
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
    });
    game.playSound('power_big_ball', 1+Math.random()*.2, 1);
  },
  [PowerUpTypes.PaddleSize]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.width += PADDLE_SIZE[0] * 0.3;
    });
    game.playSound('power_big_paddle', 1+Math.random()*.2, 1.4);
  },
  [PowerUpTypes.GutterGuard]: (game, powerUp) => {
    game.gutterGuardHealth += 3;
    game.tween(gutterDiv.style, 'scale', this.gutterGuardHealth > 0 ? [1, 1] : [0, 1.1, 1], 280);
    game.playSound('power_gg', 1+Math.random()*.2);
  },
  [PowerUpTypes.BonusPoints]: (game, powerUp) => {
    game.updateScore(Math.floor(powerUp.scale * 1000));
    game.playSound('hit_c5_chord', 1+Math.random()*.2);
  },
  [PowerUpTypes.OmegaDevice]: (game, powerUp) => {
    game.omegaDevicePower += 1;
    game.playSound('power_omega', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    if (game.omegaDevicePower > 5) {
      game.omegaDevicePower = 0;
      for (const brick of game.bricks) {
        game.damageBrick(brick);
      }
      game.megaShake(game.camera, 30);
      game.playSound('gameover', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    }
  },
  [PowerUpTypes.LaserPaddle]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.type = PaddleTypes.Laser;
      paddle.baseColor = PaddleColors[PaddleTypes.Laser];
      game.shakeIt(paddle, 6, [0, 1]);
      game.flashIt(paddle);
      game.tween(paddle, 'scale', [1, 0.8, 1.2, 1], 280);
    });
    game.playSound('power_laser', 1 + Math.random()*.2);
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
    game.playSound('power_ball', 1+Math.random()*.2);
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.updateLives(1);
    game.playSound('power_life', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
    game.playSound('power_speed_up', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
    game.playSound('power_speed_down', 1+Math.random()*.2);
  },
};

const gutterDiv = document.createElement("div");
const GUTTER_GUARD_SIZE = [screenWidth, 8];
container.appendChild(gutterDiv);

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  fontWeight: 'bold',
  letterSpacing: '2px',
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a',
  zIndex: 2,
});

const livesContainer = document.createElement("div");
container.appendChild(livesContainer);
Object.assign(livesContainer.style, {
  position: "absolute",
  top: '16px',
  left: '16px',
  fontSize: "22px",
  fontWeight: 'bold',
  width: "100%",
  textAlign: "left",
  textShadow: '#0008 1px 1px 0px, #44ff44 3px 1px 0px, #44ff44 1px 2px 0px',
  zIndex: 2,
  width: 'fit-content',
});

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  isPaused: false,
  isMuted: false,
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  gutterGuardHealth: 5,
  omegaDevicePower: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  worms: [],
  tweens: new Set(),
  bkgSong: '',

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined, iterations = 1) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      iterations,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    if (event.target !== container) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2, type = PaddleTypes.Normal) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      type,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...PaddleColors[type]],
      color: [...PaddleColors[type]],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 240) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      comboCount: 0,
      baseColor: [...BallColors[type]],
      color: [...BallColors[type]],
      type,
      lastHits: new Set(),
    });

    if (BallTypes.Laser === type || type === BallTypes.PowerLaser) {
      const ball = this.balls[this.balls.length-1];
      ball.dy = -speed - Math.random()*100;
      ball.dx *= 0.5;
      this.tween(ball, 'size', [12,18,6,16,6], 320, 0, undefined, Infinity);
    }
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0, color = [255,255,255]) {
    this.bricks.push({
      x,
      y,
      type,
      health: type === BrickTypes.Unbreakable ? Infinity : 1,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: color,
      color
    });

    return this.bricks[this.bricks.length -1];
  },
  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      color: [...PowerUpColors[type]],
    });
  },
  addWorm(x = this.width/2, y = this.height/2, bricks = [], size = 30, speed = 300) {
    this.worms.push({
      x,
      y,
      dx: 0,
      dy: 0,
      size,
      tail: bricks,
      targetX: x,
      targetY: y,
      speed
    });
  },

  tick(dt) {
    this.frame++;

    if (!this.isPaused) {
      this.tickBalls(dt);
      this.balls = this.balls.filter((ball) => ball.isAlive);
      this.bricks = this.bricks.filter((brick) => brick.isAlive);
      this.tickPowerUps(dt);
      this.powerUps = this.powerUps.filter((pow) => pow.isAlive);
      this.tickWorms(dt);

      if (this.balls.length === 0) {
        if (this.lives > 0) {
          this.lives--;
          this.onLifeLost();
        } else {
          this.onResetGame();
        }
      }
      if (this.bricks.filter(b => b.type !== BrickTypes.Unbreakable).length === 0) {
        this.onWinLevel();
      }
    }

    this.tickTweens(dt);
  },

  tickPowerUps(dt) {
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p, power.color);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }

      PowerUpEffects[power.type]?.(this, power);
    }
  },
  tickBalls(dt) {
    const { width: w, height: h } = this;

    this.balls.forEach((b) => {
      if (!b.isAlive) {
        return;
      }

      let didBounce = false;
      let edgeBounce = false;
      let paddleBounce = false;
      let brickBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // check bounds x
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // bounds y
      if (b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // y bottom
      const ggh = GUTTER_GUARD_SIZE[1];
      if (this.gutterGuardHealth > 0 && b.y + b.size/2 >= h - ggh) {
        b.y = this.height - ggh - b.size/2 - 1;
        b.dy *= -1;
        this.gutterGuardHealth--;
        this.tween(gutterDiv.style, 'opacity', [1, 0.5, 1], 280);
        this.tween(gutterDiv.style, 'marginTop', this.gutterGuardHealth > 1 ? [1, 1] : [1, 1.1, 0], 280);
        edgeBounce = true;
      } else if (b.y + b.size / 2 > h) {
        b.isAlive = false;
      }

      // check paddles
      for (const p of this.paddles) {
        if (b.type === BallTypes.Laser) continue;

        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        paddleBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        }
        b.y = p.y - p.height / 2 - b.size/2 - 1;

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);

        if (p.type === PaddleTypes.Laser) {
          const type = b.type === BallTypes.PowerBall ? BallTypes.PowerLaser : BallTypes.Laser;
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
        }
        break;
      }

      didBounce = edgeBounce || brickBounce || paddleBounce;
      if (!didBounce) {
        return;
      }
      if (!brickBounce) {
        b.lastHits.clear();
      }
      if (edgeBounce) this.playSound('edge_hit', 0.5 + Math.random()*0.2, 1);
      if (paddleBounce) {
        this.playSound('paddle_hit', 1 + Math.random()*0.1, .4);
        b.comboCount = 0;
      }
      if (brickBounce) {
        const cycle = Math.floor(b.comboCount / this.hitSounds.length);
        const boost = 0.20;
        const rndPitch = Math.random()*.1;
        this.playSound(this.hitSounds[b.comboCount % this.hitSounds.length], 1 + boost*cycle + rndPitch, 2.2);
        b.comboCount++;
      }

      this.tween(b, "scale", [0.8, 1.2, 1], 60, 0, () => {
        if (b.type === BallTypes.Laser) {
          b.isAlive = false;
        }
        if (b.type === BallTypes.PowerLaser && edgeBounce) {
          b.isAlive = false;
        }
      });
      this.flashIt(b);
    });
  },
  tickWorms(dt) {
    const playAreaHeight = this.height - 100; 
    const bW = BRICK_SIZE[0]+1;
    const bH = BRICK_SIZE[1]+1;
        
    for (const worm of this.worms) {
      let { targetX, targetY, speed } = worm;
      worm.tail = worm.tail.filter(b => b.isAlive);

      const dirX = targetX - worm.x;
      const dirY = targetY - worm.y;
      const dist = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
      worm.dx += dirX / dist * speed * dt;
      worm.dy += dirY / dist * speed * dt;
      worm.dx *= 0.99;
      worm.dy *= 0.98;
      worm.x += worm.dx*dt;
      worm.y += worm.dy*dt;

      if (dist < worm.size / 2) {
        worm.targetX = Math.random()*this.width;
        worm.targetY = Math.random()*playAreaHeight;
      }


      const occupiedGrid = new Map();
      for (const brick of worm.tail) {
        const gx = Math.floor(brick.x / bW);
        const gy = Math.floor(brick.y / bH);
        occupiedGrid.set(`${gx},${gy}`, true); 
      }

      const headRadius = worm.size / 2;
      const minGridX = Math.floor((worm.x - headRadius) / bW);
      const maxGridX = Math.floor((worm.x + headRadius) / bW);
      const minGridY = Math.floor((worm.y - headRadius) / bH);
      const maxGridY = Math.floor((worm.y + headRadius) / bH);
      let targetGridCells = new Map();
      
      for (let gx = minGridX; gx <= maxGridX; gx++) {
        for (let gy = minGridY; gy <= maxGridY; gy++) {
          const key = `${gx},${gy}`;
          if (!occupiedGrid.has(key)) {
            targetGridCells.set(key, {gx, gy})
          }
        }
      }
        
      if (targetGridCells.size > 0) {
        const randomIndex = Math.floor(Math.random() * targetGridCells.size);
        const { gx, gy } = [...targetGridCells.values()][randomIndex];
        const oldestBrick = worm.tail.pop(); 
        const brickKey = `${oldestBrick?.x},${oldestBrick?.y}`;
        if (oldestBrick && !targetGridCells.has(brickKey)) {
          oldestBrick.x = gx * bW + bW / 2;
          oldestBrick.y = gy * bH + bH / 2;
          if (worm.tail.length > 8) {
            this.tween(oldestBrick, 'scale', [0, 1.5, 0.8, 1.1, 1], 480);
          }
          worm.tail.unshift(oldestBrick);
        }
      }
    }
  },
  tickTweens(dt) {
    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      tween.iterations -= 1;
      if (tween.iterations <= 0) {
        this.tweens.delete(tween);
      } else {
        tween.t = 0;
      }
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 6);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.85) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    const [w, h] = GUTTER_GUARD_SIZE;
    Object.assign(gutterDiv.style, {
      position: "absolute",
      left: `-${w}`,
      top: `${this.height - h - 1 }px`,
      width: `${w}px`,
      height: `${h}px`,
      display: this.gutterGuardHealth > 0 ? 'initial' : 'none',
      boxShadow: `inset 0 0 0 1px #fff, inset 0 0 0 2px #000, inset 0 0 0 3px #fff`,
    });

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) =>
          `${power.x + power.size/2 + power.offsetX}px ${power.y + power.size/2 + power.offsetY}px 0 ${
            (power.size / 2) * (power.scale - 1)
          }px rgb(${power.color.join()})`
      )
      .join();

    if (this.paddles.length > 0) {
      const paddle = this.paddles[0];
      Object.assign(paddleDiv.style, {
        left: `-${paddle.width}px`,
        top: `-${paddle.height}px`,
        width: `${paddle.width}px`,
        height: `${paddle.height}px`,
      });
      paddleDiv.style.boxShadow = this.paddles
        .map(
          (p) =>
            `${p.x + p.width / 2 + p.offsetX}px ${
              p.y + p.height / 2 + p.offsetY
            }px 0 0 rgb(${p.color.join()})`
        )
        .join();
    }

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  megaShake(obj, dist = 8) {
    let offSets = new Array(10).fill(0).map(() => -dist/2 + Math.random() * dist);
    this.tween(obj, "offsetX", [0, ...offSets, 0], 260);
    this.tween(obj, "offsetY", [0, ...offSets.reverse(), 0], 620);
  },
  flashIt(obj, color,) {
    this.tween(obj.color, "0", [obj.color[0], color?.[0] ?? 100 + Math.random() * 155, obj.baseColor?.[0] ?? 255], 180);
    this.tween(obj.color, "1", [obj.color[1], color?.[1] ?? 100 + Math.random() * 155, obj.baseColor?.[1] ?? 255], 180);
    this.tween(obj.color, "2", [obj.color[2], color?.[2] ?? 100 + Math.random() * 155, obj.baseColor?.[2] ?? 255], 180);
  },
  updateScore(val) {
    this.score += val;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300);
  },
  updateLives(val = 1) {
    this.lives += val;
    livesContainer.innerText = `${this.lives}`;
    this.tween(livesContainer.style, 'scale', [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680);
  },
  spawnNextLevel() {
    this.level++;
    const levels = {
      9: () => this.spawnLevel({
        predicate: ({x, y, i, j}) => {
          const brick = this.addBrick(x, y);
          // const delay = (i+j) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      1: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if ((i === midX - 1 || i === midX) || (j === midY - 1 || j === midY)) {
            return;
          }

          let color = (i+j+1) % 3 !== 0 ? [255,255,255] : [100,255,255];
          if ((i+j+1) % 4 === 0) {
            color = [255,200,200];
          }

          const brick = this.addBrick(x, y, 0, color);
          if (j === 0 || j === yBrickCount-1) {
            brick.health = 2;
          }
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, midY) * 60);
        }
      }),
      2: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          if (i === midX - 1 || i === midX) {
            return;
          }

          let brick;
          if (i === 0 || j === 0 || i === xBrickCount-1 || j === yBrickCount-1) {
            brick = this.addBrick(x, y, 0, [75, 0, 130]);
            brick.health = 2;
          } else {
            brick = this.addBrick(x, y, 0, [100, 100, 255]);
          }
          // const delay = (xBrickCount+yBrickCount - i - j) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      3: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if ((j+1) % 3 === 0) {
            return;
          }

          const brick = this.addBrick(x, y, 0, j%2 === 0 ? [200,200,200] : [100,100,100]);
          if (j === 0) {
            brick.health = 2;
          } else if (j === yBrickCount-1) {
            brick.health = 5;
          }

          // const delay = (i + (yBrickCount - j)) * 30;
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      4: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [255, 0, 0],
            [255, 165, 0],
            [255, 255, 0],
            [0, 128, 0],
            [0, 0, 255],
            [75, 0, 130],
            [148, 0, 211] 
          ];

          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          // brick.health += Math.floor(Math.random()*3);
          // Game.tween(brick, 'scale', [0, 1], 680, distance(i, j, 0, midY) * 60);
        }
      }),
      5: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if (i % 2 === 0) return;
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [100, 200, 100],
            [100, 220, 100],
            [100, 255, 100],
            [150, 255, 150],
          ];
          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          if (j % 2 === 0) brick.health = 3;
          
          // brick.scale = 0;
          // Game.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, 0) * 60);
        }
      }),
      6: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (i === midX || j === midY) {
            return;
          }

          const b1 = this.addBrick(x, y, 0, [255,255,255]);
          const b2 = this.addBrick(x, y, 0, [55,55,255]);
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          // b1.scale = 0;
          // b2.scale = 0;
          // b3.scale = 0;
          // Game.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
          // Game.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
          // Game.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      7: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          if (j === yBrickCount-1) {
            const b1 = this.addBrick(x, y, BrickTypes.Unbreakable, [80,80,80]);
            // b1.scale = 0;
            // Game.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
            return;
          }
          if (i === 0 || i === xBrickCount) {
            const b2 = this.addBrick(x, y, 0, [255,j%2 === 0 ? 55:100, 255]);
            // b2.scale = 0;
            // Game.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
            return;
          }
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          // b3.scale = 0;
          // Game.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      8: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (j === yBrickCount-1 || j === 0 || i === 0 || i === xBrickCount -1) {
            const brick = this.addBrick(x, y, 0, [40,40,200]);
            brick.health = 5;
            return;
          }
          if (j === yBrickCount-2 || j === 1 || i === 1 || i === xBrickCount -2) {
            const brick = this.addBrick(x, y, 0, [20,20,180]);
            brick.health = 3;
            return;
          }
          if (i >= midX - 1 && i <= midX+1 && j >= midY - 1 && j <= midY+1) {
            const brick = this.addBrick(x, y, 0, [255, 127, 40]);
            brick.health = 2;
            return;
          }
        }
      }),
      0: () => {
        this.spawnLevel({
          predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
            const brick = this.addBrick(-x,-y,0, [20+5*i, 20+4*(yBrickCount-y), 20+10*(xBrickCount-i)]);
            brick.health = 5;
          }
        });

        this.addWorm(undefined, undefined, this.bricks, 50);
      },
    };
    const nLevels = Object.keys(levels).length;
    levels?.[((this.level - 1) % nLevels)]?.();

    this.stopSound(this.bkgSong);

    this.bkgSong = this.bkgSongs[(this.level - 1) % this.bkgSongs.length];
    this.playSound(this.bkgSong, 1, 0.28, true);
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const brickAreaW = screenWidth - playAreaPxRight - playAreaPxLeft;
    const brickAreaH = screenHeight - playAreaPxBot - playAreaPxTop;
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const xBrickCount = Math.floor(brickAreaW / bW);
    const yBrickCount = Math.floor(brickAreaH / bH);
    const rW = brickAreaW % bW;
    const rH = brickAreaH % bH;
    const sx = playAreaPxLeft + rW / 2 + bW / 2;
    const sy = playAreaPxTop + rH / 2 + bH / 2;
    for (let i = xBrickPad; i < xBrickCount - xBrickPad; i++) {
      const x = sx + i * bW;
      for (let j = yBrickPad; j < yBrickCount; j++) {
        const y = sy + j * bH;
        predicate({ x, y, i, j, xBrickCount, yBrickCount });
      }
    }
  },

  // events
  onLifeLost() {
    this.playSound('gameover', 1 + Math.random()*.2);
    this.showMenu();
    this.megaShake(this.camera, 30);
    this.tween(livesContainer.style, 'scale',
      [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680, 540,
      () => livesContainer.innerText = `${this.lives}`
    );
    this.onResetLevel();
  },
  onDeath() {
    this.showMenu();

  },
  onWinLevel() {
    this.onResetLevel();
    this.bricks = [];
    this.spawnNextLevel();
    this.showMenu();
  },
  onResetLevel() {
    this.balls = [];
    this.powerUps = [];
    this.paddles = [];
    this.addBall(this.width/2, Game.height - 60);
    const b = this.balls[this.balls.length - 1];
    b.dy = -Math.abs(b.dy);
    this.addPaddle(this.width / 2);
  },
  onStartGame() {
    this.paddles.forEach(p => {
      p.x = this.width/2;
    });
    this.hideMenu();
  },
  onResetGame() {
    this.showMenu();
    this.onResetLevel();
    this.bricks = [];
    this.gutterGuardHealth = 0;
    this.score = 0;
    this.lives = 3;
    this.level = 0;
    this.spawnNextLevel();
    livesContainer.innerText = `${this.lives}`;
  },
  hideMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.tween(menuPaused.style, 'opacity', [1,0], 300, 80, () => {
      menuPaused.style.opacity = 1;
      menuPaused.style.scale = 1;
      menuPaused.style.display = 'none';
      this.isPaused = false;
    });
    this.tween(titleDiv.style, 'scale', [1,1.1,0.5], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [1,1.1,0.5], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
  },
  showMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.isPaused = true;
    menuPaused.style.display = 'flex';
    titleDiv.innerText = `Level ${this.level}`;
    this.tween(titleDiv.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
    this.tween(menuPaused.style, 'opacity', [0,1], 300);
  },

  audioCtx: new AudioContext(),
  masterGainNode: null,
  audioFiles: new Map(),
  audioSources: new Map(),
  isAudioMuted: false,
  hitSounds: [
    'hit_c5',
    'hit_d5',
    'hit_e5',
    'hit_f5',
    'hit_g5',
    'hit_a5',
    'hit_b5',
    'hit_c6',
    'hit_c5_chord',
    'hit_d5_chord',
    'hit_e5_chord',
    'hit_f5_chord',
  ],
  bkgSongs: [
    'song_1',
    'song_2',
    'song_3',
    'song_4',
    'song_5',
    'song_6',
    'song_7',
    'song_8',
    'song_9',
    'song_10',
  ],
  async preload() {
    const sounds = [
      'paddle_hit',
      'edge_hit',
      'menu_open',
      'power_ball',
      'power_speed_up',
      'power_speed_down',
      'power_split',
      'power_omega',
      'power_omega_boom',
      'power_laser',
      'power_life',
      'power_gg',
      'power_big_ball',
      'power_big_paddle',
      'turn_on',
      'turn_off',
      'gameover',
      ...this.hitSounds,
      ...this.bkgSongs
    ];
    this.masterGainNode = this.audioCtx.createGain();
    this.masterGainNode.connect(this.audioCtx.destination);

    return Promise.all(sounds.map(sound => 
      fetch(`/sounds/bronc/${sound}.ogg`)
        .then(res => {
          if (!res.ok) throw new Error(`failed to load ${sound}`);
          return res.arrayBuffer();
        })
        .then(ab => this.audioCtx.decodeAudioData(ab))
        .then(buff => {
          this.audioSources.set(sound, new Set());
          this.audioFiles.set(sound, buff);
        }).catch((e) => {
          console.error(e);
        })
    ));
  },
  playSound(name, pitch = 1, volume = 1, loop = false, onComplete = undefined) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops no file to play', name);
      return;
    }

    const sources = this.audioSources.get(name);
    const buff = this.audioFiles.get(name);
    const source = this.audioCtx.createBufferSource();
    source.buffer = buff;
    source.playbackRate.value = pitch;
    source.loop = loop;

    const gainNode = this.audioCtx.createGain(); 
    gainNode.gain.value = volume;
    
    source.connect(gainNode);
    gainNode.connect(this.masterGainNode);

    sources.add(source);
    source.onended = () => {
      sources.delete(source);
      source.disconnect(gainNode);
      gainNode.disconnect(this.masterGainNode);

      if (onComplete) {
        onComplete();
      }
    };
    source.start(0);
  },
  stopSound(name) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops cannot stop missing file', name);
      return;
    }

    const sources = this.audioSources.get(name);
    sources.forEach(s => {
      s.stop(0);
    });
  },
  stopAllSounds() {
    this.audioFiles.forEach((_, name) => {
      this.stopSound(name);
    });
  },
  muteAudio(isMuted = false) {
    this.isMuted = isMuted;
    this.masterGainNode.gain.setTargetAtTime(
      isMuted ? 0 : 1,
      this.audioCtx.currentTime,
      0.1
    );
    soundToggle.innerText = `Sound ${isMuted ? 'Off' : 'On'}`;
    soundToggle.style.boxShadow = isMuted ? '0px -1px 0 0px #fff6, 0px 1px 0 #fff' : '0px 1px 0 1px #fff4, 0px -1px 0 #fff';
    Game.tween(soundToggle.style, 'opacity', isMuted ? [1, 0.5] : [0.5, 1], 300);
  }
};

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));
startButton.addEventListener("click", (e) => {
  Game.onStartGame();
});
soundToggle.addEventListener('click', () => {
  Game.muteAudio(!Game.isMuted);
  Game.playSound(Game.isMuted ? 'turn_off' : 'turn_on', 1 + Math.random()*0.2, 2);
});
soundToggle.addEventListener('pointerdown', () => {
  Game.tween(soundToggle.style, 'scale', [1,1.1,0.8], 200);
});
soundToggle.addEventListener('pointerup', () => {
  Game.tween(soundToggle.style, 'scale', [0.8,0.75,1.1,1], 200);
})

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

// document.addEventListener('keydown', e => {
//   Game.bricks = [];
// });

// load and start it all
Game.preload().then(() => {
  Game.onResetGame();
  Game.muteAudio(false);
  universe(lastTime);
});

container.addEventListener('unload', () => {
  cancelAnimationFrame(frameId);
  Game.stopAllSounds();
});

function distance(p1x, p1y, p2x, p2y) {
  return Math.sqrt((p1x - p2x)*(p1x - p2x) + (p1y - p2y)*(p1y - p2y));
}

const container = document.getElementById(containerId);
const screenWidth = container.clientWidth;
const screenHeight = container.clientHeight;

// create menu ui
const menuPaused = document.createElement('div');
container.appendChild(menuPaused);
Object.assign(menuPaused.style, {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backdropFilter: 'blur(2px)',
  backgroundColor: '#0008',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  letterSpacing: '2px',
  alignItems: 'center',
  gap: '32px',
  zIndex: 1,
});
const titleDiv = document.createElement('div');
titleDiv.innerText = 'LOADING';
Object.assign(titleDiv.style, {
  fontSize: '32px',
  fontWeight: 'bold',
  textAlign: 'center',
  textTransform: 'uppercase',
  textShadow: '#0008 1px 1px 0px, red 3px 1px 0px, red 1px 2px 0px',
});

const msgDiv = document.createElement('div');
const soundToggle = document.createElement('button');
soundToggle.innerText = 'Audio On';
Object.assign(soundToggle.style, {
  position: 'absolute',
  bottom: '8px',
  right: '8px',
  padding: '6px 12px',
  fontSize: '12px',
  border: 'none',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
  borderRadius: '32px',
  boxShadow: '0px -1px 0 0px #fff8, 0px 2px 0 #fff',
});

const crtToggle = document.createElement('button');
crtToggle.innerText = 'Crt On';
Object.assign(crtToggle.style, {
  position: 'absolute',
  bottom: 'calc(8px + 26px + 8px)',
  right: '8px',
  padding: '6px 12px',
  fontSize: '12px',
  border: 'none',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
  borderRadius: '32px',
  boxShadow: '0px -1px 0 0px #fff8, 0px 2px 0 #fff',
});

const startButton = document.createElement('button');
startButton.innerText = 'START';
Object.assign(startButton.style, {
  padding: '8px 16px',
  minHeight: '32px',
  minWidth: '120px',
  fontSize: '16px',
  letterSpacing: '4px',
  border: 'none',
  boxShadow: '0 0 0 1px #fffa, 0 0 0 2px #000, 0 0 0 3px #fffa',
  textShadow: '1px 2px #fff2',
  color: '#fffb',
  background: 'transparent',
  outline: 'none',
})
menuPaused.appendChild(titleDiv);
menuPaused.appendChild(soundToggle);
menuPaused.appendChild(crtToggle);
menuPaused.appendChild(startButton);

const ballDiv = document.createElement("div");
container.appendChild(ballDiv);
Object.assign(ballDiv.style, {
  position: "absolute",
  left: "0",
  top: "0",
});
const BallTypes = {
  Normal: 0,
  PowerBall: 1,
  Laser: 2,
  PowerLaser: 3,
};
const BallColors = {
  [BallTypes.Normal]: [255,255,255],
  [BallTypes.PowerBall]: [255,55,55],
  [BallTypes.Laser]: [55,255,255],
  [BallTypes.PowerLaser]: [255,70,70],
};

const brickDiv = document.createElement("div");
container.appendChild(brickDiv);
const BRICK_SIZE = [36, 12];
const BrickTypes = {
  Normal: 0,
  Unbreakable: 1,
  MultiBall: 2,
  PowerBall: 3,
  Explode: 4,
}
Object.assign(brickDiv.style, {
  position: "absolute",
  borderRadius: "2px",
  left: `-${BRICK_SIZE[0]}px`,
  top: `-${BRICK_SIZE[1]}px`,
  width: `${BRICK_SIZE[0]}px`,
  height: `${BRICK_SIZE[1]}px`,
});

const paddleDiv = document.createElement("div");
container.appendChild(paddleDiv);
const PADDLE_SIZE = [70, 10];
const PaddleTypes = {
  Normal: 0,
  Laser: 1,
};
const PaddleColors = {
  [PaddleTypes.Normal]: [255, 255, 255],
  [PaddleTypes.Laser]: [55, 255, 255],
};
Object.assign(paddleDiv.style, {
  position: "absolute",
  left: `-${PADDLE_SIZE[0]}px`,
  top: `-${PADDLE_SIZE[1]}px`,
  width: `${PADDLE_SIZE[0]}px`,
  height: `${PADDLE_SIZE[1]}px`,
});

const powerUpDiv = document.createElement("div");
container.appendChild(powerUpDiv);
const POWER_UP_SIZE = 16;
Object.assign(powerUpDiv.style, {
  position: "absolute",
  left: `-${POWER_UP_SIZE}px`,
  top: `-${POWER_UP_SIZE}px`,
  width: `${POWER_UP_SIZE}px`,
  height: `${POWER_UP_SIZE}px`,
  borderRadius: '9000px',
});
const PowerUpTypes = {
  MultiBall: 0,
  BigBall: 1,
  PowerBall: 2,
  PaddleSize: 3,
  GutterGuard: 4,
  LaserPaddle: 5,
  ExtraLife: 6,
  BonusPoints: 7,
  OmegaDevice: 8,
  SpeedUp: 9,
  SpeedDown: 10,
};
const PowerUpColors = {
  [PowerUpTypes.MultiBall]: [255, 200, 255],
  [PowerUpTypes.BigBall]: [200, 200, 255],
  [PowerUpTypes.PowerBall]: [255, 50, 50],
  [PowerUpTypes.ExtraLife]: [100, 255, 100],
  [PowerUpTypes.SpeedUp]: [100, 255, 255],
  [PowerUpTypes.SpeedDown]: [255, 100, 255],

  [PowerUpTypes.LaserPaddle]: [200, 255, 255],
  [PowerUpTypes.OmegaDevice]: [255, 0, 255],
  [PowerUpTypes.BonusPoints]: [255, 255, 0],
  [PowerUpTypes.PaddleSize]: [255, 255, 255],
  [PowerUpTypes.GutterGuard]: [255, 255, 255],
};
const PowerUpEffects = {
  [PowerUpTypes.MultiBall]: (game, powerUp) => {
    game.balls.map(b => [b.x, b.y]).forEach(([x,y]) => game.addBall(x,y));
    game.playSound('power_split', 1+Math.random()*.2, 1.2);
  },
  [PowerUpTypes.BigBall]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.size *= 2;
    });
    game.playSound('power_big_ball', 1+Math.random()*.2, 1);
  },
  [PowerUpTypes.PaddleSize]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.width += PADDLE_SIZE[0] * 0.3;
    });
    game.playSound('power_big_paddle', 1+Math.random()*.2, 1.4);
  },
  [PowerUpTypes.GutterGuard]: (game, powerUp) => {
    game.gutterGuardHealth += 3;
    game.tween(gutterDiv.style, 'scale', this.gutterGuardHealth > 0 ? [1, 1] : [0, 1.1, 1], 280);
    game.playSound('power_gg', 1+Math.random()*.2);
  },
  [PowerUpTypes.BonusPoints]: (game, powerUp) => {
    game.updateScore(Math.floor(powerUp.scale * 1000));
    game.playSound('hit_c5_chord', 1+Math.random()*.2);
  },
  [PowerUpTypes.OmegaDevice]: (game, powerUp) => {
    game.updateSteinPower(1);
    game.playSound('power_omega', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    if (game.omegaDevicePower >= 6) {
      game.updateSteinPower(-6);
      for (const brick of game.bricks) {
        game.damageBrick(brick);
      }
      game.megaShake(game.camera, 30);
      game.playSound('gameover', 1 + (0.5*game.omegaDevicePower) + Math.random()*.2);
    }
  },
  [PowerUpTypes.LaserPaddle]: (game, powerUp) => {
    game.paddles.forEach(paddle => {
      paddle.type = PaddleTypes.Laser;
      paddle.baseColor = PaddleColors[PaddleTypes.Laser];
      game.shakeIt(paddle, 6, [0, 1]);
      game.flashIt(paddle);
      game.tween(paddle, 'scale', [1, 0.8, 1.2, 1], 280);
    });
    game.playSound('power_laser', 1 + Math.random()*.2);
  },
  [PowerUpTypes.PowerBall]: (game, powerUp) => {
    game.addBall(powerUp.x, powerUp.y, BallTypes.PowerBall);
    game.balls[game.balls.length-1].dy = -Math.abs(game.balls[game.balls.length-1].dy);
    game.playSound('power_ball', 1+Math.random()*.2);
  },
  [PowerUpTypes.ExtraLife]: (game, powerUp) => {
    game.updateLives(1);
    game.playSound('power_life', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedUp]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= 1.25;
      b.dy *= 1.25;
    });
    game.playSound('power_speed_up', 1+Math.random()*.2);
  },
  [PowerUpTypes.SpeedDown]: (game, powerUp) => {
    game.balls.forEach(b => {
      b.dx *= .9;
      b.dy *= .9;
    });
    game.playSound('power_speed_down', 1+Math.random()*.2);
  },
};

const gutterDiv = document.createElement("div");
const GUTTER_GUARD_SIZE = [screenWidth, 8];
container.appendChild(gutterDiv);

const scoreContainer = document.createElement("div");
container.appendChild(scoreContainer);
Object.assign(scoreContainer.style, {
  position: "absolute",
  top: 0,
  right: 0,
  fontSize: "16px",
  width: "100%",
  fontWeight: 'bold',
  letterSpacing: '2px',
  marginTop: "min(5%, 1.5rem)",
  textAlign: "center",
  textShadow: '1px 4px 0 #000a',
  zIndex: 2,
});

const livesContainer = document.createElement("div");
container.appendChild(livesContainer);
Object.assign(livesContainer.style, {
  position: "absolute",
  top: '16px',
  left: '16px',
  fontSize: "22px",
  fontWeight: 'bold',
  width: "100%",
  textAlign: "left",
  textShadow: '#0008 1px 1px 0px, #44ff44 3px 1px 0px, #44ff44 1px 2px 0px',
  zIndex: 2,
  width: 'fit-content',
});

const steinPowerMeterContainer = document.createElement("div");
container.appendChild(steinPowerMeterContainer);
Object.assign(steinPowerMeterContainer.style, {
  position: "absolute",
  top: '16px',
  right: '16px',
  fontSize: "18px",
  fontWeight: 'bold',
  width: "100%",
  textAlign: "left",
  letterSpacing: '2px',
  textShadow: '#0008 1px 1px 0px, #a850ffff 3px 1px 0px, #ab58ffff 1px 2px 0px',
  zIndex: 2,
  width: 'fit-content',
});

const crtEffectDef = document.createElement('div');
container.appendChild(crtEffectDef);
Object.assign(crtEffectDef.style, {
  position: "absolute",
  width: '100%',
  height: '100%',
  zIndex: 3,
  pointerEvents: 'none',
  opacity: 0.5,
  background: 'repeating-linear-gradient(180deg,#000 0px,#000 1px,transparent 1px,transparent 3px)'
});
crtEffectDef.innerHTML = `
<svg width="0" height="0" style="position:absolute;">
  <defs>
    <filter id="full-crt">
      <feColorMatrix in="SourceGraphic" type="matrix" 
        values="1 0 0 0 0  
                0 0 0 0 0  
                0 0 0 0 0  
                0 0 0 1 0" result="redChannel" />
      <feColorMatrix in="SourceGraphic" type="matrix" 
        values="0 0 0 0 0  
                0 1 0 0 0  
                0 0 1 0 0  
                0 0 0 1 0" result="greenBlueChannel" />
      <feOffset in="redChannel" dx="-1" dy="0" result="redShifted" />
      <feOffset in="greenBlueChannel" dx="1" dy="0" result="greenBlueShifted" />
      <feBlend in="redShifted" in2="greenBlueShifted" mode="screen" />
    </filter>
  </defs>
</svg>
`;

const lerp = (from, to, time) => from + (to - from) * time;

const Game = {
  isPaused: false,
  isCrtOn: true,
  isMuted: false,
  score: 0,
  lives: 3,
  level: 1,
  frame: 0,
  gutterGuardHealth: 5,
  omegaDevicePower: 0,
  camera: {
    scale: 1,
    offsetX: 0,
    offsetY: 0,
  },
  width: screenWidth,
  height: screenHeight,
  balls: [],
  bricks: [],
  paddles: [],
  powerUps: [],
  worms: [],
  tweens: new Set(),
  bkgSong: '',

  tween(target, prop, keyframes, duration, delay = 0, onComplete = undefined, iterations = 1) {
    this.tweens.add({
      target,
      prop,
      keyframes,
      t: 0,
      duration: duration / 1000,
      iterations,
      delay: delay / 1000,
      onComplete,
    });
  },

  handleMouseOrTouchInput(event) {
    if (event.target !== container) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const x = event?.touches?.[0]?.clientX ?? event.offsetX;
    const y = event?.touches?.[0]?.clientY ?? event.offsetY;
    this.paddles.forEach(
      (p) =>
        (p.x = Math.min(this.width - p.width / 2, Math.max(p.width / 2, x)))
    );
  },

  addPaddle(x = this.width / 2, y = this.height - PADDLE_SIZE[1] * 2, type = PaddleTypes.Normal) {
    this.paddles.push({
      x,
      y,
      width: PADDLE_SIZE[0],
      height: PADDLE_SIZE[1],
      type,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: [...PaddleColors[type]],
      color: [...PaddleColors[type]],
    });
  },
  addBall(x = this.width / 2, y = this.height / 2, type = BallTypes.Normal, speed = 210) {
    const thresholdDegrees = 20;
    const arc = thresholdDegrees * (Math.PI / 180);
    let angle = arc + Math.random() * (Math.PI - 2 * arc);
    this.balls.push({
      x,
      y,
      dx: Math.cos(angle) * speed,
      dy: Math.sin(angle) * speed,
      size: 10,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      comboCount: 0,
      baseColor: [...BallColors[type]],
      color: [...BallColors[type]],
      type,
      lastHits: new Set(),
    });

    if (BallTypes.Laser === type || type === BallTypes.PowerLaser) {
      const ball = this.balls[this.balls.length-1];
      ball.dy = -speed - Math.random()*100;
      ball.dx *= 0.5;
      this.tween(ball, 'size', [12,18,6,16,6], 320, 0, undefined, Infinity);
    }
  },
  addBrick(x = this.width / 2, y = this.height / 2, type = 0, color = [255,255,255]) {
    this.bricks.push({
      x,
      y,
      type,
      health: type === BrickTypes.Unbreakable ? Infinity : 1,
      isAlive: true,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      baseColor: color,
      color
    });

    return this.bricks[this.bricks.length -1];
  },
  addPowerUp(x = this.width / 2, y = this.height / 2, type = PowerUpTypes.MultiBall, speed = 160) {
    this.powerUps.push({
      x,
      y,
      dx: 0,
      dy: speed,
      type,
      isAlive: true,
      size: 16,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      s1x: 2,  s1y: 0,
      color: [...PowerUpColors[type]],
    });
    const p = this.powerUps[this.powerUps.length - 1];
    Game.tween(p, 's1x', [1, 0.707, 0, -0.707, -1, -0.707, 0, 0.707, 1], 480, 0, undefined, Infinity);
    Game.tween(p, 's1y', [0, 0.707, 1, 0.707, 0, -0.707, -1, -0.707, 0],  480, 0, undefined, Infinity);
    Game.tween(p, 'scale', [1, .9, 1, 1.1, 1], 480, 0, undefined, Infinity);
  },
  addWorm(x = this.width/2, y = this.height/2, bricks = [], size = 30, speed = 300) {
    this.worms.push({
      x,
      y,
      dx: 0,
      dy: 0,
      size,
      tail: bricks,
      targetX: x,
      targetY: y,
      speed
    });
  },

  tick(dt) {
    this.frame++;

    if (!this.isPaused) {
      this.tickBalls(dt);
      this.balls = this.balls.filter((ball) => ball.isAlive);
      this.bricks = this.bricks.filter((brick) => brick.isAlive);
      this.tickPowerUps(dt);
      this.powerUps = this.powerUps.filter((pow) => pow.isAlive);
      this.tickWorms(dt);

      if (this.balls.length === 0) {
        if (this.lives > 0) {
          this.lives--;
          this.onLifeLost();
        } else {
          this.onResetGame();
        }
      }
      if (this.bricks.filter(b => b.type !== BrickTypes.Unbreakable).length === 0) {
        this.onWinLevel();
      }
    }

    this.tickTweens(dt);
  },

  tickPowerUps(dt) {
    for (const power of this.powerUps) {
      power.x += power.dx * dt;
      power.y += power.dy * dt;
      const halfSize = power.size/2;
      let left = power.x - halfSize;
      let right = power.x + halfSize;
      let top = power.y - halfSize;
      let bot = power.y + halfSize;

      power.scale = 1 + 0.1*Math.sin(this.frame*.2);

      // check paddles
      for (const p of this.paddles) {
        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (left > pR || right < pL) {
          continue;
        }
        if (top > pB || bot < pT) {
          continue;
        }
        power.isAlive = false;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p, power.color);
        break;
      }

      if (power.y > this.height) {
        power.isAlive = false;
        continue;
      }

      if (power.isAlive) {
        continue;
      }

      PowerUpEffects[power.type]?.(this, power);
    }
  },
  tickBalls(dt) {
    const { width: w, height: h } = this;

    this.balls.forEach((b) => {
      if (!b.isAlive) {
        return;
      }

      let didBounce = false;
      let edgeBounce = false;
      let paddleBounce = false;
      let brickBounce = false;
      let ballDx = b.dx * dt;
      let ballDy = b.dy * dt;
      const bHalfSize = b.size / 2;

      // check bricks.
      const [brickWidth, brickHeight] = BRICK_SIZE;
      // x axis
      b.x += ballDx;
      let ballL = b.x - bHalfSize;
      let ballR = b.x + bHalfSize;
      let ballT = b.y - bHalfSize;
      let ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.x = ballDx > 0 ? brickL - bHalfSize - 1 : brickR + bHalfSize + 1;
          b.dx *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // y axis
      b.y += ballDy;
      ballL = b.x - bHalfSize;
      ballR = b.x + bHalfSize;
      ballT = b.y - bHalfSize;
      ballB = b.y + bHalfSize;
      for (const brick of this.bricks) {
        if (!brick.isAlive || brick.health <= 0 || b.lastHits.has(brick)) {
          continue;
        }

        const brickL = brick.x - brickWidth / 2;
        const brickR = brick.x + brickWidth / 2;
        const brickT = brick.y - brickHeight / 2;
        const brickB = brick.y + brickHeight / 2;
        if (
          ballT > brickB ||
          ballB < brickT ||
          ballL > brickR ||
          ballR < brickL
        ) {
          continue;
        }

        if ((b.type !== BallTypes.PowerBall && b.type !== BallTypes.PowerLaser) || brick.type === BrickTypes.Unbreakable) {
          b.y = ballDy > 0 ? (b.y = brickT - bHalfSize - 1) : brickB + bHalfSize + 1;
          b.dy *= -1;
        }
        brickBounce = true;
        b.isAlive = BallTypes.Laser !== b.type;
        this.damageBrick(brick);
        if (BallTypes.Normal !== b.type) {
          b.lastHits.add(brick);
        }
        break;
      }

      // check bounds x
      if (b.x + b.size / 2 > w || b.x < b.size / 2) {
        b.x = ballDx > 0 ? w - b.size / 2 : b.size / 2;
        b.dx *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // bounds y
      if (b.y < b.size / 2) {
        b.y = ballDy > 0 ? h - b.size / 2 : b.size / 2;
        b.dy *= -1;
        this.shakeIt(this.camera, 3);
        edgeBounce = true;
      }
      // y bottom
      const ggh = GUTTER_GUARD_SIZE[1];
      if (this.gutterGuardHealth > 0 && b.y + b.size/2 >= h - ggh) {
        b.y = this.height - ggh - b.size/2 - 1;
        b.dy *= -1;
        this.gutterGuardHealth--;
        this.tween(gutterDiv.style, 'opacity', [1, 0.5, 1], 280);
        this.tween(gutterDiv.style, 'marginTop', this.gutterGuardHealth > 1 ? [1, 1] : [1, 1.1, 0], 280);
        edgeBounce = true;
      } else if (b.y + b.size / 2 > h) {
        b.isAlive = false;
      }

      // check paddles
      for (const p of this.paddles) {
        if (b.type === BallTypes.Laser) continue;

        const pL = p.x - p.width / 2;
        const pR = p.x + p.width / 2;
        const pT = p.y - p.height / 2;
        const pB = p.y + p.height / 2;
        if (ballL > pR || ballR < pL) {
          continue;
        }
        if (ballT > pB || ballB < pT) {
          continue;
        }
        paddleBounce = true;
        const xDif = Math.min(ballR - pL, pR - ballL);
        const yDif = Math.min(ballB - pT, pB - ballT);
        if (xDif < yDif) {
          b.x += b.x > p.x ? xDif : -xDif;
        }
        b.y = p.y - p.height / 2 - b.size/2 - 1;

        const angle = Math.atan2(
          b.y - (p.y - p.height / 2 + p.width / 2),
          b.x - p.x
        );
        const speed = Math.sqrt(b.dx * b.dx + b.dy * b.dy);
        b.dx = Math.cos(angle) * speed;
        b.dy = Math.sin(angle) * speed;

        this.shakeIt(p, 3, [0, 1]);
        this.flashIt(p);

        if (p.type === PaddleTypes.Laser) {
          const type = b.type === BallTypes.PowerBall ? BallTypes.PowerLaser : BallTypes.Laser;
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
          this.addBall(b.x, b.y+b.size/2, type, 480);
        }
        break;
      }

      didBounce = edgeBounce || brickBounce || paddleBounce;
      if (!didBounce) {
        return;
      }
      if (!brickBounce) {
        b.lastHits.clear();
      }
      if (edgeBounce) this.playSound('edge_hit', 0.5 + Math.random()*0.2, 1);
      if (paddleBounce) {
        this.playSound('paddle_hit', 1 + Math.random()*0.1, .4);
        b.comboCount = 0;
      }
      if (brickBounce) {
        const cycle = Math.floor(b.comboCount / this.hitSounds.length);
        const boost = 0.20;
        const rndPitch = Math.random()*.1;
        this.playSound(this.hitSounds[b.comboCount % this.hitSounds.length], 1 + boost*cycle + rndPitch, 2.2);
        b.comboCount++;
      }

      this.tween(b, "scale", [0.8, 1.2, 1], 60, 0, () => {
        if (b.type === BallTypes.Laser) {
          b.isAlive = false;
        }
        if (b.type === BallTypes.PowerLaser && edgeBounce) {
          b.isAlive = false;
        }
      });
      this.flashIt(b);
    });
  },
  tickWorms(dt) {
    const playAreaHeight = this.height - 120; 
    const bW = BRICK_SIZE[0]+1;
    const bH = BRICK_SIZE[1]+1;
        
    for (const worm of this.worms) {
      let { targetX, targetY, speed } = worm;
      worm.tail = worm.tail.filter(b => b.isAlive);

      const dirX = targetX - worm.x;
      const dirY = targetY - worm.y;
      const dist = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
      worm.dx += dirX / dist * speed * dt;
      worm.dy += dirY / dist * speed * dt;
      worm.dx *= 0.99;
      worm.dy *= 0.98;
      worm.x += worm.dx*dt;
      worm.y += worm.dy*dt;

      if (dist < worm.size / 2) {
        worm.targetX = Math.random()*this.width;
        worm.targetY = Math.random()*playAreaHeight;
      }


      const occupiedGrid = new Map();
      for (const brick of worm.tail) {
        const gx = Math.floor(brick.x / bW);
        const gy = Math.floor(brick.y / bH);
        occupiedGrid.set(`${gx},${gy}`, true); 
      }

      const headRadius = worm.size / 2;
      const minGridX = Math.floor((worm.x - headRadius) / bW);
      const maxGridX = Math.floor((worm.x + headRadius) / bW);
      const minGridY = Math.floor((worm.y - headRadius) / bH);
      const maxGridY = Math.floor((worm.y + headRadius) / bH);
      let targetGridCells = new Map();
      
      for (let gx = minGridX; gx <= maxGridX; gx++) {
        for (let gy = minGridY; gy <= maxGridY; gy++) {
          const key = `${gx},${gy}`;
          if (!occupiedGrid.has(key)) {
            targetGridCells.set(key, {gx, gy})
          }
        }
      }
        
      if (targetGridCells.size > 0) {
        const randomIndex = Math.floor(Math.random() * targetGridCells.size);
        const { gx, gy } = [...targetGridCells.values()][randomIndex];
        const oldestBrick = worm.tail.pop(); 
        const brickKey = `${oldestBrick?.x},${oldestBrick?.y}`;
        if (oldestBrick && !targetGridCells.has(brickKey)) {
          oldestBrick.x = gx * bW + bW / 2;
          oldestBrick.y = gy * bH + bH / 2;
          if (worm.tail.length > 8) {
            this.tween(oldestBrick, 'scale', [0, 1.5, 0.8, 1.1, 1], 480);
          }
          worm.tail.unshift(oldestBrick);
        }
      }
    }
  },
  tickTweens(dt) {
    // do the tween
    for (const tween of this.tweens) {
      const { target, prop, keyframes, duration } = tween;
      tween.delay -= dt;
      if (tween.delay > 0) continue;
      tween.t += dt;
      const frames = keyframes.length - 1;
      const progress = Math.min(1, tween.t / duration);
      const kIdx = Math.min(frames - 1, Math.floor(frames * progress));
      const localProgress = (progress - kIdx / frames) / (1 / frames);
      target[prop] = lerp(keyframes[kIdx], keyframes[kIdx + 1], localProgress);
      if (tween.t < duration) {
        continue;
      }

      target[prop] = keyframes[keyframes.length - 1];
      if (tween.onComplete) {
        tween.onComplete();
      }
      tween.iterations -= 1;
      if (tween.iterations <= 0) {
        this.tweens.delete(tween);
      } else {
        tween.t = 0;
      }
    }
  },

  damageBrick(brick) {
    this.flashIt(brick);
    this.shakeIt(brick, 6);
    brick.health -= 1;
    if (brick.health > 0) {
      return;
    }

    this.updateScore(100);
    this.tween(
      brick,
      "scale",
      [1, 1],
      120,
      160,
      () => (brick.isAlive = false)
    );

    if (Math.random() > 0.85) {
      const types = Object.values(PowerUpTypes);
      this.addPowerUp(brick.x, brick.y, types[Math.floor(Math.random()*types.length)]);
    }
  },

  draw() {
    const [w, h] = GUTTER_GUARD_SIZE;
    Object.assign(gutterDiv.style, {
      position: "absolute",
      left: `-${w}`,
      top: `${this.height - h - 1 }px`,
      width: `${w}px`,
      height: `${h}px`,
      display: this.gutterGuardHealth > 0 ? 'initial' : 'none',
      boxShadow: `inset 0 0 0 1px #fff, inset 0 0 0 2px #000, inset 0 0 0 3px #fff`,
    });

    const [bW, bH] = BRICK_SIZE;
    brickDiv.style.boxShadow = this.bricks
      .map(
        (b) =>
          `${b.x + bW / 2 + b.offsetX}px ${b.y + bH / 2 + b.offsetY}px 0 ${
            (bH / 2) * (b.scale - 1)
          }px rgb(${b.color.join()})`
      )
      .join();

    ballDiv.style.boxShadow = this.balls
      .map(
        (b) =>
          `${b.x + b.offsetX}px ${b.y + b.offsetY}px 0 ${
            (b.size / 2) * b.scale
          }px rgb(${b.color.join()})`
      )
      .join();

    powerUpDiv.style.boxShadow = this.powerUps
      .map(
        (power) => {
          const centerX = power.x + power.size / 2 + power.offsetX;
          const centerY = power.y + power.size / 2 + power.offsetY;
          const spread = (power.size / 2) * (power.scale - 1);
          const col = `rgb(${power.color.join()})`;

          return [
            `${centerX}px ${centerY}px 0 ${spread-2}px #000`,
            `${centerX + power.s1x}px ${centerY + power.s1y}px 0 ${spread}px ${col}`,
          ].join(",");
        }
      )
      .join();

    if (this.paddles.length > 0) {
      const paddle = this.paddles[0];
      Object.assign(paddleDiv.style, {
        left: `-${paddle.width}px`,
        top: `-${paddle.height}px`,
        width: `${paddle.width}px`,
        height: `${paddle.height}px`,
      });
      paddleDiv.style.boxShadow = this.paddles
        .map(
          (p) =>
            `${p.x + p.width / 2 + p.offsetX}px ${
              p.y + p.height / 2 + p.offsetY
            }px 0 0 rgb(${p.color.join()})`
        )
        .join();
    }

    container.style.transform = `translate(${this.camera.offsetX}px,${this.camera.offsetY}px)`;
  },

  shakeIt(obj, dist = 4, dir = undefined) {
    let ox = -dist/2 + Math.random() * dist;
    let oy = -dist/2 + Math.random() * dist;
    if (dir) {
      ox = dir[0] * dist;
      oy = dir[1] * dist;
    }
    this.tween(obj, "offsetX", [0, ox, -ox, ox / 2, 0], 260);
    this.tween(obj, "offsetY", [0, oy, -oy, oy / 2, 0], 260);
  },
  megaShake(obj, dist = 8) {
    let offSets = new Array(10).fill(0).map(() => -dist/2 + Math.random() * dist);
    this.tween(obj, "offsetX", [0, ...offSets, 0], 260);
    this.tween(obj, "offsetY", [0, ...offSets.reverse(), 0], 620);
  },
  flashIt(obj, color,) {
    this.tween(obj.color, "0", [obj.color[0], color?.[0] ?? 100 + Math.random() * 155, obj.baseColor?.[0] ?? 255], 180);
    this.tween(obj.color, "1", [obj.color[1], color?.[1] ?? 100 + Math.random() * 155, obj.baseColor?.[1] ?? 255], 180);
    this.tween(obj.color, "2", [obj.color[2], color?.[2] ?? 100 + Math.random() * 155, obj.baseColor?.[2] ?? 255], 180);
  },
  updateScore(val) {
    this.score += val;
    scoreContainer.innerText = `${this.score.toLocaleString()}`;
    this.tween(scoreContainer.style, 'scale', [.85, 1.5, 1], 300, 0);
  },
  updateLives(val = 1) {
    this.lives += val;
    this.makeFancyText(livesContainer, `${this.lives}`, 2);
    this.tween(livesContainer.style, 'scale', [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680);
  },
  updateSteinPower(val = 1) {
    this.omegaDevicePower += val;
    this.makeFancyText(steinPowerMeterContainer, `${this.omegaDevicePower}/5`, 2);
    this.tween(steinPowerMeterContainer.style, 'scale', [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680);
  },
  spawnNextLevel() {
    this.level++;
    const levels = {
      0: () => this.spawnLevel({
        predicate: ({x, y, i, j}) => {
          const brick = this.addBrick(x, y);
          const delay = (i+j) * 30;
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      1: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if ((i === midX - 1 || i === midX) || (j === midY - 1 || j === midY)) {
            return;
          }

          let color = (i+j+1) % 3 !== 0 ? [255,255,255] : [100,255,255];
          if ((i+j+1) % 4 === 0) {
            color = [255,200,200];
          }

          const brick = this.addBrick(x, y, 0, color);
          if (j === 0 || j === yBrickCount-1) {
            brick.health = 2;
          }
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, midY) * 60);
        }
      }),
      2: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          if (i === midX - 1 || i === midX) {
            return;
          }

          let brick;
          if (i === 0 || j === 0 || i === xBrickCount-1 || j === yBrickCount-1) {
            brick = this.addBrick(x, y, 0, [75, 0, 130]);
            brick.health = 2;
          } else {
            brick = this.addBrick(x, y, 0, [100, 100, 255]);
          }
          const delay = (xBrickCount+yBrickCount - i - j) * 30;
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      3: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if ((j+1) % 3 === 0) {
            return;
          }

          const brick = this.addBrick(x, y, 0, j%2 === 0 ? [200,200,200] : [100,100,100]);
          if (j === 0) {
            brick.health = 2;
          } else if (j === yBrickCount-1) {
            brick.health = 5;
          }

          const delay = (i + (yBrickCount - j)) * 30;
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1.2, 1], 480, delay);
        }
      }),
      4: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [255, 0, 0],
            [255, 165, 0],
            [255, 255, 0],
            [0, 128, 0],
            [0, 0, 255],
            [75, 0, 130],
            [148, 0, 211] 
          ];

          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          brick.health += Math.floor(Math.random()*3);
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1], 680, distance(i, j, 0, midY) * 60);
        }
      }),
      5: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          if (i % 2 === 0) return;
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          const colors = [
            [100, 200, 100],
            [100, 220, 100],
            [100, 255, 100],
            [150, 255, 150],
          ];
          const brick = this.addBrick(x, y, 0, [...colors[j % (colors.length-1)]]);
          if (j % 2 === 0) brick.health = 3;
          
          brick.scale = 0;
          this.tween(brick, 'scale', [0, 1], 480, distance(i, j, midX, 0) * 60);
        }
      }),
      6: () => this.spawnLevel({
        predicate: ({x, y, i, j, xBrickCount, yBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (i === midX || j === midY) {
            return;
          }

          const b1 = this.addBrick(x, y, 0, [255,255,255]);
          const b2 = this.addBrick(x, y, 0, [55,55,255]);
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          b1.scale = 0;
          b2.scale = 0;
          b3.scale = 0;
          this.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
          this.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
          this.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      7: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (j === yBrickCount-1) {
            const b1 = this.addBrick(x, y, BrickTypes.Unbreakable, [80,80,80]);
            b1.scale = 0;
            this.tween(b1, 'scale', [0, 1], 480, distance(i, j, midX, yBrickCount) * 60);
            return;
          }
          if (i === 0 || i === xBrickCount) {
            const b2 = this.addBrick(x, y, 0, [255,j%2 === 0 ? 55:100, 255]);
            b2.scale = 0;
            this.tween(b2, 'scale', [0, 1], 480, distance(i, j, xBrickCount, midY) * 90);
            return;
          }
          const b3 = this.addBrick(x, y, 0, [255,55,55]);
          b3.scale = 0;
          this.tween(b3, 'scale', [0, 1], 480, distance(i, j, xBrickCount, yBrickCount) * 120);
        }
      }),
      8: () => this.spawnLevel({
        predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
          const midX = Math.floor(xBrickCount / 2);
          const midY = Math.floor(yBrickCount / 2);
          if (j === yBrickCount-1 || j === 0 || i === 0 || i === xBrickCount -1) {
            const brick = this.addBrick(x, y, 0, [40,40,200]);
            brick.health = 5;
            brick.scale = 0;
            this.tween(brick, 'scale', [0, 1.2, 1], 480, (i+j) * 30);
            return;
          }
          if (j === yBrickCount-2 || j === 1 || i === 1 || i === xBrickCount -2) {
            const brick = this.addBrick(x, y, 0, [20,20,180]);
            brick.health = 3;
            brick.scale = 0;
            this.tween(brick, 'scale', [0, 1.2, 1], 480, (i+j) * 30);
            return;
          }
          if (i >= midX - 1 && i <= midX+1 && j >= midY - 1 && j <= midY+1) {
            const brick = this.addBrick(x, y, 0, [255, 127, 40]);
            brick.health = 2;
            brick.scale = 0;
            this.tween(brick, 'scale', [0, 1.2, 1], 480, (i+j) * 30);
            return;
          }
        }
      }),
      9: () => {
        this.spawnLevel({
          predicate: ({x, y, i, j, yBrickCount, xBrickCount}) => {
            const brick = this.addBrick(-x,-y,0, [20+5*i, 20+4*(yBrickCount-y), 20+10*(xBrickCount-i)]);
            brick.health = 5;
          }
        });

        this.addWorm(undefined, undefined, this.bricks, 50);
      },
    };
    const nLevels = Object.keys(levels).length;
    levels?.[((this.level - 1) % nLevels)]?.();

    this.stopSound(this.bkgSong);

    this.bkgSong = this.bkgSongs[(this.level - 1) % this.bkgSongs.length];
    this.playSound(this.bkgSong, 1, 0.28, true);
  },
  spawnLevel(config) {
    const defaults = {
      blockWidth: BRICK_SIZE[0],
      blockHeight: BRICK_SIZE[1],
      screenWidth: this.width,
      screenHeight: this.height,
      brickGutterPx: 1.5,
      xBrickPad: 1,
      yBrickPad: 0,
      playAreaPxBot: 180,
      playAreaPxTop: 60,
      playAreaPxLeft: 0,
      playAreaPxRight: 0,
      predicate: ({ x, y }) => this.addBrick(x, y),
    };
    const {
      blockWidth,
      blockHeight,
      screenWidth,
      screenHeight,
      brickGutterPx,
      xBrickPad,
      yBrickPad,
      playAreaPxBot,
      playAreaPxTop,
      playAreaPxLeft,
      playAreaPxRight,
      predicate,
    } = { ...defaults, ...config };
    const brickAreaW = screenWidth - playAreaPxRight - playAreaPxLeft;
    const brickAreaH = screenHeight - playAreaPxBot - playAreaPxTop;
    const bW = blockWidth + brickGutterPx;
    const bH = blockHeight + brickGutterPx;
    const xBrickCount = Math.floor(brickAreaW / bW);
    const yBrickCount = Math.floor(brickAreaH / bH);
    const rW = brickAreaW % bW;
    const rH = brickAreaH % bH;
    const sx = playAreaPxLeft + rW / 2 + bW / 2;
    const sy = playAreaPxTop + rH / 2 + bH / 2;
    for (let i = xBrickPad; i < xBrickCount - xBrickPad; i++) {
      const x = sx + i * bW;
      for (let j = yBrickPad; j < yBrickCount; j++) {
        const y = sy + j * bH;
        predicate({ x, y, i, j, xBrickCount, yBrickCount });
      }
    }
  },

  // events
  onLifeLost() {
    this.playSound('gameover', 1 + Math.random()*.2);
    this.showMenu();
    this.megaShake(this.camera, 30);
    this.tween(livesContainer.style, 'scale',
      [1, 0.7, 2, .8, 1.5, .9, 1.2, .95, 1], 680, 540,
      () => this.makeFancyText(livesContainer, `${this.lives}`, 2)
    );
    this.onResetLevel();
  },
  onDeath() {
    this.showMenu();

  },
  onWinLevel() {
    this.onResetLevel();
    this.bricks = [];
    this.spawnNextLevel();
    this.showMenu();
  },
  onResetLevel() {
    this.balls = [];
    this.powerUps = [];
    this.paddles = [];
    this.addBall(this.width/2, Game.height - 60);
    const b = this.balls[this.balls.length - 1];
    b.dy = -Math.abs(b.dy);
    this.addPaddle(this.width / 2);
  },
  onStartGame() {
    this.paddles.forEach(p => {
      p.x = this.width/2;
    });
    this.hideMenu();
  },
  onResetGame() {
    this.showMenu();
    this.onResetLevel();
    this.bricks = [];
    this.gutterGuardHealth = 0;
    this.score = 0;
    this.lives = 3;
    this.level = 0;
    this.spawnNextLevel();
    this.makeFancyText(livesContainer, `${this.lives}`);
    this.updateSteinPower(0);
  },
  hideMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.tween(menuPaused.style, 'opacity', [1,0], 300, 80, () => {
      menuPaused.style.opacity = 1;
      menuPaused.style.scale = 1;
      menuPaused.style.display = 'none';
      this.isPaused = false;
    });
    this.tween(titleDiv.style, 'scale', [1,1.1,0.5], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [1,1.1,0.5], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
  },
  showMenu() {
    this.playSound('menu_open', 1 + Math.random()*2);
    this.isPaused = true;
    menuPaused.style.display = 'flex';
    this.makeFancyText(titleDiv, `Level ${this.level}`, 3, 3000, 100);
    this.tween(titleDiv.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(titleDiv.style, 'opacity', [0,1], 300);
    this.tween(startButton.style, 'scale', [0.5, 0.4, 1.1, 1], 380);
    this.tween(startButton.style, 'opacity', [0,1], 300);
    this.tween(menuPaused.style, 'opacity', [0,1], 300);
  },

  audioCtx: new AudioContext(),
  masterGainNode: null,
  audioFiles: new Map(),
  audioSources: new Map(),
  isAudioMuted: false,
  hitSounds: [
    'hit_c5',
    'hit_d5',
    'hit_e5',
    'hit_f5',
    'hit_g5',
    'hit_a5',
    'hit_b5',
    'hit_c6',
    'hit_c5_chord',
    'hit_d5_chord',
    'hit_e5_chord',
    'hit_f5_chord',
  ],
  bkgSongs: [
    'song_1',
    'song_2',
    'song_3',
    'song_4',
    'song_5',
    'song_6',
    'song_7',
    'song_8',
    'song_9',
    'song_10',
  ],
  async preload() {
    const sounds = [
      'paddle_hit',
      'edge_hit',
      'menu_open',
      'power_ball',
      'power_speed_up',
      'power_speed_down',
      'power_split',
      'power_omega',
      'power_omega_boom',
      'power_laser',
      'power_life',
      'power_gg',
      'power_big_ball',
      'power_big_paddle',
      'turn_on',
      'turn_off',
      'gameover',
      ...this.hitSounds,
      ...this.bkgSongs
    ];
    this.masterGainNode = this.audioCtx.createGain();
    this.masterGainNode.connect(this.audioCtx.destination);

    return Promise.all(sounds.map(sound => 
      fetch(`/sounds/bronc/${sound}.ogg`)
        .then(res => {
          if (!res.ok) throw new Error(`failed to load ${sound}`);
          return res.arrayBuffer();
        })
        .then(ab => this.audioCtx.decodeAudioData(ab))
        .then(buff => {
          this.audioSources.set(sound, new Set());
          this.audioFiles.set(sound, buff);
        }).catch((e) => {
          console.error(e);
        })
    ));
  },
  playSound(name, pitch = 1, volume = 1, loop = false, onComplete = undefined) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops no file to play', name);
      return;
    }

    const sources = this.audioSources.get(name);
    const buff = this.audioFiles.get(name);
    const source = this.audioCtx.createBufferSource();
    source.buffer = buff;
    source.playbackRate.value = pitch;
    source.loop = loop;

    const gainNode = this.audioCtx.createGain(); 
    gainNode.gain.value = volume;
    
    source.connect(gainNode);
    gainNode.connect(this.masterGainNode);

    sources.add(source);
    source.onended = () => {
      sources.delete(source);
      source.disconnect(gainNode);
      gainNode.disconnect(this.masterGainNode);

      if (onComplete) {
        onComplete();
      }
    };
    source.start(0);
  },
  stopSound(name) {
    if (!this.audioFiles.has(name)) {
      console.warn('woops cannot stop missing file', name);
      return;
    }

    const sources = this.audioSources.get(name);
    sources.forEach(s => {
      s.stop(0);
    });
  },
  stopAllSounds() {
    this.audioFiles.forEach((_, name) => {
      this.stopSound(name);
    });
  },
  muteAudio(isMuted = false) {
    this.isMuted = isMuted;
    this.masterGainNode.gain.setTargetAtTime(
      isMuted ? 0 : 1,
      this.audioCtx.currentTime,
      0.1
    );
    this.makeFancyText(soundToggle, `Sound ${isMuted ? 'Off' : 'On'}`, 1, 4000, 600);
    this.tween(soundToggle.style, 'opacity', isMuted ? [1, 0.5] : [0.5, 1], 300);
    soundToggle.style.boxShadow = isMuted ? '0px -1px 0 0px #fff6, 0px 1px 0 #fff' : '0px 1px 0 1px #fff4, 0px -1px 0 #fff';
  },
  toggleCrtEffect(isOn = true) {
    this.isCrtOn = isOn;

    this.makeFancyText(crtToggle, `CRT ${isOn ? 'On' : 'Off'}`, 1, 4000, 600);
    this.playSound(!isOn ? 'turn_off' : 'turn_on', 1 + Math.random()*0.2, 2);
    this.tween(crtToggle.style, 'opacity', !isOn ? [1, 0.5] : [0.5, 1], 300);

    crtToggle.style.boxShadow = !isOn ? '0px -1px 0 0px #fff6, 0px 1px 0 #fff' : '0px 1px 0 1px #fff4, 0px -1px 0 #fff';
    container.style.setProperty('filter', isOn ? 'url(#full-crt) brightness(1.5)' : 'none');
    crtEffectDef.style.setProperty('display', isOn ? 'block' : 'none');
  },
  makeFancyText(element, text, height = 3, durationMs = 2000, staggerMs = 120) {
    element.innerHTML = ''; 
    text.split("").forEach((char, index) => {
      const span = document.createElement('span');
      span.textContent = char;
      span.style.display = "inline-block";
      span.style.whiteSpace = "pre";
      span.style.translate = "0 calc(var(--y, 0) * 1px)";
      element.appendChild(span);

      const proxy = {
        y: 0,
        set y(val) {
          span.style.setProperty('--y', `${val}`);
        }
      }
      this.tween(proxy, 'y', [0, -height, 0, height, 0], durationMs, staggerMs * index, undefined, Infinity);
    });
  }
};

container.addEventListener("pointermove", (e) =>
  Game.handleMouseOrTouchInput(e)
);
container.addEventListener("touchmove", (e) => Game.handleMouseOrTouchInput(e));
startButton.addEventListener("click", (e) => {
  Game.onStartGame();
});
soundToggle.addEventListener('click', () => {
  Game.muteAudio(!Game.isMuted);
  Game.playSound(Game.isMuted ? 'turn_off' : 'turn_on', 1 + Math.random()*0.2, 2);
});
soundToggle.addEventListener('pointerdown', () => {
  Game.tween(soundToggle.style, 'scale', [1,1.1,0.8], 200);
});
soundToggle.addEventListener('pointerup', () => {
  Game.tween(soundToggle.style, 'scale', [0.8,0.75,1.1,1], 200);
});
crtToggle.addEventListener('click', () => {
  Game.toggleCrtEffect(!Game.isCrtOn);
})
crtToggle.addEventListener('pointerdown', () => {
  Game.tween(crtToggle.style, 'scale', [1,1.1,0.8], 200);
});
crtToggle.addEventListener('pointerup', () => {
  Game.tween(crtToggle.style, 'scale', [0.8,0.75,1.1,1], 200);
});

let lastTime = 0;
function universe(delta) {
  if (lastTime === 0) {
    lastTime = delta;
  }

  const dt = (delta - lastTime) / 1000;
  Game.tick(dt);
  Game.draw();

  lastTime = delta;
  frameId = requestAnimationFrame(universe);
}

// document.addEventListener('keydown', e => {
//   Game.bricks = [];
// });

// load and start it all
Game.preload().then(() => {
  Game.onResetGame();
  Game.muteAudio(false);
  Game.toggleCrtEffect(false);
  universe(lastTime);
});

container.addEventListener('unload', () => {
  cancelAnimationFrame(frameId);
  Game.stopAllSounds();
});

function distance(p1x, p1y, p2x, p2y) {
  return Math.sqrt((p1x - p2x)*(p1x - p2x) + (p1y - p2y)*(p1y - p2y));
}