Add draggable skills

Jwiggiff · Jan 14, 2024 · e119f15 · e119f15
1 parent 9349ef2
commit e119f15
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 27 deletions.
diff --git a/src/SkillsList.jsx b/src/SkillsList.jsx
@@ -46,12 +46,33 @@ const skillIcons = {
 };
 
 export default function SkillsList() {
-  const onMouseMove = ({ target, clientX, clientY }) => {
-    let rect = target.getBoundingClientRect();
-    const x = clientX - rect.x;
-    const y = clientY - rect.y;
-    target.style.setProperty("--x", `${x}px`);
-    target.style.setProperty("--y", `${y}px`);
+  let draggingEl = useRef(null);
+
+  const onMouseDown = (e) => {
+    if (e.buttons != 1) return;
+    e.preventDefault();
+    draggingEl.current = e.target;
+    e.target.classList.add("dragging");
+    e.target.dataset.startX = e.clientX;
+    e.target.dataset.startY = e.clientY;
+  };
+
+  const onMouseMove = (e) => {
+    if (e.buttons == 1) {
+      e.preventDefault();
+      const dx = Number(draggingEl.current.dataset.dx) + e.movementX;
+      const dy = Number(draggingEl.current.dataset.dy) + e.movementY;
+      draggingEl.current.dataset.dx = dx;
+      draggingEl.current.dataset.dy = dy;
+      draggingEl.current.style.setProperty("--dx", `${dx}px`);
+      draggingEl.current.style.setProperty("--dy", `${dy}px`);
+    }
+  };
+
+  const onMouseUp = (e) => {
+    e.preventDefault();
+    draggingEl.current.classList.remove("dragging");
+    draggingEl.current = null;
   };
 
   return (
@@ -60,7 +81,14 @@ export default function SkillsList() {
         {Object.values(skills)
           .flat()
           .map((skill, i) => (
-            <li key={i} onMouseMove={onMouseMove}>
+            <li
+              key={i}
+              onMouseDown={onMouseDown}
+              onMouseMove={onMouseMove}
+              onMouseUp={onMouseUp}
+              data-dx="0"
+              data-dy="0"
+            >
               {<FontAwesomeIcon icon={skillIcons[skill]} />}
               {skill}
             </li>

diff --git a/src/sass/skills.scss b/src/sass/skills.scss
@@ -15,6 +15,7 @@
     max-width: calc(100% - 20rem);
     // font-size: clamp(1.25em, 3vw, 3em);
     font-size: clamp(1.25em, 2vw, 3em);
+    position: relative;
 
     @include mq($mobile) {
       max-width: 100%;
@@ -29,31 +30,24 @@
       border-radius: 8px;
       border: 1px solid rgba($text-color, 0.4);
       font-weight: bold;
+      transition: box-shadow 0.2s ease, scale 0.2s ease;
       position: relative;
-      transition: transform 0.2s ease;
+      top: var(--dy);
+      left: var(--dx);
+      cursor: move;
+      cursor: grab;
 
-      &:hover {
-        transform: rotateX(var(--dy)) rotateY(var(--dx));
+      &:active {
+        cursor: grabbing;
+      }
 
-        &::after {
-          opacity: 0.25;
-        }
+      &.dragging {
+        box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.25);
+        scale: 1.05;
       }
 
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        inset: -2px;
-        border-radius: inherit;
-        background-image: radial-gradient(
-          circle at var(--x) var(--y),
-          $lightblue,
-          transparent
-        );
-        opacity: 0;
-        z-index: -1;
-        transition: opacity 0.3s;
+      svg {
+        pointer-events: none;
       }
     }
   }