From c45ff4525c0e45e4b8e762b81fd180c53d206d66 Mon Sep 17 00:00:00 2001 From: salmonik Date: Sun, 8 Nov 2026 12:24:25 +0100 Subject: web: match the desktop layout and remove play-money copy The browser now uses the desktop's full-width game split: no extra game header or card frame, a full-height sidebar with a pinned action block, and the same lobby grid, topbar account/balance blocks, and bottom-left notices. Slots uses the desktop symbol colours and gold win border; roulette gets the flat felt, column bets under the dozens, the wheel, circular chips, and a LAST line; blackjack gets a centred dealer/player table and divider; crash gets the chart panel, phase label and empty ready state. Also drops every play-money/real-money disclaimer from the page copy. --- web/play/app.js | 2 +- web/play/index.html | 42 ++---- web/play/src/blackjack.ts | 58 ++++---- web/play/src/crash.ts | 56 ++++++-- web/play/src/history.ts | 15 +- web/play/src/main.ts | 97 +++++-------- web/play/src/roulette.ts | 339 +++++++++++++++++++++++++++++++--------------- web/play/src/slots.ts | 32 ++--- web/play/style.css | 188 +++++++++++++++---------- web/play/test/smoke.mjs | 6 +- 10 files changed, 501 insertions(+), 334 deletions(-) diff --git a/web/play/app.js b/web/play/app.js index 89db817..e76f5a6 100644 --- a/web/play/app.js +++ b/web/play/app.js @@ -1 +1 @@ -"use strict";(()=>{function g(e){let n=document.getElementById(e);if(!n)throw new Error(`missing #${e}`);return n}function o(e,n,t){let s=document.createElement(e);return n&&(s.className=n),t!==void 0&&(s.textContent=t),s}function H(e){e.replaceChildren()}function Ke(e){let n=e<0,t=String(Math.abs(Math.trunc(e))),s="";for(let a=0;a0&&(t.length-a)%3===0&&(s+=" "),s+=t[a];return n?`-${s}`:s}function L(e){return e==null||Number.isNaN(e)?"— Kr":`${Ke(e)} Kr`}function be(e){return`${e<0?"-":"+"}${L(Math.abs(e))}`}function ne(e,n="info"){let t=document.getElementById("toasts");if(!t||!e)return;let s=o("div",`toast ${n}`,e);for(t.append(s),window.setTimeout(()=>{s.style.opacity="0",s.style.transition="opacity 220ms ease",window.setTimeout(()=>s.remove(),240)},4200);t.children.length>4;)t.firstElementChild?.remove()}function ge(e){let n=e.toLowerCase();return e.startsWith("ERROR")||n.includes("failed")||n.includes("lost")||n.includes("invalid")||n.includes("forfeit")?"bad":e.startsWith("Logged in")||e.startsWith("Account created")||n.includes("won")||n.includes("cashed")?"good":"info"}async function ye(e){let n=new TextEncoder().encode(e),t=await crypto.subtle.digest("SHA-256",n);return[...new Uint8Array(t)].map(s=>s.toString(16).padStart(2,"0")).join("")}function z(e,n=10){return e.length<=n*2?e:`${e.slice(0,n)}…${e.slice(-n)}`}function ke(e){let n=Date.parse(e.includes("T")?e:e.replace(" ","T")+"Z");return Number.isNaN(n)?e:new Date(n).toLocaleString()}function Le(e){if(e==="?"||!e)return{rank:"?",suit:"",red:!1};let n=e.slice(-1);return{rank:e.slice(0,-1),suit:n==="C"?"♣":n==="D"?"♦":n==="H"?"♥":n==="S"?"♠":n,red:n==="D"||n==="H"}}var Y=class{constructor(n,t){this.url=n;this.handlers=t;this.socket=null;this.stopped=!1;this.replaced=!1;this.attempts=0}connect(){if(this.stopped)return;this.clearTimer();let n;try{n=new WebSocket(this.url)}catch{this.scheduleReconnect()||this.handlers.onClosed(!1);return}this.socket=n,n.addEventListener("open",()=>{this.attempts=0,this.handlers.onOpen()}),n.addEventListener("message",t=>{let s;try{s=JSON.parse(String(t.data))}catch{return}switch(s.type){case"hello":this.handlers.onHello(s);break;case"view":this.handlers.onView(s.view);break;case"notice":this.handlers.onNotice(String(s.text??""));break;case"error":this.handlers.onError(String(s.text??""));break;case"replaced":this.replaced=!0,this.handlers.onReplaced();break;case"pong":this.handlers.onPong();break}}),n.addEventListener("close",()=>{if(this.socket===n&&(this.socket=null),this.replaced||this.stopped){this.handlers.onClosed(!1);return}let s=this.scheduleReconnect();this.handlers.onClosed(s)}),n.addEventListener("error",()=>{})}send(n){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify({type:"command",command:n}))}ping(){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify({type:"ping"}))}close(){this.stopped=!0,this.clearTimer(),this.socket?.close()}scheduleReconnect(){if(this.stopped||this.replaced||this.attempts>=6)return!1;this.attempts+=1;let n=Math.min(250*2**(this.attempts-1),4e3);return this.timer=window.setTimeout(()=>this.connect(),n),!0}clearTimer(){this.timer!==void 0&&(window.clearTimeout(this.timer),this.timer=void 0)}};var xe=0;function oe(){return Date.now()-xe<400?!1:(xe=Date.now(),!0)}function Ze(e){if(e==="?"){let s=o("div","card back");return s.append(o("span","rank","?"),o("span","suit","")),s}let n=Le(e),t=o("div","card");return n.red&&t.classList.add("red"),t.append(o("span","rank",n.rank),o("span","suit",n.suit)),t}function we(e,n,t){let s=o("div","hand");s.append(o("div","label",e));let a=o("div","cards");for(let d of n)a.append(Ze(d));let r=o("div","total");return r.append(document.createTextNode("Total "),o("strong",void 0,String(t))),s.append(a,r),s}function Je(e,n){let t=String(n?.result??""),s=Number(n?.winnings??0);switch(t){case"blackjack":return`Blackjack — won ${L(s)}`;case"win":return`You win — ${L(s)}`;case"push":return`Push — ${L(s)} returned`;case"bust":return"Bust — the bet is lost";case"lose":return"Dealer wins — the bet is lost";case"forfeit":return"Hand forfeited — the bet is lost";case"playing":return e.status==="player"?"Your move.":"Dealing…";default:return"Ready to deal."}}function ve(e,n,t,s){H(e),H(n);let a=t.hand,r=a?.phase==="player"||t.status==="player",d=a?.phase==="done"||t.status==="done",i=!a||d;if(e.append(o("h2",void 0,"Blackjack")),e.append(o("p","note","Six decks. Dealer stands on all 17. Blackjack pays 3:2.")),a)e.append(we("Dealer",a.dealer??[],Number(a.dealer_total??0))),e.append(we("You",a.player??[],Number(a.player_total??0)));else{let f=o("div","outcome");f.textContent="Press DEAL to start a hand.",e.append(f)}if(d||a&&!r){let f=o("div","outcome");f.textContent=Je(t,a),(String(a?.result)==="win"||String(a?.result)==="blackjack"||String(a?.result)==="push")&&f.classList.add("win-text"),e.append(f)}t.error&&e.append(o("p","error-text",String(t.error))),n.append(o("div","label","Blackjack"));let m=Number(a?.bet??t.bet??0),p=t.balance??t.hand?.balance;if(n.append(o("p","note","Hit, stand or double. Forfeiting loses the reserved bet.")),i){let f=o("div","row"),w=o("button","btn small","−10"),k=o("strong","mono",L(m)),v=o("button","btn small","+10");w.addEventListener("click",()=>s({AdjustBet:-10})),v.addEventListener("click",()=>s({AdjustBet:10})),f.append(w,k,v),n.append(o("div","label","Bet"),f)}else{let f=o("div","stat");f.append(o("span","muted","Bet"),o("strong",void 0,L(m))),n.append(f)}if(p!==void 0){let f=o("div","stat");f.append(o("span","muted","Balance"),o("strong",void 0,L(Number(p)))),n.append(f)}let u=o("div","actions");if(r){let f=o("div","row wrap");for(let k of a?.actions??[]){let v=k==="hit"?"HIT":k==="stand"?"STAND":"DOUBLE",E=k==="stand"?o("button","btn primary",v):o("button","btn",v);E.addEventListener("click",()=>{oe()&&s(k==="hit"?"Hit":k==="stand"?"Stand":"Double")}),f.append(E)}u.append(f);let w=o("button","btn danger wide","Forfeit hand");w.addEventListener("click",()=>{oe()&&window.confirm("Forfeit this hand? The reserved bet is lost.")&&s("Forfeit")}),u.append(w)}else if(i){let f=o("button","btn primary wide big","DEAL");f.addEventListener("click",()=>{oe()&&s("Deal")}),u.append(f)}let y=o("button","btn ghost wide",r?"Leave (forfeits)":"Leave table");y.addEventListener("click",()=>{r&&!window.confirm("Leaving forfeits this hand. Continue?")||s("Leave")}),u.append(y),n.append(u)}var se=Math.LN2/5,B=null,I=null,Ce=null,P=null,$,Te=0,X="",Ee=0;function qe(e,n,t,s){H(e),H(n),P=t,Ce=s,e.append(o("h2",void 0,"Crash")),e.append(o("p","note","The multiplier rises from 1.00×. Cash out before it crashes."));let a=o("div","crash-wrap"),r=o("div","crash-number","1.00×"),d=o("div","crash-meta"),i=o("canvas","crash-canvas"),m=o("div","verify","Waiting for a round commitment.");a.append(r,d,i,m),e.append(a),n.append(o("div","label","Crash")),n.append(o("p","note","The server commits to a seed before the round. The seed is revealed when it ends."));let p=o("div","row"),u=o("button","btn small","−10"),y=o("strong","mono","—"),f=o("button","btn small","+10");u.addEventListener("click",()=>P?.({AdjustBet:-10})),f.addEventListener("click",()=>P?.({AdjustBet:10})),p.append(u,y,f),n.append(o("div","label","Bet"),p);let w=o("strong","mono","—"),k=o("strong","mono","—");for(let[M,N]of[["Potential",w],["Balance",k]]){let b=o("div","stat");b.append(o("span","muted",M),N),n.append(b)}let v=o("p","note","Ready."),E=o("p","note",""),S=o("p","error-text");n.append(v,E,S);let l=o("div","actions"),c=o("button","btn primary wide big","START"),h=o("button","btn ghost wide","Leave table");return c.addEventListener("click",()=>{Date.now()-Ee<500||(Ee=Date.now(),I?.status==="running"?P?.("CashOut"):P?.("Start"))}),h.addEventListener("click",()=>{I?.status==="running"&&!window.confirm("Forfeit this round? The bet is lost.")||P?.("Leave")}),l.append(c,h),n.append(l),{board:e,side:n,number:r,meta:d,verify:m,canvas:i,bet:y,potential:w,balance:k,status:v,lastCrash:E,error:S,primary:c,leave:h,minus:u,plus:f}}function Se(){$!==void 0&&(cancelAnimationFrame($),$=void 0),I=null}function Ne(e,n,t,s,a){(!B||B.board!==e||!B.canvas.isConnected)&&(B=qe(e,n,s,a),X="");let r=B;P=s,Ce=a,I=t,t.status!==X&&((t.status==="starting"||t.status==="running")&&X!=="running"&&(r.verify.className="verify",r.verify.textContent="Round committed; seed hidden until the round ends."),X=String(t.status));let d=t.status==="running",i=t.status==="starting",m=d||i;r.bet.textContent=L(Number(t.bet??0)),r.potential.textContent=L(Number(t.potential??t.bet??0)),r.balance.textContent=t.balance===null||t.balance===void 0?"—":L(Number(t.balance)),r.error.textContent=t.error?String(t.error):"",r.minus.disabled=m,r.plus.disabled=m,r.primary.textContent=d?"CASH OUT":i?"STARTING…":"START",r.primary.disabled=i,r.primary.className="btn primary wide big",r.leave.textContent=d?"Forfeit round":"Leave table",d?(r.status.textContent="Rising — cash out before the crash.",r.status.className="note win-text"):i?(r.status.textContent="Starting the round…",r.status.className="note"):t.status==="cashed"?(r.status.textContent=`Cashed out at ${Number(t.multiplier??0).toFixed(2)}× for ${L(Number(t.payout??0))}.`,r.status.className="note win-text"):t.status==="crashed"?(r.status.textContent=`Crashed at ${Number(t.crash_point??t.multiplier??0).toFixed(2)}×. The bet is lost.`,r.status.className="note error-text"):t.status==="forfeit"?(r.status.textContent="Round forfeited.",r.status.className="note error-text"):(r.status.textContent="Ready. Start a round when you want.",r.status.className="note"),t.crash_point!==null&&t.crash_point!==void 0&&t.status==="crashed"&&(r.lastCrash.textContent=`Last crash: ${Number(t.crash_point).toFixed(2)}×`);let p=t.commit?String(t.commit):"";if(r.meta.textContent=p?`commit ${z(p,12)}`:"no commitment yet",t.seed&&p){let u=++Te,y=String(t.seed),f=Number(t.crash_point??0);tt(y,p,f).then(([w,k])=>{if(u!==Te||!B)return;let v=w&&k;B.verify.className=`verify ${v?"ok":"bad"}`,B.verify.textContent=v?`Seed ${z(y,12)} · sha256 matches commit · crash point recomputed`:`VERIFICATION FAILED · seed ${z(y,12)} · commit ${z(p,12)}`})}else!m&&!p&&(r.verify.className="verify",r.verify.textContent="Waiting for a round commitment.");if($!==void 0&&(cancelAnimationFrame($),$=void 0),d){let u=()=>{if(!B||I?.status!=="running"){$=void 0;return}Me(B,I,a),$=requestAnimationFrame(u)};$=requestAnimationFrame(u)}else Me(r,t,a)}function Qe(e,n){if(e.status==="running"){let t=Math.max(0,(n.now()-Number(e.started_at??0))/1e3),s=Math.min(1e3,Math.exp(se*t));return Math.max(s,Number(e.multiplier??1))}return e.status==="cashed"?Number(e.multiplier??1):e.status==="crashed"?Number(e.crash_point??e.multiplier??1):1}function Me(e,n,t){let s=Qe(n,t);e.number.textContent=`${s.toFixed(2)}×`,e.number.className=`crash-number ${n.status==="running"?"running":n.status==="cashed"?"cashed":n.status==="crashed"?"crashed":""}`,e.potential.textContent=L(Math.floor(Number(n.bet??0)*s)),et(e.canvas,n,s,t)}function et(e,n,t,s){let a=e.clientWidth||600,r=e.clientHeight||360,d=window.devicePixelRatio||1;(e.width!==Math.round(a*d)||e.height!==Math.round(r*d))&&(e.width=Math.round(a*d),e.height=Math.round(r*d));let i=e.getContext("2d");if(!i)return;i.setTransform(d,0,0,d,0,0),i.clearRect(0,0,a,r);let m=54,p=16,u=18,y=34,f=Math.max(1,a-m-p),w=Math.max(1,r-u-y),k=n.status==="running"?Math.max(.25,(s.now()-Number(n.started_at??0))/1e3):t>1?Math.log(t)/se:1,v=Math.max(5,k*1.08),E=Math.max(2,Math.ceil(t*1.15*2)/2),S=b=>m+b/v*f,l=b=>u+w-(b-1)/(E-1)*w;i.strokeStyle="#242e38",i.fillStyle="#8a98a6",i.font="11px ui-monospace, monospace",i.lineWidth=1;for(let b=0;b<=4;b+=1){let T=1+(E-1)*b/4,C=l(T);i.beginPath(),i.moveTo(m,C),i.lineTo(a-p,C),i.stroke(),i.fillText(`${T.toFixed(1)}×`,6,C+4)}for(let b=0;b<=4;b+=1){let T=v*b/4,C=S(T);i.beginPath(),i.moveTo(C,u),i.lineTo(C,u+w),i.strokeStyle="#1b232c",i.stroke(),i.fillStyle="#5b6773",i.fillText(`${T.toFixed(0)}s`,C-10,r-12)}let c=n.status==="crashed"?"#e05a5a":n.status==="cashed"?"#4ec27b":"#e0b64a";i.beginPath();let h=180;for(let b=0;b<=h;b+=1){let T=k*b/h,C=Math.min(E,Math.exp(se*T)),fe=S(T),he=l(C);b===0?i.moveTo(fe,he):i.lineTo(fe,he)}i.strokeStyle=c,i.lineWidth=2.4,i.stroke();let M=S(k),N=l(Math.min(E,t));i.beginPath(),i.arc(M,N,4.5,0,Math.PI*2),i.fillStyle=c,i.fill(),i.fillStyle=c,i.font="600 12px ui-monospace, monospace",i.fillText(`${t.toFixed(2)}×`,Math.min(M+8,a-70),Math.max(u+12,N-10))}async function tt(e,n,t){let s=new Uint8Array(e.length/2);for(let u=0;uu.toString(16).padStart(2,"0")).join("")===n.toLowerCase(),i=0;for(let u=0;u<8;u+=1)i=i*256+s[u];i/=2**64;let m=Math.max(1,Math.min(1e3,(1-.01)/(1-i))),p=Math.abs(m-t)<1e-6;return[d,p]}function nt(e){let n=e.details??{};switch(e.game){case"slots":return String(n.win_type??"spin");case"roulette":return`${n.number??"?"} ${n.color??""}`.trim();case"blackjack":return String(n.result??"");case"crash":{let t=String(n.result??""),s=n.crash_point;return s==null?t:`${t} @ ${Number(s).toFixed(2)}×`}default:return""}}function He(e,n){H(e);let t=n.records??[];if(t.length===0){let m=o("div","board");m.append(o("h2",void 0,"No plays yet"),o("p","muted","Your settled plays will appear here.")),e.append(m);return}let s=o("div","table-wrap"),a=o("table"),r=o("thead"),d=o("tr");for(let m of["Time","Game","Bet","Result","Net","Balance"])d.append(o("th",void 0,m));r.append(d);let i=o("tbody");for(let m of t){let p=o("tr");p.append(o("td","mono",ke(String(m.at??"")))),p.append(o("td",void 0,String(m.game??""))),p.append(o("td","num",L(Number(m.bet??0)))),p.append(o("td","muted",nt(m)));let u=Number(m.winnings??0)-Number(m.bet??0),y=o("td",`num ${u>0?"pos":u<0?"neg":""}`,u===0?"0 Kr":be(u));p.append(y),p.append(o("td","num",L(Number(m.balance_after??0)))),i.append(p)}a.append(r,i),s.append(a),e.append(s)}var re=null,Re=0,ot="#b0313a",st="#151b21",Be="#106b45",rt="#0d5c39",at="#09472c",it="#1f7d52",lt="#ecf7f0",ct="#e0b64a";function dt(e){return e===0?"green":[1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36].includes(e)?"red":"black"}function ut(e,n){let s=Math.max(38,e*.055),a=Math.max(34,e*.05),r=Math.max(30,n*.07),d=6,i=e-28-s-a,m=i/12,p=(n-28-r*2-d*2)/3,u=14+s,y=14,f=y+p*3+d,w=f+r+d,k=[];for(let l=0;l<12;l+=1)for(let c=0;c<3;c+=1){let h=l*3+(3-c);k.push({x:u+l*m,y:y+c*p,w:m,h:p,target:{bet:"straight",number:h},label:String(h),kind:"number",number:h})}k.push({x:14,y,w:s,h:p*3,target:{bet:"straight",number:0},label:"0",kind:"zero",number:0});for(let l=0;l<3;l+=1){let c=2-l;k.push({x:u+i,y:y+l*p,w:a,h:p,target:{bet:"column",index:c},label:"2:1",kind:"column"})}for(let l=0;l<3;l+=1)k.push({x:u+i/3*l,y:f,w:i/3,h:r,target:{bet:"dozen",index:l},label:["1st 12","2nd 12","3rd 12"][l],kind:"dozen"});[{kind:"low",label:"1–18"},{kind:"even",label:"EVEN"},{kind:"red",label:"RED"},{kind:"black",label:"BLACK"},{kind:"odd",label:"ODD"},{kind:"high",label:"19–36"}].forEach((l,c)=>{k.push({x:u+i/6*c,y:w,w:i/6,h:r,target:{bet:"outside",kind:l.kind},label:l.label,kind:"outside"})});let E=[],S=l=>{let c=k.find(h=>h.kind==="number"&&h.number===l);return c?{x:c.x+c.w/2,y:c.y+c.h/2}:null};for(let l=0;l<11;l+=1)for(let c=0;c<2;c+=1){let h=l*3+(3-c);E.push({x:u+(l+1)*m,y:y+(c+1)*p,radius:12,rank:0,target:{bet:"corner",numbers:[h,h-1,h+3,h+2]}})}for(let l=0;l<12;l+=1)for(let c=0;c<2;c+=1){let h=l*3+(3-c),M=S(h);M&&E.push({x:M.x,y:y+(c+1)*p,radius:10,rank:1,target:{bet:"split",a:h,b:h-1}})}for(let l=0;l<11;l+=1)for(let c=0;c<3;c+=1){let h=l*3+(3-c);E.push({x:u+(l+1)*m,y:y+c*p+p/2,radius:10,rank:1,target:{bet:"split",a:h,b:h+3}})}for(let l=0;l<3;l+=1){let c=3-l;E.push({x:u,y:y+l*p+p/2,radius:10,rank:1,target:{bet:"split",a:0,b:c}})}return{width:e,height:n,cellW:m,cellH:p,zeroX:14,zeroW:s,gridX:u,gridY:y,gridW:i,columnX:u+i,dozensY:f,outsideY:w,outsideH:r,zones:k,hotspots:E}}function $e(e,n,t,s,a,r){let d=Math.min(r,s/2,a/2);e.beginPath(),e.moveTo(n+d,t),e.arcTo(n+s,t,n+s,t+a,d),e.arcTo(n+s,t+a,n,t+a,d),e.arcTo(n,t+a,n,t,d),e.arcTo(n,t,n+s,t,d),e.closePath()}function Ae(e,n){let t=e.clientWidth||800,s=e.clientHeight||540,a=window.devicePixelRatio||1;(e.width!==Math.round(t*a)||e.height!==Math.round(s*a))&&(e.width=Math.round(t*a),e.height=Math.round(s*a));let r=e.getContext("2d"),d=ut(t,s);if(!r)return d;r.setTransform(a,0,0,a,0,0),r.clearRect(0,0,t,s),r.fillStyle=at,$e(r,0,0,t,s,10),r.fill();for(let i of d.zones){let m=rt;i.kind==="number"?m=i.number===0?Be:dt(i.number)==="red"?ot:st:i.kind==="zero"&&(m=Be),r.fillStyle=m,r.strokeStyle=it,r.lineWidth=1,$e(r,i.x+1,i.y+1,i.w-2,i.h-2,3),r.fill(),r.stroke(),r.fillStyle=lt,r.textAlign="center",r.textBaseline="middle",i.kind==="number"||i.kind==="zero"?r.font=`700 ${Math.min(24,d.cellH*.3)}px ui-monospace, monospace`:r.font=`600 ${Math.min(12,d.outsideH*.4)}px ui-monospace, monospace`,r.fillText(i.label,i.x+i.w/2,i.y+i.h/2)}return mt(r,d,n),d}function We(e){return JSON.stringify(e)}function pt(e,n){let t=We(n),s=e.zones.find(a=>We(a.target)===t);if(s)return{x:s.x+s.w/2,y:s.y+s.h/2};if(n?.bet==="split"||n?.bet==="corner"){let a=n.bet==="split"?[n.a,n.b]:n.numbers,r=e.zones.filter(d=>(d.kind==="number"||d.kind==="zero")&&a.includes(d.number));if(r.length>0)return{x:r.reduce((d,i)=>d+i.x+i.w/2,0)/r.length,y:r.reduce((d,i)=>d+i.y+i.h/2,0)/r.length}}return null}function mt(e,n,t){let s=t.bets?.chips??[];for(let a of s){let r=pt(n,a.target);if(!r)continue;let d=Math.max(12,Math.min(18,n.cellW*.26));e.beginPath(),e.arc(r.x,r.y,d,0,Math.PI*2),e.fillStyle=ct,e.fill(),e.strokeStyle="#7a5a12",e.lineWidth=2,e.stroke(),e.fillStyle="#221a05",e.textAlign="center",e.textBaseline="middle",e.font=`700 ${d>15?11:10}px ui-monospace, monospace`,e.fillText(String(a.amount),r.x,r.y+.5)}}function De(e,n,t,s){H(e),H(n);let a=t.phase==="spinning";e.append(o("h2",void 0,"Roulette")),e.append(o("p","note","European single-zero wheel. Click a number, line or corner to add a chip; right-click takes one back."));let r=o("div","roulette-wrap"),d=o("canvas","roulette-canvas");if(r.append(d),t.phase==="result"&&t.number!==null&&t.number!==void 0){let l=o("div",`wheel-result ${t.color??""}`);l.append(o("div","label","Result")),l.append(o("div","num",String(t.number)));let c=Number(t.winnings??0);l.append(o("div","note",c>0?`Won ${L(c)}`:"No win")),r.append(l)}e.append(r);let m=Ae(d,t),p=(l,c)=>{let h=d.getBoundingClientRect(),M=l-h.left,N=c-h.top,b=null;for(let T of m.hotspots){let C=Math.hypot(M-T.x,N-T.y);C>T.radius||(!b||T.rank=0;T-=1){let C=m.zones[T];if(M>=C.x&&M<=C.x+C.w&&N>=C.y&&N<=C.y+C.h)return C}return null};d.addEventListener("click",l=>{if(a)return;let c=p(l.clientX,l.clientY);c&&s({PlaceBetAt:c.target})}),d.addEventListener("contextmenu",l=>{if(l.preventDefault(),a)return;let c=p(l.clientX,l.clientY);c&&s({RemoveBetAt:c.target})}),d.addEventListener("mousemove",l=>{let c=p(l.clientX,l.clientY);d.style.cursor=c&&!a?"pointer":"default"}),re?.disconnect(),re=new ResizeObserver(()=>{m=Ae(d,t)}),re.observe(d),n.append(o("div","label","Roulette")),n.append(o("p","note","Chips sit on the felt. The total is reserved when you spin.")),n.append(o("div","label","Chip"));let u=o("div","chip-row");for(let l of[10,25,50,100,500]){let c=o("button",`chip-btn ${Number(t.chip)===l?"active":""}`,String(l));c.disabled=a,c.addEventListener("click",()=>s({SetChip:l})),u.append(c)}n.append(u);let y=(t.bets?.chips??[]).reduce((l,c)=>l+Number(c.amount??0),0),f=o("div","stat");if(f.append(o("span","muted","On the felt"),o("strong","mono",L(y))),n.append(f),t.balance!==null&&t.balance!==void 0){let l=o("div","stat");l.append(o("span","muted","Balance"),o("strong","mono",L(Number(t.balance)))),n.append(l)}t.error&&n.append(o("p","error-text",String(t.error)));let w=o("p","note");if(a)w.textContent="Spinning…";else if(t.phase==="result"){let l=Number(t.winnings??0);w.textContent=`${t.number} ${t.color} · ${l>0?`won ${L(l)}`:"no win"}`,w.className=l>0?"note win-text":"note"}else w.textContent=y>0?"Ready to spin.":"Place at least one chip.";n.append(w);let k=o("div","actions"),v=o("button","btn primary wide big",a?"SPINNING…":"SPIN WHEEL");v.disabled=a||y===0,v.addEventListener("click",()=>{Date.now()-Re<600||(Re=Date.now(),s("Spin"))});let E=o("button","btn wide","Clear bets");E.disabled=a||y===0,E.addEventListener("click",()=>s("ClearBets"));let S=o("button","btn ghost wide","Leave table");S.disabled=a,S.addEventListener("click",()=>{a||s("Leave")}),k.append(v,E,S),n.append(k)}var ae=5,ie=3,F="CLOGDS",ft=["top","middle","bottom","V","inverted V"],V=0,Pe=0,A,U=null,G=null;function ht(){V=Date.now()+900}function Ie(){A!==void 0&&(window.clearInterval(A),A=void 0),U=null,G=null,V=0}function bt(e){return e.phase==="spinning"||Date.now()0){let h=(t.win_lines??[]).map(M=>`${M} (${ft[M-1]??"line"})`).join(" · ");u.textContent=`${t.win_type==="mega"?"MEGA WIN":t.win_type==="big"?"BIG WIN":"WIN"} ${L(c)}${h?` · ${h}`:""}`,u.classList.add("win-text")}else u.textContent="No win — spin again."}else a?u.textContent="Spinning…":u.textContent="Pick a bet and spin.";if(e.append(u),a){let c=0;A=window.setInterval(()=>{c+=1;for(let h=0;h=V&&U&&G&&(window.clearInterval(A),A=void 0,le(G,n,U,s))},70)}n.append(o("div","label","Slots")),n.append(o("p","note","5 reels × 3 rows, 5 paylines."));let y=o("div","row"),f=o("button","btn small","−10"),w=o("strong","mono",L(Number(t.bet??0))),k=o("button","btn small","+10");f.disabled=a,k.disabled=a,f.addEventListener("click",()=>s({AdjustBet:-10})),k.addEventListener("click",()=>s({AdjustBet:10})),y.append(f,w,k),n.append(o("div","label","Bet"),y),t.error&&n.append(o("p","error-text",String(t.error)));let v=o("p","note");if(a)v.textContent="Spinning…";else if(t.phase==="result"){let c=Number(t.winnings??0);v.textContent=c>0?`Won ${L(c)}`:"No win this spin.",c>0&&v.classList.add("win-text")}else v.textContent="Ready when you are.";n.append(v);let E=o("div","actions"),S=o("button","btn primary wide big",a?"SPINNING…":"SPIN");S.disabled=a,S.addEventListener("click",()=>{Date.now()-Pe<900||(Pe=Date.now(),ht(),s("Spin"))});let l=o("button","btn ghost wide","Leave machine");l.disabled=a,l.addEventListener("click",()=>s("Leave")),E.append(S,l),n.append(E)}var gt=g("auth-screen"),yt=g("lobby-screen"),kt=g("game-screen"),Lt=g("history-screen"),Fe=g("session-bar"),xt=g("account-name"),wt=g("account-balance"),ce=g("game-grid"),K=g("game-board"),Z=g("game-side"),vt=g("game-title"),Ve=g("game-badge"),Tt=g("lobby-account"),Et=g("history-body"),Mt=g("auth-form"),_e=g("auth-user"),ee=g("auth-pass"),O=g("auth-error"),D=g("auth-submit"),je=g("tab-login"),Ye=g("tab-register"),J=g("reconnect-overlay"),Oe=g("reconnect-message"),ze=g("replaced-overlay"),x=null,W=null,Q=null,j="login",de=null,Xe=0,ue=0,pe=new Map([["slots",10],["roulette",10],["blackjack",10],["crash",10]]),Ue={slots:"Slots",roulette:"Roulette",blackjack:"Blackjack",crash:"Crash"},Ct={slots:"Five reels, five paylines. Match symbols from the left.",roulette:"European single-zero wheel with inside and outside bets.",blackjack:"Six-deck shoe. Blackjack pays 3:2.",crash:"A rising multiplier. Cash out before it crashes."},St=location.pathname.includes("/play/")?location.pathname.slice(0,location.pathname.indexOf("/play/")):"",Nt=`${location.protocol==="https:"?"wss":"ws"}://${location.host}${St}/ws`,q=new URLSearchParams(location.search).get("ws"),Ht=location.hostname==="127.0.0.1"||location.hostname==="localhost"||location.hostname==="::1",Rt=q&&Ht&&(q.startsWith("ws://")||q.startsWith("wss://"))?q:Nt,te=new Y(Rt,{onHello(e){Xe=e.time-Date.now(),W=e.user??null,typeof e.balance=="number"&&(Q=e.balance),Ve.textContent=`v${e.version}`},onView(e){x=e,e.screen!=="slots"&&Ie(),e.screen!=="crash"&&Se(),typeof e.balance=="number"&&(Q=e.balance),e.screen==="lobby"&&"user"in e&&(W=e.user??null,W?ee.value="":Q=null),ue=0,J.hidden=!0,Ge(),W&&x.balance===null&&de!==W&&(de=W,te.send("Info")),W||(de=null)},onNotice(e){e.startsWith("Connected to:")||e.startsWith("Fingerprint:")||e.startsWith("User:")||e.startsWith("Account:")||e.startsWith("Balance:")||(ne(e,ge(e)),e.startsWith("Account created")&&(me("login"),ee.value="",_e.focus()),D.disabled=!1,D.textContent=j==="login"?"Log in":"Create account")},onError(e){ne(e,"bad"),D.disabled=!1,D.textContent=j==="login"?"Log in":"Create account"},onReplaced(){ze.hidden=!1},onPong(){},onOpen(){J.hidden=!0},onClosed(e){if(ze.hidden!==!1){if(!e){Oe.textContent="The connection could not be restored. Reload the page to try again.",J.hidden=!1;return}ue+=1,Oe.textContent=ue>1?"Still trying to reach the game server…":"Trying to reach the game server…",J.hidden=!1}}});function R(e){te.send(e)}function Bt(){return Date.now()+Xe}function me(e){j=e,je.classList.toggle("active",e==="login"),Ye.classList.toggle("active",e==="register"),D.textContent=e==="login"?"Log in":"Create account",ee.autocomplete=e==="login"?"current-password":"new-password",O.textContent=""}function _(e){gt.hidden=e!=="auth",yt.hidden=e!=="lobby",kt.hidden=e!=="game",Lt.hidden=e!=="history"}function $t(e){wt.textContent=L(e??null)}function Ge(){if(!x)return;let e=W;if(e?(Fe.hidden=!1,xt.textContent=String(e)):Fe.hidden=!0,$t(Q),!e){_("auth"),O.textContent=x.login_error?String(x.login_error):"",x.screen==="lobby"&&x.connected===!1&&(O.textContent="The game server is not reachable yet. Retrying…");return}switch(x.screen){case"lobby":_("lobby"),Wt(x);break;case"history":_("history"),He(Et,x);break;case"slots":case"roulette":case"blackjack":case"crash":_("game"),vt.textContent=Ue[x.screen]??x.screen,Ve.textContent=At(x),x.screen==="slots"?le(K,Z,x,R):x.screen==="roulette"?De(K,Z,x,R):x.screen==="blackjack"?ve(K,Z,x,R):Ne(K,Z,x,R,{now:Bt});break;default:_("auth")}}function At(e){return e.screen==="crash"||e.screen==="blackjack"?String(e.status??""):e.screen==="slots"||e.screen==="roulette"?String(e.phase??""):""}function Wt(e){Tt.textContent=e.account?`Account ${e.account}`:"",ce.replaceChildren();let n=e.games??[];for(let[t,s]of n){let a=o("article",`game-card ${t}`);a.append(o("h3",void 0,s||Ue[t]||t)),a.append(o("p",void 0,Ct[t]??"Play a round."));let r=o("div","row wrap"),d=o("label","field");d.style.flex="1",d.append(o("span","label","Bet"));let i=o("input","input bet-input");i.type="number",i.min="1",i.step="10",i.value=String(pe.get(t)??10),i.addEventListener("change",()=>{let p=Math.max(1,Math.floor(Number(i.value)||1));i.value=String(p),pe.set(t,p)}),d.append(i);let m=o("button","btn primary",t==="roulette"?"Open table":"Play");m.addEventListener("click",()=>{let p=Math.max(1,Math.floor(Number(i.value)||1));pe.set(t,p),R({Play:{game:t,bet:p}})}),r.append(d,m),a.append(r),ce.append(a)}n.length===0&&ce.append(o("p","muted","The server did not advertise any games."))}je.addEventListener("click",()=>me("login"));Ye.addEventListener("click",()=>me("register"));Mt.addEventListener("submit",async e=>{e.preventDefault();let n=_e.value.trim(),t=ee.value;if(!n||!t){O.textContent="Enter a username and a password.";return}D.disabled=!0,D.textContent="Working…",O.textContent="";try{let s=await ye(t);R(j==="login"?{Login:{user:n,credential:s}}:{Register:{user:n,credential:s}})}catch{O.textContent="This browser cannot hash the password (needs a secure context).",D.disabled=!1,D.textContent=j==="login"?"Log in":"Create account"}});g("logout").addEventListener("click",()=>R("Logout"));g("show-history").addEventListener("click",()=>R({History:{limit:50}}));g("refresh-lobby").addEventListener("click",()=>R("Info"));g("history-back").addEventListener("click",()=>R("ShowLobby"));g("leave-game").addEventListener("click",()=>{!x||(x.screen==="blackjack"&&x.status==="player"||x.screen==="crash"&&x.status==="running")&&!window.confirm("Leaving now forfeits the active bet. Continue?")||R("Leave")});g("reload-replaced").addEventListener("click",()=>location.reload());g("reload-reconnect").addEventListener("click",()=>location.reload());window.addEventListener("resize",()=>{window.clearTimeout(window.__resizeTimer),window.__resizeTimer=window.setTimeout(()=>{x&&Ge()},140)});window.setInterval(()=>{W&&te.ping()},25e3);te.connect();})(); +"use strict";(()=>{function x(t){let e=document.getElementById(t);if(!e)throw new Error(`missing #${t}`);return e}function o(t,e,n){let r=document.createElement(t);return e&&(r.className=e),n!==void 0&&(r.textContent=n),r}function v(t){t.replaceChildren()}function Jt(t){let e=t<0,n=String(Math.abs(Math.trunc(t))),r="";for(let s=0;s0&&(n.length-s)%3===0&&(r+=" "),r+=n[s];return e?`-${r}`:r}function T(t){return t==null||Number.isNaN(t)?"— Kr":`${Jt(t)} Kr`}function st(t,e="info"){let n=document.getElementById("toasts");if(!n||!t)return;let r=o("div",`toast ${e}`,t);for(n.append(r),window.setTimeout(()=>{r.style.opacity="0",r.style.transition="opacity 220ms ease",window.setTimeout(()=>r.remove(),240)},4200);n.children.length>4;)n.firstElementChild?.remove()}function yt(t){let e=t.toLowerCase();return t.startsWith("ERROR")||e.includes("failed")||e.includes("lost")||e.includes("invalid")||e.includes("forfeit")?"bad":t.startsWith("Logged in")||t.startsWith("Account created")||e.includes("won")||e.includes("cashed")?"good":"info"}async function xt(t){let e=new TextEncoder().encode(t),n=await crypto.subtle.digest("SHA-256",e);return[...new Uint8Array(n)].map(r=>r.toString(16).padStart(2,"0")).join("")}function j(t,e=10){return t.length<=e*2?t:`${t.slice(0,e)}…${t.slice(-e)}`}function kt(t){if(t==="?"||!t)return{rank:"?",suit:"",red:!1};let e=t.slice(-1);return{rank:t.slice(0,-1),suit:e==="C"?"♣":e==="D"?"♦":e==="H"?"♥":e==="S"?"♠":e,red:e==="D"||e==="H"}}var G=class{constructor(e,n){this.url=e;this.handlers=n;this.socket=null;this.stopped=!1;this.replaced=!1;this.attempts=0}connect(){if(this.stopped)return;this.clearTimer();let e;try{e=new WebSocket(this.url)}catch{this.scheduleReconnect()||this.handlers.onClosed(!1);return}this.socket=e,e.addEventListener("open",()=>{this.attempts=0,this.handlers.onOpen()}),e.addEventListener("message",n=>{let r;try{r=JSON.parse(String(n.data))}catch{return}switch(r.type){case"hello":this.handlers.onHello(r);break;case"view":this.handlers.onView(r.view);break;case"notice":this.handlers.onNotice(String(r.text??""));break;case"error":this.handlers.onError(String(r.text??""));break;case"replaced":this.replaced=!0,this.handlers.onReplaced();break;case"pong":this.handlers.onPong();break}}),e.addEventListener("close",()=>{if(this.socket===e&&(this.socket=null),this.replaced||this.stopped){this.handlers.onClosed(!1);return}let r=this.scheduleReconnect();this.handlers.onClosed(r)}),e.addEventListener("error",()=>{})}send(e){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify({type:"command",command:e}))}ping(){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify({type:"ping"}))}close(){this.stopped=!0,this.clearTimer(),this.socket?.close()}scheduleReconnect(){if(this.stopped||this.replaced||this.attempts>=6)return!1;this.attempts+=1;let e=Math.min(250*2**(this.attempts-1),4e3);return this.timer=window.setTimeout(()=>this.connect(),e),!0}clearTimer(){this.timer!==void 0&&(window.clearTimeout(this.timer),this.timer=void 0)}};var Tt=0;function rt(){return Date.now()-Tt<400?!1:(Tt=Date.now(),!0)}function Qt(t){if(t==="?"){let r=o("div","card back");return r.append(o("span","rank","?"),o("span","suit","")),r}let e=kt(t),n=o("div","card");return e.red&&n.classList.add("red"),n.append(o("span","rank",e.rank),o("span","suit",e.suit)),n}function Lt(t,e,n){let r=o("div","hand"),s=o("div","hand-head");s.append(o("span","label",t),o("strong","total",String(n)));let a=o("div","cards");for(let l of e)a.append(Qt(l));return r.append(s,a),r}function te(t,e){let n=String(e?.result??""),r=Number(e?.winnings??0);switch(n){case"blackjack":return`Blackjack — won ${T(r)}`;case"win":return`You win — ${T(r)}`;case"push":return`Push — ${T(r)} returned`;case"bust":return"Bust — the bet is lost";case"lose":return"Dealer wins — the bet is lost";case"forfeit":return"Hand forfeited — the bet is lost";case"playing":return t.status==="player"?"Your move.":"Dealing…";default:return"Ready to deal."}}function wt(t,e,n,r){v(t),v(e);let s=n.hand,a=s?.phase==="player"||n.status==="player",l=s?.phase==="done"||n.status==="done",i=!s||l,d=o("div","bj-table");if(s)d.append(Lt("DEALER",s.dealer??[],Number(s.dealer_total??0))),d.append(o("div","bj-divider")),d.append(Lt("YOU",s.player??[],Number(s.player_total??0)));else{let b=o("div","empty-table","Place a bet and deal a hand.");d.append(b)}t.append(d);let m=o("div","board-foot");m.append(o("span","label","Hand"),o("span",void 0,s?te(n,s):"Waiting")),t.append(m),n.error&&t.append(o("p","error-text",String(n.error))),e.append(o("h2",void 0,"Blackjack"));let f=Number(s?.bet??n.bet??0),L=n.balance??n.hand?.balance;if(e.append(o("p","note","Get closer to 21 without going over.")),i){let b=o("div","row"),y=o("button","btn small","−10"),S=o("strong","mono",T(f)),c=o("button","btn small","+10");y.addEventListener("click",()=>r({AdjustBet:-10})),c.addEventListener("click",()=>r({AdjustBet:10})),b.append(y,S,c),e.append(o("div","label","Bet"),b)}else{let b=o("div","stat");b.append(o("span","muted","Bet"),o("strong",void 0,T(f))),e.append(b)}if(L!==void 0){let b=o("div","stat");b.append(o("span","muted","Balance"),o("strong",void 0,T(Number(L)))),e.append(b)}if(l||s&&!a){let b=o("p","note win-text");b.textContent=`${String(s?.result??"").toUpperCase()} ${T(Number(s?.winnings??0))}`,["win","blackjack","push"].includes(String(s?.result))||(b.className="note"),e.append(b)}else if(a){let b=(s?.actions??[]).includes("double")?"Hit, stand or double.":"Hit or stand.";e.append(o("p","note",b))}else s||e.append(o("p","note","Press DEAL to start a hand."));let w=o("div","actions");if(a){let b=o("div","row wrap");for(let S of s?.actions??[]){let c=S==="hit"?"HIT":S==="stand"?"STAND":"DOUBLE",p=S==="stand"?o("button","btn primary",c):o("button","btn",c);p.addEventListener("click",()=>{rt()&&r(S==="hit"?"Hit":S==="stand"?"Stand":"Double")}),b.append(p)}w.append(b);let y=o("button","btn danger wide","Forfeit hand");y.addEventListener("click",()=>{rt()&&window.confirm("Forfeit this hand? The reserved bet is lost.")&&r("Forfeit")}),w.append(y)}else if(i){let b=o("button","btn primary wide big","DEAL");b.addEventListener("click",()=>{rt()&&r("Deal")}),w.append(b)}let k=o("button","btn ghost wide",a?"Leave (forfeits)":"Leave table");k.addEventListener("click",()=>{a&&!window.confirm("Leaving forfeits this hand. Continue?")||r("Leave")}),w.append(k),e.append(w)}var at=Math.LN2/5,B=null,z=null,Mt=null,D=null,$,Et=0,X="",St=0;function ee(t,e,n,r){v(t),v(e),D=n,Mt=r;let s=o("div","crash-wrap"),a=o("div","crash-number","1.00×"),l=o("div","label","READY"),i=o("div","crash-meta"),d=o("canvas","crash-canvas"),m=o("div","verify","Waiting for a round commitment.");s.append(a,l,i,d,m),t.append(s),e.append(o("h2",void 0,"Crash")),e.append(o("p","note","Cash out before the multiplier crashes."));let f=o("div","row"),L=o("button","btn small","−"),w=o("strong","mono","—"),k=o("button","btn small","+");L.addEventListener("click",()=>D?.({AdjustBet:-10})),k.addEventListener("click",()=>D?.({AdjustBet:10})),f.append(L,w,k),e.append(o("div","label","Bet"),f);let b=o("strong","mono","—"),y=o("strong","mono","—");for(let[R,E]of[["Potential",b],["Balance",y]]){let M=o("div","stat");M.append(o("span","muted",R),E),e.append(M)}let S=o("p","note","Press START to play."),c=o("p","note",""),p=o("p","error-text");e.append(S,c,p);let h=o("div","actions"),u=o("button","btn primary wide big","START"),g=o("button","btn ghost wide","Leave table");return u.addEventListener("click",()=>{Date.now()-St<500||(St=Date.now(),z?.status==="running"?D?.("CashOut"):D?.("Start"))}),g.addEventListener("click",()=>{z?.status==="running"&&!window.confirm("Forfeit this round? The bet is lost.")||D?.("Leave")}),h.append(u,g),e.append(h),{board:t,side:e,number:a,meta:i,verify:m,canvas:d,bet:w,potential:b,balance:y,status:S,lastCrash:c,error:p,primary:u,leave:g,minus:L,plus:k}}function Nt(){$!==void 0&&(cancelAnimationFrame($),$=void 0),z=null}function vt(t,e,n,r,s){(!B||B.board!==t||!B.canvas.isConnected)&&(B=ee(t,e,r,s),X="");let a=B;D=r,Mt=s,z=n,n.status!==X&&((n.status==="starting"||n.status==="running")&&X!=="running"&&(a.verify.className="verify",a.verify.textContent="Round committed; seed hidden until the round ends."),X=String(n.status));let l=n.status==="running",i=n.status==="starting",d=l||i;a.bet.textContent=T(Number(n.bet??0)),a.potential.textContent=T(Number(n.potential??n.bet??0)),a.balance.textContent=n.balance===null||n.balance===void 0?"—":T(Number(n.balance)),a.error.textContent=n.error?String(n.error):"",a.minus.disabled=d,a.plus.disabled=d,a.primary.textContent=l?"CASH OUT":i?"STARTING…":"START",a.primary.disabled=i,a.primary.className="btn primary wide big",a.leave.textContent=l?"Forfeit round":"Leave table",l?(a.status.textContent="Rising — cash out before the crash.",a.status.className="note win-text"):i?(a.status.textContent="Starting the round…",a.status.className="note"):n.status==="cashed"?(a.status.textContent=`Cashed out at ${Number(n.multiplier??0).toFixed(2)}× for ${T(Number(n.payout??0))}.`,a.status.className="note win-text"):n.status==="crashed"?(a.status.textContent=`Crashed at ${Number(n.crash_point??n.multiplier??0).toFixed(2)}×. The bet is lost.`,a.status.className="note error-text"):n.status==="forfeit"?(a.status.textContent="Round forfeited.",a.status.className="note error-text"):(a.status.textContent="Press START to play.",a.status.className="note"),n.crash_point!==null&&n.crash_point!==void 0&&n.status==="crashed"&&(a.lastCrash.textContent=`Last crash: ${Number(n.crash_point).toFixed(2)}×`);let m=n.commit?String(n.commit):"";if(a.meta.textContent=m?`commit ${j(m,12)}`:"",a.meta.style.display=m?"":"none",a.verify.style.display=m?"":"none",n.seed&&m){let f=++Et,L=String(n.seed),w=Number(n.crash_point??0);se(L,m,w).then(([k,b])=>{if(f!==Et||!B)return;let y=k&&b;B.verify.className=`verify ${y?"ok":"bad"}`,B.verify.textContent=y?`Seed ${j(L,12)} · sha256 matches commit · crash point recomputed`:`VERIFICATION FAILED · seed ${j(L,12)} · commit ${j(m,12)}`})}else!d&&!m&&(a.verify.className="verify",a.verify.textContent="Waiting for a round commitment.");if($!==void 0&&(cancelAnimationFrame($),$=void 0),l){let f=()=>{if(!B||z?.status!=="running"){$=void 0;return}Ct(B,z,s),$=requestAnimationFrame(f)};$=requestAnimationFrame(f)}else Ct(a,n,s)}function ne(t,e){if(t.status==="running"){let n=Math.max(0,(e.now()-Number(t.started_at??0))/1e3),r=Math.min(1e3,Math.exp(at*n));return Math.max(r,Number(t.multiplier??1))}return t.status==="cashed"?Number(t.multiplier??1):t.status==="crashed"?Number(t.crash_point??t.multiplier??1):1}function Ct(t,e,n){let r=ne(e,n);t.number.textContent=`${r.toFixed(2)}×`;let s=t.number.nextElementSibling;s&&(s.textContent=e.status==="running"?"RUNNING":e.status==="cashed"?"CASHED OUT":e.status==="crashed"?"CRASHED":e.status==="starting"?"STARTING":"READY"),t.number.className=`crash-number ${e.status==="running"?"running":e.status==="cashed"?"cashed":e.status==="crashed"?"crashed":""}`,t.potential.textContent=T(Math.floor(Number(e.bet??0)*r)),oe(t.canvas,e,r,n)}function oe(t,e,n,r){let s=t.clientWidth||600,a=t.clientHeight||360,l=window.devicePixelRatio||1;(t.width!==Math.round(s*l)||t.height!==Math.round(a*l))&&(t.width=Math.round(s*l),t.height=Math.round(a*l));let i=t.getContext("2d");if(!i)return;i.setTransform(l,0,0,l,0,0),i.clearRect(0,0,s,a);let d=54,m=16,f=18,L=34,w=Math.max(1,s-d-m),k=Math.max(1,a-f-L),b=e.status==="running"?Math.max(.25,(r.now()-Number(e.started_at??0))/1e3):n>1?Math.log(n)/at:1,y=Math.max(5,b*1.08),S=Math.max(2,Math.ceil(n*1.15*2)/2),c=E=>d+E/y*w,p=E=>f+k-(E-1)/(S-1)*k;i.strokeStyle="#242e38",i.fillStyle="#8a98a6",i.font="11px ui-monospace, monospace",i.textAlign="left",i.textBaseline="middle",i.lineWidth=1;for(let E=0;E<=4;E+=1){let M=1+(S-1)*E/4,C=p(M);i.beginPath(),i.moveTo(d,C),i.lineTo(s-m,C),i.stroke(),i.fillText(`${M.toFixed(1)}×`,10,C)}for(let E=0;E<=4;E+=1){let M=y*E/4,C=c(M);i.beginPath(),i.moveTo(C,f),i.lineTo(C,f+k),i.strokeStyle="#1b232c",i.stroke(),i.fillStyle="#5b6773",i.textAlign="center",i.textBaseline="alphabetic",i.fillText(`${M.toFixed(0)}s`,C,a-12),i.textAlign="left",i.textBaseline="middle"}if(!["running","cashed","crashed"].includes(String(e.status))){i.fillStyle="#5b6773",i.textAlign="center",i.textBaseline="middle",i.font='13px "Open Sans", sans-serif',i.fillText("Press START to play",d+w/2,f+k/2);return}let h=e.status==="crashed"?"#e05a5a":e.status==="cashed"?"#4ec27b":"#e0b64a";i.beginPath();let u=180;for(let E=0;E<=u;E+=1){let M=b*E/u,C=Math.min(S,Math.exp(at*M)),H=c(M),A=p(C);E===0?i.moveTo(H,A):i.lineTo(H,A)}i.strokeStyle=h,i.lineWidth=2.4,i.stroke();let g=c(b),R=p(Math.min(S,n));i.beginPath(),i.arc(g,R,4.5,0,Math.PI*2),i.fillStyle=h,i.fill(),i.fillStyle=h,i.font="600 12px ui-monospace, monospace",i.fillText(`${n.toFixed(2)}×`,Math.min(g+8,s-70),Math.max(f+12,R-10))}async function se(t,e,n){let r=new Uint8Array(t.length/2);for(let f=0;ff.toString(16).padStart(2,"0")).join("")===e.toLowerCase(),i=0;for(let f=0;f<8;f+=1)i=i*256+r[f];i/=2**64;let d=Math.max(1,Math.min(1e3,(1-.01)/(1-i))),m=Math.abs(d-n)<1e-6;return[l,m]}function re(t){let e=t.details??{};switch(t.game){case"slots":return String(e.win_type??"spin");case"roulette":return`${e.number??"?"} ${e.color??""}`.trim();case"blackjack":return String(e.result??"");case"crash":{let n=String(e.result??""),r=e.crash_point;return r==null?n:`${n} @ ${Number(r).toFixed(2)}×`}default:return""}}function Ht(t,e){v(t);let n=e.records??[];if(n.length===0){let d=o("div","board");d.append(o("h2",void 0,"No plays yet"),o("p","muted","Your settled plays will appear here.")),t.append(d);return}let r=o("div","table-wrap"),s=o("table"),a=o("thead"),l=o("tr");for(let d of["When","Game","Bet","Won","Balance","Result"])l.append(o("th",void 0,d));a.append(l);let i=o("tbody");for(let d of n){let m=o("tr");m.append(o("td","mono",String(d.at??"").slice(0,16))),m.append(o("td","mono",String(d.game??"").toUpperCase())),m.append(o("td","num",T(Number(d.bet??0))));let f=Number(d.winnings??0);m.append(o("td",`num ${f>0?"pos":""}`,T(f))),m.append(o("td","num",T(Number(d.balance_after??0)))),m.append(o("td","muted",re(d))),i.append(m)}s.append(a,i),r.append(s),t.append(r)}var it=[0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26],ae=new Set([1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36]),Wt="#b0313a",It="#151b21",Ot="#106b45",At="#0d5c39",ct="#1f7d52",dt="#ecf7f0",ie="#e0b64a",le="#11171d",lt=null;function ut(t){return t===0?"green":ae.has(t)?"red":"black"}function ce(t,e){let r=Math.max(44,t*.058),s=Math.max(28,Math.min(38,e*.075)),a=t-28-r,l=a/12,i=(e-28-s*3)/3,d=14+r,m=14,f=m+i*3,L=f+s,w=L+s,k=[];for(let c=0;c<12;c+=1)for(let p=0;p<3;p+=1){let h=c*3+(3-p);k.push({x:d+c*l,y:m+p*i,w:l,h:i,target:{bet:"straight",number:h},label:String(h),kind:"number",number:h})}k.push({x:14,y:m,w:r,h:i*3,target:{bet:"straight",number:0},label:"0",kind:"zero",number:0});for(let c=0;c<3;c+=1)k.push({x:d+a/3*c,y:f,w:a/3,h:s,target:{bet:"dozen",index:c},label:["1st 12","2nd 12","3rd 12"][c],kind:"dozen"}),k.push({x:d+a/3*c,y:L,w:a/3,h:s,target:{bet:"column",index:2-c},label:"2:1",kind:"column"});[{kind:"low",label:"1–18"},{kind:"even",label:"EVEN"},{kind:"red",label:"RED"},{kind:"black",label:"BLACK"},{kind:"odd",label:"ODD"},{kind:"high",label:"19–36"}].forEach((c,p)=>{k.push({x:d+a/6*p,y:w,w:a/6,h:s,target:{bet:"outside",kind:c.kind},label:c.label,kind:"outside"})});let y=[],S=c=>{let p=k.find(h=>h.kind==="number"&&h.number===c);return p?{x:p.x+p.w/2,y:p.y+p.h/2}:null};for(let c=0;c<11;c+=1)for(let p=0;p<2;p+=1){let h=c*3+(3-p);y.push({x:d+(c+1)*l,y:m+(p+1)*i,radius:12,rank:0,target:{bet:"corner",numbers:[h,h-1,h+3,h+2]}})}for(let c=0;c<12;c+=1)for(let p=0;p<2;p+=1){let h=c*3+(3-p),u=S(h);u&&y.push({x:u.x,y:m+(p+1)*i,radius:10,rank:1,target:{bet:"split",a:h,b:h-1}})}for(let c=0;c<11;c+=1)for(let p=0;p<3;p+=1){let h=c*3+(3-p);y.push({x:d+(c+1)*l,y:m+p*i+i/2,radius:10,rank:1,target:{bet:"split",a:h,b:h+3}})}for(let c=0;c<3;c+=1)y.push({x:d,y:m+c*i+i/2,radius:10,rank:1,target:{bet:"split",a:0,b:3-c}});return{width:t,height:e,pad:14,cellW:l,cellH:i,zeroX:14,zeroW:r,gridX:d,gridY:m,gridW:a,dozensY:f,columnsY:L,outsideY:w,outsideH:s,zones:k,hotspots:y}}function Rt(t,e,n,r,s){t.beginPath(),t.rect(e,n,r,s),t.closePath()}function Bt(t,e){let n=t.clientWidth||900,r=t.clientHeight||500,s=window.devicePixelRatio||1;(t.width!==Math.round(n*s)||t.height!==Math.round(r*s))&&(t.width=Math.round(n*s),t.height=Math.round(r*s));let a=t.getContext("2d"),l=ce(n,r);if(!a)return l;a.setTransform(s,0,0,s,0,0),a.clearRect(0,0,n,r),a.fillStyle=At,Rt(a,l.pad,l.gridY,l.zeroW+l.gridW,l.cellH*3+l.outsideH*3),a.fill();for(let i of l.zones){let d=At;i.kind==="number"?d=ut(i.number)==="red"?Wt:It:i.kind==="zero"&&(d=Ot),a.fillStyle=d,a.strokeStyle=ct,a.lineWidth=1,Rt(a,i.x+.5,i.y+.5,i.w-1,i.h-1),a.fill(),a.stroke(),a.fillStyle=dt,a.textAlign="center",a.textBaseline="middle",i.kind==="number"||i.kind==="zero"?a.font=`500 ${Math.min(18,l.cellH*.16)}px "Open Sans", sans-serif`:a.font=`500 ${Math.min(12,l.outsideH*.4)}px "Open Sans", sans-serif`,i.label==="RED"&&(a.fillStyle="#e05a5a"),i.label==="BLACK"&&(a.fillStyle="#8a98a6"),a.fillText(i.label,i.x+i.w/2,i.y+i.h/2)}return ue(a,l,e),l}function Pt(t){return JSON.stringify(t)}function de(t,e){let n=Pt(e),r=t.zones.find(s=>Pt(s.target)===n);if(r)return{x:r.x+r.w/2,y:r.y+r.h/2};if(e?.bet==="split"||e?.bet==="corner"){let s=e.bet==="split"?[e.a,e.b]:e.numbers,a=t.zones.filter(l=>l.kind==="number"&&s.includes(l.number));if(a.length>0)return{x:a.reduce((l,i)=>l+i.x+i.w/2,0)/a.length,y:a.reduce((l,i)=>l+i.y+i.h/2,0)/a.length}}return null}function ue(t,e,n){let r=n.bets?.chips??[];for(let s of r){let a=de(e,s.target);if(!a)continue;let l=Math.max(12,Math.min(17,e.cellW*.28));t.beginPath(),t.arc(a.x,a.y,l,0,Math.PI*2),t.fillStyle=ie,t.fill(),t.strokeStyle="#7a5a12",t.lineWidth=2,t.stroke(),t.fillStyle="#221a05",t.textAlign="center",t.textBaseline="middle",t.font=`700 ${l>15?11:10}px "Hack", monospace`,t.fillText(String(s.amount),a.x,a.y+.5)}}function pe(t,e){let r=window.devicePixelRatio||1;t.width=Math.round(170*r),t.height=Math.round(170*r),t.style.width="170px",t.style.height="170px";let s=t.getContext("2d");if(!s)return;s.setTransform(r,0,0,r,0,0);let a=e.phase==="result"&&e.number!==null&&e.number!==void 0?Number(e.number):null,l=a===null?-1:it.indexOf(a),i=Math.PI*2/it.length,d=l<0?0:-l*i,m=performance.now(),f=650,L=k=>{s.clearRect(0,0,170,170),s.fillStyle=le,s.beginPath(),s.arc(85,85,78.2+6,0,Math.PI*2),s.fill(),it.forEach((p,h)=>{let u=-Math.PI/2+h*i+k;s.beginPath(),s.moveTo(85,85),s.arc(85,85,78.2,u-i/2,u+i/2),s.closePath(),s.fillStyle=ut(p)==="red"?Wt:ut(p)==="green"?Ot:It,s.fill(),s.strokeStyle=ct,s.lineWidth=.8,s.stroke()}),s.beginPath(),s.arc(85,85,49.3,0,Math.PI*2),s.fillStyle="#0a0e12",s.fill(),s.strokeStyle=ct,s.lineWidth=1,s.stroke(),s.beginPath(),s.moveTo(85,8),s.lineTo(80,18),s.lineTo(90,18),s.closePath(),s.fillStyle=dt,s.fill(),a!==null&&(s.fillStyle=dt,s.textAlign="center",s.textBaseline="middle",s.font='600 15px "Hack", monospace',s.fillText(String(a),85,85))},w=k=>{let b=Math.min(1,(k-m)/f),y=1-(1-b)**3;L(d*y),b<1&&requestAnimationFrame(w)};requestAnimationFrame(w)}function Dt(t,e,n,r){v(t),v(e);let s=n.phase==="spinning",a=o("canvas","roulette-canvas");t.append(a);let l=o("div","board-foot tight");if(l.append(o("span","label","Last")),n.phase==="result"&&n.number!==null&&n.number!==void 0){let u=o("span",n.winnings&&Number(n.winnings)>0?"win-text":void 0,`${n.number} ${n.color} · ${Number(n.winnings??0)>0?T(Number(n.winnings)):"no win"}`);l.append(u)}else l.append(o("span",void 0,"No spins yet"));l.append(o("span","note","Click to place a chip · right-click to take one back")),t.append(l);let d=Bt(a,n),m=(u,g)=>{let R=a.getBoundingClientRect(),E=u-R.left,M=g-R.top,C=null;for(let H of d.hotspots){let A=Math.hypot(E-H.x,M-H.y);A>H.radius||(!C||H.rank=0;H-=1){let A=d.zones[H];if(E>=A.x&&E<=A.x+A.w&&M>=A.y&&M<=A.y+A.h)return A}return null};a.addEventListener("click",u=>{if(s)return;let g=m(u.clientX,u.clientY);g&&r({PlaceBetAt:g.target})}),a.addEventListener("contextmenu",u=>{if(u.preventDefault(),s)return;let g=m(u.clientX,u.clientY);g&&r({RemoveBetAt:g.target})}),a.addEventListener("mousemove",u=>{let g=m(u.clientX,u.clientY);a.style.cursor=g&&!s?"pointer":"default"}),lt?.disconnect(),lt=new ResizeObserver(()=>{d=Bt(a,n)}),lt.observe(a),e.append(o("h2",void 0,"Roulette")),e.append(o("p","note","Pick numbers or colours, then spin."));let f=o("canvas","wheel-canvas");e.append(f),pe(f,n),e.append(o("div","label","Place your bets"));let L=(n.bets?.chips??[]).reduce((u,g)=>u+Number(g.amount??0),0);e.append(o("p","note",`${L} ${L===1?"chip":"chips"}`)),e.append(o("div","label","Chip"));let w=o("div","chip-row");for(let u of[10,25,50,100]){let g=o("button",`chip-btn ${Number(n.chip)===u?"active":""}`,String(u));g.dataset.chip=String(u),g.disabled=s,g.addEventListener("click",()=>r({SetChip:u})),w.append(g)}e.append(w),e.append(o("div","label","Bets"));let k=n.bets?.chips??[];if(k.length===0)e.append(o("p","note","No chips on the felt"));else for(let u of k){let g=o("div","stat");g.append(o("span","muted",me(u.target)),o("strong","mono",T(Number(u.amount??0)))),e.append(g)}let b=o("div","stat");b.append(o("span","muted","Total"),o("strong","mono",T(L))),e.append(b),n.error&&e.append(o("p","error-text",String(n.error)));let y=o("p","note");if(s)y.textContent="SPINNING…";else if(n.phase==="result"){let u=Number(n.winnings??0);y.textContent=u>0?`WON ${T(u)}`:"NO WIN",u>0&&y.classList.add("win-text")}else y.textContent=L>0?"Ready to spin.":"Place at least one chip.";e.append(y);let S=o("div","actions"),c=o("button","btn primary wide big",s?"SPINNING…":"SPIN");c.disabled=s||L===0,c.addEventListener("click",()=>{Date.now()-$t<600||($t=Date.now(),r("Spin"))});let p=o("button","btn wide","CLEAR");p.disabled=s||L===0,p.addEventListener("click",()=>r("ClearBets"));let h=o("button","btn ghost wide","Leave table");h.disabled=s,h.addEventListener("click",()=>r("Leave")),S.append(c,p,h),e.append(S)}var $t=0;function me(t){switch(t?.bet){case"straight":return String(t.number);case"split":return`${t.a}/${t.b}`;case"corner":return t.numbers.join("/");case"dozen":return["1st 12","2nd 12","3rd 12"][t.index]??"dozen";case"column":return`col ${Number(t.index)+1}`;case"outside":return String(t.kind??"");default:return""}}var pt=5,mt=3,F="CLOGDS",he=["top","middle","bottom","V","inverted V"],U=0,zt=0,W,K=null,Z=null;function fe(){U=Date.now()+900}function Ft(){W!==void 0&&(window.clearInterval(W),W=void 0),K=null,Z=null,U=0}function be(t){return t.phase==="spinning"||Date.now()0){let u=(n.win_lines??[]).map(g=>`${g} (${he[g-1]??"line"})`).join(" · ");m=`${n.win_type==="mega"?"MEGA WIN":n.win_type==="big"?"BIG WIN":"WIN"} ${T(h)}${u?` · ${u}`:""}`,d.textContent=u,d.classList.add("win-text")}else m="No win"}else s&&(m="Spinning…");t.append(d);let f=o("div","board-foot");if(f.append(o("span","label","Result"),o("span",void 0,m)),t.append(f),s){let h=0;W=window.setInterval(()=>{h+=1;for(let u=0;u=U&&K&&Z&&(window.clearInterval(W),W=void 0,ht(Z,e,K,r))},70)}e.append(o("h2",void 0,"Slots")),e.append(o("p","note","Match three or more symbols from the left."));let L=o("div","row"),w=o("button","btn small","−"),k=o("strong","mono",T(Number(n.bet??0))),b=o("button","btn small","+");w.disabled=s,b.disabled=s,w.addEventListener("click",()=>r({AdjustBet:-10})),b.addEventListener("click",()=>r({AdjustBet:10})),L.append(w,k,b),e.append(o("div","label","Bet"),L),n.error&&e.append(o("p","error-text",String(n.error)));let y=o("p","note");if(s)y.textContent="SPINNING…";else if(n.phase==="result"){let h=Number(n.winnings??0);y.textContent=h>0?`WON ${T(h)}`:"NO WIN",h>0&&y.classList.add("win-text")}else y.textContent="Press SPIN to play.";e.append(y);let S=o("div","actions"),c=o("button","btn primary wide big",s?"SPINNING…":"SPIN");c.disabled=s,c.addEventListener("click",()=>{Date.now()-zt<900||(zt=Date.now(),fe(),r("Spin"))});let p=o("button","btn ghost wide","Leave machine");p.disabled=s,p.addEventListener("click",()=>r("Leave")),S.append(c,p),e.append(S)}var ge=x("auth-screen"),ye=x("lobby-screen"),xe=x("game-screen"),ke=x("history-screen"),Vt=x("session-bar"),Te=x("account-name"),Le=x("account-balance"),ft=x("game-grid"),q=x("game-board"),J=x("game-side"),we=x("version-pill"),Yt=x("account-number"),Ee=x("lobby-count"),Se=x("history-body"),Ce=x("auth-form"),Gt=x("auth-user"),nt=x("auth-pass"),V=x("auth-error"),O=x("auth-submit"),Xt=x("auth-switch"),Me=x("auth-title"),Q=x("reconnect-overlay"),_t=x("reconnect-message"),jt=x("replaced-overlay"),N=null,I=null,et=null,_="login",bt=null,Kt=0,gt=0,Ut=null,Ne=new Map([["slots",10],["roulette",10],["blackjack",10],["crash",10]]),ve={slots:"Slots",roulette:"Roulette",blackjack:"Blackjack",crash:"Crash"},He={slots:"Spin the reels. Three or more matching symbols from the left win.",roulette:"Put chips on the table, then spin. Straight numbers pay the most.",blackjack:"Get closer to 21 than the dealer without going over.",crash:"Start the round, then cash out before the multiplier crashes."},Ae=location.pathname.includes("/play/")?location.pathname.slice(0,location.pathname.indexOf("/play/")):"",Re=`${location.protocol==="https:"?"wss":"ws"}://${location.host}${Ae}/ws`,tt=new URLSearchParams(location.search).get("ws"),Be=location.hostname==="127.0.0.1"||location.hostname==="localhost"||location.hostname==="::1",Pe=tt&&Be&&(tt.startsWith("ws://")||tt.startsWith("wss://"))?tt:Re,ot=new G(Pe,{onHello(t){Kt=t.time-Date.now(),I=t.user??null,typeof t.balance=="number"&&(et=t.balance),we.textContent=`v${t.version}`},onView(t){t.screen!==Ut&&(x("toasts").replaceChildren(),Ut=t.screen),N=t,t.screen!=="slots"&&Ft(),t.screen!=="crash"&&Nt(),typeof t.balance=="number"&&(et=t.balance),t.screen==="lobby"&&"user"in t&&(I=t.user??null,I?nt.value="":et=null),gt=0,Q.hidden=!0,qt(),I&&N.balance===null&&bt!==I&&(bt=I,ot.send("Info")),I||(bt=null)},onNotice(t){t.startsWith("Connected to:")||t.startsWith("Fingerprint:")||t.startsWith("User:")||t.startsWith("Account:")||t.startsWith("Balance:")||(st(t,yt(t)),t.startsWith("Account created")&&(Zt("login"),nt.value="",Gt.focus()),O.disabled=!1,O.textContent=_==="login"?"LOG IN":"CREATE ACCOUNT")},onError(t){st(t,"bad"),O.disabled=!1,O.textContent=_==="login"?"LOG IN":"CREATE ACCOUNT"},onReplaced(){jt.hidden=!1},onPong(){},onOpen(){Q.hidden=!0},onClosed(t){if(jt.hidden!==!1){if(!t){_t.textContent="The connection could not be restored. Reload the page to try again.",Q.hidden=!1;return}gt+=1,_t.textContent=gt>1?"Still trying to reach the game server…":"Trying to reach the game server…",Q.hidden=!1}}});function P(t){ot.send(t)}function $e(){return Date.now()+Kt}function Zt(t){_=t,Me.textContent=t==="login"?"Sign in":"Create account",O.textContent=t==="login"?"LOG IN":"CREATE ACCOUNT",Xt.textContent=t==="login"?"CREATE ACCOUNT":"BACK TO SIGN IN",nt.autocomplete=t==="login"?"current-password":"new-password",V.textContent=""}function Y(t){ge.hidden=t!=="auth",ye.hidden=t!=="lobby",xe.hidden=t!=="game",ke.hidden=t!=="history"}function We(t){Le.textContent=T(t??null)}function qt(){if(!N)return;let t=I;if(t?(Vt.hidden=!1,Te.textContent=String(t)):(Vt.hidden=!0,Yt.textContent="—"),We(et),!t){Y("auth"),V.textContent=N.login_error?String(N.login_error):"",N.screen==="lobby"&&N.connected===!1&&(V.textContent="The game server is not reachable yet. Retrying…");return}switch(N.screen){case"lobby":Y("lobby"),Ie(N);break;case"history":Y("history"),Ht(Se,N);break;case"slots":case"roulette":case"blackjack":case"crash":Y("game"),N.screen==="slots"?ht(q,J,N,P):N.screen==="roulette"?Dt(q,J,N,P):N.screen==="blackjack"?wt(q,J,N,P):vt(q,J,N,P,{now:$e});break;default:Y("auth")}}function Ie(t){Yt.textContent=t.account?String(t.account):"—";let e=["slots","roulette","blackjack","crash"],n=[...t.games??[]].sort((r,s)=>e.indexOf(r[0])-e.indexOf(s[0]));Ee.textContent=`${n.length} ${n.length===1?"game":"games"}`,ft.replaceChildren();for(let[r,s]of n){let a=o("article",`game-card ${r}`);a.append(o("h3",void 0,s||ve[r]||r)),a.append(o("p",void 0,He[r]??"Play a round."));let l=o("button","btn primary wide","PLAY");l.addEventListener("click",()=>{P({Play:{game:r,bet:Ne.get(r)??10}})}),a.append(l),ft.append(a)}n.length===0&&ft.append(o("p","muted","The server did not advertise any games."))}Xt.addEventListener("click",()=>Zt(_==="login"?"register":"login"));Ce.addEventListener("submit",async t=>{t.preventDefault();let e=Gt.value.trim(),n=nt.value;if(!e||!n){V.textContent="Enter a username and a password.";return}O.disabled=!0,O.textContent="Working…",V.textContent="";try{let r=await xt(n);P(_==="login"?{Login:{user:e,credential:r}}:{Register:{user:e,credential:r}})}catch{V.textContent="This browser cannot hash the password (needs a secure context).",O.disabled=!1,O.textContent=_==="login"?"Log in":"Create account"}});x("logout").addEventListener("click",()=>P("Logout"));x("show-history").addEventListener("click",()=>P({History:{limit:50}}));x("history-back").addEventListener("click",()=>P("ShowLobby"));x("reload-replaced").addEventListener("click",()=>location.reload());x("reload-reconnect").addEventListener("click",()=>location.reload());window.addEventListener("resize",()=>{window.clearTimeout(window.__resizeTimer),window.__resizeTimer=window.setTimeout(()=>{N&&qt()},140)});window.setInterval(()=>{I&&ot.ping()},25e3);ot.connect();})(); diff --git a/web/play/index.html b/web/play/index.html index 59a302b..7bebe50 100644 --- a/web/play/index.html +++ b/web/play/index.html @@ -4,7 +4,7 @@ Play — żagań.bet - + @@ -13,12 +13,13 @@
żagań.bet - Play credits · no real money + v5.0.0 + Slots · Roulette · Blackjack · Crash
@@ -26,12 +27,8 @@
diff --git a/web/play/src/blackjack.ts b/web/play/src/blackjack.ts index 49d46fa..3288244 100644 --- a/web/play/src/blackjack.ts +++ b/web/play/src/blackjack.ts @@ -24,12 +24,11 @@ function cardElement(card: string): HTMLElement { function handBlock(label: string, cards: string[], total: number): HTMLElement { const block = node("div", "hand"); - block.append(node("div", "label", label)); + const head = node("div", "hand-head"); + head.append(node("span", "label", label), node("strong", "total", String(total))); const row = node("div", "cards"); for (const card of cards) row.append(cardElement(card)); - const sum = node("div", "total"); - sum.append(document.createTextNode("Total "), node("strong", undefined, String(total))); - block.append(row, sum); + block.append(head, row); return block; } @@ -70,36 +69,31 @@ export function renderBlackjack( const done = hand?.phase === "done" || view.status === "done"; const canDeal = !hand || done; - board.append(node("h2", undefined, "Blackjack")); - board.append( - node("p", "note", "Six decks. Dealer stands on all 17. Blackjack pays 3:2."), - ); - + const table = node("div", "bj-table"); if (hand) { - board.append(handBlock("Dealer", hand.dealer ?? [], Number(hand.dealer_total ?? 0))); - board.append(handBlock("You", hand.player ?? [], Number(hand.player_total ?? 0))); + table.append(handBlock("DEALER", hand.dealer ?? [], Number(hand.dealer_total ?? 0))); + table.append(node("div", "bj-divider")); + table.append(handBlock("YOU", hand.player ?? [], Number(hand.player_total ?? 0))); } else { - const empty = node("div", "outcome"); - empty.textContent = "Press DEAL to start a hand."; - board.append(empty); + const empty = node("div", "empty-table", "Place a bet and deal a hand."); + table.append(empty); } + board.append(table); - if (done || (hand && !playerPhase)) { - const result = node("div", "outcome"); - result.textContent = outcome(view, hand); - if (String(hand?.result) === "win" || String(hand?.result) === "blackjack" || String(hand?.result) === "push") { - result.classList.add("win-text"); - } - board.append(result); - } + const foot = node("div", "board-foot"); + foot.append( + node("span", "label", "Hand"), + node("span", undefined, hand ? outcome(view, hand) : "Waiting"), + ); + board.append(foot); if (view.error) board.append(node("p", "error-text", String(view.error))); // Sidebar - side.append(node("div", "label", "Blackjack")); + side.append(node("h2", undefined, "Blackjack")); const bet = Number(hand?.bet ?? view.bet ?? 0); const balance = view.balance ?? view.hand?.balance; - side.append(node("p", "note", "Hit, stand or double. Forfeiting loses the reserved bet.")); + side.append(node("p", "note", "Get closer to 21 without going over.")); if (canDeal) { const betRow = node("div", "row"); @@ -122,6 +116,22 @@ export function renderBlackjack( side.append(stat); } + if (done || (hand && !playerPhase)) { + const resultLine = node("p", "note win-text"); + resultLine.textContent = `${String(hand?.result ?? "").toUpperCase()} ${money(Number(hand?.winnings ?? 0))}`; + if (!["win", "blackjack", "push"].includes(String(hand?.result))) { + resultLine.className = "note"; + } + side.append(resultLine); + } else if (playerPhase) { + const actionsText = (hand?.actions ?? []).includes("double") + ? "Hit, stand or double." + : "Hit or stand."; + side.append(node("p", "note", actionsText)); + } else if (!hand) { + side.append(node("p", "note", "Press DEAL to start a hand.")); + } + const actions = node("div", "actions"); if (playerPhase) { const actionsRow = node("div", "row wrap"); diff --git a/web/play/src/crash.ts b/web/play/src/crash.ts index a683dcd..0f18bd2 100644 --- a/web/play/src/crash.ts +++ b/web/play/src/crash.ts @@ -44,26 +44,22 @@ function build( sendCommand = send; clock = now; - board.append(node("h2", undefined, "Crash")); - board.append( - node("p", "note", "The multiplier rises from 1.00×. Cash out before it crashes."), - ); - const wrap = node("div", "crash-wrap"); const number = node("div", "crash-number", "1.00×"); + const phase = node("div", "label", "READY"); const meta = node("div", "crash-meta"); const canvas = node("canvas", "crash-canvas") as HTMLCanvasElement; const verify = node("div", "verify", "Waiting for a round commitment."); - wrap.append(number, meta, canvas, verify); + wrap.append(number, phase, meta, canvas, verify); board.append(wrap); - side.append(node("div", "label", "Crash")); - side.append(node("p", "note", "The server commits to a seed before the round. The seed is revealed when it ends.")); + side.append(node("h2", undefined, "Crash")); + side.append(node("p", "note", "Cash out before the multiplier crashes.")); const betRow = node("div", "row"); - const minus = node("button", "btn small", "−10") as HTMLButtonElement; + const minus = node("button", "btn small", "−") as HTMLButtonElement; const bet = node("strong", "mono", "—"); - const plus = node("button", "btn small", "+10") as HTMLButtonElement; + const plus = node("button", "btn small", "+") as HTMLButtonElement; minus.addEventListener("click", () => sendCommand?.({ AdjustBet: -10 })); plus.addEventListener("click", () => sendCommand?.({ AdjustBet: 10 })); betRow.append(minus, bet, plus); @@ -80,7 +76,7 @@ function build( side.append(row); } - const status = node("p", "note", "Ready."); + const status = node("p", "note", "Press START to play."); const lastCrash = node("p", "note", ""); const error = node("p", "error-text"); side.append(status, lastCrash, error); @@ -188,7 +184,7 @@ export function renderCrash( p.status.textContent = "Round forfeited."; p.status.className = "note error-text"; } else { - p.status.textContent = "Ready. Start a round when you want."; + p.status.textContent = "Press START to play."; p.status.className = "note"; } @@ -197,7 +193,9 @@ export function renderCrash( } const commit = view.commit ? String(view.commit) : ""; - p.meta.textContent = commit ? `commit ${shortHash(commit, 12)}` : "no commitment yet"; + p.meta.textContent = commit ? `commit ${shortHash(commit, 12)}` : ""; + p.meta.style.display = commit ? "" : "none"; + p.verify.style.display = commit ? "" : "none"; if (view.seed && commit) { const token = ++verifyToken; @@ -249,6 +247,19 @@ function currentMultiplier(view: View, now: Clock): number { function update(p: Parts, view: View, now: Clock): void { const multiplier = currentMultiplier(view, now); p.number.textContent = `${multiplier.toFixed(2)}×`; + const phase = p.number.nextElementSibling as HTMLElement | null; + if (phase) { + phase.textContent = + view.status === "running" + ? "RUNNING" + : view.status === "cashed" + ? "CASHED OUT" + : view.status === "crashed" + ? "CRASHED" + : view.status === "starting" + ? "STARTING" + : "READY"; + } p.number.className = `crash-number ${ view.status === "running" ? "running" @@ -296,6 +307,8 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no ctx.strokeStyle = "#242e38"; ctx.fillStyle = "#8a98a6"; ctx.font = "11px ui-monospace, monospace"; + ctx.textAlign = "left"; + ctx.textBaseline = "middle"; ctx.lineWidth = 1; for (let step = 0; step <= 4; step += 1) { const value = 1 + ((yMax - 1) * step) / 4; @@ -304,7 +317,7 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no ctx.moveTo(padL, py); ctx.lineTo(width - padR, py); ctx.stroke(); - ctx.fillText(`${value.toFixed(1)}×`, 6, py + 4); + ctx.fillText(`${value.toFixed(1)}×`, 10, py); } for (let step = 0; step <= 4; step += 1) { const seconds = (xMax * step) / 4; @@ -315,7 +328,20 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no ctx.strokeStyle = "#1b232c"; ctx.stroke(); ctx.fillStyle = "#5b6773"; - ctx.fillText(`${seconds.toFixed(0)}s`, px - 10, height - 12); + ctx.textAlign = "center"; + ctx.textBaseline = "alphabetic"; + ctx.fillText(`${seconds.toFixed(0)}s`, px, height - 12); + ctx.textAlign = "left"; + ctx.textBaseline = "middle"; + } + + if (!["running", "cashed", "crashed"].includes(String(view.status))) { + ctx.fillStyle = "#5b6773"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.font = '13px "Open Sans", sans-serif'; + ctx.fillText("Press START to play", padL + plotW / 2, padT + plotH / 2); + return; } const line = diff --git a/web/play/src/history.ts b/web/play/src/history.ts index 9e7a564..943c8b8 100644 --- a/web/play/src/history.ts +++ b/web/play/src/history.ts @@ -1,5 +1,5 @@ import type { View } from "./types"; -import { clear, formatTime, money, node, signedMoney } from "./dom"; +import { clear, money, node } from "./dom"; function summary(record: any): string { const details = record.details ?? {}; @@ -37,21 +37,20 @@ export function renderHistory(root: HTMLElement, view: View): void { const table = node("table"); const head = node("thead"); const headRow = node("tr"); - for (const label of ["Time", "Game", "Bet", "Result", "Net", "Balance"]) { + for (const label of ["When", "Game", "Bet", "Won", "Balance", "Result"]) { headRow.append(node("th", undefined, label)); } head.append(headRow); const body = node("tbody"); for (const record of records) { const row = node("tr"); - row.append(node("td", "mono", formatTime(String(record.at ?? "")))); - row.append(node("td", undefined, String(record.game ?? ""))); + row.append(node("td", "mono", String(record.at ?? "").slice(0, 16))); + row.append(node("td", "mono", String(record.game ?? "").toUpperCase())); row.append(node("td", "num", money(Number(record.bet ?? 0)))); - row.append(node("td", "muted", summary(record))); - const net = Number(record.winnings ?? 0) - Number(record.bet ?? 0); - const netCell = node("td", `num ${net > 0 ? "pos" : net < 0 ? "neg" : ""}`, net === 0 ? "0 Kr" : signedMoney(net)); - row.append(netCell); + const winnings = Number(record.winnings ?? 0); + row.append(node("td", `num ${winnings > 0 ? "pos" : ""}`, money(winnings))); row.append(node("td", "num", money(Number(record.balance_after ?? 0)))); + row.append(node("td", "muted", summary(record))); body.append(row); } table.append(head, body); diff --git a/web/play/src/main.ts b/web/play/src/main.ts index 690d827..2ca4ab5 100644 --- a/web/play/src/main.ts +++ b/web/play/src/main.ts @@ -17,17 +17,18 @@ const accountBalance = byId("account-balance"); const gameGrid = byId("game-grid"); const gameBoard = byId("game-board"); const gameSide = byId("game-side"); -const gameTitle = byId("game-title"); -const gameBadge = byId("game-badge"); -const lobbyAccount = byId("lobby-account"); +const versionPill = byId("version-pill"); +const accountNumber = byId("account-number"); +const lobbyCount = byId("lobby-count"); + const historyBody = byId("history-body"); const authForm = byId("auth-form"); const authUser = byId("auth-user"); const authPass = byId("auth-pass"); const authError = byId("auth-error"); const authSubmit = byId("auth-submit"); -const tabLogin = byId("tab-login"); -const tabRegister = byId("tab-register"); +const authSwitch = byId("auth-switch"); +const authTitle = byId("auth-title"); const reconnectOverlay = byId("reconnect-overlay"); const reconnectMessage = byId("reconnect-message"); const replacedOverlay = byId("replaced-overlay"); @@ -39,6 +40,7 @@ let authMode: "login" | "register" = "login"; let infoFor: string | null = null; let serverOffset = 0; let reconnectAttempts = 0; +let lastScreen: string | null = null; const bets = new Map([ ["slots", 10], ["roulette", 10], @@ -54,10 +56,10 @@ const titles: Record = { }; const descriptions: Record = { - slots: "Five reels, five paylines. Match symbols from the left.", - roulette: "European single-zero wheel with inside and outside bets.", - blackjack: "Six-deck shoe. Blackjack pays 3:2.", - crash: "A rising multiplier. Cash out before it crashes.", + slots: "Spin the reels. Three or more matching symbols from the left win.", + roulette: "Put chips on the table, then spin. Straight numbers pay the most.", + blackjack: "Get closer to 21 than the dealer without going over.", + crash: "Start the round, then cash out before the multiplier crashes.", }; const basePath = location.pathname.includes("/play/") @@ -83,9 +85,13 @@ const gateway = new Gateway(wsUrl, { serverOffset = hello.time - Date.now(); currentUser = hello.user ?? null; if (typeof hello.balance === "number") lastBalance = hello.balance; - gameBadge.textContent = `v${hello.version}`; + versionPill.textContent = `v${hello.version}`; }, onView(next) { + if (next.screen !== lastScreen) { + byId("toasts").replaceChildren(); + lastScreen = next.screen; + } view = next; if (next.screen !== "slots") stopSlotsAnimation(); if (next.screen !== "crash") stopCrashAnimation(); @@ -124,12 +130,12 @@ const gateway = new Gateway(wsUrl, { authUser.focus(); } authSubmit.disabled = false; - authSubmit.textContent = authMode === "login" ? "Log in" : "Create account"; + authSubmit.textContent = authMode === "login" ? "LOG IN" : "CREATE ACCOUNT"; }, onError(text) { toast(text, "bad"); authSubmit.disabled = false; - authSubmit.textContent = authMode === "login" ? "Log in" : "Create account"; + authSubmit.textContent = authMode === "login" ? "LOG IN" : "CREATE ACCOUNT"; }, onReplaced() { replacedOverlay.hidden = false; @@ -166,9 +172,9 @@ function serverNow(): number { function setAuthMode(mode: "login" | "register"): void { authMode = mode; - tabLogin.classList.toggle("active", mode === "login"); - tabRegister.classList.toggle("active", mode === "register"); - authSubmit.textContent = mode === "login" ? "Log in" : "Create account"; + authTitle.textContent = mode === "login" ? "Sign in" : "Create account"; + authSubmit.textContent = mode === "login" ? "LOG IN" : "CREATE ACCOUNT"; + authSwitch.textContent = mode === "login" ? "CREATE ACCOUNT" : "BACK TO SIGN IN"; authPass.autocomplete = mode === "login" ? "current-password" : "new-password"; authError.textContent = ""; } @@ -192,6 +198,7 @@ function render(): void { accountName.textContent = String(user); } else { sessionBar.hidden = true; + accountNumber.textContent = "—"; } setBalance(lastBalance); @@ -219,8 +226,6 @@ function render(): void { case "blackjack": case "crash": show("game"); - gameTitle.textContent = titles[view.screen] ?? view.screen; - gameBadge.textContent = badge(view); if (view.screen === "slots") renderSlots(gameBoard, gameSide, view, send); else if (view.screen === "roulette") renderRoulette(gameBoard, gameSide, view, send); else if (view.screen === "blackjack") renderBlackjack(gameBoard, gameSide, view, send); @@ -231,47 +236,23 @@ function render(): void { } } -function badge(view: View): string { - if (view.screen === "crash") return String(view.status ?? ""); - if (view.screen === "blackjack") return String(view.status ?? ""); - if (view.screen === "slots") return String(view.phase ?? ""); - if (view.screen === "roulette") return String(view.phase ?? ""); - return ""; -} - function renderLobby(lobby: View): void { - lobbyAccount.textContent = lobby.account ? `Account ${lobby.account}` : ""; + accountNumber.textContent = lobby.account ? String(lobby.account) : "—"; + const order = ["slots", "roulette", "blackjack", "crash"]; + const list: [string, string][] = [...(lobby.games ?? [])].sort( + (a, b) => order.indexOf(a[0]) - order.indexOf(b[0]), + ); + lobbyCount.textContent = `${list.length} ${list.length === 1 ? "game" : "games"}`; gameGrid.replaceChildren(); - const list: [string, string][] = lobby.games ?? []; for (const [id, name] of list) { const card = node("article", `game-card ${id}`); card.append(node("h3", undefined, name || titles[id] || id)); card.append(node("p", undefined, descriptions[id] ?? "Play a round.")); - - const row = node("div", "row wrap"); - const label = node("label", "field"); - label.style.flex = "1"; - label.append(node("span", "label", "Bet")); - const input = node("input", "input bet-input") as HTMLInputElement; - input.type = "number"; - input.min = "1"; - input.step = "10"; - input.value = String(bets.get(id) ?? 10); - input.addEventListener("change", () => { - const value = Math.max(1, Math.floor(Number(input.value) || 1)); - input.value = String(value); - bets.set(id, value); - }); - label.append(input); - - const play = node("button", "btn primary", id === "roulette" ? "Open table" : "Play"); + const play = node("button", "btn primary wide", "PLAY"); play.addEventListener("click", () => { - const bet = Math.max(1, Math.floor(Number(input.value) || 1)); - bets.set(id, bet); - send({ Play: { game: id, bet } }); + send({ Play: { game: id, bet: bets.get(id) ?? 10 } }); }); - row.append(label, play); - card.append(row); + card.append(play); gameGrid.append(card); } @@ -280,9 +261,10 @@ function renderLobby(lobby: View): void { } } -// Auth tabs and form ------------------------------------------------------- -tabLogin.addEventListener("click", () => setAuthMode("login")); -tabRegister.addEventListener("click", () => setAuthMode("register")); +// Auth mode and form ------------------------------------------------------- +authSwitch.addEventListener("click", () => + setAuthMode(authMode === "login" ? "register" : "login"), +); authForm.addEventListener("submit", async (event) => { event.preventDefault(); @@ -312,16 +294,7 @@ authForm.addEventListener("submit", async (event) => { // Chrome and navigation ---------------------------------------------------- byId("logout").addEventListener("click", () => send("Logout")); byId("show-history").addEventListener("click", () => send({ History: { limit: 50 } })); -byId("refresh-lobby").addEventListener("click", () => send("Info")); byId("history-back").addEventListener("click", () => send("ShowLobby")); -byId("leave-game").addEventListener("click", () => { - if (!view) return; - const live = - (view.screen === "blackjack" && view.status === "player") || - (view.screen === "crash" && view.status === "running"); - if (live && !window.confirm("Leaving now forfeits the active bet. Continue?")) return; - send("Leave"); -}); byId("reload-replaced").addEventListener("click", () => location.reload()); byId("reload-reconnect").addEventListener("click", () => location.reload()); diff --git a/web/play/src/roulette.ts b/web/play/src/roulette.ts index a42686a..0493d04 100644 --- a/web/play/src/roulette.ts +++ b/web/play/src/roulette.ts @@ -20,12 +20,10 @@ type Hotspot = { rank: number; }; -let observer: ResizeObserver | null = null; -let lastSpin = 0; - type Layout = { width: number; height: number; + pad: number; cellW: number; cellH: number; zeroX: number; @@ -33,42 +31,50 @@ type Layout = { gridX: number; gridY: number; gridW: number; - columnX: number; dozensY: number; + columnsY: number; outsideY: number; outsideH: number; zones: Zone[]; hotspots: Hotspot[]; }; +const WHEEL = [ + 0, 32, 15, 19, 4, 21, 2, 25, 17, 34, 6, 27, 13, 36, 11, 30, 8, 23, 10, 5, + 24, 16, 33, 1, 20, 14, 31, 9, 22, 18, 29, 7, 28, 12, 35, 3, 26, +]; +const RED_NUMBERS = new Set([ + 1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36, +]); + const RED = "#b0313a"; const BLACK = "#151b21"; const ZERO = "#106b45"; const FELT = "#0d5c39"; -const FELT_DARK = "#09472c"; const FELT_LINE = "#1f7d52"; const TEXT = "#ecf7f0"; const GOLD = "#e0b64a"; +const SURFACE = "#11171d"; -function colorOf(number: number): string { +let observer: ResizeObserver | null = null; + +function colorOf(number: number): "red" | "black" | "green" { if (number === 0) return "green"; - const reds = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36]; - return reds.includes(number) ? "red" : "black"; + return RED_NUMBERS.has(number) ? "red" : "black"; } function layout(width: number, height: number): Layout { const pad = 14; - const zeroW = Math.max(38, width * 0.055); - const columnW = Math.max(34, width * 0.05); - const outsideH = Math.max(30, height * 0.07); - const gap = 6; - const gridW = width - pad * 2 - zeroW - columnW; + const zeroW = Math.max(44, width * 0.058); + const outsideH = Math.max(28, Math.min(38, height * 0.075)); + const gridW = width - pad * 2 - zeroW; const cellW = gridW / 12; - const cellH = (height - pad * 2 - outsideH * 2 - gap * 2) / 3; + const cellH = (height - pad * 2 - outsideH * 3) / 3; const gridX = pad + zeroW; const gridY = pad; - const dozensY = gridY + cellH * 3 + gap; - const outsideY = dozensY + outsideH + gap; + const dozensY = gridY + cellH * 3; + const columnsY = dozensY + outsideH; + const outsideY = columnsY + outsideH; const zones: Zone[] = []; for (let column = 0; column < 12; column += 1) { @@ -98,19 +104,6 @@ function layout(width: number, height: number): Layout { number: 0, }); - for (let top = 0; top < 3; top += 1) { - const index = 2 - top; - zones.push({ - x: gridX + gridW, - y: gridY + top * cellH, - w: columnW, - h: cellH, - target: { bet: "column", index }, - label: "2:1", - kind: "column", - }); - } - for (let index = 0; index < 3; index += 1) { zones.push({ x: gridX + (gridW / 3) * index, @@ -121,6 +114,15 @@ function layout(width: number, height: number): Layout { label: ["1st 12", "2nd 12", "3rd 12"][index], kind: "dozen", }); + zones.push({ + x: gridX + (gridW / 3) * index, + y: columnsY, + w: gridW / 3, + h: outsideH, + target: { bet: "column", index: 2 - index }, + label: "2:1", + kind: "column", + }); } const outside = [ @@ -143,8 +145,6 @@ function layout(width: number, height: number): Layout { }); }); - // Split and corner hotspots sit on the lines between cells, like the real - // felt (and the desktop fine lattice). Corners rank ahead of splits. const hotspots: Hotspot[] = []; const cellCenter = (number: number) => { const cell = zones.find((zone) => zone.kind === "number" && zone.number === number); @@ -193,19 +193,19 @@ function layout(width: number, height: number): Layout { } for (let row = 0; row < 3; row += 1) { - const number = 3 - row; hotspots.push({ x: gridX, y: gridY + row * cellH + cellH / 2, radius: 10, rank: 1, - target: { bet: "split", a: 0, b: number }, + target: { bet: "split", a: 0, b: 3 - row }, }); } return { width, height, + pad, cellW, cellH, zeroX: pad, @@ -213,8 +213,8 @@ function layout(width: number, height: number): Layout { gridX, gridY, gridW, - columnX: gridX + gridW, dozensY, + columnsY, outsideY, outsideH, zones, @@ -222,27 +222,21 @@ function layout(width: number, height: number): Layout { }; } -function roundRect( +function rect( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, - radius: number, ): void { - const r = Math.min(radius, w / 2, h / 2); ctx.beginPath(); - ctx.moveTo(x + r, y); - ctx.arcTo(x + w, y, x + w, y + h, r); - ctx.arcTo(x + w, y + h, x, y + h, r); - ctx.arcTo(x, y + h, x, y, r); - ctx.arcTo(x, y, x + w, y, r); + ctx.rect(x, y, w, h); ctx.closePath(); } -function draw(canvas: HTMLCanvasElement, view: View): Layout { - const width = canvas.clientWidth || 800; - const height = canvas.clientHeight || 540; +function drawTable(canvas: HTMLCanvasElement, view: View): Layout { + const width = canvas.clientWidth || 900; + const height = canvas.clientHeight || 500; const dpr = window.devicePixelRatio || 1; if (canvas.width !== Math.round(width * dpr) || canvas.height !== Math.round(height * dpr)) { canvas.width = Math.round(width * dpr); @@ -253,18 +247,23 @@ function draw(canvas: HTMLCanvasElement, view: View): Layout { if (!ctx) return map; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, width, height); - ctx.fillStyle = FELT_DARK; - roundRect(ctx, 0, 0, width, height, 10); + + // The whole felt is green; cells sit on it with thin lines, like the desktop. + ctx.fillStyle = FELT; + rect(ctx, map.pad, map.gridY, map.zeroW + map.gridW, map.cellH * 3 + map.outsideH * 3); ctx.fill(); for (const zone of map.zones) { let fill = FELT; - if (zone.kind === "number") fill = zone.number === 0 ? ZERO : colorOf(zone.number!) === "red" ? RED : BLACK; - else if (zone.kind === "zero") fill = ZERO; + if (zone.kind === "number") { + fill = colorOf(zone.number!) === "red" ? RED : BLACK; + } else if (zone.kind === "zero") { + fill = ZERO; + } ctx.fillStyle = fill; ctx.strokeStyle = FELT_LINE; ctx.lineWidth = 1; - roundRect(ctx, zone.x + 1, zone.y + 1, zone.w - 2, zone.h - 2, 3); + rect(ctx, zone.x + 0.5, zone.y + 0.5, zone.w - 1, zone.h - 1); ctx.fill(); ctx.stroke(); @@ -272,10 +271,12 @@ function draw(canvas: HTMLCanvasElement, view: View): Layout { ctx.textAlign = "center"; ctx.textBaseline = "middle"; if (zone.kind === "number" || zone.kind === "zero") { - ctx.font = `700 ${Math.min(24, map.cellH * 0.3)}px ui-monospace, monospace`; + ctx.font = `500 ${Math.min(18, map.cellH * 0.16)}px "Open Sans", sans-serif`; } else { - ctx.font = `600 ${Math.min(12, map.outsideH * 0.4)}px ui-monospace, monospace`; + ctx.font = `500 ${Math.min(12, map.outsideH * 0.4)}px "Open Sans", sans-serif`; } + if (zone.label === "RED") ctx.fillStyle = "#e05a5a"; + if (zone.label === "BLACK") ctx.fillStyle = "#8a98a6"; ctx.fillText(zone.label, zone.x + zone.w / 2, zone.y + zone.h / 2); } @@ -292,12 +293,10 @@ function centerFor(layout: Layout, target: any): { x: number; y: number } | null const exact = layout.zones.find((zone) => targetKey(zone.target) === key); if (exact) return { x: exact.x + exact.w / 2, y: exact.y + exact.h / 2 }; - // Split and corner bets are reachable from the desktop's fine lattice. A - // browser session can still show them: average the covered number cells. if (target?.bet === "split" || target?.bet === "corner") { const numbers: number[] = target.bet === "split" ? [target.a, target.b] : target.numbers; const cells = layout.zones.filter( - (zone) => (zone.kind === "number" || zone.kind === "zero") && numbers.includes(zone.number!), + (zone) => zone.kind === "number" && numbers.includes(zone.number!), ); if (cells.length > 0) { return { @@ -314,7 +313,7 @@ function drawChips(ctx: CanvasRenderingContext2D, map: Layout, view: View): void for (const chip of chips) { const center = centerFor(map, chip.target); if (!center) continue; - const radius = Math.max(12, Math.min(18, map.cellW * 0.26)); + const radius = Math.max(12, Math.min(17, map.cellW * 0.28)); ctx.beginPath(); ctx.arc(center.x, center.y, radius, 0, Math.PI * 2); ctx.fillStyle = GOLD; @@ -325,11 +324,91 @@ function drawChips(ctx: CanvasRenderingContext2D, map: Layout, view: View): void ctx.fillStyle = "#221a05"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; - ctx.font = `700 ${radius > 15 ? 11 : 10}px ui-monospace, monospace`; + ctx.font = `700 ${radius > 15 ? 11 : 10}px "Hack", monospace`; ctx.fillText(String(chip.amount), center.x, center.y + 0.5); } } +function drawWheel(canvas: HTMLCanvasElement, view: View): void { + const size = 170; + const dpr = window.devicePixelRatio || 1; + canvas.width = Math.round(size * dpr); + canvas.height = Math.round(size * dpr); + canvas.style.width = `${size}px`; + canvas.style.height = `${size}px`; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + + const result = view.phase === "result" && view.number !== null && view.number !== undefined + ? Number(view.number) + : null; + const targetIndex = result === null ? -1 : WHEEL.indexOf(result); + const step = (Math.PI * 2) / WHEEL.length; + const targetRotation = targetIndex < 0 ? 0 : -targetIndex * step; + const start = performance.now(); + const duration = 650; + + const paint = (rotation: number) => { + const cx = size / 2; + const cy = size / 2; + const outer = size * 0.46; + const inner = size * 0.29; + ctx.clearRect(0, 0, size, size); + + ctx.fillStyle = SURFACE; + ctx.beginPath(); + ctx.arc(cx, cy, outer + 6, 0, Math.PI * 2); + ctx.fill(); + + WHEEL.forEach((number, index) => { + const angle = -Math.PI / 2 + index * step + rotation; + ctx.beginPath(); + ctx.moveTo(cx, cy); + ctx.arc(cx, cy, outer, angle - step / 2, angle + step / 2); + ctx.closePath(); + ctx.fillStyle = colorOf(number) === "red" ? RED : colorOf(number) === "green" ? ZERO : BLACK; + ctx.fill(); + ctx.strokeStyle = FELT_LINE; + ctx.lineWidth = 0.8; + ctx.stroke(); + }); + + ctx.beginPath(); + ctx.arc(cx, cy, inner, 0, Math.PI * 2); + ctx.fillStyle = "#0a0e12"; + ctx.fill(); + ctx.strokeStyle = FELT_LINE; + ctx.lineWidth = 1; + ctx.stroke(); + + // Pointer at twelve o'clock. + ctx.beginPath(); + ctx.moveTo(cx, 8); + ctx.lineTo(cx - 5, 18); + ctx.lineTo(cx + 5, 18); + ctx.closePath(); + ctx.fillStyle = TEXT; + ctx.fill(); + + if (result !== null) { + ctx.fillStyle = TEXT; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.font = '600 15px "Hack", monospace'; + ctx.fillText(String(result), cx, cy); + } + }; + + const animate = (now: number) => { + const progress = Math.min(1, (now - start) / duration); + const eased = 1 - (1 - progress) ** 3; + paint(targetRotation * eased); + if (progress < 1) requestAnimationFrame(animate); + }; + requestAnimationFrame(animate); +} + export function renderRoulette( board: HTMLElement, side: HTMLElement, @@ -340,43 +419,44 @@ export function renderRoulette( clear(side); const spinning = view.phase === "spinning"; - board.append(node("h2", undefined, "Roulette")); - board.append( - node( - "p", - "note", - "European single-zero wheel. Click a number, line or corner to add a chip; right-click takes one back.", - ), - ); - - const wrap = node("div", "roulette-wrap"); const canvas = node("canvas", "roulette-canvas") as HTMLCanvasElement; - wrap.append(canvas); + board.append(canvas); + const result = node("div", "board-foot tight"); + result.append(node("span", "label", "Last")); if (view.phase === "result" && view.number !== null && view.number !== undefined) { - const result = node("div", `wheel-result ${view.color ?? ""}`); - result.append(node("div", "label", "Result")); - result.append(node("div", "num", String(view.number))); - const winnings = Number(view.winnings ?? 0); - result.append(node("div", "note", winnings > 0 ? `Won ${money(winnings)}` : "No win")); - wrap.append(result); + const value = node( + "span", + view.winnings && Number(view.winnings) > 0 ? "win-text" : undefined, + `${view.number} ${view.color} · ${Number(view.winnings ?? 0) > 0 ? money(Number(view.winnings)) : "no win"}`, + ); + result.append(value); + } else { + result.append(node("span", undefined, "No spins yet")); } - board.append(wrap); + result.append( + node("span", "note", "Click to place a chip · right-click to take one back"), + ); + board.append(result); - // The canvas must be in the document before its client size is read. - const map = draw(canvas, view); + const map = drawTable(canvas, view); let current = map; const hit = (clientX: number, clientY: number): Zone | null => { - const rect = canvas.getBoundingClientRect(); - const x = clientX - rect.left; - const y = clientY - rect.top; + const bounds = canvas.getBoundingClientRect(); + const x = clientX - bounds.left; + const y = clientY - bounds.top; let best: Hotspot | null = null; for (const hotspot of current.hotspots) { const distance = Math.hypot(x - hotspot.x, y - hotspot.y); if (distance > hotspot.radius) continue; - if (!best || hotspot.rank < best.rank || (hotspot.rank === best.rank && distance < Math.hypot(x - best.x, y - best.y))) { + if ( + !best || + hotspot.rank < best.rank || + (hotspot.rank === best.rank && + distance < Math.hypot(x - best.x, y - best.y)) + ) { best = hotspot; } } @@ -418,66 +498,105 @@ export function renderRoulette( }); observer?.disconnect(); observer = new ResizeObserver(() => { - current = draw(canvas, view); + current = drawTable(canvas, view); }); observer.observe(canvas); // Sidebar - side.append(node("div", "label", "Roulette")); - side.append(node("p", "note", "Chips sit on the felt. The total is reserved when you spin.")); + side.append(node("h2", undefined, "Roulette")); + side.append(node("p", "note", "Pick numbers or colours, then spin.")); + + const wheel = node("canvas", "wheel-canvas") as HTMLCanvasElement; + side.append(wheel); + drawWheel(wheel, view); + + side.append(node("div", "label", "Place your bets")); + const chips = (view.bets?.chips ?? []).reduce( + (sum: number, chip: any) => sum + Number(chip.amount ?? 0), + 0, + ); + side.append(node("p", "note", `${chips} ${chips === 1 ? "chip" : "chips"}`)); side.append(node("div", "label", "Chip")); const chipRow = node("div", "chip-row"); - for (const value of [10, 25, 50, 100, 500]) { - const button = node("button", `chip-btn ${Number(view.chip) === value ? "active" : ""}`, String(value)); + for (const value of [10, 25, 50, 100]) { + const button = node( + "button", + `chip-btn ${Number(view.chip) === value ? "active" : ""}`, + String(value), + ) as HTMLButtonElement; + button.dataset.chip = String(value); button.disabled = spinning; button.addEventListener("click", () => send({ SetChip: value })); chipRow.append(button); } side.append(chipRow); - const total = (view.bets?.chips ?? []).reduce( - (sum: number, chip: any) => sum + Number(chip.amount ?? 0), - 0, - ); - const totalRow = node("div", "stat"); - totalRow.append(node("span", "muted", "On the felt"), node("strong", "mono", money(total))); - side.append(totalRow); - - if (view.balance !== null && view.balance !== undefined) { - const balanceRow = node("div", "stat"); - balanceRow.append(node("span", "muted", "Balance"), node("strong", "mono", money(Number(view.balance)))); - side.append(balanceRow); + side.append(node("div", "label", "Bets")); + const bets: any[] = view.bets?.chips ?? []; + if (bets.length === 0) { + side.append(node("p", "note", "No chips on the felt")); + } else { + for (const chip of bets) { + const row = node("div", "stat"); + row.append( + node("span", "muted", chipLabel(chip.target)), + node("strong", "mono", money(Number(chip.amount ?? 0))), + ); + side.append(row); + } } + const total = node("div", "stat"); + total.append(node("span", "muted", "Total"), node("strong", "mono", money(chips))); + side.append(total); + if (view.error) side.append(node("p", "error-text", String(view.error))); const status = node("p", "note"); - if (spinning) status.textContent = "Spinning…"; + if (spinning) status.textContent = "SPINNING…"; else if (view.phase === "result") { const winnings = Number(view.winnings ?? 0); - status.textContent = `${view.number} ${view.color} · ${winnings > 0 ? `won ${money(winnings)}` : "no win"}`; - status.className = winnings > 0 ? "note win-text" : "note"; - } else status.textContent = total > 0 ? "Ready to spin." : "Place at least one chip."; + status.textContent = winnings > 0 ? `WON ${money(winnings)}` : "NO WIN"; + if (winnings > 0) status.classList.add("win-text"); + } else status.textContent = chips > 0 ? "Ready to spin." : "Place at least one chip."; side.append(status); const actions = node("div", "actions"); - const spin = node("button", "btn primary wide big", spinning ? "SPINNING…" : "SPIN WHEEL"); - spin.disabled = spinning || total === 0; + const spin = node("button", "btn primary wide big", spinning ? "SPINNING…" : "SPIN"); + spin.disabled = spinning || chips === 0; spin.addEventListener("click", () => { if (Date.now() - lastSpin < 600) return; lastSpin = Date.now(); send("Spin"); }); - const clearBets = node("button", "btn wide", "Clear bets"); - clearBets.disabled = spinning || total === 0; + const clearBets = node("button", "btn wide", "CLEAR"); + clearBets.disabled = spinning || chips === 0; clearBets.addEventListener("click", () => send("ClearBets")); const leave = node("button", "btn ghost wide", "Leave table"); leave.disabled = spinning; - leave.addEventListener("click", () => { - if (spinning) return; - send("Leave"); - }); + leave.addEventListener("click", () => send("Leave")); actions.append(spin, clearBets, leave); side.append(actions); } + +let lastSpin = 0; + +function chipLabel(target: any): string { + switch (target?.bet) { + case "straight": + return String(target.number); + case "split": + return `${target.a}/${target.b}`; + case "corner": + return target.numbers.join("/"); + case "dozen": + return ["1st 12", "2nd 12", "3rd 12"][target.index] ?? "dozen"; + case "column": + return `col ${Number(target.index) + 1}`; + case "outside": + return String(target.kind ?? ""); + default: + return ""; + } +} diff --git a/web/play/src/slots.ts b/web/play/src/slots.ts index 8b821cf..cfc9070 100644 --- a/web/play/src/slots.ts +++ b/web/play/src/slots.ts @@ -49,10 +49,6 @@ export function renderSlots( clear(board); clear(side); - const title = node("h2", undefined, "Slots"); - const note = node("p", "note", "Match three or more symbols from the left. Five paylines."); - board.append(title, note); - const reels = node("div", "reels"); const tiles: HTMLElement[] = []; const flat = Array.isArray(view.reels) @@ -81,24 +77,28 @@ export function renderSlots( board.append(reels); const lines = node("div", "win-lines"); + let resultText = "Ready"; if (!active && view.phase === "result") { const winnings = Number(view.winnings ?? 0); if (winnings > 0) { const names = (view.win_lines ?? []) .map((line: number) => `${line} (${LINE_NAMES[line - 1] ?? "line"})`) .join(" · "); - lines.textContent = `${view.win_type === "mega" ? "MEGA WIN" : view.win_type === "big" ? "BIG WIN" : "WIN"} ${money(winnings)}${names ? ` · ${names}` : ""}`; + resultText = `${view.win_type === "mega" ? "MEGA WIN" : view.win_type === "big" ? "BIG WIN" : "WIN"} ${money(winnings)}${names ? ` · ${names}` : ""}`; + lines.textContent = names; lines.classList.add("win-text"); } else { - lines.textContent = "No win — spin again."; + resultText = "No win"; } } else if (active) { - lines.textContent = "Spinning…"; - } else { - lines.textContent = "Pick a bet and spin."; + resultText = "Spinning…"; } board.append(lines); + const foot = node("div", "board-foot"); + foot.append(node("span", "label", "Result"), node("span", undefined, resultText)); + board.append(foot); + if (active) { let tick = 0; animation = window.setInterval(() => { @@ -117,13 +117,13 @@ export function renderSlots( } // Sidebar - side.append(node("div", "label", "Slots")); - side.append(node("p", "note", "5 reels × 3 rows, 5 paylines.")); + side.append(node("h2", undefined, "Slots")); + side.append(node("p", "note", "Match three or more symbols from the left.")); const betRow = node("div", "row"); - const minus = node("button", "btn small", "−10"); + const minus = node("button", "btn small", "−"); const bet = node("strong", "mono", money(Number(view.bet ?? 0))); - const plus = node("button", "btn small", "+10"); + const plus = node("button", "btn small", "+"); minus.disabled = active; plus.disabled = active; minus.addEventListener("click", () => send({ AdjustBet: -10 })); @@ -136,12 +136,12 @@ export function renderSlots( } const status = node("p", "note"); - if (active) status.textContent = "Spinning…"; + if (active) status.textContent = "SPINNING…"; else if (view.phase === "result") { const winnings = Number(view.winnings ?? 0); - status.textContent = winnings > 0 ? `Won ${money(winnings)}` : "No win this spin."; + status.textContent = winnings > 0 ? `WON ${money(winnings)}` : "NO WIN"; if (winnings > 0) status.classList.add("win-text"); - } else status.textContent = "Ready when you are."; + } else status.textContent = "Press SPIN to play."; side.append(status); const actions = node("div", "actions"); diff --git a/web/play/style.css b/web/play/style.css index e05f551..a0e4cca 100644 --- a/web/play/style.css +++ b/web/play/style.css @@ -78,9 +78,21 @@ button:disabled { cursor: not-allowed; opacity: 0.45; } letter-spacing: 0.12em; } .spacer { flex: 1; } -.session { display: flex; align-items: center; gap: 12px; } -.session .who { color: var(--dim); font-family: var(--mono); font-size: 12px; } -.session .who strong { color: var(--text); font-weight: 600; } +.pill { + padding: 3px 7px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: var(--surface); + color: var(--dim); + font-family: var(--mono); + font-size: 10px; + letter-spacing: 0.08em; +} +.session { display: flex; align-items: center; gap: 18px; } +.session .who, .balance-block { display: grid; gap: 1px; justify-items: end; } +.session .who .label, .balance-block .label { font-size: 9px; } +.session .who strong { color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; } +.balance-block .balance { font-size: 16px; } .balance { color: var(--win); font-family: var(--mono); @@ -92,7 +104,7 @@ button:disabled { cursor: not-allowed; opacity: 0.45; } white-space: nowrap; } -main { width: min(1240px, 100%); margin: 0 auto; padding: 28px 24px 64px; flex: 1; } +main { width: 100%; margin: 0 auto; padding: 28px 24px 48px; flex: none; } h1, h2, h3 { margin: 0; font-weight: 600; } h1 { font-size: 26px; letter-spacing: -0.01em; } @@ -175,87 +187,108 @@ h2 { font-size: 18px; } .auth-foot { margin-top: 16px; font-size: 12px; color: var(--faint); } /* Lobby */ -.lobby-head { display: flex; align-items: end; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; } +.lobby-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; } .lobby-head .spacer { flex: 1; } -.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } +.lobby-head h1 { display: flex; align-items: baseline; gap: 12px; } +.count { color: var(--faint); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; } +.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .game-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); - padding: 18px; + padding: 22px; display: flex; flex-direction: column; - gap: 12px; - min-height: 178px; + gap: 10px; + min-height: 150px; position: relative; overflow: hidden; } -.game-card::before { - content: ""; - position: absolute; - inset: 0 auto 0 0; - width: 3px; - background: var(--accent); - opacity: 0.7; -} -.game-card.crash::before { background: var(--gold); } -.game-card.roulette::before { background: var(--felt-line); } -.game-card.blackjack::before { background: var(--loss); } -.game-card h3 { font-size: 17px; } -.game-card p { margin: 0; color: var(--dim); font-size: 13px; flex: 1; } -.game-card .row { justify-content: space-between; } +.game-card h3 { font-size: 22px; font-weight: 500; } +.game-card p { margin: 0 0 10px; color: var(--dim); font-size: 13px; flex: 1; } +.game-card .btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; padding: 9px 12px; } .bet-input { width: 92px; } /* Game shell */ -.game-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } -.game-head .spacer { flex: 1; } +#game-screen { min-height: calc(100vh - 64px - 72px); } .game-body { display: grid; - grid-template-columns: minmax(0, 1fr) 320px; - gap: 16px; - align-items: start; + grid-template-columns: minmax(0, 1fr) 340px; + min-height: calc(100vh - 64px - 72px); + align-items: stretch; } .board { - background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--radius-lg); - padding: 18px; - min-height: 560px; + background: var(--bg); + border: 0; + border-radius: 0; + padding: 24px 26px; + min-height: 0; overflow: hidden; + display: flex; + flex-direction: column; } .sidebar { background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--radius-lg); - padding: 18px; + border-left: 1px solid var(--line); + border-radius: 0; + padding: 24px 26px; display: flex; flex-direction: column; - gap: 14px; + gap: 12px; + min-height: 0; + overflow-y: auto; +} +.sidebar h2 { font-size: 22px; font-weight: 500; margin: 0 0 2px; } +.sidebar .actions { + margin-top: auto; + display: grid; + gap: 8px; + padding-top: 16px; position: sticky; - top: 84px; + bottom: 0; + background: var(--surface); } -.sidebar .actions { margin-top: auto; display: grid; gap: 8px; } .sidebar .stat { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .sidebar .stat strong { font-family: var(--mono); font-weight: 600; } .note { color: var(--dim); font-size: 12px; } -.chip-row { display: flex; flex-wrap: wrap; gap: 6px; } +.chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip-btn { + width: 36px; + height: 36px; + padding: 0; font-family: var(--mono); - font-size: 12px; + font-size: 11px; + font-weight: 700; border-radius: 999px; - border: 1px solid var(--line); + border: 3px solid var(--line); background: var(--raised); - padding: 5px 10px; + color: var(--text); } -.chip-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(224, 182, 74, 0.1); } +.chip-btn[data-chip="10"] { border-color: #e8edf2; } +.chip-btn[data-chip="25"] { border-color: #4fb8c9; } +.chip-btn[data-chip="50"] { border-color: #e05a5a; } +.chip-btn[data-chip="100"] { border-color: #4ec27b; } +.chip-btn.active { box-shadow: 0 0 0 2px var(--gold); } +.board-foot { + margin-top: auto; + padding-top: 16px; + display: flex; + align-items: baseline; + gap: 10px; + color: var(--dim); + font-size: 12px; +} +.board-foot.tight { margin-top: 14px; } +.board-foot .label { color: var(--faint); } /* Slots */ .reels { display: grid; grid-template-columns: repeat(5, minmax(60px, 1fr)); - gap: 10px; - max-width: 760px; - margin: 24px auto 0; + gap: 12px; + width: 100%; + max-width: 1060px; + margin: 90px auto 0; } .reel { display: grid; gap: 8px; } .tile { @@ -271,23 +304,28 @@ h2 { font-size: 18px; } color: var(--dim); transition: color 90ms ease, border-color 90ms ease, background 90ms ease; } -.tile.sym-C { color: #c8d1da; } -.tile.sym-L { color: #7cc4d4; } -.tile.sym-O { color: #d8c27a; } -.tile.sym-G { color: #83d09a; } -.tile.sym-D { color: #d48d8d; } -.tile.sym-S { color: #e0b64a; } -.tile.win { border-color: var(--win); background: rgba(78, 194, 123, 0.12); color: var(--win); } -.tile.spinning { color: var(--faint); } +.tile.sym-C { color: #e05a5a; } +.tile.sym-L { color: #e0b64a; } +.tile.sym-O { color: #e08a3c; } +.tile.sym-G { color: #b57edc; } +.tile.sym-D { color: #4fb8c9; } +.tile.sym-S { color: #4ec27b; } +.tile.win { border-color: var(--gold); background: rgba(224, 182, 74, 0.14); } +.tile.spinning { opacity: 0.35; } .win-lines { text-align: center; margin-top: 18px; color: var(--dim); font-size: 12px; min-height: 18px; } /* Cards */ -.hand { margin: 16px 0; } -.hand .label { margin-bottom: 8px; } -.cards { display: flex; gap: 8px; flex-wrap: wrap; min-height: 116px; } +.bj-table { flex: 0 0 500px; display: flex; flex-direction: column; justify-content: space-around; min-height: 400px; max-height: 500px; } +.bj-divider { height: 1px; background: var(--line); margin: 10px 0; } +.hand { margin: 8px 0; } +.hand-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } +.hand-head .label { color: var(--dim); } +.hand-head .total { color: var(--text); font-size: 14px; } +.empty-table { flex: 1; display: grid; place-items: center; color: var(--dim); font-size: 14px; } +.cards { display: flex; gap: 10px; flex-wrap: wrap; min-height: 116px; justify-content: center; } .card { - width: 76px; - height: 108px; + width: 88px; + height: 128px; border-radius: 9px; background: #f2f5f7; color: #121820; @@ -310,7 +348,8 @@ h2 { font-size: 18px; } .outcome { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); } /* Crash */ -.crash-wrap { position: relative; } +.crash-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding-top: 40px; } +.crash-wrap > .label { margin-top: 2px; color: var(--dim); } .crash-number { font-family: var(--mono); font-size: clamp(44px, 9vw, 86px); @@ -328,8 +367,19 @@ h2 { font-size: 18px; } /* Roulette */ .roulette-wrap { position: relative; } canvas { display: block; width: 100%; } -.roulette-canvas { height: 540px; } -.crash-canvas { height: 360px; } +.roulette-canvas { height: 500px; margin: 80px 0 0; } +.crash-canvas { + height: 500px; + margin-top: 14px; + background: var(--surface); + border: 1px solid var(--line); + border-radius: var(--radius-md); +} +.wheel-canvas { + display: block; + margin: 6px auto 2px; + flex: 0 0 auto; +} .wheel-result { position: absolute; top: 16px; @@ -357,7 +407,7 @@ td.neg { color: var(--loss); } /* Toasts and overlays */ .site-foot { - width: min(1240px, 100%); + width: 100%; margin: 0 auto; padding: 0 24px 28px; color: var(--faint); @@ -366,7 +416,7 @@ td.neg { color: var(--loss); } } .site-foot a { color: var(--dim); } -#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 50; width: min(380px, calc(100vw - 36px)); } +#toasts { position: fixed; left: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 50; width: min(340px, calc(100vw - 36px)); } .toast { background: var(--surface); border: 1px solid var(--line); @@ -400,9 +450,11 @@ td.neg { color: var(--loss); } .modal p { color: var(--dim); } @media (max-width: 900px) { - .game-body { grid-template-columns: 1fr; } - .sidebar { position: static; } + .game-body { grid-template-columns: 1fr; min-height: 0; } + .sidebar { border-left: 0; border-top: 1px solid var(--line); position: static; } + .board { padding: 18px 14px; } .tagline { display: none; } + .game-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { main { padding: 18px 14px 54px; } @@ -413,5 +465,5 @@ td.neg { color: var(--loss); } .tile { font-size: clamp(18px, 7vw, 34px); } .card { width: 58px; height: 84px; } .crash-canvas { height: 260px; } - .roulette-canvas { height: 400px; } + .roulette-canvas { height: 400px; margin-top: 30px; } } diff --git a/web/play/test/smoke.mjs b/web/play/test/smoke.mjs index c1274bc..962753b 100644 --- a/web/play/test/smoke.mjs +++ b/web/play/test/smoke.mjs @@ -207,8 +207,8 @@ socket.message({ }, }); assert(document.querySelector(".roulette-canvas"), "the roulette canvas renders"); -assert(document.querySelectorAll(".chip-btn").length === 5, "the chip selector renders"); -assert(document.querySelector(".wheel-result")?.textContent.includes("5"), "the result number renders"); +assert(document.querySelectorAll(".chip-btn").length === 4, "the chip selector renders"); +assert(document.querySelector(".board-foot")?.textContent.includes("5"), "the result number renders"); socket.message({ type: "view", @@ -259,7 +259,7 @@ socket.message({ assert(document.querySelector(".crash-canvas"), "the crash canvas renders"); assert(document.querySelector(".crash-number")?.textContent.includes("×"), "the crash multiplier renders"); assert(byId("game-side").textContent.includes("CASH OUT"), "crash exposes cash out while running"); -assert(byId("game-side").textContent.includes("commit"), "crash shows the round commitment"); +assert(document.querySelector(".crash-meta")?.textContent.includes("commit"), "crash shows the round commitment"); socket.message({ type: "view", -- cgit v1.2.3