104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
import { IPalmistryPoint } from "@/api/resources/Palmistry";
|
|
import Title from "../Title";
|
|
import styles from "./styles.module.scss";
|
|
import { DisplayHand } from "@/hooks/handsGeneration/useHandsGeneration";
|
|
import { useRef } from "react";
|
|
|
|
interface IUsersHandsProps {
|
|
title?: string;
|
|
hands: DisplayHand[];
|
|
}
|
|
|
|
function UsersHands({
|
|
title,
|
|
hands
|
|
}: IUsersHandsProps) {
|
|
const linesRef = useRef<SVGPathElement[]>([]);
|
|
|
|
const getCoordinatesString = (points: IPalmistryPoint[]) => {
|
|
const coordinatesString = `M ${points[0]?.x * 56} ${points[0]?.y * 75
|
|
}`;
|
|
return points.reduce(
|
|
(acc, point) =>
|
|
`${acc} L ${point?.x * 56} ${point?.y * 75}`,
|
|
coordinatesString
|
|
);
|
|
}
|
|
|
|
const getLineLength = (line: SVGPathElement) => {
|
|
return line?.getTotalLength();
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{!!title?.length && <Title variant="h3" className={styles.title}>
|
|
{title}
|
|
</Title>}
|
|
<div className={styles.hands}>
|
|
{hands.map(({ image, lines, willBeRemoved }, index) => (
|
|
<div className={`${styles.hand} ${willBeRemoved ? styles.willBeRemoved : ""}`} key={index}>
|
|
<img
|
|
src={image}
|
|
alt={`hand-${index}`}
|
|
/>
|
|
<svg
|
|
viewBox={`0 0 ${56} ${75}`}
|
|
className={`scanned-photo__svg-objects ${styles.svgObjects}`}
|
|
>
|
|
{/* {!!fingers.length &&
|
|
fingers?.map((finger, index) => {
|
|
return (
|
|
<svg
|
|
x={finger.point.x * 56 - 12}
|
|
y={finger.point.y * 75 - 12}
|
|
height="24px"
|
|
width="24px"
|
|
key={index}
|
|
>
|
|
<circle
|
|
cx="50%"
|
|
cy="50%"
|
|
r="11"
|
|
fill="white"
|
|
opacity="0.3"
|
|
className="scanned-photo__finger-point"
|
|
/>
|
|
<circle
|
|
cx="50%"
|
|
cy="50%"
|
|
r="5"
|
|
fill="#066FDE"
|
|
stroke="white"
|
|
strokeWidth="0.3"
|
|
className="scanned-photo__finger-point"
|
|
/>
|
|
</svg>
|
|
);
|
|
})} */}
|
|
|
|
{lines.map((line, index) => (
|
|
<g key={`line-${index}`}>
|
|
<path
|
|
className={`scanned-photo__line scanned-photo__line_${line?.name} ${styles.line}`}
|
|
d={getCoordinatesString(line?.points)}
|
|
ref={(el) =>
|
|
(linesRef.current[index] = el as SVGPathElement)
|
|
}
|
|
style={{
|
|
strokeDasharray:
|
|
getLineLength(linesRef.current[index]) || 500,
|
|
strokeDashoffset:
|
|
getLineLength(linesRef.current[index]) || 500,
|
|
}}
|
|
/>
|
|
</g>
|
|
))}
|
|
</svg>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UsersHands |