<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>4096 — the market paints it</title>
<style>
:root{--paper:#eeeeea;--mount:#fff;--ink:#1b1b19;--ink3:#8e8e86;--rule:#d2d2ca;--ground:#cdccc4;
--vel:#a02f1c;--rhy:#2c6338;--pat:#283a86;--wall:#e7e6e1;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper)}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;font-family:var(--mono)}
.stage{display:flex;flex-direction:column;align-items:center;padding:8px;transition:background .6s ease,padding .6s ease}
.stage.framed{background:var(--wall);padding:40px}
.canvas{display:grid;gap:0;background:var(--ground);width:min(70vh,86vw);aspect-ratio:1/1}
.cell{background:var(--ground);transition:background .5s ease}
.frame{padding:clamp(28px,7vmin,46px);position:relative;overflow:hidden;line-height:0;
background:#141412;background-image:linear-gradient(148deg,#1d1d19,#141412 46%,#0d0d0b);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),8px 12px 26px rgba(27,27,25,.2)}
.frame::before{content:"";position:absolute;inset:clamp(16px,4.5vmin,24px);background:var(--mount);
background-image:linear-gradient(148deg,rgba(27,27,25,0) 34%,rgba(27,27,25,.055));z-index:0}
.frame::after{content:"";position:absolute;inset:clamp(7px,1.8vmin,11px);border:1px solid;
border-color:rgba(0,0,0,.62) rgba(255,255,255,.055) rgba(255,255,255,.055) rgba(0,0,0,.62);z-index:0}
.frame>*{position:relative;z-index:1}.frame .canvas{outline:1px solid #3c3c3a}
.frame.gold{background:#8a6a1e;background-image:linear-gradient(148deg,#e6c66e,#b8912f 46%,#7d5f18);
box-shadow:inset 0 0 0 2px rgba(80,55,10,.6),inset 0 0 0 6px rgba(255,244,205,.22),8px 12px 30px rgba(0,0,0,.28)}
.frame.gold::after{border-color:rgba(90,60,10,.7) rgba(255,246,210,.55) rgba(255,246,210,.55) rgba(90,60,10,.7)}
.cap{font-size:13px;letter-spacing:.14em;color:var(--ink3);min-height:15px;font-variant-numeric:tabular-nums}
.stage:not(.framed) .cap{opacity:0}
</style></head>
<body>
<div class="stage" id="stage"><div id="art"><div class="canvas" id="cv"></div></div><div class="cap" id="cap"></div></div>
<script>
/* ---- config (renderer injects auctionId at list time) ---- */
const Q=new URLSearchParams(location.search);
const INJ=(typeof window!=="undefined"&&window.CFG)?window.CFG:{}; // renderer injects auctions+auctionId
const CFG={
auctions: INJ.auctions || "0xaB48082d28049873ce54F672541D29779a3392Ef",
auctionId: INJ.auctionId || Q.get("aid") || 0,
rpcs:["https://ethereum-rpc.publicnode.com","https://eth.drpc.org"],
pollMs:8000, timeoutMs:7000,
FULL_PX:400, FRAME_AT:409, GOLD_AT:4096, SEED:4096
};
/* ---- build the 400-pixel four-square logo, seeded scatter ---- */
const GW=23,GH=23, cs=getComputedStyle(document.documentElement);
const COL={r:cs.getPropertyValue('--vel').trim(),g:cs.getPropertyValue('--rhy').trim(),b:cs.getPropertyValue('--pat').trim(),w:'#fff'};
function region(r,c){const T=r>=1&&r<=10,B=r>=12&&r<=21,L=c>=1&&c<=10,R=c>=12&&c<=21;return T&&L?'r':T&&R?'g':B&&L?'b':B&&R?'w':null;}
const cv=document.getElementById('cv');
cv.style.gridTemplateColumns=`repeat(${GW},1fr)`;cv.style.gridTemplateRows=`repeat(${GH},1fr)`;
const paint=[];for(let r=0;r<GH;r++)for(let c=0;c<GW;c++){const d=document.createElement('div');d.className='cell';cv.appendChild(d);const g=region(r,c);if(g)paint.push({el:d,reg:g});}
/* integer-exact LCG (BigInt) so the on-chain SVG cover reveals in the identical order */
let s=BigInt(CFG.SEED);
const order=paint.slice();for(let i=order.length-1;i>0;i--){s=(s*1103515245n+12345n)&0x7fffffffn;const j=Number((s*BigInt(i+1))>>31n);[order[i],order[j]]=[order[j],order[i]];}
const stage=document.getElementById('stage'),art=document.getElementById('art'),cap=document.getElementById('cap');
/* ---- render for a USD bid (pure function; always valid 0..400) ---- */
function render(P){
P=Math.max(0,P|0);
const px=Math.max(0,Math.min(CFG.FULL_PX,P-9));
for(let i=0;i<order.length;i++)order[i].el.style.background=i<px?COL[order[i].reg]:'var(--ground)';
const wantFrame=P>=CFG.FRAME_AT,wantGold=P>=CFG.GOLD_AT;
const c=art.querySelector('.canvas');let fr=art.querySelector('.frame');
if(wantFrame&&!fr){fr=document.createElement('div');fr.className='frame';c.parentNode.insertBefore(fr,c);fr.appendChild(c);}
if(!wantFrame&&fr){art.insertBefore(c,fr);fr.remove();fr=null;}
if(fr)fr.classList.toggle('gold',wantGold);
stage.classList.toggle('framed',wantFrame);
cap.textContent=wantFrame?'4096':'';
}
/* ---- resilient read: race all RPCs, first valid wins, aborts hung calls ---- */
function callOne(url,body){return new Promise(res=>{
const ctrl=new AbortController(),t=setTimeout(()=>ctrl.abort(),CFG.timeoutMs);
fetch(url,{method:'POST',headers:{'content-type':'application/json'},body,signal:ctrl.signal})
.then(r=>r.json()).then(j=>res(j&&j.result&&j.result!=='0x'?j.result:null))
.catch(()=>res(null)).finally(()=>clearTimeout(t));
});}
function raceValid(promises){return new Promise(resolve=>{
let left=promises.length;if(!left)return resolve(null);
promises.forEach(p=>p.then(v=>{if(v)resolve(v);else if(--left===0)resolve(null);}));
});}
async function readBidUsd(){
if(!CFG.auctionId||CFG.auctionId==0)return 0; // no auction yet -> valid blank
const id=BigInt(CFG.auctionId).toString(16).padStart(64,'0');
const body=JSON.stringify({jsonrpc:'2.0',id:1,method:'eth_call',params:[{to:CFG.auctions,data:'0x571a26a0'+id},'latest']});
const res=await raceValid(CFG.rpcs.map(u=>callOne(u,body)));
if(!res||res.length<2+10*64)return null; // read failed -> keep last-good
const v=parseInt(res.slice(2+5*64,2+6*64),16); // latestBidUsd (whole USD, word 5)
return Number.isFinite(v)?v:null;
}
/* ---- self-refresh loop: last-good, visibility-aware, self-healing ---- */
const forced=Q.get('bid');
let last=0; render(0);
async function tick(){
if(document.hidden)return; // pause off-screen
const usd = forced!=null ? +forced : await readBidUsd();
if(usd==null||!Number.isFinite(usd))return; // hiccup -> keep last-good, retry next tick
last=usd; render(usd);
}
tick(); setInterval(tick,CFG.pollMs);
document.addEventListener('visibilitychange',()=>{if(!document.hidden)tick();});
addEventListener('focus',tick); addEventListener('online',tick);
</script>
</body></html>
The colour of a bidPlace a bid. Watch what happens.
↓ show full (6,663 bytes)