From 426c9c51908098334f5b5e6d97573e9ecdb06a5f Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 10 Jun 2023 21:32:35 -0700
Subject: [PATCH 01/10] Reduce code duplication by making a `Wheel` class

---
 source/Zodiac_compatibility/data/dataArray.js | 101 ++-------
 source/Zodiac_compatibility/script.js         | 191 +++++++++---------
 source/Zodiac_compatibility/zodiac-angles.js  |  46 ++---
 3 files changed, 122 insertions(+), 216 deletions(-)

diff --git a/source/Zodiac_compatibility/data/dataArray.js b/source/Zodiac_compatibility/data/dataArray.js
index 546a11ff..bd983080 100644
--- a/source/Zodiac_compatibility/data/dataArray.js
+++ b/source/Zodiac_compatibility/data/dataArray.js
@@ -1,84 +1,20 @@
 /**
- * A mapping of modulo'd angles to Zodiacs for the left wheel.
- * @type {[number, string][]}
+ * The order of the zodiacs along a wheel.
+ * @type {string[]}
  */
-const zodiacAngleMappingLeft = [
-  [0, "Capricorn"],
-  [360, "Capricorn"],
-
-  [30, "Sagittarius"],
-  [-330, "Sagittarius"],
-
-  [60, "Scorpio"],
-  [-300, "Scorpio"],
-
-  [90, "Libra"],
-  [-270, "Libra"],
-
-  [120, "Virgo"],
-  [-240, "Virgo"],
-
-  [150, "Leo"],
-  [-210, "Leo"],
-
-  [180, "Cancer"],
-  [-180, "Cancer"],
-
-  [210, "Gemini"],
-  [-150, "Gemini"],
-
-  [240, "Taurus"],
-  [-120, "Taurus"],
-
-  [270, "Aries"],
-  [-90, "Aries"],
-
-  [300, "Pisces"],
-  [-60, "Pisces"],
-
-  [330, "Aquarius"],
-  [-30, "Aquarius"],
-];
-/**
- * A mapping of modulo'd angles to Zodiacs for the right wheel.
- * @type {[number, string][]}
- */
-const zodiacAngleMappingRight = [
-  [0, "Cancer"],
-  [360, "Cancer"],
-
-  [30, "Gemini"],
-  [-330, "Gemini"],
-
-  [60, "Taurus"],
-  [-300, "Taurus"],
-
-  [90, "Aries"],
-  [-270, "Aries"],
-
-  [120, "Pisces"],
-  [-240, "Pisces"],
-
-  [150, "Aquarius"],
-  [-210, "Aquarius"],
-
-  [180, "Capricorn"],
-  [-180, "Capricorn"],
-
-  [210, "Sagittarius"],
-  [-150, "Sagittarius"],
-
-  [240, "Scorpio"],
-  [-120, "Scorpio"],
-
-  [270, "Libra"],
-  [-90, "Libra"],
-
-  [300, "Virgo"],
-  [-60, "Virgo"],
-
-  [330, "Leo"],
-  [-30, "Leo"],
+const zodiacOrder = [
+  "Capricorn",
+  "Sagittarius",
+  "Scorpio",
+  "Libra",
+  "Virgo",
+  "Leo",
+  "Cancer",
+  "Gemini",
+  "Taurus",
+  "Aries",
+  "Pisces",
+  "Aquarius",
 ];
 
 /**
@@ -417,9 +353,4 @@ const romantic = new Map([
     "When two Pisces individuals come together in a romantic relationship, they create a deep and emotionally rich connection. Both partners have a sensitive and compassionate nature, making them highly attuned to each other's emotional needs. They understand and empathize with each other's emotions, creating a safe and nurturing space for love to flourish. Pisces partners share a strong spiritual and intuitive connection, often feeling like they can understand each other on a profound level without the need for words. They enjoy creating a romantic and dreamy atmosphere, filled with love, romance, and imaginative gestures. However, their deep emotional sensitivity can sometimes lead to emotional intensity or mood swings within the relationship. It's important for Pisces partners to practice effective communication, establish healthy boundaries, and support each other's emotional well-being. When they embrace their shared empathy, emotional depth, and spiritual connection, Pisces partners can create a truly magical and soulful romantic bond.",
   ],
 ]);
-export {
-  zodiacAngleMappingLeft,
-  zodiacAngleMappingRight,
-  zodiacDateRanges,
-  romantic,
-};
+export { zodiacOrder, zodiacDateRanges, romantic };
diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index d34e1577..b7b5478d 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -1,29 +1,107 @@
 import { wait } from "../utils.js";
 import {
   determineDateRangeLeft,
-  determineDateRangeRight,
-  determinePairing,
   getMappingLeft,
-  getMappingRight,
   roundAngle,
   textGenerator,
 } from "./zodiac-angles.js";
 
 // Get all necessary document objects
-const leftWheel = document.getElementById("left_wheel_img");
-const rightWheel = document.getElementById("right_wheel_img");
 const button = document.getElementById("find-out");
 const how_to = document.getElementById("how_to");
 const help = document.getElementById("help");
 const popup = document.getElementById("pop-up");
 
-// add the necessary event listeners for the wheels
-leftWheel.addEventListener("wheel", rotateLeftWheel);
-rightWheel.addEventListener("wheel", rotateRightWheel);
-leftWheel.addEventListener("mouseout", stopRotation);
-rightWheel.addEventListener("mouseout", stopRotation);
+class Wheel {
+  elem;
+  dateInput;
+  // Set initial rotation angle of the zodiac wheel
+  angle = 0;
+  angleOffset;
+
+  constructor(elem, dateInput, angleOffset = 0) {
+    this.elem = elem;
+    this.dateInput = dateInput;
+    this.angleOffset = angleOffset;
+
+    // add the necessary event listeners for the wheel
+    this.elem.addEventListener("wheel", this.#handleRotate);
+    this.elem.addEventListener("mouseout", this.stopRotation);
+  }
+
+  getMapping() {
+    return getMappingLeft(roundAngle(this.angle + this.angleOffset));
+  }
+
+  #getDateRange() {
+    return determineDateRangeLeft(roundAngle(this.angle + this.angleOffset));
+  }
+
+  #setAngle(angle) {
+    this.angle = angle;
+    // Apply the rotation transform to the wheel element
+    this.elem.style.transform = `rotate(${this.angle}deg)`;
+    this.dateInput.value = this.#getDateRange();
+  }
+
+  /**
+   * Rotates the wheel based on the mouse wheel event.
+   * @param {WheelEvent} event - The mouse wheel event.
+   */
+  #handleRotate = (event) => {
+    // Determine the direction of scrolling
+    const direction = Math.sign(event.deltaY);
+
+    // Update the rotation angle based on the scrolling direction
+    this.#setAngle(this.angle + direction * 2);
+
+    // Prevent the default scrolling behavior
+    event.preventDefault();
+  };
+
+  /**
+   * Stops the rotation of the wheels and applies a smooth transition to the nearest rounded angle.
+   */
+  stopRotation = () => {
+    // Round the current angle of the wheels to the nearest multiple of 30
+    const target = roundAngle(this.angle);
+
+    // print rounded angles for clarity
+    console.log(
+      this.elem.id,
+      `Wheel is rounded to ${target}: ${this.getMapping()}`
+    );
+
+    // Apply the rounded rotation transform to the wheel elements smoothly over 500ms
+    const interval = setInterval(() => {
+      if (this.angle < target) {
+        this.#setAngle(this.angle + 1);
+      }
+      if (this.angle > target) {
+        this.#setAngle(this.angle - 1);
+      }
+      if (this.angle === target) {
+        clearInterval(interval);
+      }
+    }, 15);
+  };
+}
+
+const leftWheel = new Wheel(
+  document.getElementById("left_wheel_img"),
+  document.getElementById("left_birthday")
+);
+const rightWheel = new Wheel(
+  document.getElementById("right_wheel_img"),
+  document.getElementById("right_birthday"),
+  180
+);
+
 // add all the necessary event listeners for the buttons
-button.addEventListener("mouseenter", stopRotation);
+button.addEventListener("mouseenter", () => {
+  leftWheel.stopRotation();
+  rightWheel.stopRotation();
+});
 button.addEventListener("click", displayResults);
 
 how_to.addEventListener("click", () => {
@@ -42,102 +120,19 @@ document.addEventListener("click", (event) => {
   }
 });
 
-// Set initial rotation angle of the two zodiac wheels
-let leftWheelAngle = 0;
-let rightWheelAngle = 0;
-
-/**
- * Rotates the left wheel based on the mouse wheel event.
- * @param {WheelEvent} event - The mouse wheel event.
- */
-function rotateLeftWheel(event) {
-  const dateInput = document.getElementById("left_birthday");
-
-  // Determine the direction of scrolling
-  const direction = Math.sign(event.deltaY);
-
-  // Update the rotation angle based on the scrolling direction
-  leftWheelAngle += direction * 2;
-  // Apply the rotation transform to the wheel element
-  leftWheel.style.transform = `rotate(${leftWheelAngle}deg)`;
-
-  dateInput.value = determineDateRangeLeft(roundAngle(leftWheelAngle));
-
-  // Prevent the default scrolling behavior
-  event.preventDefault();
-}
-/**
- * Rotates the right wheel based on the mouse wheel event.
- * @param {WheelEvent} event - The mouse wheel event.
- */
-function rotateRightWheel(event) {
-  const dateInput = document.getElementById("right_birthday");
-  // Determine the direction of scrolling
-  const direction = Math.sign(event.deltaY);
-
-  // Update the rotation angle based on the scrolling direction
-  rightWheelAngle += direction * 2;
-  // Apply the rotation transform to the wheel element
-  rightWheel.style.transform = `rotate(${rightWheelAngle}deg)`;
-
-  dateInput.value = determineDateRangeRight(roundAngle(rightWheelAngle));
-
-  // Prevent the default scrolling behavior
-  event.preventDefault();
-}
-
-/**
- * Stops the rotation of the wheels and applies a smooth transition to the nearest rounded angle.
- */
-function stopRotation() {
-  // Round the current angle of the wheels to the nearest multiple of 30
-  const target1 = roundAngle(leftWheelAngle);
-  const target2 = roundAngle(rightWheelAngle);
-
-  // print rounded angles for clarity
-  console.log(
-    `Left Wheel is rounded to ${target1}: ${getMappingLeft(target1)}`
-  );
-  console.log(
-    `Right Wheel is rounded to ${target2}: ${getMappingRight(target2)}`
-  );
-
-  // Apply the rounded rotation transform to the wheel elements smoothly over 500ms
-  const interval = setInterval(() => {
-    if (leftWheelAngle < target1) {
-      leftWheelAngle += 1;
-      leftWheel.style.transform = `rotate(${leftWheelAngle}deg)`;
-    }
-    if (leftWheelAngle > target1) {
-      leftWheelAngle -= 1;
-      leftWheel.style.transform = `rotate(${leftWheelAngle}deg)`;
-    }
-    if (rightWheelAngle < target2) {
-      rightWheelAngle += 1;
-      rightWheel.style.transform = `rotate(${rightWheelAngle}deg)`;
-    }
-    if (rightWheelAngle > target2) {
-      rightWheelAngle -= 1;
-      rightWheel.style.transform = `rotate(${rightWheelAngle}deg)`;
-    }
-    if (leftWheelAngle === target1 && rightWheelAngle === target2) {
-      clearInterval(interval);
-    }
-  }, 15);
-}
-
 /**
  * Displays the results of the pairing and animates the UI elements.
  */
 async function displayResults() {
-  const pair = determinePairing(leftWheelAngle, rightWheelAngle);
+  const left = leftWheel.getMapping();
+  const right = rightWheel.getMapping();
   // slide off or fade all of the elements on the page to make room for results popup
   document.body.classList.add("remove-wheels");
 
   const pairingHeader = popup.querySelector("#pairing");
-  pairingHeader.textContent = pair[0] + " and " + pair[1];
+  pairingHeader.textContent = left + " and " + right;
   const pairing_text = popup.querySelector("#pairing_text");
-  pairing_text.innerHTML = textGenerator(pair[0], pair[1]);
+  pairing_text.innerHTML = textGenerator(left, right);
 
   /**
    * Displays the popup with the pairing information after a delay.
diff --git a/source/Zodiac_compatibility/zodiac-angles.js b/source/Zodiac_compatibility/zodiac-angles.js
index e23aa34c..a3fa15ee 100644
--- a/source/Zodiac_compatibility/zodiac-angles.js
+++ b/source/Zodiac_compatibility/zodiac-angles.js
@@ -1,11 +1,7 @@
 // @ts-check
 
-import {
-  zodiacAngleMappingLeft,
-  zodiacAngleMappingRight,
-  zodiacDateRanges,
-  romantic,
-} from "./data/dataArray.js";
+import { mod } from "../utils.js";
+import { zodiacOrder, zodiacDateRanges, romantic } from "./data/dataArray.js";
 
 /**
  * Rounds the given angle to the nearest multiple of 30.
@@ -13,47 +9,33 @@ import {
  * @returns {number} The rounded angle.
  */
 export function roundAngle(angle) {
-  let base = Math.floor(angle / 360);
-  let rem = angle % 360;
-  if (angle >= 0) {
-    return base * 360 + Math.round(rem / 30) * 30;
-  } else {
-    base = Math.ceil(angle / 360);
-    //console.log(base + ';' + rem)
-    return base * 360 + Math.round(rem / 30) * 30;
-  }
+  return Math.round(angle / 30) * 30;
 }
 
 /**
  * Retrieves the zodiac sign mapping for the given angle on the left wheel.
  * @param {number} roundedAngle - The angle on the left wheel pre-rounded to the nearest 30 degree increment
- * @returns {string} The corresponding zodiac sign.
+ * @returns {string} The corresponding zodiac sign, or `'unknown'` if the angle does not correspond to a zodiac.
  */
 export function getMappingLeft(roundedAngle) {
-  roundedAngle = roundedAngle % 360;
-  for (let i = 0; i < zodiacAngleMappingLeft.length; i++) {
-    if (roundedAngle === zodiacAngleMappingLeft[i][0]) {
-      // @ts-ignore
-      return zodiacAngleMappingLeft[i][1];
-    }
+  if (Math.round(roundedAngle / 30) * 30 !== roundedAngle) {
+    return "unknown";
   }
-  return "unknown";
+  const index = Math.round(mod(roundedAngle, 360) / 30);
+  return zodiacOrder[index < 12 ? Math.round(mod(roundedAngle, 360) / 30) : 0];
 }
 
 /**
  * Retrieves the zodiac sign mapping for the given angle on the right wheel.
  * @param {number} roundedAngle - The angle on the right wheel pre-rounded to the nearest 30 degree increment
- * @returns {string} The corresponding zodiac sign.
+ * @returns {string} The corresponding zodiac sign, or `'unknown'` if the angle does not correspond to a zodiac.
  */
 export function getMappingRight(roundedAngle) {
-  roundedAngle = roundedAngle % 360;
-  for (let i = 0; i < zodiacAngleMappingRight.length; i++) {
-    if (roundedAngle === zodiacAngleMappingRight[i][0]) {
-      // @ts-ignore
-      return zodiacAngleMappingRight[i][1];
-    }
+  if (Math.round(roundedAngle / 30) * 30 !== roundedAngle) {
+    return "unknown";
   }
-  return "unknown";
+  const index = Math.round(mod(roundedAngle, 360) / 30);
+  return zodiacOrder[index < 6 ? index + 6 : index < 12 ? index - 6 : 0];
 }
 
 /**
@@ -81,8 +63,6 @@ export function determineDateRangeRight(angle) {
  * @returns {Array} An array containing the zodiac sign pair.
  */
 export function determinePairing(angleLeft, angleRight) {
-  angleLeft = angleLeft % 360;
-  angleRight = angleRight % 360;
   const leftMapping = getMappingLeft(angleLeft);
   const rightMapping = getMappingRight(angleRight);
   return [leftMapping, rightMapping];

From 77c6c4226c5aeda9055f4ba7b388dbf8122f531a Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 10 Jun 2023 22:35:32 -0700
Subject: [PATCH 02/10] Drag the wheels with momentum

---
 source/Zodiac_compatibility/script.js  | 231 ++++++++++++++++++++-----
 source/Zodiac_compatibility/styles.css |   8 +-
 2 files changed, 193 insertions(+), 46 deletions(-)

diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index b7b5478d..79eccc04 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 import { wait } from "../utils.js";
 import {
   determineDateRangeLeft,
@@ -12,78 +14,221 @@ const how_to = document.getElementById("how_to");
 const help = document.getElementById("help");
 const popup = document.getElementById("pop-up");
 
+/**
+ * @typedef {object} PointerInfo
+ * @property {number} pointerId
+ * @property {number} initWheelAngle
+ * @property {number} initMouseAngle
+ * @property {number} lastMouseAngle2
+ * @property {number} lastTime2
+ * @property {number} lastMouseAngle1
+ * @property {number} lastTime1
+ */
+
+/**
+ * @typedef {object} AnimInfo
+ * @property {number} frameId
+ * @property {number} lastTime
+ */
+
 class Wheel {
-  elem;
-  dateInput;
-  // Set initial rotation angle of the zodiac wheel
-  angle = 0;
-  angleOffset;
+  /**
+   * In degrees/ms^2.
+   * @type {number}
+   */
+  static #FRICTION = 0.001;
 
+  /**
+   * @type {HTMLElement}
+   */
+  #elem;
+  /**
+   * @type {HTMLInputElement}
+   */
+  #dateInput;
+  /**
+   * @type {number}
+   */
+  #angle = 0;
+  /**
+   * @type {number}
+   */
+  #angleOffset;
+  /**
+   * @type {PointerInfo | null}
+   */
+  #pointer = null;
+  /**
+   * @type {number}
+   */
+  #angleVel = 0;
+  /**
+   * @type {AnimInfo | null}
+   */
+  #animating = null;
+
+  /**
+   * @param {HTMLElement} elem
+   * @param {HTMLInputElement} dateInput
+   * @param {number} angleOffset
+   */
   constructor(elem, dateInput, angleOffset = 0) {
-    this.elem = elem;
-    this.dateInput = dateInput;
-    this.angleOffset = angleOffset;
+    this.#elem = elem;
+    this.#dateInput = dateInput;
+    this.#angleOffset = angleOffset;
 
     // add the necessary event listeners for the wheel
-    this.elem.addEventListener("wheel", this.#handleRotate);
-    this.elem.addEventListener("mouseout", this.stopRotation);
+    this.#elem.addEventListener("wheel", this.#handleWheel);
+    this.#elem.addEventListener("pointerdown", this.#handlePointerDown);
+    this.#elem.addEventListener("pointermove", this.#handlePointerMove);
+    this.#elem.addEventListener("pointerup", this.#handlePointerUp);
+    this.#elem.addEventListener("pointercancel", this.#handlePointerUp);
   }
 
   getMapping() {
-    return getMappingLeft(roundAngle(this.angle + this.angleOffset));
+    return getMappingLeft(roundAngle(this.#angle + this.#angleOffset));
   }
 
   #getDateRange() {
-    return determineDateRangeLeft(roundAngle(this.angle + this.angleOffset));
+    return determineDateRangeLeft(roundAngle(this.#angle + this.#angleOffset));
   }
 
   #setAngle(angle) {
-    this.angle = angle;
+    if (!Number.isFinite(angle)) {
+      throw new RangeError(`Expected a numerical angle. Received ${angle}`);
+    }
+    this.#angle = angle;
     // Apply the rotation transform to the wheel element
-    this.elem.style.transform = `rotate(${this.angle}deg)`;
-    this.dateInput.value = this.#getDateRange();
+    this.#elem.style.transform = `rotate(${this.#angle}deg)`;
+    this.#dateInput.value = this.#getDateRange();
+  }
+
+  /**
+   * @param {PointerEvent} event
+   * @returns {number} Clockwise, between -180° and 180°, where 0° means the
+   * mouse is right of the center.
+   */
+  #getMouseAngle(event) {
+    const rect = this.#elem.getBoundingClientRect();
+    // y is first
+    return (
+      Math.atan2(
+        event.clientY - (rect.top + rect.height / 2),
+        event.clientX - (rect.left + rect.width / 2)
+      ) *
+      (180 / Math.PI)
+    );
   }
 
+  /**
+   * @param {PointerEvent} event
+   */
+  #handlePointerDown = (event) => {
+    if (!this.#pointer) {
+      const mouseAngle = this.#getMouseAngle(event);
+      this.#pointer = {
+        pointerId: event.pointerId,
+        initWheelAngle: this.#angle,
+        initMouseAngle: mouseAngle,
+        lastMouseAngle2: mouseAngle,
+        lastTime2: Date.now(),
+        lastMouseAngle1: mouseAngle,
+        lastTime1: Date.now(),
+      };
+      this.#elem.setPointerCapture(event.pointerId);
+      this.#stopMomentum();
+    }
+  };
+
+  /**
+   * @param {PointerEvent} event
+   */
+  #handlePointerMove = (event) => {
+    if (this.#pointer?.pointerId === event.pointerId) {
+      const mouseAngle = this.#getMouseAngle(event);
+      this.#pointer.lastMouseAngle2 = this.#pointer.lastMouseAngle1;
+      this.#pointer.lastTime2 = this.#pointer.lastTime1;
+      this.#pointer.lastMouseAngle1 = mouseAngle;
+      this.#pointer.lastTime1 = Date.now();
+      this.#setAngle(
+        mouseAngle - this.#pointer.initMouseAngle + this.#pointer.initWheelAngle
+      );
+    }
+  };
+
+  /**
+   * @param {PointerEvent} event
+   */
+  #handlePointerUp = (event) => {
+    if (this.#pointer?.pointerId === event.pointerId) {
+      let angleDiff =
+        this.#pointer.lastMouseAngle1 - this.#pointer.lastMouseAngle2;
+      if (angleDiff > 180) {
+        angleDiff -= 360;
+      } else if (angleDiff < -180) {
+        angleDiff += 360;
+      }
+      const timeDiff = this.#pointer.lastTime1 - this.#pointer.lastTime2;
+      this.#pointer = null;
+
+      if (timeDiff > 0) {
+        this.#angleVel = angleDiff / timeDiff;
+        this.#startMomentum();
+      }
+    }
+  };
+
   /**
    * Rotates the wheel based on the mouse wheel event.
    * @param {WheelEvent} event - The mouse wheel event.
    */
-  #handleRotate = (event) => {
+  #handleWheel = (event) => {
     // Determine the direction of scrolling
     const direction = Math.sign(event.deltaY);
 
     // Update the rotation angle based on the scrolling direction
-    this.#setAngle(this.angle + direction * 2);
+    this.#setAngle(this.#angle + direction * 2);
 
     // Prevent the default scrolling behavior
     event.preventDefault();
   };
 
-  /**
-   * Stops the rotation of the wheels and applies a smooth transition to the nearest rounded angle.
-   */
-  stopRotation = () => {
-    // Round the current angle of the wheels to the nearest multiple of 30
-    const target = roundAngle(this.angle);
-
-    // print rounded angles for clarity
-    console.log(
-      this.elem.id,
-      `Wheel is rounded to ${target}: ${this.getMapping()}`
-    );
+  #startMomentum() {
+    if (!this.#animating) {
+      this.#animating = {
+        frameId: 0,
+        lastTime: Date.now(),
+      };
+      this.#paint();
+    }
+  }
 
-    // Apply the rounded rotation transform to the wheel elements smoothly over 500ms
-    const interval = setInterval(() => {
-      if (this.angle < target) {
-        this.#setAngle(this.angle + 1);
-      }
-      if (this.angle > target) {
-        this.#setAngle(this.angle - 1);
-      }
-      if (this.angle === target) {
-        clearInterval(interval);
-      }
-    }, 15);
+  #stopMomentum() {
+    if (this.#animating) {
+      window.cancelAnimationFrame(this.#animating.frameId);
+      this.#animating = null;
+    }
+  }
+
+  #paint = () => {
+    if (!this.#animating) {
+      return;
+    }
+    const now = Date.now();
+    const elapsed = Math.min(now - this.#animating.lastTime, 200);
+    this.#animating.lastTime = now;
+    if (this.#angleVel > 0) {
+      this.#angleVel = Math.max(this.#angleVel - Wheel.#FRICTION * elapsed, 0);
+    } else {
+      this.#angleVel = Math.min(this.#angleVel + Wheel.#FRICTION * elapsed, 0);
+    }
+    if (this.#angleVel === 0) {
+      this.#animating = null;
+      // TODO
+      return;
+    }
+    this.#setAngle(this.#angle + this.#angleVel * elapsed);
+    this.#animating.frameId = window.requestAnimationFrame(this.#paint);
   };
 }
 
@@ -98,10 +243,6 @@ const rightWheel = new Wheel(
 );
 
 // add all the necessary event listeners for the buttons
-button.addEventListener("mouseenter", () => {
-  leftWheel.stopRotation();
-  rightWheel.stopRotation();
-});
 button.addEventListener("click", displayResults);
 
 how_to.addEventListener("click", () => {
diff --git a/source/Zodiac_compatibility/styles.css b/source/Zodiac_compatibility/styles.css
index 1b0456f0..62336809 100644
--- a/source/Zodiac_compatibility/styles.css
+++ b/source/Zodiac_compatibility/styles.css
@@ -70,7 +70,13 @@ option {
   max-height: 100%;
   min-width: 100%;
   min-height: 100%;
-  /* transition: 0.5s ease; */
+  touch-action: none;
+  -webkit-user-drag: none;
+  user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 #left_wheel_field {

From aff5e215a5fc717f84f11e81ae8d370c40aa3297 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 10 Jun 2023 23:14:42 -0700
Subject: [PATCH 03/10] ChatGPT is not giving good easing approximations

---
 __tests__/zodiacUnit.test.js                 | 107 +++++++++++++++++++
 source/Zodiac_compatibility/script.js        | 104 ++++++++++++------
 source/Zodiac_compatibility/zodiac-angles.js |  57 ++++++++++
 3 files changed, 237 insertions(+), 31 deletions(-)

diff --git a/__tests__/zodiacUnit.test.js b/__tests__/zodiacUnit.test.js
index 156733db..972af295 100644
--- a/__tests__/zodiacUnit.test.js
+++ b/__tests__/zodiacUnit.test.js
@@ -6,6 +6,8 @@ import {
   determineDateRangeRight,
   determinePairing,
   textGenerator,
+  angleDiff,
+  ease,
 } from "../source/Zodiac_compatibility/zodiac-angles.js";
 
 describe("roundAngle Tests", () => {
@@ -201,3 +203,108 @@ describe("textGenerator Tests", () => {
     expect(textGenerator("unknown", "unknown")).toBe("An error has occurred");
   });
 });
+
+// Generated by ChatGPT, except some of its expectations were wrong.
+describe("angleDiff", () => {
+  test("returns the correct difference when angle > base", () => {
+    const angle = 120;
+    const base = 30;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(90);
+  });
+
+  test("returns the correct difference when angle < base", () => {
+    const angle = 30;
+    const base = 120;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(-90);
+  });
+
+  test("returns 0 when angle and base are equal", () => {
+    const angle = 90;
+    const base = 90;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(0);
+  });
+
+  test("returns the correct difference when angle and base are opposite", () => {
+    const angle = -170;
+    const base = 170;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(20);
+  });
+
+  test("returns the correct difference when angle and base are negative", () => {
+    const angle = -30;
+    const base = -60;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(30);
+  });
+
+  test("returns the correct difference when angle and base are positive", () => {
+    const angle = 200;
+    const base = 100;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(100);
+  });
+
+  test("returns the correct difference when angle is near 180° and base is negative", () => {
+    const angle = 179;
+    const base = -179;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(-2);
+  });
+
+  test("returns the correct difference when angle is near -180° and base is positive", () => {
+    const angle = -179;
+    const base = 179;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(2);
+  });
+
+  test("returns the correct difference when angle is near 180° and base is positive", () => {
+    const angle = 179;
+    const base = 1;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(178);
+  });
+
+  test("returns the correct difference when angle is near -180° and base is negative", () => {
+    const angle = -179;
+    const base = -1;
+    const result = angleDiff(angle, base);
+    expect(result).toBe(-178);
+  });
+});
+
+describe("ease", () => {
+  test("returns the correct value at t = 0", () => {
+    const t = 0;
+    const result = ease(t);
+    expect(result).toBe(0);
+  });
+
+  test("returns the correct value at t = 0.25", () => {
+    const t = 0.25;
+    const result = ease(t);
+    expect(result).toBeCloseTo(0.41);
+  });
+
+  test("returns the correct value at t = 0.5", () => {
+    const t = 0.5;
+    const result = ease(t);
+    expect(result).toBeCloseTo(0.8);
+  });
+
+  test("returns the correct value at t = 0.75", () => {
+    const t = 0.75;
+    const result = ease(t);
+    expect(result).toBeCloseTo(0.96);
+  });
+
+  test("returns the correct value at t = 1", () => {
+    const t = 1;
+    const result = ease(t);
+    expect(result).toBe(1);
+  });
+});
diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index 79eccc04..cd0bec43 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -2,7 +2,9 @@
 
 import { wait } from "../utils.js";
 import {
+  angleDiff,
   determineDateRangeLeft,
+  ease,
   getMappingLeft,
   roundAngle,
   textGenerator,
@@ -26,9 +28,20 @@ const popup = document.getElementById("pop-up");
  */
 
 /**
- * @typedef {object} AnimInfo
+ * @typedef {object} MomentumInfo
+ * @property {'momentum'} type
  * @property {number} frameId
  * @property {number} lastTime
+ * @property {number} angleVel
+ */
+
+/**
+ * @typedef {object} SnapInfo
+ * @property {'snap'} type
+ * @property {number} frameId
+ * @property {number} startTime
+ * @property {number} startAngle
+ * @property {number} targetAngle
  */
 
 class Wheel {
@@ -37,6 +50,11 @@ class Wheel {
    * @type {number}
    */
   static #FRICTION = 0.001;
+  /**
+   * In ms.
+   * @type {number}
+   */
+  static #SNAP_DURATION = 500;
 
   /**
    * @type {HTMLElement}
@@ -59,11 +77,7 @@ class Wheel {
    */
   #pointer = null;
   /**
-   * @type {number}
-   */
-  #angleVel = 0;
-  /**
-   * @type {AnimInfo | null}
+   * @type {MomentumInfo | SnapInfo | null}
    */
   #animating = null;
 
@@ -161,20 +175,16 @@ class Wheel {
    */
   #handlePointerUp = (event) => {
     if (this.#pointer?.pointerId === event.pointerId) {
-      let angleDiff =
-        this.#pointer.lastMouseAngle1 - this.#pointer.lastMouseAngle2;
-      if (angleDiff > 180) {
-        angleDiff -= 360;
-      } else if (angleDiff < -180) {
-        angleDiff += 360;
-      }
-      const timeDiff = this.#pointer.lastTime1 - this.#pointer.lastTime2;
+      this.#startMomentum(
+        this.#pointer.lastTime1 > this.#pointer.lastTime2
+          ? angleDiff(
+              this.#pointer.lastMouseAngle1,
+              this.#pointer.lastMouseAngle2
+            ) /
+              (this.#pointer.lastTime1 - this.#pointer.lastTime2)
+          : 0
+      );
       this.#pointer = null;
-
-      if (timeDiff > 0) {
-        this.#angleVel = angleDiff / timeDiff;
-        this.#startMomentum();
-      }
     }
   };
 
@@ -193,11 +203,16 @@ class Wheel {
     event.preventDefault();
   };
 
-  #startMomentum() {
+  /**
+   * @param {number} angleVel
+   */
+  #startMomentum(angleVel = 0) {
     if (!this.#animating) {
       this.#animating = {
+        type: "momentum",
         frameId: 0,
         lastTime: Date.now(),
+        angleVel,
       };
       this.#paint();
     }
@@ -215,19 +230,46 @@ class Wheel {
       return;
     }
     const now = Date.now();
-    const elapsed = Math.min(now - this.#animating.lastTime, 200);
-    this.#animating.lastTime = now;
-    if (this.#angleVel > 0) {
-      this.#angleVel = Math.max(this.#angleVel - Wheel.#FRICTION * elapsed, 0);
-    } else {
-      this.#angleVel = Math.min(this.#angleVel + Wheel.#FRICTION * elapsed, 0);
+    if (this.#animating.type === "momentum") {
+      const elapsed = Math.min(now - this.#animating.lastTime, 200);
+      this.#animating.lastTime = now;
+      if (this.#animating.angleVel > 0) {
+        this.#animating.angleVel = Math.max(
+          this.#animating.angleVel - Wheel.#FRICTION * elapsed,
+          0
+        );
+      } else {
+        this.#animating.angleVel = Math.min(
+          this.#animating.angleVel + Wheel.#FRICTION * elapsed,
+          0
+        );
+      }
+      if (this.#animating.angleVel === 0) {
+        this.#animating = {
+          type: "snap",
+          frameId: this.#animating.frameId,
+          startTime: now,
+          startAngle: this.#angle,
+          targetAngle: roundAngle(this.#angle),
+        };
+      } else {
+        this.#setAngle(this.#angle + this.#animating.angleVel * elapsed);
+      }
     }
-    if (this.#angleVel === 0) {
-      this.#animating = null;
-      // TODO
-      return;
+    if (this.#animating.type === "snap") {
+      const progress = (now - this.#animating.startTime) / Wheel.#SNAP_DURATION;
+      if (progress >= 1) {
+        this.#setAngle(this.#animating.targetAngle);
+        this.#animating = null;
+        return;
+      } else {
+        this.#setAngle(
+          this.#animating.startAngle +
+            ease(progress) *
+              angleDiff(this.#animating.targetAngle, this.#animating.startAngle)
+        );
+      }
     }
-    this.#setAngle(this.#angle + this.#angleVel * elapsed);
     this.#animating.frameId = window.requestAnimationFrame(this.#paint);
   };
 }
diff --git a/source/Zodiac_compatibility/zodiac-angles.js b/source/Zodiac_compatibility/zodiac-angles.js
index a3fa15ee..7dadc949 100644
--- a/source/Zodiac_compatibility/zodiac-angles.js
+++ b/source/Zodiac_compatibility/zodiac-angles.js
@@ -81,3 +81,60 @@ export function textGenerator(leftSign, rightSign) {
     "An error has occurred"
   );
 }
+
+/**
+ * Finds the smaller difference between two angles. For example, the difference
+ * -170° - 170° should be 20°, because -170° is equivalent to 190°.
+ * @param {number} angle - The angle to subtract the base from.
+ * @param {number} base - The base angle that is subtracted from the angle.
+ * @returns {number} `angle - base`, but it's guaranteed to be between -180° and
+ * 180°.
+ */
+export function angleDiff(angle, base) {
+  const diff = mod(angle - base, 360);
+  return diff > 180 ? diff - 360 : diff;
+}
+
+/**
+ * Calculates the default CSS transition-timing-function, `ease`
+ * (`cubic-bezier(0.25, 0.1, 0.25, 1.0)`).
+ *
+ * @param {number} t - Transition time (between 0 and 1).
+ * @returns {number} The interpolated value (between 0 and 1).
+ */
+export function ease(t) {
+  const ax = 0;
+  const ay = 0;
+  const bx = 0.25;
+  const by = 0.1;
+  const cx = 0.25;
+  const cy = 1.0;
+  const dx = 1.0;
+  const dy = 1.0;
+
+  function cubicBezier(t) {
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const mt = 1 - t;
+    const mt2 = mt * mt;
+    const mt3 = mt2 * mt;
+    return ax * mt3 + 3 * bx * mt2 * t + 3 * cx * mt * t2 + dx * t3;
+  }
+
+  // Use binary search to find the approximate value of t
+  let start = 0;
+  let end = 1;
+  const epsilon = 0.0001; // Desired precision
+
+  while (Math.abs(end - start) > epsilon) {
+    const mid = (start + end) / 2;
+    const value = cubicBezier(mid);
+    if (value < t) {
+      start = mid;
+    } else {
+      end = mid;
+    }
+  }
+
+  return cubicBezier((start + end) / 2);
+}

From 7852ab2628edc693a7c45a8f6f6a67a838a7714c Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 10 Jun 2023 23:24:53 -0700
Subject: [PATCH 04/10] =?UTF-8?q?Use=20CSS=20transition=20easing=20instead?=
 =?UTF-8?q?=20=F0=9F=98=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/zodiacUnit.test.js                 | 33 -----------
 source/Zodiac_compatibility/script.js        | 60 +++++++-------------
 source/Zodiac_compatibility/zodiac-angles.js | 44 --------------
 3 files changed, 21 insertions(+), 116 deletions(-)

diff --git a/__tests__/zodiacUnit.test.js b/__tests__/zodiacUnit.test.js
index 972af295..51cf3d19 100644
--- a/__tests__/zodiacUnit.test.js
+++ b/__tests__/zodiacUnit.test.js
@@ -7,7 +7,6 @@ import {
   determinePairing,
   textGenerator,
   angleDiff,
-  ease,
 } from "../source/Zodiac_compatibility/zodiac-angles.js";
 
 describe("roundAngle Tests", () => {
@@ -276,35 +275,3 @@ describe("angleDiff", () => {
     expect(result).toBe(-178);
   });
 });
-
-describe("ease", () => {
-  test("returns the correct value at t = 0", () => {
-    const t = 0;
-    const result = ease(t);
-    expect(result).toBe(0);
-  });
-
-  test("returns the correct value at t = 0.25", () => {
-    const t = 0.25;
-    const result = ease(t);
-    expect(result).toBeCloseTo(0.41);
-  });
-
-  test("returns the correct value at t = 0.5", () => {
-    const t = 0.5;
-    const result = ease(t);
-    expect(result).toBeCloseTo(0.8);
-  });
-
-  test("returns the correct value at t = 0.75", () => {
-    const t = 0.75;
-    const result = ease(t);
-    expect(result).toBeCloseTo(0.96);
-  });
-
-  test("returns the correct value at t = 1", () => {
-    const t = 1;
-    const result = ease(t);
-    expect(result).toBe(1);
-  });
-});
diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index cd0bec43..476cd500 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -1,10 +1,7 @@
-// @ts-check
-
 import { wait } from "../utils.js";
 import {
   angleDiff,
   determineDateRangeLeft,
-  ease,
   getMappingLeft,
   roundAngle,
   textGenerator,
@@ -35,26 +32,12 @@ const popup = document.getElementById("pop-up");
  * @property {number} angleVel
  */
 
-/**
- * @typedef {object} SnapInfo
- * @property {'snap'} type
- * @property {number} frameId
- * @property {number} startTime
- * @property {number} startAngle
- * @property {number} targetAngle
- */
-
 class Wheel {
   /**
    * In degrees/ms^2.
    * @type {number}
    */
   static #FRICTION = 0.001;
-  /**
-   * In ms.
-   * @type {number}
-   */
-  static #SNAP_DURATION = 500;
 
   /**
    * @type {HTMLElement}
@@ -77,7 +60,7 @@ class Wheel {
    */
   #pointer = null;
   /**
-   * @type {MomentumInfo | SnapInfo | null}
+   * @type {MomentumInfo | null}
    */
   #animating = null;
 
@@ -117,6 +100,18 @@ class Wheel {
     this.#dateInput.value = this.#getDateRange();
   }
 
+  #getAngle() {
+    const matrix = window.getComputedStyle(this.#elem).transform;
+    const match = matrix.match(/^matrix\((-?\d+(?:\.\d+)?), (-?\d+(?:\.\d+)?)/);
+    if (match) {
+      const cosine = +match[1];
+      const sine = +match[2];
+      return Math.atan2(sine, cosine) * (180 / Math.PI);
+    } else {
+      return this.#angle;
+    }
+  }
+
   /**
    * @param {PointerEvent} event
    * @returns {number} Clockwise, between -180° and 180°, where 0° means the
@@ -139,10 +134,11 @@ class Wheel {
    */
   #handlePointerDown = (event) => {
     if (!this.#pointer) {
+      const wheelAngle = this.#getAngle();
       const mouseAngle = this.#getMouseAngle(event);
       this.#pointer = {
         pointerId: event.pointerId,
-        initWheelAngle: this.#angle,
+        initWheelAngle: wheelAngle,
         initMouseAngle: mouseAngle,
         lastMouseAngle2: mouseAngle,
         lastTime2: Date.now(),
@@ -150,6 +146,8 @@ class Wheel {
         lastTime1: Date.now(),
       };
       this.#elem.setPointerCapture(event.pointerId);
+      // Set angle again in case it was interrupted mid-transition
+      this.#setAngle(wheelAngle);
       this.#stopMomentum();
     }
   };
@@ -223,6 +221,7 @@ class Wheel {
       window.cancelAnimationFrame(this.#animating.frameId);
       this.#animating = null;
     }
+    this.#elem.style.transition = null;
   }
 
   #paint = () => {
@@ -245,29 +244,12 @@ class Wheel {
         );
       }
       if (this.#animating.angleVel === 0) {
-        this.#animating = {
-          type: "snap",
-          frameId: this.#animating.frameId,
-          startTime: now,
-          startAngle: this.#angle,
-          targetAngle: roundAngle(this.#angle),
-        };
-      } else {
-        this.#setAngle(this.#angle + this.#animating.angleVel * elapsed);
-      }
-    }
-    if (this.#animating.type === "snap") {
-      const progress = (now - this.#animating.startTime) / Wheel.#SNAP_DURATION;
-      if (progress >= 1) {
-        this.#setAngle(this.#animating.targetAngle);
         this.#animating = null;
+        this.#elem.style.transition = "transform 0.5s";
+        this.#setAngle(roundAngle(this.#angle));
         return;
       } else {
-        this.#setAngle(
-          this.#animating.startAngle +
-            ease(progress) *
-              angleDiff(this.#animating.targetAngle, this.#animating.startAngle)
-        );
+        this.#setAngle(this.#angle + this.#animating.angleVel * elapsed);
       }
     }
     this.#animating.frameId = window.requestAnimationFrame(this.#paint);
diff --git a/source/Zodiac_compatibility/zodiac-angles.js b/source/Zodiac_compatibility/zodiac-angles.js
index 7dadc949..a3ca3087 100644
--- a/source/Zodiac_compatibility/zodiac-angles.js
+++ b/source/Zodiac_compatibility/zodiac-angles.js
@@ -94,47 +94,3 @@ export function angleDiff(angle, base) {
   const diff = mod(angle - base, 360);
   return diff > 180 ? diff - 360 : diff;
 }
-
-/**
- * Calculates the default CSS transition-timing-function, `ease`
- * (`cubic-bezier(0.25, 0.1, 0.25, 1.0)`).
- *
- * @param {number} t - Transition time (between 0 and 1).
- * @returns {number} The interpolated value (between 0 and 1).
- */
-export function ease(t) {
-  const ax = 0;
-  const ay = 0;
-  const bx = 0.25;
-  const by = 0.1;
-  const cx = 0.25;
-  const cy = 1.0;
-  const dx = 1.0;
-  const dy = 1.0;
-
-  function cubicBezier(t) {
-    const t2 = t * t;
-    const t3 = t2 * t;
-    const mt = 1 - t;
-    const mt2 = mt * mt;
-    const mt3 = mt2 * mt;
-    return ax * mt3 + 3 * bx * mt2 * t + 3 * cx * mt * t2 + dx * t3;
-  }
-
-  // Use binary search to find the approximate value of t
-  let start = 0;
-  let end = 1;
-  const epsilon = 0.0001; // Desired precision
-
-  while (Math.abs(end - start) > epsilon) {
-    const mid = (start + end) / 2;
-    const value = cubicBezier(mid);
-    if (value < t) {
-      start = mid;
-    } else {
-      end = mid;
-    }
-  }
-
-  return cubicBezier((start + end) / 2);
-}

From 88fc920b12ea911ebc115dfeeb78ecb1677d87b8 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 11 Jun 2023 00:02:04 -0700
Subject: [PATCH 05/10] Make scroll wheel functional again

Could be nicer but dealing with anything related to scrolling is a pain in JS
---
 source/Zodiac_compatibility/script.js | 92 +++++++++++++++++----------
 1 file changed, 59 insertions(+), 33 deletions(-)

diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index 476cd500..ceb4532b 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -26,7 +26,6 @@ const popup = document.getElementById("pop-up");
 
 /**
  * @typedef {object} MomentumInfo
- * @property {'momentum'} type
  * @property {number} frameId
  * @property {number} lastTime
  * @property {number} angleVel
@@ -63,6 +62,10 @@ class Wheel {
    * @type {MomentumInfo | null}
    */
   #animating = null;
+  /**
+   * @type {number | null}
+   */
+  #wheelTimeout = null;
 
   /**
    * @param {HTMLElement} elem
@@ -90,6 +93,14 @@ class Wheel {
     return determineDateRangeLeft(roundAngle(this.#angle + this.#angleOffset));
   }
 
+  /**
+   * @returns {{ x: number; y: number }}
+   */
+  #getCenter() {
+    const rect = this.#elem.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  }
+
   #setAngle(angle) {
     if (!Number.isFinite(angle)) {
       throw new RangeError(`Expected a numerical angle. Received ${angle}`);
@@ -102,7 +113,9 @@ class Wheel {
 
   #getAngle() {
     const matrix = window.getComputedStyle(this.#elem).transform;
-    const match = matrix.match(/^matrix\((-?\d+(?:\.\d+)?), (-?\d+(?:\.\d+)?)/);
+    const match = matrix.match(
+      /^matrix\((-?\d+(?:\.\d+)?(?:e-?\d+)?), (-?\d+(?:\.\d+)?(?:e-?\d+)?)/
+    );
     if (match) {
       const cosine = +match[1];
       const sine = +match[2];
@@ -118,13 +131,10 @@ class Wheel {
    * mouse is right of the center.
    */
   #getMouseAngle(event) {
-    const rect = this.#elem.getBoundingClientRect();
-    // y is first
+    const center = this.#getCenter();
     return (
-      Math.atan2(
-        event.clientY - (rect.top + rect.height / 2),
-        event.clientX - (rect.left + rect.width / 2)
-      ) *
+      // y is first
+      Math.atan2(event.clientY - center.y, event.clientX - center.x) *
       (180 / Math.PI)
     );
   }
@@ -191,11 +201,22 @@ class Wheel {
    * @param {WheelEvent} event - The mouse wheel event.
    */
   #handleWheel = (event) => {
+    const center = this.#getCenter();
+    const wheelAngle = this.#getAngle();
+
     // Determine the direction of scrolling
-    const direction = Math.sign(event.deltaY);
+    const direction =
+      Math.sign(event.deltaY) * Math.sign(center.x - event.clientX);
 
     // Update the rotation angle based on the scrolling direction
-    this.#setAngle(this.#angle + direction * 2);
+    this.#setAngle(wheelAngle + direction * 2);
+    console.log(wheelAngle, this.#angle);
+
+    this.#stopMomentum();
+    this.#wheelTimeout = setTimeout(() => {
+      this.#wheelTimeout = null;
+      this.#snap();
+    }, 500);
 
     // Prevent the default scrolling behavior
     event.preventDefault();
@@ -207,7 +228,6 @@ class Wheel {
   #startMomentum(angleVel = 0) {
     if (!this.#animating) {
       this.#animating = {
-        type: "momentum",
         frameId: 0,
         lastTime: Date.now(),
         angleVel,
@@ -221,6 +241,10 @@ class Wheel {
       window.cancelAnimationFrame(this.#animating.frameId);
       this.#animating = null;
     }
+    if (this.#wheelTimeout) {
+      clearTimeout(this.#wheelTimeout);
+      this.#wheelTimeout = null;
+    }
     this.#elem.style.transition = null;
   }
 
@@ -229,31 +253,33 @@ class Wheel {
       return;
     }
     const now = Date.now();
-    if (this.#animating.type === "momentum") {
-      const elapsed = Math.min(now - this.#animating.lastTime, 200);
-      this.#animating.lastTime = now;
-      if (this.#animating.angleVel > 0) {
-        this.#animating.angleVel = Math.max(
-          this.#animating.angleVel - Wheel.#FRICTION * elapsed,
-          0
-        );
-      } else {
-        this.#animating.angleVel = Math.min(
-          this.#animating.angleVel + Wheel.#FRICTION * elapsed,
-          0
-        );
-      }
-      if (this.#animating.angleVel === 0) {
-        this.#animating = null;
-        this.#elem.style.transition = "transform 0.5s";
-        this.#setAngle(roundAngle(this.#angle));
-        return;
-      } else {
-        this.#setAngle(this.#angle + this.#animating.angleVel * elapsed);
-      }
+    const elapsed = Math.min(now - this.#animating.lastTime, 200);
+    this.#animating.lastTime = now;
+    if (this.#animating.angleVel > 0) {
+      this.#animating.angleVel = Math.max(
+        this.#animating.angleVel - Wheel.#FRICTION * elapsed,
+        0
+      );
+    } else {
+      this.#animating.angleVel = Math.min(
+        this.#animating.angleVel + Wheel.#FRICTION * elapsed,
+        0
+      );
+    }
+    if (this.#animating.angleVel === 0) {
+      this.#animating = null;
+      this.#snap();
+      return;
+    } else {
+      this.#setAngle(this.#angle + this.#animating.angleVel * elapsed);
     }
     this.#animating.frameId = window.requestAnimationFrame(this.#paint);
   };
+
+  #snap() {
+    this.#elem.style.transition = "transform 0.5s";
+    this.#setAngle(roundAngle(this.#angle));
+  }
 }
 
 const leftWheel = new Wheel(

From b184276f4f9726c5a03a69efae38801d00bd1622 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 11 Jun 2023 14:12:03 -0700
Subject: [PATCH 06/10] Add JSDoc for the new `Wheel` class

---
 .jsdoc.conf.json                      |   1 +
 README.md                             |   1 +
 docs/images/docs-button.svg           |  25 ++++
 source/PalmReading/webcam.js          |   2 +-
 source/Zodiac_compatibility/script.js | 162 +++++++++++++++++++++++---
 5 files changed, 171 insertions(+), 20 deletions(-)
 create mode 100644 docs/images/docs-button.svg

diff --git a/.jsdoc.conf.json b/.jsdoc.conf.json
index 827a04c6..c2acf541 100644
--- a/.jsdoc.conf.json
+++ b/.jsdoc.conf.json
@@ -2,6 +2,7 @@
   "plugins": [],
   "recurseDepth": 10,
   "opts": {
+    "private": true,
     "recurse": true
   },
   "source": {
diff --git a/README.md b/README.md
index ec33611d..12af4f9f 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
 Improving the student experience by alleviating decision-making anxiety. Brought to you by [20/20 Visionaries](./admin/team.md) (CSE 110 SP23 Team 20).
 
 [![Try it out button](./docs/images/try-button.svg)](https://cse110-sp23-group20.github.io/fortune-teller/source/home-page/)
+[![Documentation button](./docs/images/docs-button.svg)](./JSDOCs/)
 [![Team page button](./docs/images/team-page-button.svg)](./admin/team.md)
 
 ## Development
diff --git a/docs/images/docs-button.svg b/docs/images/docs-button.svg
new file mode 100644
index 00000000..62591479
--- /dev/null
+++ b/docs/images/docs-button.svg
@@ -0,0 +1,25 @@
+<svg
+  width="150"
+  height="40"
+  viewBox="0 0 150 40"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="0.5" y="0.5" width="149" height="39" rx="4.5" fill="black" />
+  <path
+    d="M23.8523 24.5H20.7585V15.7727H23.8778C24.7557 15.7727 25.5114 15.9474 26.1449 16.2969C26.7784 16.6435 27.2656 17.142 27.6065 17.7926C27.9503 18.4432 28.1222 19.2216 28.1222 20.1278C28.1222 21.0369 27.9503 21.8182 27.6065 22.4716C27.2656 23.125 26.7756 23.6264 26.1364 23.9759C25.5 24.3253 24.7386 24.5 23.8523 24.5ZM22.6037 22.919H23.7756C24.321 22.919 24.7798 22.8224 25.152 22.6293C25.527 22.4332 25.8082 22.1307 25.9957 21.7216C26.1861 21.3097 26.2812 20.7784 26.2812 20.1278C26.2812 19.483 26.1861 18.956 25.9957 18.5469C25.8082 18.1378 25.5284 17.8366 25.1562 17.6435C24.7841 17.4503 24.3253 17.3537 23.7798 17.3537H22.6037V22.919ZM32.4123 24.6278C31.7504 24.6278 31.1779 24.4872 30.695 24.206C30.2148 23.9219 29.8441 23.527 29.5827 23.0213C29.3214 22.5128 29.1907 21.9233 29.1907 21.2528C29.1907 20.5767 29.3214 19.9858 29.5827 19.4801C29.8441 18.9716 30.2148 18.5767 30.695 18.2955C31.1779 18.0114 31.7504 17.8693 32.4123 17.8693C33.0742 17.8693 33.6452 18.0114 34.1254 18.2955C34.6083 18.5767 34.9805 18.9716 35.2418 19.4801C35.5032 19.9858 35.6339 20.5767 35.6339 21.2528C35.6339 21.9233 35.5032 22.5128 35.2418 23.0213C34.9805 23.527 34.6083 23.9219 34.1254 24.206C33.6452 24.4872 33.0742 24.6278 32.4123 24.6278ZM32.4208 23.2216C32.7219 23.2216 32.9734 23.1364 33.1751 22.9659C33.3768 22.7926 33.5288 22.5568 33.631 22.2585C33.7362 21.9602 33.7887 21.6207 33.7887 21.2401C33.7887 20.8594 33.7362 20.5199 33.631 20.2216C33.5288 19.9233 33.3768 19.6875 33.1751 19.5142C32.9734 19.3409 32.7219 19.2543 32.4208 19.2543C32.1168 19.2543 31.8612 19.3409 31.6538 19.5142C31.4492 19.6875 31.2944 19.9233 31.1893 20.2216C31.087 20.5199 31.0359 20.8594 31.0359 21.2401C31.0359 21.6207 31.087 21.9602 31.1893 22.2585C31.2944 22.5568 31.4492 22.7926 31.6538 22.9659C31.8612 23.1364 32.1168 23.2216 32.4208 23.2216ZM39.7717 24.6278C39.1012 24.6278 38.5245 24.4858 38.0415 24.2017C37.5614 23.9148 37.1921 23.517 36.9336 23.0085C36.6779 22.5 36.5501 21.9148 36.5501 21.2528C36.5501 20.5824 36.6793 19.9943 36.9379 19.4886C37.1992 18.9801 37.57 18.5838 38.0501 18.2997C38.5302 18.0128 39.1012 17.8693 39.7631 17.8693C40.3342 17.8693 40.8342 17.973 41.2631 18.1804C41.6921 18.3878 42.0316 18.679 42.2816 19.054C42.5316 19.429 42.6694 19.8693 42.695 20.375H40.9819C40.9336 20.0483 40.8058 19.7855 40.5984 19.5866C40.3938 19.3849 40.1254 19.2841 39.793 19.2841C39.5117 19.2841 39.266 19.3608 39.0558 19.5142C38.8484 19.6648 38.6864 19.8849 38.57 20.1747C38.4535 20.4645 38.3952 20.8153 38.3952 21.2273C38.3952 21.6449 38.4521 22 38.5657 22.2926C38.6822 22.5852 38.8455 22.8082 39.0558 22.9616C39.266 23.1151 39.5117 23.1918 39.793 23.1918C40.0004 23.1918 40.1864 23.1491 40.3512 23.0639C40.5188 22.9787 40.6566 22.8551 40.7646 22.6932C40.8754 22.5284 40.9478 22.331 40.9819 22.1009H42.695C42.6665 22.6009 42.5302 23.0412 42.2859 23.4219C42.0444 23.7997 41.7106 24.0952 41.2844 24.3082C40.8583 24.5213 40.354 24.6278 39.7717 24.6278ZM48.0547 21.7131V17.9545H49.87V24.5H48.1271V23.3111H48.0589C47.9112 23.6946 47.6655 24.0028 47.3217 24.2358C46.9808 24.4687 46.5646 24.5852 46.0732 24.5852C45.6357 24.5852 45.2507 24.4858 44.9183 24.2869C44.5859 24.0881 44.326 23.8054 44.1385 23.4389C43.9538 23.0724 43.8601 22.6335 43.8572 22.1222V17.9545H45.6726V21.7983C45.6754 22.1847 45.7791 22.4901 45.9837 22.7145C46.1882 22.9389 46.4624 23.0511 46.8061 23.0511C47.0249 23.0511 47.2294 23.0014 47.4197 22.902C47.6101 22.7997 47.7635 22.6491 47.88 22.4503C47.9993 22.2514 48.0575 22.0057 48.0547 21.7131ZM51.3221 24.5V17.9545H53.0522V19.1094H53.1289C53.2653 18.7259 53.4925 18.4233 53.8107 18.2017C54.1289 17.9801 54.5096 17.8693 54.9528 17.8693C55.4016 17.8693 55.7837 17.9815 56.0991 18.206C56.4144 18.4276 56.6246 18.7287 56.7298 19.1094H56.7979C56.9315 18.7344 57.1729 18.4347 57.5224 18.2102C57.8746 17.983 58.2908 17.8693 58.771 17.8693C59.3817 17.8693 59.8775 18.0639 60.2582 18.4531C60.6417 18.8395 60.8335 19.3878 60.8335 20.098V24.5H59.0224V20.456C59.0224 20.0923 58.9258 19.8196 58.7326 19.6378C58.5394 19.456 58.2979 19.3651 58.0082 19.3651C57.6786 19.3651 57.4215 19.4702 57.2369 19.6804C57.0522 19.8878 56.9599 20.1619 56.9599 20.5028V24.5H55.1999V20.4176C55.1999 20.0966 55.1076 19.8409 54.9229 19.6506C54.7411 19.4602 54.5011 19.3651 54.2028 19.3651C54.0011 19.3651 53.8192 19.4162 53.6573 19.5185C53.4982 19.6179 53.3718 19.7585 53.2781 19.9403C53.1843 20.1193 53.1374 20.3295 53.1374 20.571V24.5H51.3221ZM65.2504 24.6278C64.5771 24.6278 63.9975 24.4915 63.5117 24.2188C63.0288 23.9432 62.6566 23.554 62.3952 23.0511C62.1339 22.5455 62.0032 21.9474 62.0032 21.2571C62.0032 20.5838 62.1339 19.9929 62.3952 19.4844C62.6566 18.9759 63.0245 18.5795 63.4989 18.2955C63.9762 18.0114 64.5359 17.8693 65.1779 17.8693C65.6097 17.8693 66.0117 17.9389 66.3839 18.0781C66.7589 18.2145 67.0856 18.4205 67.364 18.696C67.6452 18.9716 67.864 19.3182 68.0202 19.7358C68.1765 20.1506 68.2546 20.6364 68.2546 21.1932V21.6918H62.7276V20.5668H66.5458C66.5458 20.3054 66.489 20.0739 66.3754 19.8722C66.2617 19.6705 66.104 19.5128 65.9023 19.3991C65.7035 19.2827 65.4719 19.2244 65.2077 19.2244C64.9322 19.2244 64.6879 19.2884 64.4748 19.4162C64.2646 19.5412 64.0998 19.7102 63.9805 19.9233C63.8612 20.1335 63.8001 20.3679 63.7972 20.6264V21.696C63.7972 22.0199 63.8569 22.2997 63.9762 22.5355C64.0984 22.7713 64.2702 22.9531 64.4918 23.081C64.7134 23.2088 64.9762 23.2727 65.2802 23.2727C65.4819 23.2727 65.6665 23.2443 65.8342 23.1875C66.0018 23.1307 66.1452 23.0455 66.2646 22.9318C66.3839 22.8182 66.4748 22.679 66.5373 22.5142L68.2163 22.625C68.131 23.0284 67.9563 23.3807 67.6921 23.6818C67.4308 23.9801 67.0927 24.2131 66.6779 24.3807C66.266 24.5455 65.7901 24.6278 65.2504 24.6278ZM71.2546 20.7159V24.5H69.4393V17.9545H71.1694V19.1094H71.2461C71.391 18.7287 71.6339 18.4276 71.9748 18.206C72.3157 17.9815 72.729 17.8693 73.2148 17.8693C73.6694 17.8693 74.0657 17.9688 74.4038 18.1676C74.7418 18.3665 75.0046 18.6506 75.1921 19.0199C75.3796 19.3864 75.4734 19.8239 75.4734 20.3324V24.5H73.658V20.6562C73.6609 20.2557 73.5586 19.9432 73.3512 19.7188C73.1438 19.4915 72.8583 19.3778 72.4947 19.3778C72.2504 19.3778 72.0344 19.4304 71.8469 19.5355C71.6623 19.6406 71.5174 19.794 71.4123 19.9957C71.31 20.1946 71.2575 20.4347 71.2546 20.7159ZM80.3857 17.9545V19.3182H76.4439V17.9545H80.3857ZM77.3388 16.3864H79.1541V22.4886C79.1541 22.6562 79.1797 22.7869 79.2308 22.8807C79.282 22.9716 79.353 23.0355 79.4439 23.0724C79.5376 23.1094 79.6456 23.1278 79.7678 23.1278C79.853 23.1278 79.9382 23.1207 80.0234 23.1065C80.1087 23.0895 80.174 23.0767 80.2195 23.0682L80.505 24.419C80.4141 24.4474 80.2862 24.4801 80.1214 24.517C79.9567 24.5568 79.7564 24.581 79.5206 24.5895C79.0831 24.6065 78.6996 24.5483 78.37 24.4148C78.0433 24.2812 77.7891 24.0739 77.6072 23.7926C77.4254 23.5114 77.3359 23.1562 77.3388 22.7273V16.3864ZM83.4347 24.6236C83.017 24.6236 82.6449 24.5511 82.3182 24.4062C81.9915 24.2585 81.733 24.0412 81.5426 23.7543C81.3551 23.4645 81.2614 23.1037 81.2614 22.6719C81.2614 22.3082 81.3281 22.0028 81.4616 21.7557C81.5952 21.5085 81.777 21.3097 82.0071 21.1591C82.2372 21.0085 82.4986 20.8949 82.7912 20.8182C83.0866 20.7415 83.3963 20.6875 83.7202 20.6562C84.1009 20.6165 84.4077 20.5795 84.6406 20.5455C84.8736 20.5085 85.0426 20.4545 85.1477 20.3835C85.2528 20.3125 85.3054 20.2074 85.3054 20.0682V20.0426C85.3054 19.7727 85.2202 19.5639 85.0497 19.4162C84.8821 19.2685 84.6435 19.1946 84.3338 19.1946C84.0071 19.1946 83.7472 19.267 83.554 19.4119C83.3608 19.554 83.233 19.733 83.1705 19.9489L81.4915 19.8125C81.5767 19.4148 81.7443 19.071 81.9943 18.7812C82.2443 18.4886 82.5668 18.2642 82.9616 18.108C83.3594 17.9489 83.8196 17.8693 84.3423 17.8693C84.706 17.8693 85.054 17.9119 85.3864 17.9972C85.7216 18.0824 86.0185 18.2145 86.277 18.3935C86.5384 18.5724 86.7443 18.8026 86.8949 19.0838C87.0455 19.3622 87.1207 19.696 87.1207 20.0852V24.5H85.3991V23.5923H85.348C85.2429 23.7969 85.1023 23.9773 84.9261 24.1335C84.75 24.2869 84.5384 24.4077 84.2912 24.4957C84.044 24.581 83.7585 24.6236 83.4347 24.6236ZM83.9545 23.3707C84.2216 23.3707 84.4574 23.3182 84.6619 23.2131C84.8665 23.1051 85.027 22.9602 85.1435 22.7784C85.2599 22.5966 85.3182 22.3906 85.3182 22.1605V21.4659C85.2614 21.5028 85.1832 21.5369 85.0838 21.5682C84.9872 21.5966 84.8778 21.6236 84.7557 21.6491C84.6335 21.6719 84.5114 21.6932 84.3892 21.7131C84.267 21.7301 84.1562 21.7457 84.0568 21.7599C83.8438 21.7912 83.6577 21.8409 83.4986 21.9091C83.3395 21.9773 83.2159 22.0696 83.1278 22.1861C83.0398 22.2997 82.9957 22.4418 82.9957 22.6122C82.9957 22.8594 83.0852 23.0483 83.2642 23.179C83.446 23.3068 83.6761 23.3707 83.9545 23.3707ZM92.0107 17.9545V19.3182H88.0689V17.9545H92.0107ZM88.9638 16.3864H90.7791V22.4886C90.7791 22.6562 90.8047 22.7869 90.8558 22.8807C90.907 22.9716 90.978 23.0355 91.0689 23.0724C91.1626 23.1094 91.2706 23.1278 91.3928 23.1278C91.478 23.1278 91.5632 23.1207 91.6484 23.1065C91.7337 23.0895 91.799 23.0767 91.8445 23.0682L92.13 24.419C92.0391 24.4474 91.9112 24.4801 91.7464 24.517C91.5817 24.5568 91.3814 24.581 91.1456 24.5895C90.7081 24.6065 90.3246 24.5483 89.995 24.4148C89.6683 24.2812 89.4141 24.0739 89.2322 23.7926C89.0504 23.5114 88.9609 23.1562 88.9638 22.7273V16.3864ZM93.1932 24.5V17.9545H95.0085V24.5H93.1932ZM94.1051 17.1108C93.8352 17.1108 93.6037 17.0213 93.4105 16.8423C93.2202 16.6605 93.125 16.4432 93.125 16.1903C93.125 15.9403 93.2202 15.7259 93.4105 15.5469C93.6037 15.3651 93.8352 15.2741 94.1051 15.2741C94.375 15.2741 94.6051 15.3651 94.7955 15.5469C94.9886 15.7259 95.0852 15.9403 95.0852 16.1903C95.0852 16.4432 94.9886 16.6605 94.7955 16.8423C94.6051 17.0213 94.375 17.1108 94.1051 17.1108ZM99.4201 24.6278C98.7582 24.6278 98.1857 24.4872 97.7028 24.206C97.2227 23.9219 96.8519 23.527 96.5906 23.0213C96.3292 22.5128 96.1985 21.9233 96.1985 21.2528C96.1985 20.5767 96.3292 19.9858 96.5906 19.4801C96.8519 18.9716 97.2227 18.5767 97.7028 18.2955C98.1857 18.0114 98.7582 17.8693 99.4201 17.8693C100.082 17.8693 100.653 18.0114 101.133 18.2955C101.616 18.5767 101.988 18.9716 102.25 19.4801C102.511 19.9858 102.642 20.5767 102.642 21.2528C102.642 21.9233 102.511 22.5128 102.25 23.0213C101.988 23.527 101.616 23.9219 101.133 24.206C100.653 24.4872 100.082 24.6278 99.4201 24.6278ZM99.4286 23.2216C99.7298 23.2216 99.9812 23.1364 100.183 22.9659C100.385 22.7926 100.537 22.5568 100.639 22.2585C100.744 21.9602 100.797 21.6207 100.797 21.2401C100.797 20.8594 100.744 20.5199 100.639 20.2216C100.537 19.9233 100.385 19.6875 100.183 19.5142C99.9812 19.3409 99.7298 19.2543 99.4286 19.2543C99.1246 19.2543 98.869 19.3409 98.6616 19.5142C98.457 19.6875 98.3022 19.9233 98.1971 20.2216C98.0948 20.5199 98.0437 20.8594 98.0437 21.2401C98.0437 21.6207 98.0948 21.9602 98.1971 22.2585C98.3022 22.5568 98.457 22.7926 98.6616 22.9659C98.869 23.1364 99.1246 23.2216 99.4286 23.2216ZM105.637 20.7159V24.5H103.822V17.9545H105.552V19.1094H105.629C105.774 18.7287 106.017 18.4276 106.358 18.206C106.699 17.9815 107.112 17.8693 107.598 17.8693C108.052 17.8693 108.449 17.9688 108.787 18.1676C109.125 18.3665 109.387 18.6506 109.575 19.0199C109.762 19.3864 109.856 19.8239 109.856 20.3324V24.5H108.041V20.6562C108.044 20.2557 107.941 19.9432 107.734 19.7188C107.527 19.4915 107.241 19.3778 106.877 19.3778C106.633 19.3778 106.417 19.4304 106.23 19.5355C106.045 19.6406 105.9 19.794 105.795 19.9957C105.693 20.1946 105.64 20.4347 105.637 20.7159Z"
+    fill="#F1C86C"
+  />
+  <g clip-path="url(#clip0_2108_644)">
+    <path
+      d="M126 14L124.59 15.41L129.17 20L124.59 24.59L126 26L132 20L126 14Z"
+      fill="#F1C86C"
+    />
+  </g>
+  <rect x="0.5" y="0.5" width="149" height="39" rx="4.5" stroke="#F1C86C" />
+  <defs>
+    <clipPath id="clip0_2108_644">
+      <rect width="24" height="24" fill="white" transform="translate(116 8)" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/source/PalmReading/webcam.js b/source/PalmReading/webcam.js
index 64391a79..176e84aa 100644
--- a/source/PalmReading/webcam.js
+++ b/source/PalmReading/webcam.js
@@ -146,7 +146,7 @@ readAnother.addEventListener("click", startCamera);
  * Some points on an image of an ECG graph I found on Google Images that I
  * manually marked out in MS Paint. Used to form the piecewise linear `ecg`
  * polyline.
- * @type {[number, number][]}
+ * @type {number[][]}
  */
 const ecgPoints = [
   [-0.8, 0.2],
diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
index ceb4532b..8ec289b8 100644
--- a/source/Zodiac_compatibility/script.js
+++ b/source/Zodiac_compatibility/script.js
@@ -14,63 +14,97 @@ const help = document.getElementById("help");
 const popup = document.getElementById("pop-up");
 
 /**
+ * Stores information about the pointer dragging the wheel around.
  * @typedef {object} PointerInfo
- * @property {number} pointerId
- * @property {number} initWheelAngle
- * @property {number} initMouseAngle
- * @property {number} lastMouseAngle2
- * @property {number} lastTime2
- * @property {number} lastMouseAngle1
- * @property {number} lastTime1
+ * @property {number} pointerId - The ID of the pointer.
+ * @property {number} initWheelAngle - The angle of the wheel when dragging
+ * started.
+ * @property {number} initMouseAngle - The polar coordinate angle of the mouse
+ * when dragging started.
+ * @property {number} lastMouseAngle2 - The second-to-last recorded mouse angle.
+ * @property {number} lastTime2 - The timestamp of the second-to-last
+ * `pointermove` event.
+ * @property {number} lastMouseAngle1 - The last recorded mouse angle.
+ * @property {number} lastTime1 - The timestamp of the last `pointermove` event.
  */
 
 /**
+ * Stores information about the wheel momentum animation.
  * @typedef {object} MomentumInfo
- * @property {number} frameId
- * @property {number} lastTime
- * @property {number} angleVel
+ * @property {number} frameId - The ID of the requested frame, returned by
+ * `window.requestAnimationFrame`, used to cancel it.
+ * @property {number} lastTime - The timestamp of the last animation frame.
+ * @property {number} angleVel - The angular velocity of the wheel, in
+ * degrees/ms.
  */
 
+/**
+ * A rotatable zodiac wheel.
+ *
+ * All units of rotation are in degrees, and units of time are in milliseconds.
+ */
 class Wheel {
   /**
-   * In degrees/ms^2.
+   * The amount of friction to apply to a wheel spinning with momentum. In
+   * degrees/ms^2.
    * @type {number}
    */
   static #FRICTION = 0.001;
 
   /**
+   * The wheel image that gets rotated.
    * @type {HTMLElement}
    */
   #elem;
   /**
+   * The input element that displays the date range of the selected zodiac.
    * @type {HTMLInputElement}
    */
   #dateInput;
   /**
+   * The rotation angle of the wheel image.
+   *
+   * Note that this may not be the angle to get the zodiac mapping from, since,
+   * for example, the right wheel takes the zodiac from the left side of the
+   * wheel.
    * @type {number}
    */
   #angle = 0;
   /**
+   * An offset to add to `#angle` before determining the mapped zodiac. The
+   * right wheel has an offset of 180° because it takes the zodiac from the left
+   * side of the wheel.
    * @type {number}
    */
   #angleOffset;
   /**
+   * Information about the pointer dragging the wheel, if the wheel is being
+   * dragged.
    * @type {PointerInfo | null}
    */
   #pointer = null;
   /**
+   * Information about the wheel momentum animation, if the wheel momentum is
+   * being animated.
    * @type {MomentumInfo | null}
    */
   #animating = null;
   /**
+   * The `setTimeout` ID of the delay after using the scroll wheel on the wheel
+   * before trying to snap the wheel to the closest zodiac. This timeout gets
+   * cleared if the user continues to scroll before the timeout runs.
    * @type {number | null}
    */
   #wheelTimeout = null;
 
   /**
-   * @param {HTMLElement} elem
-   * @param {HTMLInputElement} dateInput
-   * @param {number} angleOffset
+   * Constructs a `Wheel` based on existing DOM elements. Adds event listeners
+   * to the wheel image.
+   * @param {HTMLElement} elem - The wheel image element.
+   * @param {HTMLInputElement} dateInput - The date input that shows the date
+   * range of the selected zodiac.
+   * @param {number} angleOffset - The offset to add to the visual rotation
+   * angle of the wheel before determining the mapped zodiac. Default: 0.
    */
   constructor(elem, dateInput, angleOffset = 0) {
     this.#elem = elem;
@@ -85,22 +119,40 @@ class Wheel {
     this.#elem.addEventListener("pointercancel", this.#handlePointerUp);
   }
 
+  /**
+   * Calculates the zodiac that the wheel's arrow is pointing to. If the wheel
+   * rotation angle is not at a perfect multiple of 30°, it will round the angle
+   * to determine which zodiac the arrow is pointing at.
+   * @returns {string} The zodiac.
+   */
   getMapping() {
     return getMappingLeft(roundAngle(this.#angle + this.#angleOffset));
   }
 
+  /**
+   * Gets the range of dates for the zodiac that the wheel's arrow is pointing
+   * at.
+   * @returns {string} A range of dates for the zodiac.
+   */
   #getDateRange() {
     return determineDateRangeLeft(roundAngle(this.#angle + this.#angleOffset));
   }
 
   /**
-   * @returns {{ x: number; y: number }}
+   * Gets the midpoint of the wheel image.
+   * @returns {{ x: number, y: number }} Coordinates in pixels relative to the
+   * top left of the screen.
    */
   #getCenter() {
     const rect = this.#elem.getBoundingClientRect();
     return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
   }
 
+  /**
+   * Sets the visual rotation angle of the wheel image (no animation). This will
+   * also update the zodiac date range while the wheel is rotating.
+   * @param {number} angle - The angle to rotate the wheel to, in degrees.
+   */
   #setAngle(angle) {
     if (!Number.isFinite(angle)) {
       throw new RangeError(`Expected a numerical angle. Received ${angle}`);
@@ -111,6 +163,18 @@ class Wheel {
     this.#dateInput.value = this.#getDateRange();
   }
 
+  /**
+   * Determines the current rotation angle of the wheel image.
+   *
+   * Normally, this would be the same as `#angle`, but for snapping the wheel to
+   * the nearest zodiac, it uses a CSS transition to smoothly rotate to the
+   * nearest zodiac.
+   *
+   * However, if the user decides to start rotating the wheel in the middle of
+   * the transition, `#angle` will have the rounded angle. This method uses
+   * `getComputedStyle` to get the current angle during the transition.
+   * @returns {number} The visual rotation angle of the wheel image, in degrees.
+   */
   #getAngle() {
     const matrix = window.getComputedStyle(this.#elem).transform;
     const match = matrix.match(
@@ -126,7 +190,10 @@ class Wheel {
   }
 
   /**
-   * @param {PointerEvent} event
+   * Converts a mouse position to a polar coordinate relative to the middle of
+   * the wheel image, and returns the angle.
+   * @param {PointerEvent} event - The event object from a pointer event
+   * handler.
    * @returns {number} Clockwise, between -180° and 180°, where 0° means the
    * mouse is right of the center.
    */
@@ -140,7 +207,31 @@ class Wheel {
   }
 
   /**
-   * @param {PointerEvent} event
+   * Event handler for the `pointerdown` event.
+   *
+   * We're using [pointer
+   * events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
+   * rather than [mouse events](https://javascript.info/mouse-events-basics) or
+   * [touch
+   * events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events)
+   * because pointer events have several advantages:
+   *
+   * - They're an all-in-one set of events that fire for both mouse cursors,
+   *   fingers, and pens (collectively called pointers). This means that I don't
+   *   need to add both `mousedown` and `touchstart` event listeners.
+   * - The `setPointerCapture` method lets me receive `pointermove` and
+   *   `pointerup` events on the wheel image even when the pointer moves outside
+   *   of the element. For mouse and touch events, I would have to listen for
+   *   move events on the entire `document`.
+   * - Combined with CSS `touch-action: none;`, I don't need to use
+   *   `event.preventDefault()` to prevent scrolling, which would also require
+   *   `{ passive: true }` when using touch events.
+   * - Finally, the `pointercancel` event makes it nice in case the user holds
+   *   down their mouse and leaves the page. For mouse events, it will simply
+   *   not fire any event when this happens, so to the user when they return,
+   *   it'll look like the wheel is sticking to their cursor even though they
+   *   aren't holding it down.
+   * @param {PointerEvent} event - Event object.
    */
   #handlePointerDown = (event) => {
     if (!this.#pointer) {
@@ -163,7 +254,8 @@ class Wheel {
   };
 
   /**
-   * @param {PointerEvent} event
+   * Event handler for the `pointermove` event.
+   * @param {PointerEvent} event - Event object.
    */
   #handlePointerMove = (event) => {
     if (this.#pointer?.pointerId === event.pointerId) {
@@ -179,6 +271,8 @@ class Wheel {
   };
 
   /**
+   * Event handler for the `pointerup` and `pointercancel` events. The latter
+   * occurs if the user holds their mouse down then switches tabs.
    * @param {PointerEvent} event
    */
   #handlePointerUp = (event) => {
@@ -223,7 +317,9 @@ class Wheel {
   };
 
   /**
-   * @param {number} angleVel
+   * Starts rotating the wheel with momentum given an initial angular velocity.
+   * @param {number} angleVel - The initial angular velocity, in degrees/ms.
+   * Default: 0.
    */
   #startMomentum(angleVel = 0) {
     if (!this.#animating) {
@@ -236,6 +332,14 @@ class Wheel {
     }
   }
 
+  /**
+   * Stops all animations relating to the wheel moving on its own, such as the
+   * wheel rotating with momentum or automatically snapping to the nearest
+   * zodiac.
+   *
+   * This is called when the user starts rotating the wheel to prevent the user
+   * and the website from fighting over control of the wheel.
+   */
   #stopMomentum() {
     if (this.#animating) {
       window.cancelAnimationFrame(this.#animating.frameId);
@@ -248,6 +352,11 @@ class Wheel {
     this.#elem.style.transition = null;
   }
 
+  /**
+   * Simulates the wheel moving and updates the wheel rotation accordingly, in
+   * an animation frame. Automatically stops and snaps to the nearest zodiac
+   * when the wheel slows down.
+   */
   #paint = () => {
     if (!this.#animating) {
       return;
@@ -276,16 +385,31 @@ class Wheel {
     this.#animating.frameId = window.requestAnimationFrame(this.#paint);
   };
 
+  /**
+   * Uses a CSS transition to smoothly rotate the wheel to the nearest zodiac.
+   *
+   * Note that because we're using CSS transitions, there can be a discrepancy
+   * between the angle of the wheel that the user sees and `#angle`, which
+   * stores the rounded angle. To get the angle the user sees, use `#getAngle`.
+   */
   #snap() {
     this.#elem.style.transition = "transform 0.5s";
     this.#setAngle(roundAngle(this.#angle));
   }
 }
 
+/**
+ * The left wheel.
+ * @type {Wheel}
+ */
 const leftWheel = new Wheel(
   document.getElementById("left_wheel_img"),
   document.getElementById("left_birthday")
 );
+/**
+ * The right wheel.
+ * @type {Wheel}
+ */
 const rightWheel = new Wheel(
   document.getElementById("right_wheel_img"),
   document.getElementById("right_birthday"),

From 59dd38b07e27183b4e8670abe32e2bc7f09a8655 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 11 Jun 2023 14:18:31 -0700
Subject: [PATCH 07/10] Respect prefers-reduced-motion

Fixes #83
---
 source/FortuneCookie/fortuneCookie.js | 16 ++++++++++++++++
 source/FortuneCookie/style.css        |  5 +++++
 source/PalmReading/style.css          |  5 +++++
 source/common/styles.css              |  9 +++++++++
 4 files changed, 35 insertions(+)

diff --git a/source/FortuneCookie/fortuneCookie.js b/source/FortuneCookie/fortuneCookie.js
index 91d053cf..5557905a 100644
--- a/source/FortuneCookie/fortuneCookie.js
+++ b/source/FortuneCookie/fortuneCookie.js
@@ -51,6 +51,10 @@ function reset(state) {
 }
 
 resetButton.addEventListener("click", () => {
+  if (prefersReducedMotion()) {
+    reset("cookie");
+    return;
+  }
   resetButton.disabled = true;
   cookieButton.classList.remove("hide-cookie");
   cancelButton.parentElement.classList.add("animating");
@@ -164,6 +168,14 @@ function fallNewCookie() {
   cookieFalling = true;
 }
 
+/**
+ * Determines whether the user has `prefers-reduced-motion` enabled.
+ * @returns {boolean} Whether to reduce motion.
+ */
+function prefersReducedMotion() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 /**
  * When the user clicks the button, disables it so they cannot click the button
  * in quick succession and cause audio issues
@@ -173,6 +185,10 @@ document.body.addEventListener("click", async function (event) {
     if (fortuneButton.disabled) {
       return;
     }
+    if (prefersReducedMotion()) {
+      reset("fortune");
+      return;
+    }
     document.body.classList.add("dramatic-mode");
     cancelButton.parentElement.classList.add("animating");
     cancelButton.parentElement.classList.remove("animating-new-cookie");
diff --git a/source/FortuneCookie/style.css b/source/FortuneCookie/style.css
index 7dee566f..bb75d23e 100644
--- a/source/FortuneCookie/style.css
+++ b/source/FortuneCookie/style.css
@@ -236,6 +236,11 @@ li.audio-dropdown {
   background-clip: text;
   animation: reveal-text 1s forwards;
 }
+@media (prefers-reduced-motion) {
+  .reveal p {
+    background-position: right;
+  }
+}
 
 @keyframes reveal-text {
   from {
diff --git a/source/PalmReading/style.css b/source/PalmReading/style.css
index 3b9d1258..e16b72e2 100644
--- a/source/PalmReading/style.css
+++ b/source/PalmReading/style.css
@@ -293,6 +293,11 @@ body {
   stroke-width: 1;
   transition: opacity 0.5s;
 }
+@media (prefers-reduced-motion) {
+  .ecg {
+    display: none;
+  }
+}
 .ecg-active {
   opacity: 1;
   transition-delay: 3.5s;
diff --git a/source/common/styles.css b/source/common/styles.css
index 55683b6a..774f6cce 100644
--- a/source/common/styles.css
+++ b/source/common/styles.css
@@ -12,6 +12,15 @@
   -webkit-overflow-scrolling: touch;
 }
 
+@media (prefers-reduced-motion) {
+  *,
+  :before,
+  :after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 :root {
   color-scheme: dark;
 }

From 399149f547c18eed9cd570be0f6aae7049b55b27 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 11 Jun 2023 14:27:22 -0700
Subject: [PATCH 08/10] Fix lint error

---
 source/PalmReading/script.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/source/PalmReading/script.js b/source/PalmReading/script.js
index 82cf3000..39016cfb 100644
--- a/source/PalmReading/script.js
+++ b/source/PalmReading/script.js
@@ -1,6 +1,3 @@
-const fortune = document.getElementById("fortune-paragraph");
-// etc
-
 const heads = [
   "Long and straight head line: You possess a logical and analytical mind. You excel in problem-solving and have a practical approach to life.",
   "Short head line: You tend to be impulsive and prefer to make decisions based on intuition rather than careful analysis. You may have a quick wit and enjoy spontaneous experiences.",

From eb58ef014b5b7cfd873872ee86825ffa3924d091 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 11 Jun 2023 14:28:03 -0700
Subject: [PATCH 09/10] Fix documentation link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 12af4f9f..1e49bc33 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 Improving the student experience by alleviating decision-making anxiety. Brought to you by [20/20 Visionaries](./admin/team.md) (CSE 110 SP23 Team 20).
 
 [![Try it out button](./docs/images/try-button.svg)](https://cse110-sp23-group20.github.io/fortune-teller/source/home-page/)
-[![Documentation button](./docs/images/docs-button.svg)](./JSDOCs/)
+[![Documentation button](./docs/images/docs-button.svg)](https://cse110-sp23-group20.github.io/fortune-teller/JSDOCs/)
 [![Team page button](./docs/images/team-page-button.svg)](./admin/team.md)
 
 ## Development

From 10048e7f78ebbcc6b1d2386f9365d201a94a13de Mon Sep 17 00:00:00 2001
From: "Thomas A. Powell" <tpowell@pint.com>
Date: Sun, 11 Jun 2023 23:41:01 +0000
Subject: [PATCH 10/10] Auto-format

---
 specs/adrs/fortuneCookieAdr.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/specs/adrs/fortuneCookieAdr.md b/specs/adrs/fortuneCookieAdr.md
index 55d319c9..c38a67cf 100644
--- a/specs/adrs/fortuneCookieAdr.md
+++ b/specs/adrs/fortuneCookieAdr.md
@@ -96,7 +96,7 @@ What if the user is in public places like the library or public coffee shop and
 ## Decision Drivers
 
 - Avoid uncomfortable situations for users
-- Provide users with options 
+- Provide users with options
 
 ## Considered Options
 
@@ -106,7 +106,7 @@ What if the user is in public places like the library or public coffee shop and
 
 ## Decision Outcome
 
-Chosen option: A checkbox underneath the button. We chose this option because it doesn't interfere with the layout of our website. This will be important for 
+Chosen option: A checkbox underneath the button. We chose this option because it doesn't interfere with the layout of our website. This will be important for
 
 ### Consequences
 
@@ -233,4 +233,4 @@ Chosen option: "Mimicking the motion of cracking a fortune cookie". This makes i
 - Good, because it is similar to the act of opening an actual fortune cookie.
 - Good, because it creates an element of surprise.
 - Bad, because it is too generic.
-- Bad, because it can cause confusion.
\ No newline at end of file
+- Bad, because it can cause confusion.