[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_38":-7,"_116":-5,"_19":117,"_118":119,"_120":121,"_122":123,"_124":125,"_21":126,"_127":-5,"_128":-5,"_129":24,"_130":131,"_132":133,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","isaactai","name","valentinesWebcamCard","branchName","main","path","index.html","project",{"_32":68,"_13":14,"_36":69,"_70":-5,"_71":24,"_72":73,"_74":73,"_75":76,"_77":-5,"_30":64,"_78":-5,"_79":24,"_80":-5,"_81":-5,"_82":26,"_40":41,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_50":96,"_97":98,"_99":100,"_101":24},"file",{"_60":61,"_13":18,"_62":21,"_63":24,"_67":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_21":52,"_53":-5,"_54":-5,"_55":-5,"_56":-5,"_57":58},"id","7e2a083c-084a-11f1-ab9d-42dde27851f2","branchId","6f9975f0-084a-11f1-8353-42dde27851f2","createdAt",["D",1770925146219],"version",1,"orgId","019c43c7-ae19-73e6-a4c2-6aa1754cf089","parentId","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":64,"_40":41,"_11":12,"_65":66},{"_60":61,"_13":18,"_62":21,"_63":24},"pull","merge","revert","multiple","commits",[59],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_21":52,"_53":-5,"_54":-5,"_55":-5},"fileId","7e27876a-084a-11f1-ab9d-42dde27851f2","fileType","deleted","019c43c7-ae19-73e6-a4c2-66264b02db38","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5UmZCUkowRTJwYVVxRnJLYUZQVExoVFF6biJ9","deletedAtVersion","6f9935fe-084a-11f1-8353-42dde27851f2",["D",1770925121809],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Create Valentine's cards with webcam photos","imageUrl","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_115":66},"org",{"_11":12,"_111":-5,"_65":66,"_30":64,"_112":113,"_114":24},"branch",{"_38":102,"_13":16,"_32":35,"_103":68,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":14,"_110":12},"isOwned",15,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":68,"_13":14,"_36":189,"_70":-5,"_71":24,"_72":73,"_74":73,"_75":76,"_77":-5,"_30":64,"_78":-5,"_79":24,"_80":-5,"_81":-5,"_82":26,"_40":41,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_50":190,"_97":191,"_99":192,"_101":24},"tree",[156,157,158,159],"files",[156,157,158,159],"counts",{"_146":26,"_147":39,"_148":26,"_149":150,"_151":152},"contents",[],{"_32":138,"_13":18,"_60":61,"_42":-5,"_34":35,"_139":39,"_140":133,"_36":141,"_38":26,"_62":21,"_142":143,"_63":24,"_144":-5,"_17":145},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},"7e278670-084a-11f1-ab9d-42dde27851f2","branchVersion","latest",["D",1770925146219],"content","\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","label",[18],"pulls","branches","forks","envVars",{"_153":26,"_155":26},"connections",{"_153":26,"_154":26},"count","unfilledCount","emptyCount",{"_32":181,"_13":182,"_60":183,"_42":-5,"_34":35,"_139":184,"_140":133,"_36":185,"_38":26,"_62":21,"_142":186,"_63":24,"_144":-5,"_166":187,"_17":188},{"_32":138,"_13":18,"_60":61,"_42":-5,"_34":35,"_139":39,"_140":133,"_36":178,"_38":26,"_62":21,"_142":143,"_63":24,"_144":-5,"_166":179,"_17":180},{"_32":169,"_13":170,"_60":171,"_42":-5,"_34":35,"_139":102,"_140":133,"_36":172,"_38":173,"_62":174,"_142":175,"_63":24,"_144":-5,"_166":176,"_17":177},{"_32":160,"_13":161,"_60":162,"_42":-5,"_34":35,"_139":163,"_140":133,"_36":164,"_38":26,"_62":21,"_142":165,"_63":24,"_144":-5,"_166":167,"_17":168},"bd8b3e2e-084a-11f1-afe9-42dde27851f2","styles.css","bd8b3ece-084a-11f1-afe9-42dde27851f2",3,["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}","children",[],[161],"5dbd7160-084f-11f1-aec9-42dde27851f2","main.ts","c46502fc-084a-11f1-96c2-42dde27851f2",["D",1770927239323],11,"http","export default async function(req: Request): Promise {\n const html = `\n\n\n \n \n Valentine's Card Creator\n \n\n\n

💕 Valentine's Card Creator 💕

Create a special heart card with your loved one!

Create or Join a Session

Click to create a new session and share the ID with your partner!

Hi, ! 👋

Take Your Photo

$\"Your$

Looks great!

or upload a photo:

Waiting for Your Partner ❤️

Share This Session ID

Send this to your partner so they can join!

$\"Your$

Waiting for partner to join...

Your Valentine's Card 💕

$\"Partner$

❤️

💕

❤️

💕

Happy Valentine's Day!

From &

\n\n\n`;\n return new Response(html,{headers:{\"content-type\":\"text/html; charset=utf-8\"}});\n}",[],[170],["D",1770925146219],[],[18],"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());",[],[182],["D",1770925121809],{"_11":12,"_115":66},{"_11":12,"_111":-5,"_65":66,"_30":64,"_112":113,"_114":24},{"_38":102,"_13":16,"_32":35,"_103":68,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":14,"_110":12},"ctx",{"_50":-5,"_135":226,"_227":228,"_229":230,"_231":24,"_232":24,"_233":24,"_234":133,"_235":-5,"_236":-7,"_237":-7,"_238":26,"_239":24,"_240":24,"_241":-5,"_242":24,"_243":24,"_244":24,"_245":-5},"ENV",{"_197":198,"_199":200,"_201":16,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · index.html