[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_188":189,"_190":191},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"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":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_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",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","c46502fc-084a-11f1-96c2-42dde27851f2","name","fileType","http","content","import { blob } from \"https://esm.town/v/std/blob?v=11\";\n\nconst indexHtml = await Deno.readTextFile(\"./index.html\");\nconst appJs = await Deno.readTextFile(\"./app.js\");\nconst stylesCss = await Deno.readTextFile(\"./styles.css\");\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve CSS file\n if (url.pathname === \"/styles.css\") {\n return new Response(stylesCss, {\n headers: {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n }\n \n // Serve JS file\n if (url.pathname === \"/app.js\") {\n return new Response(appJs, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n }\n \n // Serve HTML (default route)\n return new Response(indexHtml, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"public, max-age=300\",\n },\n });\n}","import { blob } from \"https://esm.town/v/std/blob?v=11\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve CSS file\n if (url.pathname === \"/styles.css\") {\n const css = await blob.getJSON(\"valentines/styles.css\");\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n }\n \n // Serve JS file\n if (url.pathname === \"/app.js\") {\n const js = await blob.getJSON(\"valentines/app.js\");\n return new Response(js, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n }\n \n // Serve HTML (default route)\n const html = await blob.getJSON(\"valentines/index.html\");\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"public, max-age=300\",\n },\n });\n}","createdAt",["D",1770925535088],"branchVersion","branchId","6f9975f0-084a-11f1-8353-42dde27851f2","id","6f9935fe-084a-11f1-8353-42dde27851f2","valentinesWebcamCard",["D",1770925121809],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Create Valentine's cards with webcam photos","imageUrl","019c43c7-ae19-73e6-a4c2-66264b02db38","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019c43c7-ae19-73e6-a4c2-6aa1754cf089","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",15,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isaactai","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5UmZCUkowRTJwYVVxRnJLYUZQVExoVFF6biJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":184,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_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":185,"_79":186,"_81":187,"_83":25},"tree",[167,168,169,170],"files",[167,168,169,170],"counts",{"_157":61,"_158":142,"_159":61,"_160":161,"_162":163},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":150,"_32":151,"_30":152,"_133":-5,"_41":42,"_40":153,"_135":121,"_38":154,"_13":61,"_33":20,"_35":155,"_24":25,"_138":-5,"_27":156},{"_43":144,"_32":145,"_30":146,"_133":-5,"_41":42,"_40":142,"_135":121,"_38":147,"_13":61,"_33":20,"_35":148,"_24":25,"_138":-5,"_27":149},{"_43":140,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":141,"_13":142,"_33":34,"_35":37,"_24":25,"_138":-5,"_27":143},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":121,"_38":136,"_13":61,"_33":20,"_35":137,"_24":25,"_138":-5,"_27":139},"bd8b3e2e-084a-11f1-afe9-42dde27851f2","styles.css","bd8b3ece-084a-11f1-afe9-42dde27851f2","parentId",3,"latest",["D",1770925252560],"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Georgia', 'Times New Roman', serif;\n background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #ff6b9d 100%);\n background-size: 400% 400%;\n animation: gradientShift 15s ease infinite;\n min-height: 100vh;\n color: #333;\n}\n\n@keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n#app {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.view {\n display: none;\n flex: 1;\n padding: 2rem;\n width: 100%;\n}\n\n.view.active {\n display: flex;\n justify-content: center;\n align-items: center;\n animation: fadeIn 0.5s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.container {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n padding: 3rem;\n max-width: 600px;\n width: 100%;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\n text-align: center;\n}\n\nh1, h2 {\n color: #c44569;\n margin-bottom: 1rem;\n font-size: 2rem;\n}\n\nh1 {\n animation: heartbeat 1.5s ease infinite;\n}\n\n@keyframes heartbeat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n}\n\np {\n color: #666;\n margin-bottom: 1.5rem;\n line-height: 1.6;\n}\n\n.card-choice {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.btn {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: inherit;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.btn-primary {\n background: linear-gradient(135deg, #ff6b9d, #c44569);\n color: white;\n box-shadow: 0 4px 15px rgba(196, 69, 105, 0.4);\n}\n\n.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(196, 69, 105, 0.5);\n}\n\n.btn-secondary {\n background: linear-gradient(135deg, #ffd700, #ffaa00);\n color: #333;\n box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);\n}\n\n.btn-secondary:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);\n}\n\n.btn-large {\n font-size: 1.5rem;\n padding: 1.5rem 3rem;\n}\n\n.btn-back {\n position: absolute;\n top: 2rem;\n left: 2rem;\n background: rgba(255, 255, 255, 0.8);\n border: 2px solid #c44569;\n color: #c44569;\n padding: 0.5rem 1rem;\n}\n\n.divider {\n display: flex;\n align-items: center;\n color: #c44569;\n font-weight: bold;\n}\n\n.divider::before,\n.divider::after {\n content: '';\n flex: 1;\n height: 2px;\n background: linear-gradient(90deg, transparent, #c44569, transparent);\n margin: 0 1rem;\n}\n\n.hidden {\n display: none !important;\n}\n\n.form-group {\n margin: 1.5rem 0;\n text-align: left;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n color: #c44569;\n font-weight: bold;\n}\n\n.optional {\n font-weight: normal;\n color: #999;\n font-size: 0.9em;\n}\n\n.form-group input {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 10px;\n font-size: 1rem;\n font-family: inherit;\n transition: border-color 0.3s;\n}\n\n.form-group input:focus {\n outline: none;\n border-color: #ff6b9d;\n}\n\n.camera-container {\n margin: 2rem 0;\n position: relative;\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n border-radius: 20px;\n overflow: hidden;\n background: #000;\n}\n\n#webcam,\n#photo-canvas,\n#photo-preview {\n width: 100%;\n border-radius: 20px;\n display: block;\n}\n\n#photo-preview {\n border: 5px solid #ff6b9d;\n}\n\n.button-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n align-items: center;\n margin-top: 1rem;\n}\n\n.capture-view {\n margin-top: 2rem;\n}\n\n.camera-icon {\n font-size: 1.3em;\n}\n\n.waiting-info {\n margin: 2rem 0;\n}\n\n.session-share {\n background: linear-gradient(135deg, #fff5f8, #ffe4ec);\n padding: 2rem;\n border-radius: 15px;\n margin-bottom: 2rem;\n}\n\n.session-share p {\n margin-bottom: 1rem;\n color: #c44569;\n font-weight: bold;\n}\n\n.session-id-display {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n}\n\n#share-session-id {\n font-size: 2rem;\n font-weight: bold;\n color: #c44569;\n font-family: monospace;\n background: white;\n padding: 1rem 2rem;\n border-radius: 10px;\n letter-spacing: 0.5em;\n}\n\n.btn-copy {\n background: #ffd700;\n border: none;\n border-radius: 10px;\n padding: 1rem;\n cursor: pointer;\n font-size: 1.2rem;\n transition: transform 0.2s;\n}\n\n.btn-copy:hover {\n transform: scale(1.1);\n}\n\n.your-photo {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n}\n\n.photo-placeholder {\n margin-top: 1rem;\n border-radius: 15px;\n overflow: hidden;\n max-width: 300px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.photo-placeholder img {\n width: 100%;\n border-radius: 10px;\n}\n\n.waiting-animation {\n margin-top: 3rem;\n animation: pulse 2s ease-in-out infinite;\n}\n\n.pulse-heart {\n font-size: 3rem;\n display: block;\n margin-bottom: 1rem;\n}\n\n@keyframes pulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.2); opacity: 0.7; }\n}\n\n.card-display {\n margin: 3rem 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-card {\n position: relative;\n width: 400px;\n height: 400px;\n max-width: 90vw;\n max-height: 90vw;\n background: linear-gradient(135deg, #ffd700, #ffaa00);\n border-radius: 20px;\n box-shadow: 0 10px 40px rgba(196, 69, 105, 0.5);\n overflow: hidden;\n}\n\n.heart-left {\n position: absolute;\n left: 0;\n top: 0;\n width: 50%;\n height: 100%;\n overflow: hidden;\n}\n\n.heart-left img {\n width: 200%;\n height: 100%;\n object-fit: cover;\n clip-path: path('M200,400 C100,400 0,300 0,200 C0,100 100,0 200,0 C300,0 400,100 400,200 C400,300 300,400 200,400');\n transform: translateX(-50%);\n}\n\n.heart-right {\n position: absolute;\n right: 0;\n top: 0;\n width: 50%;\n height: 100%;\n overflow: hidden;\n}\n\n.heart-right img {\n width: 200%;\n height: 100%;\n object-fit: cover;\n clip-path: path('M200,400 C300,400 400,300 400,200 C400,100 300,0 200,0 C100,0 0,100 0,200 C0,300 100,400 200,400');\n transform: translateX(0%);\n}\n\n.card-name {\n position: absolute;\n bottom: 20px;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n z-index: 10;\n}\n\n.heart-left .card-name {\n left: 25px;\n}\n\n.heart-right .card-name {\n right: 25px;\n text-align: right;\n}\n\n.heart-decoration {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n\n.decoration-top,\n.decoration-bottom {\n position: absolute;\n font-size: 2rem;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.decoration-top {\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.decoration-bottom {\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.result-actions {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: 2rem;\n}\n\n.download-icon {\n font-size: 1.2em;\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 2rem;\n }\n \n h1, h2 {\n font-size: 1.5rem;\n }\n \n .btn {\n padding: 0.8rem 1.5rem;\n font-size: 1rem;\n }\n \n .btn-large {\n font-size: 1.2rem;\n padding: 1.2rem 2rem;\n }\n \n .heart-card {\n width: 300px;\n height: 300px;\n }\n \n #share-session-id {\n font-size: 1.5rem;\n padding: 0.8rem 1.5rem;\n }\n \n .result-actions {\n flex-direction: column;\n }\n \n .result-actions .btn {\n width: 100%;\n }\n}\n\n@media (max-width: 480px) {\n .view {\n padding: 1rem;\n }\n \n .container {\n padding: 1.5rem;\n }\n \n .heart-card {\n width: 250px;\n height: 250px;\n }\n \n .card-name {\n font-size: 1rem;\n }\n}","label",[131],"65f0d330-084b-11f1-a241-42dde27851f2",["D",1770925535088],1,[28],"7e278670-084a-11f1-ab9d-42dde27851f2","index.html","7e27876a-084a-11f1-ab9d-42dde27851f2",["D",1770925146219],"\n\n\n \n \n Valentine's Webcam Card\n \n\n\n

\n \n

❤️ Valentine's Webcam Card ❤️

Create a special Valentine's card together with someone special

\n \n

\n\n

\n Your Name\n \n

\n \n

\n Session ID\n \n

\n\n

\n \n Password (optional)\n \n \n

\n\n \n

📸 Take Your Photo

\n\n

\n $\"Captured$ \n

\n\n

Happy with your photo?

\n \n \n

\n\n

\n \n

\n\n \n

⏳ Waiting for Partner

Share your session ID with your partner and wait for them to join

\n\n

\n \n\n

Your photo is ready!

\n $\"Your$ \n

\n\n

\n ❤️\n

Waiting for your partner's photo...

\n\n \n

💕 Your Valentine's Card 💕

\n\n

\n $\"Photo$ \n

\n 💖\n 💝\n

\n\n

\n \n \n

\n\n

\n\n \n \n\n",[145],"a5ee623c-084a-11f1-9774-42dde27851f2","app.js","a5ee6304-084a-11f1-9774-42dde27851f2",2,["D",1770925212956],"const app = {\n sessionId: null,\n password: null,\n isCreator: false,\n userName: '',\n userPhoto: null,\n partnerName: '',\n partnerPhoto: null,\n peer: null,\n conn: null,\n role: null, // 'first' or 'second'\n state: 'idle', // idle, waiting, p1_ready, p2_ready, complete\n\n init() {\n this.bindEvents();\n this.loadFromStorage();\n },\n\n bindEvents() {\n document.getElementById('create-btn').addEventListener('click', () => this.handleCreate());\n document.getElementById('join-btn').addEventListener('click', () => this.handleJoin());\n document.getElementById('start-btn').addEventListener('click', () => this.handleStart());\n document.getElementById('capture-btn').addEventListener('click', () => this.capturePhoto());\n document.getElementById('retake-btn').addEventListener('click', () => this.retakePhoto());\n document.getElementById('confirm-photo-btn').addEventListener('click', () => this.confirmPhoto());\n document.getElementById('back-btn').addEventListener('click', () => this.goBack());\n document.getElementById('copy-btn').addEventListener('click', () => this.copySessionId());\n document.getElementById('download-btn').addEventListener('click', () => this.downloadCard());\n document.getElementById('restart-btn').addEventListener('click', () => this.restart());\n },\n\n loadFromStorage() {\n const saved = localStorage.getItem('valentineSession');\n if (saved) {\n const data = JSON.parse(saved);\n this.sessionId = data.sessionId;\n this.password = data.password;\n this.isCreator = data.isCreator;\n this.userName = data.userName;\n this.userPhoto = data.userPhoto;\n this.role = data.role;\n this.state = data.state;\n \n if (data.partnerName) this.partnerName = data.partnerName;\n if (data.partnerPhoto) this.partnerPhoto = data.partnerPhoto;\n\n this.resumeSession();\n }\n },\n\n saveToStorage() {\n const data = {\n sessionId: this.sessionId,\n password: this.password,\n isCreator: this.isCreator,\n userName: this.userName,\n userPhoto: this.userPhoto,\n role: this.role,\n state: this.state,\n partnerName: this.partnerName,\n partnerPhoto: this.partnerPhoto\n };\n localStorage.setItem('valentineSession', JSON.stringify(data));\n },\n\n clearStorage() {\n localStorage.removeItem('valentineSession');\n },\n\n resumeSession() {\n if (this.state === 'idle' || this.state === 'waiting') {\n this.initPeer();\n this.startCamera();\n this.showView('camera-view');\n document.getElementById('session-info').textContent = \n `Session: ${this.sessionId}${this.password ? ' • Protected' : ''}`;\n } else if (this.state === 'p1_ready' || this.state === 'p2_ready') {\n this.showView('waiting-view');\n this.updateWaitingView();\n } else if (this.state === 'complete') {\n this.generateCard();\n this.showView('result-view');\n }\n },\n\n handleCreate() {\n this.isCreator = true;\n this.sessionId = this.generateSessionId();\n this.password = null;\n \n document.getElementById('session-id').value = this.sessionId;\n document.getElementById('session-id').disabled = true;\n document.getElementById('session-form').classList.remove('hidden');\n document.getElementById('create-btn').classList.add('hidden');\n document.getElementById('join-btn').classList.add('hidden');\n },\n\n handleJoin() {\n this.isCreator = false;\n document.getElementById('session-form').classList.remove('hidden');\n document.getElementById('create-btn').classList.add('hidden');\n document.getElementById('join-btn').classList.add('hidden');\n },\n\n handleStart() {\n const name = document.getElementById('name-input').value.trim();\n const sessionId = document.getElementById('session-id').value.trim().toUpperCase();\n\n if (!name) {\n alert('Please enter your name');\n return;\n }\n\n if (!sessionId || sessionId.length !== 6) {\n alert('Please enter a valid 6-character session ID');\n return;\n }\n\n this.userName = name;\n this.sessionId = sessionId;\n this.password = document.getElementById('password-input').value || null;\n this.state = 'waiting';\n\n this.saveToStorage();\n this.initPeer();\n this.startCamera();\n this.showView('camera-view');\n \n document.getElementById('session-info').textContent = \n `Session: ${this.sessionId}${this.password ? ' • Protected' : ''} • ${this.userName}`;\n },\n\n generateSessionId() {\n const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n let id = '';\n for (let i = 0; i < 6; i++) {\n id += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return id;\n },\n\n initPeer() {\n const peerId = `valentine-${this.sessionId}`;\n this.peer = new Peer(peerId);\n\n this.peer.on('open', (id) => {\n console.log('Peer connected with ID:', id);\n if (this.isCreator) {\n console.log('Waiting for peer to connect...');\n }\n });\n\n this.peer.on('connection', (conn) => {\n this.handleConnection(conn);\n });\n\n this.peer.on('error', (err) => {\n console.error('Peer error:', err);\n alert('Connection error. Please try again.');\n });\n\n if (!this.isCreator) {\n const otherPeerId = `valentine-${this.sessionId}`;\n const conn = this.peer.connect(otherPeerId);\n \n conn.on('open', () => {\n console.log('Connected to peer');\n this.handleConnection(conn);\n });\n\n conn.on('error', (err) => {\n console.error('Connection error:', err);\n alert('Could not connect to session. Please check the session ID.');\n });\n }\n },\n\n handleConnection(conn) {\n this.conn = conn;\n \n conn.on('data', (data) => {\n console.log('Received data:', data);\n this.handlePeerData(data);\n });\n\n conn.on('close', () => {\n console.log('Connection closed');\n alert('Your partner disconnected');\n });\n\n conn.send({\n type: 'join',\n name: this.userName,\n role: this.role\n });\n },\n\n handlePeerData(data) {\n switch (data.type) {\n case 'join':\n this.handlePeerJoin(data);\n break;\n case 'photo':\n this.handlePeerPhoto(data);\n break;\n case 'complete':\n this.handlePeerComplete(data);\n break;\n }\n },\n\n handlePeerJoin(data) {\n if (!this.role) {\n this.role = 'first';\n }\n const peerRole = data.role === 'first' ? 'second' : 'first';\n \n if (!this.conn) {\n const otherPeerId = `valentine-${this.sessionId}`;\n this.conn = this.peer.connect(otherPeerId);\n }\n\n if (this.conn && this.conn.open) {\n this.conn.send({\n type: 'role',\n role: peerRole,\n name: this.userName\n });\n }\n\n if (data.name) {\n this.partnerName = data.name;\n }\n },\n\n handlePeerPhoto(data) {\n this.partnerName = data.name;\n this.partnerPhoto = data.photo;\n this.saveToStorage();\n this.checkComplete();\n },\n\n handlePeerComplete(data) {\n this.partnerName = data.name;\n this.partnerPhoto = data.photo;\n this.saveToStorage();\n this.checkComplete();\n },\n\n startCamera() {\n const video = document.getElementById('webcam');\n \n navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })\n .then(stream => {\n video.srcObject = stream;\n })\n .catch(err => {\n console.error('Camera error:', err);\n alert('Could not access camera. Please allow camera access or try using a different browser.');\n });\n },\n\n stopCamera() {\n const video = document.getElementById('webcam');\n if (video.srcObject) {\n const stream = video.srcObject;\n const tracks = stream.getTracks();\n tracks.forEach(track => track.stop());\n video.srcObject = null;\n }\n },\n\n capturePhoto() {\n const video = document.getElementById('webcam');\n const canvas = document.getElementById('photo-canvas');\n const photoPreview = document.getElementById('photo-preview');\n \n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n \n const ctx = canvas.getContext('2d');\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n \n this.userPhoto = canvas.toDataURL('image/jpeg', 0.9);\n photoPreview.src = this.userPhoto;\n \n this.stopCamera();\n \n video.classList.add('hidden');\n canvas.classList.add('hidden');\n photoPreview.classList.remove('hidden');\n \n document.querySelector('.capture-view').classList.add('hidden');\n document.getElementById('photo-options').classList.remove('hidden');\n },\n\n retakePhoto() {\n this.userPhoto = null;\n \n const video = document.getElementById('webcam');\n const photoPreview = document.getElementById('photo-preview');\n \n video.classList.remove('hidden');\n photoPreview.classList.add('hidden');\n \n document.querySelector('.capture-view').classList.remove('hidden');\n document.getElementById('photo-options').classList.add('hidden');\n \n this.startCamera();\n },\n\n confirmPhoto() {\n if (!this.userPhoto) {\n alert('Please capture a photo first');\n return;\n }\n\n if (this.conn && this.conn.open) {\n this.sendPhotoToPeer();\n }\n \n if (this.partnerPhoto) {\n this.generateCard();\n this.state = 'complete';\n this.saveToStorage();\n this.showView('result-view');\n if (this.conn && this.conn.open) {\n this.sendComplete();\n }\n } else {\n if (!this.role) {\n this.showView('waiting-view');\n this.updateWaitingView();\n this.state = 'waiting';\n } else {\n this.state = this.role === 'first' ? 'p1_ready' : 'p2_ready';\n this.showView('waiting-view');\n this.updateWaitingView();\n }\n this.saveToStorage();\n }\n },\n\n sendPhotoToPeer() {\n if (this.conn && this.conn.open) {\n this.conn.send({\n type: 'photo',\n name: this.userName,\n photo: this.userPhoto\n });\n }\n },\n\n sendComplete() {\n if (this.conn && this.conn.open) {\n this.conn.send({\n type: 'complete',\n name: this.userName,\n photo: this.userPhoto\n });\n }\n },\n\n checkComplete() {\n if (this.userPhoto && this.partnerPhoto) {\n this.generateCard();\n this.state = 'complete';\n this.saveToStorage();\n this.showView('result-view');\n } else if (this.partnerPhoto) {\n this.updateWaitingView();\n }\n },\n\n updateWaitingView() {\n document.getElementById('share-session-id').textContent = this.sessionId;\n // Escape HTML to prevent XSS\n document.getElementById('your-name').textContent = this.userName.replace(/[<>]/g, '');\n \n const photoPreview = document.getElementById('your-photo-preview');\n if (this.userPhoto) {\n photoPreview.src = this.userPhoto;\n }\n\n const waitingMessage = this.partnerPhoto\n ? `Your partner is preparing your card!`\n : `Share your session ID with your partner and wait for them to join`;\n document.getElementById('waiting-message').textContent = waitingMessage;\n\n if (!this.partnerPhoto) {\n // Add debug button for testing\n setTimeout(() => {\n this.addSimulatePartnerButton();\n }, 500);\n }\n },\n\n addSimulatePartnerButton() {\n if (document.getElementById('simulate-partner-btn')) return;\n \n const waitingDiv = document.querySelector('.waiting-animation');\n const btn = document.createElement('button');\n btn.id = 'simulate-partner-btn';\n btn.className = 'btn btn-secondary';\n btn.textContent = '🎭 Simulate Partner Photo (Testing)';\n btn.style.marginTop = '1rem';\n btn.onclick = () => this.simulatePartner();\n waitingDiv.parentElement.appendChild(btn);\n },\n\n simulatePartner() {\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = 400;\n tempCanvas.height = 400;\n const ctx = tempCanvas.getContext('2d');\n \n const gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);\n gradient.addColorStop(0, '#ff6b9d');\n gradient.addColorStop(1, '#c44569');\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, 400, 400);\n \n ctx.fillStyle = 'white';\n ctx.font = 'bold 20px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('💕', 200, 180);\n ctx.font = '16px Arial';\n ctx.fillText('Partner Photo', 200, 220);\n \n this.partnerName = 'Test Partner';\n this.partnerPhoto = tempCanvas.toDataURL('image/png');\n this.saveToStorage();\n this.checkComplete();\n \n const btn = document.getElementById('simulate-partner-btn');\n if (btn) btn.remove();\n },\n\n copySessionId() {\n navigator.clipboard.writeText(this.sessionId).then(() => {\n const btn = document.getElementById('copy-btn');\n const originalText = btn.textContent;\n btn.textContent = '✓';\n setTimeout(() => {\n btn.textContent = originalText;\n }, 1500);\n });\n },\n\n generateCard() {\n const photo1 = this.role === 'first' ? this.userPhoto : this.partnerPhoto;\n const photo2 = this.role === 'first' ? this.partnerPhoto : this.userPhoto;\n const name1 = this.role === 'first' ? this.userName : this.partnerName;\n const name2 = this.role === 'first' ? this.partnerName : this.userName;\n\n document.getElementById('card-photo-1').src = photo1;\n document.getElementById('card-photo-2').src = photo2;\n document.getElementById('card-name-1').textContent = name1;\n document.getElementById('card-name-2').textContent = name2;\n },\n\n downloadCard() {\n const canvas = document.getElementById('download-canvas');\n const ctx = canvas.getContext('2d');\n \n const card = document.getElementById('final-card');\n canvas.width = card.offsetWidth;\n canvas.height = card.offsetHeight;\n \n const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);\n gradient.addColorStop(0, '#ffd700');\n gradient.addColorStop(0.5, '#ffaa00');\n gradient.addColorStop(1, '#ffd700');\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n const photo1 = document.getElementById('card-photo-1');\n const photo2 = document.getElementById('card-photo-2');\n \n this.drawImageWithClipPath(ctx, photo1, canvas, 'left');\n this.drawImageWithClipPath(ctx, photo2, canvas, 'right');\n \n this.drawText(ctx, canvas, this.role === 'first' ? this.userName : this.partnerName, 'left');\n this.drawText(ctx, canvas, this.role === 'first' ? this.partnerName : this.userName, 'right');\n \n ctx.font = '40px Arial';\n ctx.fillStyle = '#c44569';\n ctx.textAlign = 'center';\n ctx.fillText('💖', canvas.width / 2, 50);\n ctx.fillText('💝', canvas.width / 2, canvas.height - 20);\n \n const link = document.createElement('a');\n link.download = `valentines-card-${this.sessionId}.png`;\n link.href = canvas.toDataURL('image/png');\n link.click();\n },\n\n drawImageWithClipPath(ctx, img, canvas, side) {\n return new Promise((resolve) => {\n const tempCanvas = document.createElement('canvas');\n const tempCtx = tempCanvas.getContext('2d');\n tempCanvas.width = canvas.width;\n tempCanvas.height = canvas.height;\n \n const scale = Math.max(canvas.width / img.naturalWidth, canvas.height / img.naturalHeight);\n const width = img.naturalWidth * scale;\n const height = img.naturalHeight * scale;\n const x = (canvas.width - width) / 2;\n const y = (canvas.height - height) / 2;\n \n tempCtx.drawImage(img, x, y, width, height);\n \n const heartPath = side === 'left'\n ? 'M200,400 C100,400 0,300 0,200 C0,100 100,0 200,0 C300,0 400,100 400,200 C400,300 300,400 200,400'\n : 'M200,400 C300,400 400,300 400,200 C400,100 300,0 200,0 C100,0 0,100 0,200 C0,300 100,400 200,400';\n \n ctx.save();\n ctx.beginPath();\n const heartPoints = this.parseHeartPath(heartPath);\n ctx.moveTo(heartPoints[0].x, heartPoints[0].y);\n for (let i = 1; i < heartPoints.length; i++) {\n ctx.lineTo(heartPoints[i].x, heartPoints[i].y);\n }\n ctx.closePath();\n ctx.clip();\n \n if (side === 'left') {\n ctx.drawImage(tempCanvas, -canvas.width / 2, 0);\n } else {\n ctx.drawImage(tempCanvas, 0, 0);\n }\n ctx.restore();\n \n resolve();\n });\n },\n\n parseHeartPath(pathString) {\n const scaledWidth = 400;\n const scaledHeight = 400;\n return [\n { x: scaledWidth * 0.5, y: scaledHeight * 1.0 },\n { x: scaledWidth * 0.25, y: scaledHeight * 1.0 },\n { x: 0, y: scaledHeight * 0.75 },\n { x: 0, y: scaledHeight * 0.5 },\n { x: scaledWidth * 0.25, y: scaledHeight * 0.0 },\n { x: scaledWidth * 0.5, y: scaledHeight * 0.0 },\n { x: scaledWidth * 0.75, y: scaledHeight * 0.0 },\n { x: scaledWidth * 1.0, y: scaledHeight * 0.5 },\n { x: scaledWidth * 1.0, y: scaledHeight * 0.75 },\n { x: scaledWidth * 0.75, y: scaledHeight * 1.0 },\n { x: scaledWidth * 0.5, y: scaledHeight * 1.0 }\n ];\n },\n\n drawText(ctx, canvas, text, side) {\n ctx.font = 'bold 16px Georgia, serif';\n ctx.fillStyle = 'white';\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';\n ctx.lineWidth = 3;\n ctx.textAlign = side === 'left' ? 'left' : 'right';\n \n const x = side === 'left' ? 25 : canvas.width - 25;\n const y = canvas.height - 25;\n \n ctx.strokeText(text, x, y);\n ctx.fillText(text, x, y);\n },\n\n get heartCard() {\n return document.getElementById('final-card');\n },\n\n goBack() {\n this.stopCamera();\n this.showView('landing-view');\n document.getElementById('session-form').classList.add('hidden');\n document.getElementById('create-btn').classList.remove('hidden');\n document.getElementById('join-btn').classList.remove('hidden');\n },\n\n restart() {\n this.clearStorage();\n this.stopCamera();\n this.sessionId = null;\n this.password = null;\n this.isCreator = false;\n this.userName = '';\n this.userPhoto = null;\n this.partnerName = '';\n this.partnerPhoto = null;\n this.peer = null;\n this.conn = null;\n this.role = null;\n this.state = 'idle';\n \n document.getElementById('session-id').value = '';\n document.getElementById('session-id').disabled = false;\n document.getElementById('name-input').value = '';\n document.getElementById('password-input').value = '';\n \n const video = document.getElementById('webcam');\n const photoPreview = document.getElementById('photo-preview');\n video.classList.remove('hidden');\n photoPreview.classList.add('hidden');\n \n document.querySelector('.capture-view').classList.remove('hidden');\n document.getElementById('photo-options').classList.add('hidden');\n \n this.showView('landing-view');\n document.getElementById('session-form').classList.add('hidden');\n document.getElementById('create-btn').classList.remove('hidden');\n document.getElementById('join-btn').classList.remove('hidden');\n },\n\n showView(viewId) {\n document.querySelectorAll('.view').forEach(view => {\n view.classList.remove('active');\n });\n document.getElementById(viewId).classList.add('active');\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', () => app.init());",[151],"pulls","branches","forks","envVars",{"_164":61,"_166":61},"connections",{"_164":61,"_165":61},"count","unfilledCount","emptyCount",{"_43":150,"_32":151,"_30":152,"_133":-5,"_41":42,"_40":153,"_135":121,"_38":181,"_13":61,"_33":20,"_35":155,"_24":25,"_138":-5,"_172":182,"_27":183},{"_43":144,"_32":145,"_30":146,"_133":-5,"_41":42,"_40":142,"_135":121,"_38":178,"_13":61,"_33":20,"_35":148,"_24":25,"_138":-5,"_172":179,"_27":180},{"_43":140,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":175,"_13":142,"_33":34,"_35":37,"_24":25,"_138":-5,"_172":176,"_27":177},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":121,"_38":171,"_13":61,"_33":20,"_35":137,"_24":25,"_138":-5,"_172":173,"_27":174},["D",1770925252560],"children",[],[131],["D",1770925535088],[],[28],["D",1770925146219],[],[145],["D",1770925212956],[],[151],["D",1770925121809],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_123":221,"_222":223,"_224":225,"_226":25,"_227":25,"_228":25,"_229":121,"_230":-5,"_231":-7,"_232":-7,"_233":61,"_234":25,"_235":25,"_236":-5,"_237":25,"_238":25,"_239":25,"_240":-5},"ENV",{"_192":193,"_194":195,"_196":85,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220},"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