187 lines
7.3 KiB
HTML
187 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
|
<title>TurboSu - 档位</title>
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{width:100%;height:100%;overflow:hidden;background:#000;
|
|
font-family:'SF Pro Text',-apple-system,'PingFang SC',sans-serif}
|
|
#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
|
|
#box{position:relative;overflow:hidden}
|
|
#box.contain{max-width:100vw;max-height:100vh}
|
|
#box.cover{min-width:100vw;min-height:100vh}
|
|
#box.fill{width:100vw;height:100vh}
|
|
#box.center{width:auto;height:auto}
|
|
#content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
|
|
background:linear-gradient(135deg,#0a0a14,#1a1a30);flex-direction:column;gap:min(3vh,20px)}
|
|
.gear-circle{position:relative;width:min(30vmin,130px);height:min(30vmin,130px);
|
|
border-radius:50%;background:rgba(52,130,255,.1);border:3px solid rgba(52,130,255,.35);
|
|
display:flex;align-items:center;justify-content:center;
|
|
box-shadow:0 0 40px rgba(52,130,255,.12);transition:border-color .2s,border-width .2s}
|
|
.gear-circle span{font-size:min(14vmin,56px);font-weight:900;color:#fff;transition:.12s ease}
|
|
.gear-circle.active{border-color:rgba(52,130,255,.7);border-width:4px;
|
|
box-shadow:0 0 50px rgba(52,130,255,.25)}
|
|
.gear-circle.r-active{border-color:rgba(233,70,52,.6);box-shadow:0 0 50px rgba(233,70,52,.25)}
|
|
.gear-circle.n-active{border-color:rgba(255,255,255,.3);box-shadow:0 0 40px rgba(255,255,255,.10)}
|
|
.bar-row{display:flex;gap:min(1.5vw,8px);align-items:flex-end;padding:0 10px}
|
|
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min(8vw,36px)}
|
|
.bar-label{font-size:min(2.5vmin,13px);font-weight:600;color:rgba(255,255,255,.25);
|
|
transition:color .2s}
|
|
.bar-fill{width:min(6vw,28px);height:min(6vw,28px);border-radius:6px;background:rgba(255,255,255,.06);
|
|
transition:background .2s,transform .15s}
|
|
.bar-col.active .bar-fill{background:var(--accent,#3482FF);transform:scaleY(1.2)}
|
|
.bar-col.active .bar-label{color:#fff}
|
|
.bar-col.r .bar-fill{background:rgba(233,70,52,.3)}
|
|
.bar-col.r.active .bar-fill{background:#E94634}
|
|
.bar-col.n .bar-fill{background:rgba(255,255,255,.1)}
|
|
.bar-col.n.active .bar-fill{background:rgba(255,255,255,.25)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"><div id="box" class="contain"><div id="content">
|
|
<div class="gear-circle" id="gear-el"><span id="gear-txt">-</span></div>
|
|
<div class="bar-row" id="bar-row"></div>
|
|
</div></div></div>
|
|
<script>
|
|
const M={aspect_ratio:"1:1",render_mode:"contain",gear_style:"auto"};
|
|
let GAME_ID='';
|
|
|
|
// Forza: 0=R, 1-8=1-8 (no neutral in UDP)
|
|
// AC/F1: -1=R, 0=N, 1-8=1-8
|
|
// iRacing: 0=N, 1=R, 2=1st... (offset +2)
|
|
function gearLabel(g){
|
|
if(!g&&g!==0)return'-';
|
|
const style=M.gear_style||'auto';
|
|
const isForza=GAME_ID&&(GAME_ID.includes('forza'));
|
|
const isIRacing=GAME_ID&&GAME_ID.includes('iracing');
|
|
|
|
if(style==='forza'||isForza){
|
|
if(g===0)return'R';
|
|
if(g>=1&&g<=8)return String(g);
|
|
return String(g);
|
|
}
|
|
if(style==='ac'||(!isForza&&!isIRacing)){
|
|
if(g===-1)return'R';
|
|
if(g===0)return'N';
|
|
if(g>=1&&g<=8)return String(g);
|
|
return String(g);
|
|
}
|
|
if(isIRacing){
|
|
if(g===0)return'N';
|
|
if(g===1)return'R';
|
|
if(g>=2&&g<=9)return String(g-1);
|
|
return String(g);
|
|
}
|
|
// fallback
|
|
if(g===0)return'N';
|
|
if(g>0)return String(g);
|
|
return String(g);
|
|
}
|
|
|
|
function gearBarIndex(g){
|
|
if(!g&&g!==0)return-1;
|
|
const isForza=GAME_ID&&GAME_ID.includes('forza');
|
|
const isIRacing=GAME_ID&&GAME_ID.includes('iracing');
|
|
|
|
if(isForza){
|
|
if(g===0)return 0; // R at index 0
|
|
if(g>=1&&g<=8)return g+1; // 1->2
|
|
}
|
|
if(isIRacing){
|
|
if(g===0)return 1; // N at index 1
|
|
if(g===1)return 0; // R at index 0
|
|
if(g>=2&&g<=9)return g; // 2->2(index for '1')
|
|
}
|
|
// AC/F1/default
|
|
if(g===-1)return 0; // R
|
|
if(g===0)return 1; // N
|
|
if(g>=1&&g<=8)return g+1; // 1->2
|
|
return -1;
|
|
}
|
|
(function(){
|
|
const box=document.getElementById('box'),gearTxt=document.getElementById('gear-txt'),
|
|
gearEl=document.getElementById('gear-el'),barRow=document.getElementById('bar-row');
|
|
const proto=location.protocol==='https:'?'wss:':'ws:',wsUrl=proto+'//'+location.host+'/ws';
|
|
let ws,rt,lastGear=-999;
|
|
|
|
const LABELS=['R','N','1','2','3','4','5','6','7','8'];
|
|
|
|
function parseRatio(r){if(!r||r==='auto')return null;const p=r.split(':');if(p.length===2){const w=+p[0],h=+p[1];if(w>0&&h>0)return w/h;}return null;}
|
|
|
|
function buildBars(){
|
|
barRow.innerHTML=LABELS.map((l,i)=>{
|
|
let cls='bar-col';
|
|
if(l==='R')cls+=' r';
|
|
if(l==='N')cls+=' n';
|
|
cls+=` g-${i}`;
|
|
return `<div class="${cls}"><div class="bar-fill"></div><div class="bar-label">${l}</div></div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// gear=-1 -> R, gear=0 -> N, gear=1-8 -> 1-8 (AC/F1 style)
|
|
// gear=0 -> R, gear=1-8 -> 1-8 (Forza style, no N)
|
|
function gearToIndex(g){
|
|
const style=M.gear_style||'auto';
|
|
if(style==='ac')return g+2; // -1->1(R), 0->2(N), 1->3(1), ...
|
|
if(style==='forza')return g===0?0:g+1; // 0->0(R), 1->2(1), 2->3(2) ...
|
|
// auto: if gear can be -1, use AC style; otherwise Forza
|
|
if(g===-1)return 1; // R (AC style)
|
|
if(g===0)return 0; // R (Forza style, since no AC games have been seen)
|
|
if(g>0)return g+1; // 1->2, 2->3 ... wait this is wrong
|
|
|
|
// Better auto logic:
|
|
// Forza: 0=R(0), 1=1(2), 2=2(3)... mapping: g==0?0:g+1
|
|
// AC: -1=R(0), 0=N(1), 1=1(2)... mapping: g+1 (but then -1 maps to 0=R ✓)
|
|
// Actually: AC: -1->0(R), 0->1(N), 1->2(1st)... So: g+1 maps to index
|
|
// Forza: 0->0(R), 1->2(1st), 2->3(2nd)... So: g==0?0:g+1
|
|
|
|
// Auto-detect: if we've seen negative gear, use AC mapping
|
|
// Since auto mode doesn't track history, default to Forza mapping
|
|
// But if game changes, the server might send negative gear
|
|
return g===0?0:g+1;
|
|
}
|
|
|
|
function updateGear(g){
|
|
if(g===lastGear)return;lastGear=g;
|
|
const label=gearLabel(g);
|
|
const activeIndex=gearBarIndex(g);
|
|
|
|
gearTxt.textContent=label;
|
|
gearEl.className='gear-circle active';
|
|
if(label==='R')gearEl.classList.add('r-active');
|
|
else if(label==='N')gearEl.classList.add('n-active');
|
|
|
|
barRow.querySelectorAll('.bar-col').forEach((el,i)=>{
|
|
el.classList.toggle('active',i===activeIndex);
|
|
});
|
|
}
|
|
|
|
function apply(){
|
|
const ratio=parseRatio(M.aspect_ratio||'1:1'),mode=M.render_mode||'contain';
|
|
if(!ratio){box.style.width='100vw';box.style.height='100vh';box.className='fill';return;}
|
|
const vw=window.innerWidth,vh=window.innerHeight,vr=vw/vh;let cw,ch;
|
|
switch(mode){
|
|
case'cover':if(vr>ratio){cw=vw;ch=vw/ratio}else{ch=vh;cw=vh*ratio};box.className='cover';break;
|
|
case'fill':box.style.width='100vw';box.style.height='100vh';box.className='fill';return;
|
|
case'center':cw=Math.min(vw,800);ch=cw/ratio;if(ch>vh){ch=Math.min(vh,800);cw=ch*ratio};box.className='center';break;
|
|
default:if(vr>ratio){ch=vh;cw=vh*ratio}else{cw=vw;ch=vw/ratio};box.className='contain';
|
|
}
|
|
if(mode!=='fill'){box.style.width=cw+'px';box.style.height=ch+'px';}
|
|
}
|
|
|
|
function connect(){
|
|
ws=new WebSocket(wsUrl);ws.onopen=()=>{if(rt){clearTimeout(rt);rt=null}};
|
|
ws.onmessage=(e)=>{try{const m=JSON.parse(e.data);
|
|
if(m.type==='connected'){GAME_ID=m.selected_game_id||'';console.log('[Gear] game:',GAME_ID)}
|
|
if(m.type==='telemetry')updateGear(m.data.gear||0)}catch(e){}};
|
|
ws.onclose=()=>{rt=setTimeout(connect,2000)};
|
|
}
|
|
|
|
buildBars();apply();window.addEventListener('resize',apply);connect();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|