gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

develop

Browse Source
This commit is contained in:
Daniil Chemerkin 2025-02-26 18:19:01 +00:00
parent 8ed49191a0
commit a462947bc3
14 changed files with 169 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/compatibility-v2/en/male_en.json
View File

@ -306,10 +306,10 @@
"point3_color": "Head line",
"point4": "A long index finger indicates a natural leader",
"point5": "<color> defines the quality of your life and what you will achieve",
"point5_color": "Life line",
"point5_color": "Live line",
"point6": "A short middle finger reveals a free spirit",
"point7": "<color> represents your material achievement and career goals",
"point7_color": "Fate line",
"point7_color": "Money line",
"point8": "A long ring finger reveals that a person tends to take risks",
"point9": "A short little finger indicates the person's lack of self-confidence"
},

4
public/locales/palmistry-v1/en/male_en.json
View File

@ -221,10 +221,10 @@
"point3_color": "Head line",
"point4": "A long index finger indicates a natural leader",
"point5": "<color> defines the quality of your life and what you will achieve",
"point5_color": "Life line",
"point5_color": "Live line",
"point6": "A short middle finger reveals a free spirit",
"point7": "<color> represents your material achievement and career goals",
"point7_color": "Fate line",
"point7_color": "Money line",
"point8": "A long ring finger reveals that a person tends to take risks",
"point9": "A short little finger indicates the person's lack of self-confidence"
},

BIN
public/v1/palmistry/hand-with-lines-v1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
public/v2/compatibility/hand-with-lines-v1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

11
src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss
View File

@ -23,6 +23,13 @@
gap: 12px;
margin-bottom: 12px;
&>img[src$=".svg"] {
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: smooth;
-webkit-font-smoothing: antialiased;
}
&:nth-child(even) {
flex-direction: row-reverse;
}
@ -40,12 +47,12 @@
grid-template-columns: 16px 1fr;
gap: 2px;
& > .text {
&>.text {
font-size: 16px;
line-height: 125%;
color: #000;
& > span {
&>span {
color: #cc8551;
font-weight: 600;
font-size: 18px;

12
src/components/CompatibilityV2/pages/FindHappiness/index.tsx
View File

@ -11,6 +11,7 @@ import { actions } from "@/store";
// import StarSVG from "../../images/SVG/Star";
import { usePreloadImages } from "@/hooks/preload/images";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { useMetricABFlags } from "@/services/metric/metricService";
function FindHappiness() {
const navigate = useNavigate();
@ -18,6 +19,9 @@ function FindHappiness() {
const location = useLocation();
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
usePreloadImages(["/male-gender.webp", "/female-gender.webp"]);
const { flags, ready } = useMetricABFlags();
const imageType = flags?.welcomePageImage?.[0];
const image = imageType === "v1" ? "/hand-with-lines-v1.png" : "/hand-with-lines.png";
useEffect(() => {
const feature = location.pathname.replace(
@ -29,6 +33,8 @@ function FindHappiness() {
}
}, [dispatch, location.pathname]);
if (!ready) return null;
return (
<>
{/* <div className={styles["blocks-container"]}>
@ -58,8 +64,12 @@ function FindHappiness() {
/>
<img
className={styles.image}
src={`${compatibilityV2Prefix}/hand-with-lines.png`}
src={`${compatibilityV2Prefix}${image}`}
alt="Hand with lines"
style={{
minHeight: imageType === "v1" ? "auto" : "341px",
maxWidth: imageType === "v1" ? "330px" : "250px"
}}
/>
<Title variant="h2" className={styles.title}>
{translate("/find-your-happiness.title")}

3
src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx
View File

@ -190,7 +190,8 @@ function ScannedPhoto() {
);
const onEndLoading = useCallback(() => {
if (isIOSPath && !!authCode) {
const isIOS = /iPhone/i.test(navigator.userAgent);
if (isIOSPath && !!authCode && isIOS) {
return navigate(routes.client.compatibilityV2TryApp());
}
navigate(routes.client.compatibilityV2Email());

105
src/components/CompatibilityV2/pages/TryApp/components/PalmPhoto/index.tsx
View File

@ -16,7 +16,7 @@ function PalmPhoto() {
const linesRef = useRef<SVGPathElement[]>([]);
const fingers = useSelector(selectors.selectCompatibilityV2Fingers);
const lines = useSelector(selectors.selectCompatibilityV2Lines);
const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]);
// const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]);
useEffect(() => {
if (isImageLoaded && imageRef.current) {
@ -43,63 +43,63 @@ function PalmPhoto() {
return line?.getTotalLength();
};
useEffect(() => {
if (!imageWidth || !imageHeight || !lines.length) return;
// useEffect(() => {
// if (!imageWidth || !imageHeight || !lines.length) return;
const textWidth = 90;
const textHeight = 17;
const padding = 10;
const newPositions: Array<{ x: number, y: number }> = [];
// const textWidth = 90;
// const textHeight = 17;
// const padding = 10;
// const newPositions: Array<{ x: number, y: number }> = [];
lines.forEach((line, index) => {
const points = line.points;
const positions = [];
// lines.forEach((line, index) => {
// const points = line.points;
// const positions = [];
for (let i = 0; i < points.length - 1; i++) {
const x = (points[i].x + points[i + 1].x) / 2;
const y = (points[i].y + points[i + 1].y) / 2;
positions.push({ x, y });
}
// for (let i = 0; i < points.length - 1; i++) {
// const x = (points[i].x + points[i + 1].x) / 2;
// const y = (points[i].y + points[i + 1].y) / 2;
// positions.push({ x, y });
// }
positions.unshift({ x: points[0].x, y: points[0].y });
positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
// positions.unshift({ x: points[0].x, y: points[0].y });
// positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
let positionFound = false;
for (const pos of positions) {
let hasOverlap = false;
// let positionFound = false;
// for (const pos of positions) {
// let hasOverlap = false;
for (const existingPos of newPositions) {
if (
pos.x * imageWidth + padding < existingPos.x + textWidth &&
pos.x * imageWidth + padding + textWidth > existingPos.x &&
pos.y * imageHeight - padding < existingPos.y + textHeight &&
pos.y * imageHeight - padding + textHeight > existingPos.y
) {
hasOverlap = true;
break;
}
}
// for (const existingPos of newPositions) {
// if (
// pos.x * imageWidth + padding < existingPos.x + textWidth &&
// pos.x * imageWidth + padding + textWidth > existingPos.x &&
// pos.y * imageHeight - padding < existingPos.y + textHeight &&
// pos.y * imageHeight - padding + textHeight > existingPos.y
// ) {
// hasOverlap = true;
// break;
// }
// }
if (!hasOverlap) {
newPositions.push({
x: pos.x * imageWidth + 10,
y: pos.y * imageHeight - 5
});
positionFound = true;
break;
}
}
// if (!hasOverlap) {
// newPositions.push({
// x: pos.x * imageWidth + 10,
// y: pos.y * imageHeight - 5
// });
// positionFound = true;
// break;
// }
// }
if (!positionFound) {
newPositions.push({
x: points[0].x * imageWidth + textWidth + padding * (index + 1),
y: points[0].y * imageHeight - textHeight - padding * (index + 1)
});
}
});
// if (!positionFound) {
// newPositions.push({
// x: points[0].x * imageWidth + textWidth + padding * (index + 1),
// y: points[0].y * imageHeight - textHeight - padding * (index + 1)
// });
// }
// });
setTextPositions(newPositions);
}, [lines, imageWidth, imageHeight]);
// setTextPositions(newPositions);
// }, [lines, imageWidth, imageHeight]);
return (
<div className={styles.container}>
@ -168,8 +168,11 @@ function PalmPhoto() {
{lines.map((line, index) => (
<g key={`line-label-${index}`}>
<text
x={textPositions[index]?.x || 0}
y={textPositions[index]?.y || 0}
// x={textPositions[index]?.x || 0}
// y={textPositions[index]?.y || 0}
x={imageWidth - 10}
y={index * 20 + 20}
textAnchor="end"
fill="#066FDE"
className={`scanned-photo__line-text scanned-photo__line-text_${line?.name}`}
>

11
src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss
View File

@ -23,6 +23,13 @@
gap: 12px;
margin-bottom: 12px;
&>img[src$=".svg"] {
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: smooth;
-webkit-font-smoothing: antialiased;
}
&:nth-child(even) {
flex-direction: row-reverse;
}
@ -40,12 +47,12 @@
grid-template-columns: 16px 1fr;
gap: 2px;
& > .text {
&>.text {
font-size: 16px;
line-height: 125%;
color: #000;
& > span {
&>span {
color: #cc8551;
font-weight: 600;
font-size: 18px;

13
src/components/PalmistryV1/pages/FindHappiness/index.tsx
View File

@ -10,6 +10,7 @@ import { useEffect } from "react";
import { actions } from "@/store";
// import StarSVG from "../../images/SVG/Star";
import { usePreloadImages } from "@/hooks/preload/images";
import { useMetricABFlags } from "@/services/metric/metricService";
function FindHappiness() {
const navigate = useNavigate();
@ -17,6 +18,10 @@ function FindHappiness() {
const location = useLocation();
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
usePreloadImages(["/male-gender.webp", "/female-gender.webp"]);
const { flags, ready } = useMetricABFlags();
const imageType = flags?.welcomePageImage?.[0];
const image = imageType === "v1" ? "/hand-with-lines-v1.png" : "/hand-with-lines.png";
useEffect(() => {
const feature = location.pathname.replace(
@ -28,6 +33,8 @@ function FindHappiness() {
}
}, [dispatch, location.pathname]);
if (!ready) return null;
return (
<>
{/* <div className={styles["blocks-container"]}>
@ -50,8 +57,12 @@ function FindHappiness() {
</div> */}
<img
className={styles.image}
src={`${palmistryV1Prefix}/hand-with-lines.png`}
src={`${palmistryV1Prefix}${image}`}
alt="Hand with lines"
style={{
minHeight: imageType === "v1" ? "auto" : "341px",
maxWidth: imageType === "v1" ? "330px" : "250px"
}}
/>
<Title variant="h2" className={styles.title}>
{translate("/find-your-happiness.title")}

3
src/components/PalmistryV1/pages/ScannedPhoto/index.tsx
View File

@ -96,7 +96,8 @@ function ScannedPhoto() {
}, [currentElementIndex, drawElements.length]);
const handleNext = () => {
if (isIOSPath && !!authCode) {
const isIOS = /iPhone/i.test(navigator.userAgent);
if (isIOSPath && !!authCode && isIOS) {
return navigate(routes.client.palmistryV1TryApp());
}
return navigate(routes.client.palmistryV1Email())

105
src/components/PalmistryV1/pages/TryApp/components/PalmPhoto/index.tsx
View File

@ -16,7 +16,7 @@ function PalmPhoto() {
const linesRef = useRef<SVGPathElement[]>([]);
const fingers = useSelector(selectors.selectPalmistryFingers);
const lines = useSelector(selectors.selectPalmistryLines);
const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]);
// const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]);
useEffect(() => {
if (isImageLoaded && imageRef.current) {
@ -43,63 +43,63 @@ function PalmPhoto() {
return line?.getTotalLength();
};
useEffect(() => {
if (!imageWidth || !imageHeight || !lines.length) return;
// useEffect(() => {
// if (!imageWidth || !imageHeight || !lines.length) return;
const textWidth = 90;
const textHeight = 17;
const padding = 10;
const newPositions: Array<{ x: number, y: number }> = [];
// const textWidth = 90;
// const textHeight = 17;
// const padding = 10;
// const newPositions: Array<{ x: number, y: number }> = [];
lines.forEach((line, index) => {
const points = line.points;
const positions = [];
// lines.forEach((line, index) => {
// const points = line.points;
// const positions = [];
for (let i = 0; i < points.length - 1; i++) {
const x = (points[i].x + points[i + 1].x) / 2;
const y = (points[i].y + points[i + 1].y) / 2;
positions.push({ x, y });
}
// for (let i = 0; i < points.length - 1; i++) {
// const x = (points[i].x + points[i + 1].x) / 2;
// const y = (points[i].y + points[i + 1].y) / 2;
// positions.push({ x, y });
// }
positions.unshift({ x: points[0].x, y: points[0].y });
positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
// positions.unshift({ x: points[0].x, y: points[0].y });
// positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
let positionFound = false;
for (const pos of positions) {
let hasOverlap = false;
// let positionFound = false;
// for (const pos of positions) {
// let hasOverlap = false;
for (const existingPos of newPositions) {
if (
pos.x * imageWidth + padding < existingPos.x + textWidth &&
pos.x * imageWidth + padding + textWidth > existingPos.x &&
pos.y * imageHeight - padding < existingPos.y + textHeight &&
pos.y * imageHeight - padding + textHeight > existingPos.y
) {
hasOverlap = true;
break;
}
}
// for (const existingPos of newPositions) {
// if (
// pos.x * imageWidth + padding < existingPos.x + textWidth &&
// pos.x * imageWidth + padding + textWidth > existingPos.x &&
// pos.y * imageHeight - padding < existingPos.y + textHeight &&
// pos.y * imageHeight - padding + textHeight > existingPos.y
// ) {
// hasOverlap = true;
// break;
// }
// }
if (!hasOverlap) {
newPositions.push({
x: pos.x * imageWidth + 10,
y: pos.y * imageHeight - 5
});
positionFound = true;
break;
}
}
// if (!hasOverlap) {
// newPositions.push({
// x: pos.x * imageWidth + 10,
// y: pos.y * imageHeight - 5
// });
// positionFound = true;
// break;
// }
// }
if (!positionFound) {
newPositions.push({
x: points[0].x * imageWidth + textWidth + padding * (index + 1),
y: points[0].y * imageHeight - textHeight - padding * (index + 1)
});
}
});
// if (!positionFound) {
// newPositions.push({
// x: points[0].x * imageWidth + textWidth + padding * (index + 1),
// y: points[0].y * imageHeight - textHeight - padding * (index + 1)
// });
// }
// });
setTextPositions(newPositions);
}, [lines, imageWidth, imageHeight]);
// setTextPositions(newPositions);
// }, [lines, imageWidth, imageHeight]);
return (
<div className={styles.container}>
@ -168,8 +168,11 @@ function PalmPhoto() {
{lines.map((line, index) => (
<g key={`line-label-${index}`}>
<text
x={textPositions[index]?.x || 0}
y={textPositions[index]?.y || 0}
// x={textPositions[index]?.x || 0}
// y={textPositions[index]?.y || 0}
x={imageWidth - 10}
y={index * 20 + 20}
textAnchor="end"
fill="#066FDE"
className={`scanned-photo__line-text scanned-photo__line-text_${line?.name}`}
>

17
src/components/palmistry/scanned-photo/scanned-photo.css
View File

@ -94,21 +94,21 @@
}
.scanned-photo__line_heart {
stroke: #f8d90f;
stroke: #EE463A;
/* animation-delay: 4.5s; */
}
.scanned-photo__line_life {
stroke: #e51c39;
stroke: #024AD6;
}
.scanned-photo__line_head {
stroke: #00d114;
stroke: #52EF67;
/* animation-delay: 1.5s; */
}
.scanned-photo__line_fate {
stroke: #05ced8;
stroke: #EF45DC;
/* animation-delay: 3s; */
}
@ -185,24 +185,25 @@
opacity: 0;
animation: fadeIn 0.3s forwards;
stroke: #000;
stroke-width: 0.6px;
}
.scanned-photo__line-text_heart {
fill: #f8d90f;
fill: #EE463A;
/* animation-delay: 4.5s; */
}
.scanned-photo__line-text_life {
fill: #e51c39;
fill: #024AD6;
}
.scanned-photo__line-text_head {
fill: #00d114;
fill: #52EF67;
/* animation-delay: 1.5s; */
}
.scanned-photo__line-text_fate {
fill: #05ced8;
fill: #EF45DC;
/* animation-delay: 3s; */
}

1
src/services/metric/metricService.ts
View File

@ -209,6 +209,7 @@ type TABFlags = {
palmOnPayment: "graphical" | "real";
genderPageType: "v1" | "v2";
trialChoicePageType: "v1" | "v2";
welcomePageImage: "v1" | "v2";
}
export const useMetricABFlags = () => {