Val Swiper

\n\n \n

\n \n\n \n\n \n

\n\n \n

@...

\n\n \n

Finding vals…

\n\n

No more vals to show

\n \n

\n\n\n

\n \n Liked Vals\n

`;\n}\n\n// ── CSS ──────────────────────────────────────────────────────────────\n\nfunction getCSS(): string {\n return `\n*{box-sizing:border-box;margin:0;padding:0}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#000;color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none}\n#app{position:fixed;inset:0}\n\n/* Feed */\n#feed{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}\n#feed::-webkit-scrollbar{display:none}\n.card{position:relative;width:100vw;height:100vh;scroll-snap-align:start;scroll-snap-stop:always;background:#000}\n.card iframe{width:100%;height:100%;border:none;background:#111}\n.card .card-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;z-index:5;gap:14px;transition:opacity .3s}\n.card .card-loader.done{opacity:0;pointer-events:none}\n.card .card-loader p{color:#555;font-size:13px}\n\n/* Error overlay on broken cards */\n.card .card-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a0a;z-index:6;gap:12px}\n.card .card-error p{color:#666;font-size:14px}\n.card .card-error .skip-broken{padding:10px 28px;border-radius:4px;border:none;background:#FE2C55;color:#fff;font-size:14px;font-weight:600;cursor:pointer}\n\n/* Action bar (right side) */\n#action-bar{position:fixed;right:8px;bottom:160px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:18px}\n.action-btn{background:none;border:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;-webkit-tap-highlight-color:transparent}\n.action-btn:active .icon-wrap{transform:scale(.85)}\n.icon-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:transform .15s}\n.icon-wrap svg{width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,1))}\n.action-label{font-size:12px;font-weight:600;line-height:1;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,1)}\n\n/* Like states */\n#like-btn .heart-filled{display:none}\n#like-btn.liked .heart-outline{display:none}\n#like-btn.liked .heart-filled{display:block;animation:popHeart .35s ease-out}\n#like-btn.liked .action-label{color:#FE2C55}\n@keyframes popHeart{0%{transform:scale(0)}50%{transform:scale(1.35)}100%{transform:scale(1)}}\n\n/* Bottom bar */\n#bottom-bar{position:fixed;bottom:0;left:0;right:70px;padding:14px 16px 28px;z-index:60;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}\n#author-line{font-size:16px;font-weight:700;margin-bottom:4px;text-shadow:0 0 6px rgba(0,0,0,1),0 1px 4px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,1)}\n#desc-line{font-size:14px;color:rgba(255,255,255,.85);line-height:1.35;text-shadow:0 0 6px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,1);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n\n/* Loading / Empty */\n#loading-screen,#empty-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#000;z-index:200}\n#loading-screen.gone,#empty-screen.gone{display:none}\n#loading-screen p{color:#555;font-size:14px}\n.loader{width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:#FE2C55;border-radius:50%;animation:spin .7s linear infinite}\n@keyframes spin{to{transform:rotate(360deg)}}\n#empty-screen p{font-size:17px;color:#666}\n#refresh-btn{padding:12px 36px;border-radius:4px;border:none;background:#FE2C55;color:#fff;font-size:15px;font-weight:700;cursor:pointer}\n\n/* Saved panel */\n#saved-panel{position:fixed;inset:0;background:#000;z-index:300;overflow-y:auto}\n#saved-header{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:#000;z-index:10}\n#saved-header button{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;padding:4px}\n#saved-header button svg{width:22px;height:22px}\n#saved-header span{font-size:17px;font-weight:700}\n#saved-grid{padding:4px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}\n.saved-card{position:relative;aspect-ratio:9/16;overflow:hidden;background:#111;cursor:pointer;text-decoration:none;color:inherit;display:block}\n.saved-card .thumb{width:100%;height:100%;background:linear-gradient(135deg,#25272e,#161822)}\n.saved-card .overlay{position:absolute;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.85))}\n.saved-card .s-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.saved-card .s-author{font-size:11px;color:#888}\n.saved-empty{grid-column:1/-1;text-align:center;padding:80px 20px;color:#555;font-size:15px}\n\n/* Heart burst (double-tap) */\n@keyframes heartBurst{0%{transform:scale(0);opacity:1}50%{transform:scale(1.4);opacity:1}100%{transform:scale(1.6) translateY(-40px);opacity:0}}\n\n.gone{display:none!important}\n@media(max-width:768px){#action-bar{right:6px;bottom:130px;gap:16px}.icon-wrap svg{width:26px;height:26px}}\n`;\n}\n\n// ── JS ───────────────────────────────────────────────────────────────\n\nfunction getJS(): string {\n return `\n(function(){\nvar vals=[],idx=0,fetching=false,liked=new Set(),totalLikes=0;\nvar LOAD_TIMEOUT=12000;\nvar el={};\n\nfunction boot(){\n el.feed=document.getElementById(\"feed\");\n el.likeBtn=document.getElementById(\"like-btn\");\n el.openBtn=document.getElementById(\"open-btn\");\n el.savedBtn=document.getElementById(\"saved-btn\");\n el.likeCount=document.getElementById(\"like-count\");\n el.savedCount=document.getElementById(\"saved-count\");\n el.authorName=document.getElementById(\"author-name\");\n el.descLine=document.getElementById(\"desc-line\");\n el.loadingScreen=document.getElementById(\"loading-screen\");\n el.emptyScreen=document.getElementById(\"empty-screen\");\n el.savedPanel=document.getElementById(\"saved-panel\");\n el.savedBack=document.getElementById(\"saved-back\");\n el.savedGrid=document.getElementById(\"saved-grid\");\n el.refreshBtn=document.getElementById(\"refresh-btn\");\n\n el.likeBtn.onclick=toggleLike;\n el.openBtn.onclick=openCurrent;\n el.savedBtn.onclick=showSaved;\n el.savedBack.onclick=hideSaved;\n el.refreshBtn.onclick=refresh;\n el.feed.addEventListener(\"scroll\",onScroll,{passive:true});\n\n document.addEventListener(\"keydown\",function(e){\n if(!el.savedPanel.classList.contains(\"gone\"))return;\n if(e.key===\"ArrowDown\"){e.preventDefault();go(idx+1)}\n else if(e.key===\"ArrowUp\"){e.preventDefault();go(idx-1)}\n else if(e.key===\"l\")toggleLike();\n });\n\n // Double-tap to like\n var lastTap=0;\n el.feed.addEventListener(\"touchend\",function(e){\n var now=Date.now();\n if(now-lastTap<300){\n if(!liked.has(vals[idx]&&vals[idx].id))toggleLike();\n heartBurst(e);\n }\n lastTap=now;\n },{passive:true});\n\n loadVals();\n}\n\n// ── Data Loading ────────────────────────────────────\n\nfunction loadVals(){\n if(fetching)return;\n fetching=true;\n fetch(\"/api/vals\").then(function(r){return r.json()}).then(function(nv){\n if(nv.length>0){\n vals=vals.concat(nv);\n renderCards();\n el.loadingScreen.classList.add(\"gone\");\n }else if(vals.length===0){\n el.loadingScreen.classList.add(\"gone\");\n el.emptyScreen.classList.remove(\"gone\");\n }\n fetching=false;\n }).catch(function(){\n el.loadingScreen.classList.add(\"gone\");\n el.emptyScreen.classList.remove(\"gone\");\n fetching=false;\n });\n}\n\n// ── Card Rendering ──────────────────────────────────\n\nfunction renderCards(){\n vals.forEach(function(v,i){\n if(document.getElementById(\"c\"+i))return;\n el.feed.appendChild(createCard(v,i));\n });\n}\n\nfunction createCard(val,index){\n var card=document.createElement(\"div\");\n card.className=\"card\";card.id=\"c\"+index;\n\n var loader=document.createElement(\"div\");\n loader.className=\"card-loader\";\n loader.innerHTML='

Loading…

';\n\n var iframe=document.createElement(\"iframe\");\n iframe.sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-modals\";\n iframe.loading=\"lazy\";\n\n var loaded=false;\n iframe.onload=function(){\n loaded=true;\n // Check if iframe loaded an error page (about:blank, empty, etc.)\n try{\n var doc=iframe.contentDocument;\n // If we can access the doc and it's blank or very short, it's likely broken\n if(doc && doc.body && doc.body.innerHTML.length<20 && !doc.body.querySelector(\"*\")){\n showCardError(card,val,index);\n return;\n }\n }catch(e){/* cross-origin — that's fine, means it loaded something */}\n loader.classList.add(\"done\");\n };\n\n iframe.onerror=function(){\n if(!loaded) showCardError(card,val,index);\n };\n\n // Timeout: if still loading after N seconds, show error\n setTimeout(function(){\n if(!loaded){\n showCardError(card,val,index);\n }\n },LOAD_TIMEOUT);\n\n iframe.src=val.url;\n\n card.appendChild(iframe);\n card.appendChild(loader);\n return card;\n}\n\nfunction showCardError(card,val,index){\n // Don't double-add\n if(card.querySelector(\".card-error\"))return;\n\n // Hide loader\n var loader=card.querySelector(\".card-loader\");\n if(loader)loader.classList.add(\"done\");\n\n // Report broken to backend\n fetch(\"/api/broken\",{\n method:\"POST\",\n headers:{\"Content-Type\":\"application/json\"},\n body:JSON.stringify({id:val.id})\n }).catch(function(){});\n\n // Show error overlay\n var err=document.createElement(\"div\");\n err.className=\"card-error\";\n err.innerHTML='

This val didn\\\\'t load

';\n err.querySelector(\"button\").onclick=function(){go(index+1)};\n card.appendChild(err);\n}\n\n// ── Scroll / Navigation ─────────────────────────────\n\nfunction onScroll(){\n var ni=Math.round(el.feed.scrollTop/window.innerHeight);\n if(ni!==idx&&ni>=0&&ni=vals.length-3)loadVals();\n }\n}\n\nfunction go(i){\n if(i<0||i>=vals.length)return;\n el.feed.scrollTo({top:i*window.innerHeight,behavior:\"smooth\"});\n}\n\n// ── UI Updates ──────────────────────────────────────\n\nfunction updateUI(){\n var v=vals[idx];if(!v)return;\n el.authorName.textContent=v.author;\n el.descLine.textContent=v.name||v.description||\"\";\n el.likeBtn.classList.toggle(\"liked\",liked.has(v.id));\n}\n\n// ── Actions ─────────────────────────────────────────\n\nfunction toggleLike(){\n var v=vals[idx];if(!v)return;\n if(liked.has(v.id)){\n liked.delete(v.id);totalLikes--;\n }else{\n liked.add(v.id);totalLikes++;\n fetch(\"/api/like\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(v)}).catch(function(){});\n }\n el.likeCount.textContent=totalLikes;\n el.savedCount.textContent=totalLikes;\n el.likeBtn.classList.toggle(\"liked\",liked.has(v.id));\n}\n\nfunction openCurrent(){\n var v=vals[idx];if(v)window.open(v.url,\"_blank\");\n}\n\nfunction seen(id){\n fetch(\"/api/seen\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({id:id})}).catch(function(){});\n}\n\n// ── Saved Panel ─────────────────────────────────────\n\nfunction showSaved(){\n el.savedPanel.classList.remove(\"gone\");\n fetch(\"/api/likes\").then(function(r){return r.json()}).then(function(ls){\n if(!ls.length){el.savedGrid.innerHTML='

No liked vals yet

';return}\n el.savedGrid.innerHTML=ls.map(function(l){\n return '

'+esc(l.name)+'

@'+esc(l.author)+'

';\n }).join(\"\");\n }).catch(function(){el.savedGrid.innerHTML='

Failed to load

'});\n}\n\nfunction hideSaved(){el.savedPanel.classList.add(\"gone\")}\n\nfunction refresh(){\n fetch(\"/api/clear-seen\",{method:\"POST\"}).then(function(){return fetch(\"/api/refresh\")}).then(function(){location.reload()}).catch(function(){});\n}\n\n// ── Double-tap heart burst ──────────────────────────\n\nfunction heartBurst(e){\n var t=e.changedTouches?e.changedTouches[0]:e;\n var h=document.createElement(\"div\");\n h.innerHTML='';\n h.style.cssText=\"position:fixed;z-index:9999;pointer-events:none;left:\"+(t.clientX-30)+\"px;top:\"+(t.clientY-30)+\"px;animation:heartBurst .6s ease-out forwards\";\n document.body.appendChild(h);\n setTimeout(function(){h.remove()},700);\n}\n\n// ── Helpers ─────────────────────────────────────────\n\nfunction esc(s){var d=document.createElement(\"div\");d.textContent=s||\"\";return d.innerHTML}\n\nif(document.readyState===\"loading\")document.addEventListener(\"DOMContentLoaded\",boot);else boot();\n})();\n`;\n}\n","deleted","label",[177,159],"lib","permalink","https://www.val.town/x/dcm31/val-swiper/code/lib/ui.ts","extension","actionData","errors"]