From d38ee696d1e4a7f41b378eaeccec1f6b55f3cac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Mon, 17 Jun 2024 21:34:26 +0000 Subject: [PATCH] AW-105-palmistry-points --- src/api/resources/Palmistry.ts | 13 +- .../palmistry/scanned-photo/scanned-photo.css | 20 -- .../palmistry/scanned-photo/scanned-photo.tsx | 192 ++++++------------ .../step-scan-photo/step-scan-photo.tsx | 58 ++++-- .../palmistry/step-upload/step-upload.tsx | 7 +- src/routes.ts | 2 +- src/store/index.ts | 2 + src/store/palmistry.ts | 8 +- 8 files changed, 130 insertions(+), 172 deletions(-) diff --git a/src/api/resources/Palmistry.ts b/src/api/resources/Palmistry.ts index 1e63920..bba6244 100644 --- a/src/api/resources/Palmistry.ts +++ b/src/api/resources/Palmistry.ts @@ -4,10 +4,19 @@ export interface Payload { formData: FormData; } -export type Response = IPalmistryLine[]; +export type Response = { + fingers: IPalmistryFinger[]; + lines: IPalmistryLine[]; +}; + +export interface IPalmistryFinger { + name: string; + point: IPalmistryPoint; +} export interface IPalmistryLine { - line: string; + name: string; + line: number; points: IPalmistryPoint[]; } diff --git a/src/components/palmistry/scanned-photo/scanned-photo.css b/src/components/palmistry/scanned-photo/scanned-photo.css index a15dc14..11015af 100644 --- a/src/components/palmistry/scanned-photo/scanned-photo.css +++ b/src/components/palmistry/scanned-photo/scanned-photo.css @@ -51,26 +51,6 @@ transform-origin: center center; } -.scanned-photo__finger-point_thumb { - animation-delay: 0s; -} - -.scanned-photo__finger-point_index { - animation-delay: 1s; -} - -.scanned-photo__finger-point_middle { - animation-delay: 2s; -} - -.scanned-photo__finger-point_ring { - animation-delay: 3s; -} - -.scanned-photo__finger-point_little { - animation-delay: 4s; -} - .scanned-photo__line { stroke-linecap: round; stroke-linejoin: round; diff --git a/src/components/palmistry/scanned-photo/scanned-photo.tsx b/src/components/palmistry/scanned-photo/scanned-photo.tsx index 2b0a1e1..ff5a5b4 100644 --- a/src/components/palmistry/scanned-photo/scanned-photo.tsx +++ b/src/components/palmistry/scanned-photo/scanned-photo.tsx @@ -1,4 +1,8 @@ -import { IPalmistryLine, IPalmistryPoint } from "@/api/resources/Palmistry"; +import { + IPalmistryFinger, + IPalmistryLine, + IPalmistryPoint, +} from "@/api/resources/Palmistry"; import "./scanned-photo.css"; import { useCallback, useEffect, useRef, useState } from "react"; @@ -7,13 +11,15 @@ type Props = { small: boolean; displayLines: boolean; lines: IPalmistryLine[]; - lineChangeDelay: number; + fingers: IPalmistryFinger[]; + drawElementChangeDelay: number; startDelay: number; + drawElements: Array; }; export default function StepScanPhoto(props: Props) { const className = ["scanned-photo"]; - const { lines, lineChangeDelay } = props; + const { lines, drawElementChangeDelay, fingers, drawElements } = props; const imageRef = useRef(null); const linesRef = useRef([]); const [isImageLoaded, setIsImageLoaded] = useState(false); @@ -51,7 +57,7 @@ export default function StepScanPhoto(props: Props) { }; // const getAnimationDelayOfLine = (index: number) => { - // return `${lineChangeDelay * index + startDelay}ms`; + // return `${drawElementChangeDelay * index + startDelay}ms`; // }; return ( @@ -65,7 +71,9 @@ export default function StepScanPhoto(props: Props) {
@@ -84,112 +92,52 @@ export default function StepScanPhoto(props: Props) { viewBox={`0 0 ${imageWidth} ${imageHeight}`} className="scanned-photo__svg-objects" > - {/* - - - - - - - - - - - - - - - - - - - - - - - */} + {fingers.map((finger, index) => { + return ( + + + + + ); + })} {props.displayLines && ( <> {lines.map((line, index) => ( (linesRef.current[index] = el as SVGPathElement) @@ -199,30 +147,12 @@ export default function StepScanPhoto(props: Props) { getLineLength(linesRef.current[index]) || 500, strokeDashoffset: getLineLength(linesRef.current[index]) || 500, - animationDelay: `${lineChangeDelay * (index + 1)}ms`, + animationDelay: `${ + drawElementChangeDelay * (index + 1) + }ms`, }} /> ))} - {/* */} - {/* - - */} )} @@ -232,13 +162,15 @@ export default function StepScanPhoto(props: Props) {
@@ -270,7 +202,9 @@ export default function StepScanPhoto(props: Props) { > [...fingers, ...lines], [fingers, lines]); const [currentElementIndex, setCurrentElementIndex] = useState(0); const [smallPhotoState, setSmallPhotoState] = useState(false); const [title, setTitle] = useState(""); const [shouldDisplayPalmLines, setShouldDisplayPalmLines] = useState(false); + const changeTitleTimeOut = useRef(); const prevElementIndex = useRef(null); const goNextElement = (delay: number) => { - setTimeout(() => { - setTitle(lines[currentElementIndex]?.line); + changeTitleTimeOut.current = setTimeout(() => { + setTitle(drawElements[currentElementIndex]?.name); setCurrentElementIndex((prevState) => prevState + 1); }, delay); }; useEffect(() => { - if (!lines.length) { + if (!drawElements.length) { return navigate(routes.client.palmistryUpload()); } - }, [lines, navigate]); + }, [drawElements, navigate]); useEffect(() => { // if (currentElementIndex === 0) { // new Promise((resolve) => setTimeout(resolve, startDelay)); // } if ( - currentElementIndex < lines?.length && + currentElementIndex < drawElements?.length && currentElementIndex !== prevElementIndex.current ) { prevElementIndex.current = currentElementIndex; - goNextElement(lineChangeDelay); - setShouldDisplayPalmLines(lines?.includes(lines[currentElementIndex])); + goNextElement(drawElementChangeDelay); + setShouldDisplayPalmLines( + lines?.includes(drawElements[currentElementIndex] as IPalmistryLine) + ); } - if (currentElementIndex >= lines?.length) { - setTimeout(() => { + if (currentElementIndex >= drawElements?.length) { + const toSmallTimeOut = setTimeout(() => { setSmallPhotoState(true); - }, lineChangeDelay); - setTimeout(steps.goNext, lineChangeDelay * lines.length + 8000); + }, drawElementChangeDelay); + const goNextTimeOut = setTimeout( + steps.goNext, + drawElementChangeDelay * drawElements.length + 8000 + ); + return () => { + clearTimeout(toSmallTimeOut); + clearTimeout(goNextTimeOut); + }; } + return () => { + if (changeTitleTimeOut.current) clearTimeout(changeTitleTimeOut.current); + }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentElementIndex]); @@ -74,25 +90,29 @@ export default function StepScanPhoto() {

{title}

- {/* 
{JSON.stringify(lines, null, 2)}
*/}

We are putting together a comprehensive Palmistry Reading just for you! @@ -101,7 +121,9 @@ export default function StepScanPhoto() {

Wow, looks like there is a lot we can tell about your ambitious and diff --git a/src/components/palmistry/step-upload/step-upload.tsx b/src/components/palmistry/step-upload/step-upload.tsx index ef35aad..68c4ae6 100644 --- a/src/components/palmistry/step-upload/step-upload.tsx +++ b/src/components/palmistry/step-upload/step-upload.tsx @@ -41,7 +41,12 @@ export default function StepUpload(props: Props) { formData.append("file", file); const result = await api.getPalmistryLines({ formData }); - dispatch(actions.palmistry.update({ lines: result })); + dispatch( + actions.palmistry.update({ + lines: result?.lines, + fingers: result?.fingers, + }) + ); }; const onSelectFile = async (event: React.ChangeEvent) => { diff --git a/src/routes.ts b/src/routes.ts index 3cf0252..8bf1ec5 100755 --- a/src/routes.ts +++ b/src/routes.ts @@ -264,7 +264,7 @@ const routes = { [apiHost, prefix, "ai", "assistants", chatId, "chats.json"].join("/"), // Palmistry getPalmistryLines: () => - ["https://api.aura.witapps.us", "palmistry", "lines"].join("/"), + [dApiHost, dApiPrefix, "palmistry", "lines"].join("/"), // Paywall getPaywallByPlacementKey: (placementKey: EPlacementKeys) => diff --git a/src/store/index.ts b/src/store/index.ts index 33550ea..ca67c17 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -67,6 +67,7 @@ import { } from "./userCallbacks"; import palmistry, { actions as palmistryActions, + selectPalmistryFingers, selectPalmistryLines, } from "./palmistry"; import { selectPaywallsIsMustUpdate, selectPaywalls } from "./paywalls"; @@ -121,6 +122,7 @@ export const selectors = { selectIsForceShortPath, selectOpenAiToken, selectPalmistryLines, + selectPalmistryFingers, selectPaywalls, selectPaywallsIsMustUpdate, selectPrivacyPolicy, diff --git a/src/store/palmistry.ts b/src/store/palmistry.ts index 2a2bf7c..94fc57f 100644 --- a/src/store/palmistry.ts +++ b/src/store/palmistry.ts @@ -1,13 +1,15 @@ -import { IPalmistryLine } from "@/api/resources/Palmistry"; +import { IPalmistryFinger, IPalmistryLine } from "@/api/resources/Palmistry"; import { createSlice, createSelector } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit"; interface IPalmistry { lines: IPalmistryLine[]; + fingers: IPalmistryFinger[]; } const initialState: IPalmistry = { lines: [], + fingers: [] }; const palmistrySlice = createSlice({ @@ -26,4 +28,8 @@ export const selectPalmistryLines = createSelector( (state: { palmistry: IPalmistry }) => state.palmistry.lines, (palmistry) => palmistry ); +export const selectPalmistryFingers = createSelector( + (state: { palmistry: IPalmistry }) => state.palmistry.fingers, + (palmistry) => palmistry +); export default palmistrySlice.reducer;