Fuckikg rotate wheel TOUCHMOVE

fuckikg-rotate-wheel-touchmove.markdown

Fuckikg rotate wheel TOUCHMOVE

A Pen by Alexander on CodePen.

License.

index.html

<div class="screenHall__dot-wrapper">
  <!--обложка для позиционирования точки касания-->
  <div class="screenHall__dot-center"></div>

  <div class="screenHall__time">
    <hr class="hr hr1">
    <hr class="hr hr2">
  </div>

</div>

script.js

let elementRotate;
document.addEventListener("DOMContentLoaded", function (event) {
  let progress = 0;
  let startProgress = 0;
  let step = 50;

  const time = document.querySelector(".screenHall__time");
  const wrapper = document.querySelector(".screenHall__dot-wrapper");
  const dotCenter = document.querySelector(".screenHall__dot-center");

  elementRotate = document.querySelector(".screenHall__time");
  progress = 0;
  elementRotate.style.transform = "rotate(0deg)";

  elementRotate.addEventListener("touchstart", touchStart);
  time.addEventListener("touchend", touchEnd);

  let dotTop = getComputedStyle(dotCenter, null).top.replace(/\D+/g, "");
  let dotLeft = getComputedStyle(dotCenter, null).left.replace(/\D+/g, "");
  let heightWrapper = getComputedStyle(wrapper, null).height.replace(
    /\D+/g,
    ""
  );
  let centerElement = heightWrapper - dotTop;

  let Nex;
  let degree_angle;
  let val = 0;
  let A2x;
  let A2y;

  let swipe;
  let startSwaip;
  let stopSwaip;
  let startMouse;

  // ------------------------------------- TOUCHSTART
  function touchStart(event) {
    time.style.transition = "0s";

    startSwaip = new Date().getTime();
    initialPoint = event.changedTouches[0];
    startProgress = progress;
    Nex = elementRotate.style.transform; // Nex  -  текущий градус поворода при touchstart
    Nex = parseFloat(Nex.slice(7));
    A2x = event.changedTouches[0].pageX; // A2x  -  координаты тыка changedTouches[0].pageX;
    A2y = heightWrapper - event.changedTouches[0].pageY; // A2y  -  координаты тыка changedTouches[0].pageY;

    startMouse = {
      x: event.changedTouches[0].pageX,
      y: event.changedTouches[0].pageY
    };
    elementRotate.addEventListener("touchmove", touchMove);
  }

  // ------------------------------------- TOUCHMOVE
  function touchMove(event) {
    let mouse = {
      x: event.changedTouches[0].pageX,
      y: event.changedTouches[0].pageY
    };
    let center = {
      x: elementRotate.offsetLeft + elementRotate.offsetWidth / 2,
      y: elementRotate.offsetTop + elementRotate.offsetHeight / 2
    };
    Dist = Math.atan2(
      (center.x - mouse.x) * (center.y - startMouse.y) -
        (center.y - mouse.y) * (center.x - startMouse.x),
      (center.x - mouse.x) * (center.x - startMouse.x) +
        (center.y - mouse.y) * (center.y - startMouse.y)
    );

    Dist *= -1;

    degree_angle = Dist * (180 / Math.PI);
    val = degree_angle + Nex;
    elementRotate.style.transform = "rotate(" + val + "deg)";
  }

  // ------------------------------------- TOUCHEND
  endDeg = 100;
  function touchEnd(event) {
    let delay = "500ms"; // время доводки

    stopSwaip = new Date().getTime();
    let totalTimeSwipe = stopSwaip - startSwaip;

    console.clear();
    console.log("всего прошло: " + totalTimeSwipe);

    if (totalTimeSwipe <= 200) {
      if (degree_angle > 0) {
        console.log(`totalTimeSwipe < 200`);

        time.style.transition = "0.5s";
        time.style.transform = `rotate(${Math.trunc(val / 90) * 90 + 90}deg)`;
      } else {
        time.style.transition = "0.5s";
        time.style.transform = `rotate(${Math.trunc(val / 90) * 90 - 90}deg)`;
      }
    }

    if (totalTimeSwipe >= 200 && totalTimeSwipe <= 500) {
      if (degree_angle > 0) {
        console.log(`totalTimeSwipe < 200`);

        time.style.transition = "0.5s";
        time.style.transform = `rotate(${Math.trunc(val / 90) * 90 + 360}deg)`;
      } else {
        time.style.transition = "0.5s";
        time.style.transform = `rotate(${Math.trunc(val / 90) * 90 - 360}deg)`;
      }
    }

    // доводка
    else {
      swipe = Math.round(val / 90) * 90; // step - шаг доводки доводится если значение шага больше 50%
      time.style.transition = delay;
      time.style.transform = "rotate(" + swipe + "deg)";
    }
  }
});

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

html {
  overflow: hidden;
}

html,
body {
  font-family: Geometria;
  background-color: #2c7580;
  color: #ccc;

  overflow: hidden;
}

.hr {
  position: absolute;
  top: 135px;
  color: white;
  z-index: 9999;
  width: 100%;
}

.hr2 {
  transform: rotate(90deg);
}

.hr1::after {
  content: "160";
}

.hr2::after {
  content: "O";
}

.screenHall__dot-wrapper {
  outline: 4px dashed gold;
  background-color: gray;
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.screenHall__dot-center {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 1px;
  height: 1px;
  z-index: 999;
  background-color: black;
  outline: 1px solid black;
  outline-offset: 10px;
}

.screenHall__time {
  outline: 1px dashed gold;
  /* display: flex; */
  position: absolute;
  top: 50px;
  left: 50px;
  width: 291px;
  height: 291px;
  border: 0.5px solid rgba(226, 226, 226, 0.3);
  background-image: linear-gradient(black, black, red, black, black);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1;
  box-sizing: border-box;
}