import { useState, useEffect, useRef, useCallback } from "react"; import { CodeIcon } from "hugeicons"; export default function CollaborativeDebuggingCard() { const codeRef = useRef(null); const [finCursor, setFinCursor] = useState(null); const moveFinCursor = useCallback((event) => { if (event.pointerType !== "mouse") return; const card = event.currentTarget; const bounds = card.getBoundingClientRect(); setFinCursor({ x: (event.clientX - bounds.left) * (card.offsetWidth / bounds.width) - card.clientLeft, y: (event.clientY - bounds.top) * (card.offsetHeight / bounds.height) - card.clientTop, }); }, []); useEffect(() => { const preference = window.matchMedia("(prefers-reduced-motion: reduce)"); let animations = []; const animateCode = () => { animations.forEach((animation) => animation.cancel()); animations = []; if (!codeRef.current) return; codeRef.current.scrollTop = 0; if (preference.matches) return; const lines = Array.from(codeRef.current.querySelectorAll(".cdbg-source")); const lengths = lines.map((line) => Math.max(1, line.textContent.length)); const typingDuration = lengths.reduce((total, length) => total + length * 24 + 100, 0); const duration = typingDuration + 2600; const readingEdge = codeRef.current.parentElement.clientHeight * 0.56; const scrollFrames = [{ transform: "translateY(0px)", offset: 0 }]; let elapsed = 0; let scroll = 0; lines.forEach((line, index) => { const length = lengths[index]; const start = elapsed; const hidden = "inset(0 100% 0 0)"; const visible = `inset(0 calc(100% - ${length}ch - 4px) 0 0)`; const frames = [{ clipPath: hidden, opacity: 1, offset: 0 }]; if (elapsed > 0) { frames.push({ clipPath: hidden, opacity: 1, offset: elapsed / duration }); } frames[frames.length - 1].easing = `steps(${length}, end)`; elapsed += length * 24; frames.push( { clipPath: visible, opacity: 1, offset: elapsed / duration }, { clipPath: visible, opacity: 1, offset: (duration - 300) / duration, easing: "ease-out" }, { clipPath: visible, opacity: 0, offset: 1 } ); animations.push(line.animate(frames, { duration, iterations: Infinity })); const numberFrames = start > 0 ? [{ opacity: 0, offset: 0, easing: "steps(1, end)" }] : []; numberFrames.push( { opacity: 1, offset: start / duration }, { opacity: 1, offset: (duration - 300) / duration, easing: "ease-out" }, { opacity: 0, offset: 1 } ); animations.push(line.previousElementSibling.animate(numberFrames, { duration, iterations: Infinity })); const nextScroll = Math.max(0, 6 + (index + 1) * 24.5 - readingEdge); if (nextScroll > scroll) { scrollFrames.push( { transform: `translateY(-${scroll}px)`, offset: start / duration, easing: "ease-out" }, { transform: `translateY(-${nextScroll}px)`, offset: (start + Math.min(220, length * 24)) / duration } ); scroll = nextScroll; } elapsed += 100; }); scrollFrames.push({ transform: `translateY(-${scroll}px)`, offset: 1 }); animations.push(codeRef.current.animate(scrollFrames, { duration, iterations: Infinity })); const startTime = document.timeline.currentTime; animations.forEach((animation) => { animation.startTime = startTime; }); }; animateCode(); preference.addEventListener("change", animateCode); return () => { preference.removeEventListener("change", animateCode); animations.forEach((animation) => animation.cancel()); }; }, []); return ( <>

setFinCursor(null)} onPointerCancel={() => setFinCursor(null)} style={{ width: 563, maxWidth: "100%", minWidth: 0, position: "relative", overflow: "hidden", boxSizing: "border-box", }} >


            {[
              <>const stage = document.querySelector('svg'),
              <>const hit = document.querySelector('div'),
              <>let mPos = {"{x:50, y:-50}"},
              "",
              "for (let x=1; x<10; x++)",
              "  for (let y=1; y<10; y++) makePt(x*10, y*10)",
              "",
              "function makePt(x,y){",
              "  const g = document.createElementNS(",
              "    'http://www.w3.org/2000/svg', 'circle'",
              "  )", "  g.setAttribute('cx', x)", "  g.setAttribute('cy', y)",
              "  g.setAttribute('r', 2)", "  g.dataset.x = x", "  g.dataset.y = y",
              "  stage.appendChild(g)", "}", "",
              "hit.addEventListener('pointermove', (event) => {",
              "  const point = stage.createSVGPoint()",
              "  point.x = event.clientX", "  point.y = event.clientY",
              "  const matrix = stage.getScreenCTM()",
              "  if (!matrix) return",
              "  mPos = point.matrixTransform(matrix.inverse())",
              "  requestAnimationFrame(updatePoints)", "})", "",
              "function updatePoints(){",
              "  const points = stage.querySelectorAll('circle')",
              "  for (const point of points) {",
              "    const dx = mPos.x - Number(point.dataset.x)",
              "    const dy = mPos.y - Number(point.dataset.y)",
              "    const active = Math.hypot(dx, dy) < 32",
              "    point.setAttribute('r', active ? 4 : 2)",
              "    const color = active ? '#00D6FF' : '#555555'",
              "    point.setAttribute('fill', color)",
              "  }", "}", "", "updatePoints()",
            ].map((line, index) => (
              
                {index + 1}
                {line}
              
            ))}

{[ { name: "Tejas", left: "13.4%", top: "29.5%", color: "#00D100" }, { name: "Necati", left: "74.3%", top: "20.5%", color: "#00D6FF" }, { name: "Oğuz Yağız", left: "58.8%", top: "47.4%", color: "#FF4C01" }, ].map(({ name, left, top, color }, index) => (

{name}

))} {finCursor && ( )}

); }

Colorful Debugging Card