가은 Valentine

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_178":179,"_180":181},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",78,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","019c3ad1-2f7e-77c8-9c1d-d27baa7fea8f","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\n const [step, setStep] = useState(0);\n const [pwStep, setPwStep] = useState(0);\n const [isPasswordMode, setIsPasswordMode] = useState(false);\n const [passwordInput, setPasswordInput] = useState(\"\");\n const [passwordError, setPasswordError] = useState(false);\n\n const [noPosition, setNoPosition] = useState({ x: null, y: null });\n const [hasClickedOnce, setHasClickedOnce] = useState(false);\n const [noCount, setNoCount] = useState(0);\n const [isVibrating, setIsVibrating] = useState(false);\n const [isYesDisabled, setIsYesDisabled] = useState(false);\n const [yesSize, setYesSize] = useState(18);\n const [showFullMessage, setShowFullMessage] = useState(false);\n\n // Success Sequence\n const [successIndex, setSuccessIndex] = useState(0);\n const successMessages = [\n \"Yayyyy~\", // 0\n \"나도, 좋아~!\", // 1\n \"자기, 사랑해~ 🥰🩷\", // 2\n \"보고 싶어 죽겠어🤤\", // 3 (1.5s)\n \"보고 싶어 죽겠어🤤\\n너무너무너무너무너무너무너무무..\", // 4 (2s)\n \"\", // 5 (Gif Swap - 1s)\n \"Then..？\", // 6 (2s)\n \"\", // 7 (Blink - 0.5s)\n \"How about calling 承优 now～?\", // 8 (4s)\n \"\", // 9 (Slow Fade Out & Stop Music)\n ];\n\n const bgmRef = useRef(null);\n\n const ANS_1 = \"4\";\n const ANS_2 = \"taiwan\";\n const bgmUrl = \"https://www.bensound.com/bensound-music/bensound-buddy.mp3\";\n\n const envelopeImg =\n \"https://tenor.com/en-GB/view/letter-loveletter-i3you-love-love-you-gif-20422638.gif\";\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n const thirdImg =\n // \"https://tenor.com/en-GB/view/hug-couple-cute-milk-and-mocha-in-love-gif-1685630977016691906.gif\";\n \"https://tenor.com/en-GB/view/love-romance-romantic-love-you-couples-gif-27417194.gif\";\n // Navigation Logic\n const resetAll = () => {\n setStep(0);\n setPwStep(0);\n setIsPasswordMode(false);\n setPasswordInput(\"\");\n setSuccessIndex(0);\n setNoCount(0);\n setYesSize(18);\n setShowFullMessage(false);\n if (bgmRef.current) {\n bgmRef.current.pause();\n bgmRef.current.currentTime = 0;\n }\n };\n\n const handleBack = () => {\n if (step === 2) {\n setStep(1);\n setSuccessIndex(0);\n } else if (step === 1) {\n setStep(0);\n setPwStep(1);\n setIsPasswordMode(true);\n } else if (step === 0) {\n if (pwStep === 1) setPwStep(0);\n else setIsPasswordMode(false);\n }\n };\n\n useEffect(() => {\n if (step === 1) {\n const timer = setTimeout(() => setShowFullMessage(true), 4000);\n return () => clearTimeout(timer);\n }\n }, [step]);\n\n // CINEMATIC TIMING & MUSIC STOP\n useEffect(() => {\n if (step === 2 && successIndex < successMessages.length - 1) {\n let delay = 2000;\n if (successIndex === 3) delay = 1500;\n else if (successIndex === 4) delay = 2000;\n else if (successIndex === 5) delay = 1000;\n else if (successIndex === 6) delay = 2000;\n else if (successIndex === 7) delay = 500;\n else if (successIndex === 8) delay = 4000;\n\n const timer = setTimeout(\n () => setSuccessIndex((prev) => prev + 1),\n delay,\n );\n return () => clearTimeout(timer);\n }\n\n // Stop music 4 seconds after the final fade-out (Index 9)\n if (step === 2 && successIndex === 9) {\n const musicTimer = setTimeout(() => {\n if (bgmRef.current) bgmRef.current.pause();\n }, 4000);\n return () => clearTimeout(musicTimer);\n }\n }, [step, successIndex]);\n\n const handlePasswordSubmit = (e) => {\n if (e) e.preventDefault();\n if (pwStep === 0) {\n if (passwordInput.trim() === ANS_1) {\n setPwStep(1);\n setPasswordInput(\"\");\n setPasswordError(false);\n } else triggerError();\n } else {\n if (passwordInput.toLowerCase().trim() === ANS_2) {\n setStep(1);\n if (bgmRef.current) bgmRef.current.play().catch(() => {});\n } else triggerError();\n }\n };\n\n const triggerError = () => {\n setPasswordError(true);\n setPasswordInput(\"\");\n setTimeout(() => setPasswordError(false), 800);\n };\n\n const moveButton = () => {\n setNoCount((prev) => prev + 1);\n const randomX = Math.floor(Math.random() * 75) + 10;\n const randomY = Math.floor(Math.random() * 75) + 10;\n setNoPosition({ x: randomX, y: randomY });\n setYesSize((prev) => (prev < 150 ? prev + 20 : prev));\n setIsVibrating(true);\n setTimeout(() => setIsVibrating(false), 300);\n setIsYesDisabled(true);\n setTimeout(() => setIsYesDisabled(false), 400);\n };\n\n const isFinalPhase = step === 2 && successIndex >= 5;\n const currentBG = isFinalPhase || step === 0 ? \"#ffffff\" : \"#fff0f3\";\n const pageOpacity = (step === 2 && successIndex === 9) ? 0 : 1;\n\n return (\n \n

\n 가은~,\n

Will you be my Valentine?💘

\n 가은~,\n

Will you be my Valentine?💘

Diff · v78