The Pool Table [CPC - Bump]

.fade

.title the Pool Table

  small trigonometry is hard

.controls

  button.reset Reset

.table

  .table__pockets

    each val in [1, 2, 3, 4, 5, 6]

      span

  .table__inner

    .ball.primary

    each val in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

      .ball.racked(class='num-' + val)

  .table__sunk

a.branding(href="https://jboxcreative.com", target="_blank")

  img(

    src="https://jboxcreative.com/wp-content/uploads/2018/12/jbox-logo-abstract-white-200x200.png"

  )

​

* {

  box-sizing: border-box;

}

​

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background-image: url("https://assets.codepen.io/450456/seamless-wood-floor-texture-free_1.jpeg");

  background-size: 350px;

  overflow: hidden;

}

​

.title {

  user-select: none;

  position: absolute;

  z-index: 20;

  font-family: "Major Mono Display", monospace;

  color: white;

  top: 16px;

const balls = $(".ball");

const pockets = $(".table__pockets span");

​

$(".reset").on("click", function () {

  $(".table__sunk .ball").appendTo(".table__inner");

  $(".ball").removeClass("sunk").attr("style", "").data("velocity", 0);

});

​

$(".primary").on("mousedown", function (e) {

  $(this).addClass("active");

  $(this).append('<div class="ball__aimer"><span></span></div>');

});

​

$(document).on("mousemove", function (e) {

  if ($(".ball__aimer").length) {

    const ballX = $(".primary").offset().left + 10;

    const ballY = $(".primary").offset().top + 10;

    const angle = calcAngle(e.pageX, e.pageY, ballX, ballY);

    $(".ball__aimer").css("transform", "rotate(" + angle + "deg)");

    const pull = calcDistance(e.pageX, e.pageY, ballX, ballY) - 20;