Love Chase

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_93":92,"_32":45,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"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":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",5,"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.ts","latestPath","fileId","cc121bfe-0005-11f1-9f4a-42dde27851f2","name","fileType","http","content","\n\n\n\nLove Chase\n\n\n\n\n

He said he’s bringing her love…

\n\n\n\n\n","export default function LoveChase() {\n const canvasRef = React.useRef(null);\n\n React.useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n\n function resize() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n resize();\n window.addEventListener(\"resize\", resize);\n\n let manX = -100;\n let ladyX = -260;\n let ladyFell = false;\n let stage = 0;\n\n function drawStick(x, y, heart = false) {\n ctx.lineWidth = 3;\n\n ctx.beginPath();\n ctx.arc(x, y - 40, 14, 0, Math.PI * 2);\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(x, y - 25);\n ctx.lineTo(x, y + 25);\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(x, y + 25);\n ctx.lineTo(x - 15, y + 55);\n ctx.moveTo(x, y + 25);\n ctx.lineTo(x + 15, y + 55);\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(x, y - 5);\n ctx.lineTo(x - 20, y + 10);\n ctx.moveTo(x, y - 5);\n ctx.lineTo(x + 20, y + 10);\n ctx.stroke();\n\n if (heart) {\n ctx.fillStyle = \"red\";\n ctx.beginPath();\n ctx.arc(x + 28, y - 5, 8, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n\n function drawPothole(px, gy) {\n ctx.fillStyle = \"black\";\n ctx.beginPath();\n ctx.ellipse(px, gy + 60, 70, 22, 0, 0, Math.PI * 2);\n ctx.fill();\n }\n\n function animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const groundY = canvas.height - 140;\n const potholeX = canvas.width / 2;\n\n manX += 3.5;\n if (!ladyFell) ladyX += 3.5;\n\n let manY = groundY;\n\n if (manX > potholeX - 60 && manX < potholeX + 60) {\n manY = groundY - 90;\n stage = 2;\n }\n\n if (ladyX > potholeX - 30 && ladyX < potholeX + 30 && !ladyFell) {\n ladyFell = true;\n stage = 3;\n }\n\n if (manX > 80) stage = 1;\n if (manX > canvas.width - 220) stage = 4;\n\n drawPothole(potholeX, groundY);\n drawStick(manX, manY, true);\n\n if (ladyFell) {\n drawStick(ladyX, groundY + 40, false);\n } else {\n drawStick(ladyX, groundY, false);\n }\n\n if (manX > canvas.width + 120) {\n manX = -100;\n ladyX = -260;\n ladyFell = false;\n stage = 0;\n }\n\n requestAnimationFrame(animate);\n }\n\n animate();\n }, []);\n\n return (\n

\n );\n} // arms\n ctx.beginPath();\n ctx.moveTo(x, y-5);\n ctx.lineTo(x-20, y+10);\n ctx.moveTo(x, y-5);\n ctx.lineTo(x+20, y+10);\n ctx.stroke();\n\n if(heart){\n ctx.fillStyle=\"red\";\n ctx.beginPath();\n ctx.arc(x+28, y-5, 8, 0, Math.PI*2);\n ctx.fill();\n }\n}\n\nfunction drawPothole(){\n ctx.fillStyle=\"black\";\n ctx.beginPath();\n ctx.ellipse(potholeX, groundY+60, 70, 22, 0, 0, Math.PI*2);\n ctx.fill();\n}\n\nfunction updateText(){\n const t = document.getElementById(\"text\");\n const texts = [\n \"He said he’s bringing her love…\",\n \"…but she said she wants it NOW 😡\",\n \"Life added a small problem 🌚\",\n \"When you rush love without watching road 😂\",\n \"Prime still delivered the love ❤️\"\n ];\n t.innerText = texts[stage];\n}\n\nfunction animate(){\n ctx.clearRect(0,0,canvas.width,canvas.height);\n\n setScene();\n drawPothole();\n\n manX += 3.5;\n ladyX += ladyFell ? 0 : 3.5;\n\n let manY = groundY;\n\n // man jump\n if(manX > potholeX-60 && manX < potholeX+60){\n manY = groundY - 90;\n stage = 2;\n }\n\n // lady fall\n if(ladyX > potholeX-30 && ladyX < potholeX+30 && !ladyFell){\n ladyFell = true;\n stage = 3;\n }\n\n // stages\n if(manX > 80) stage = 1;\n if(manX > canvas.width - 220) stage = 4;\n\n drawStick(manX, manY, true);\n\n if(ladyFell){\n drawStick(ladyX, groundY+40, false);\n } else {\n drawStick(ladyX, groundY, false);\n }\n\n updateText();\n\n // reset\n if(manX > canvas.width + 120){\n manX = -100;\n ladyX = -260;\n ladyFell = false;\n stage = 0;\n }\n\n requestAnimationFrame(animate);\n}\n\nanimate();\n\n\n\n","createdAt",["D",1770016161376],"branchVersion","branchId","cc0ed05c-0005-11f1-9f4a-42dde27851f2","id","cc0e6888-0005-11f1-9f4a-42dde27851f2","St",["D",1770016032347],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c18d1-761b-715b-9b3e-21ee913d0a4f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019c18d1-761b-715b-9b3e-257c6fdbcc0a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},"branch",{"_13":14,"_32":83,"_43":42,"_84":44,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":45,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","PrimeX","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5NDZCUDV0a1I3QjZoMVFwZVc2eUVEcGtvYiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":148,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":149,"_78":150,"_80":151,"_82":25},"tree",[143],"files",[143],"counts",{"_132":60,"_133":134,"_135":60,"_136":137,"_138":139},"contents",[124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":119,"_38":128,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_27":131},"18f78f9e-0006-11f1-a3f0-42dde27851f2","parentId","latest",["D",1770016161376],4,"label",[28],"pulls","branches",1,"forks","envVars",{"_140":60,"_142":60},"connections",{"_140":60,"_141":60},"count","unfilledCount","emptyCount",{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":119,"_38":144,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_145":146,"_27":147},["D",1770016161376],"children",[],[28],["D",1770016032347],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},{"_13":14,"_32":83,"_43":42,"_84":44,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":45,"_91":92},"ctx",{"_76":-5,"_121":185,"_186":187,"_188":189,"_190":25,"_191":25,"_192":25,"_193":119,"_194":-5,"_195":-7,"_196":-7,"_197":60,"_198":25,"_199":25,"_200":-5,"_201":25,"_202":25,"_203":25,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":83,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5