sensivity 2.5.27 → 2.5.29

package/public/index.html

@@ -12,10 +12,7 @@
 
 <div id="license-overlay">
   <div id="license-box">
-    <svg class="logo-icon" viewBox="0 0 24 24">
-      <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
-      <path d="M9 12l2 2 4-4"/>
-    </svg>
+    <img class="logo-icon" src="/assets/logo.png" alt="Sensivity">
     <h1>Sensivity <span>License</span></h1>
     <p class="subtitle">Enter your key to unlock</p>
     <input type="text" id="license-key" placeholder="SENSIVITY-XXXX-XXXX-XXXX-XXXX-XXXXXXXX" onkeydown="if(event.key==='Enter')submitLicense()">
@@ -28,15 +25,18 @@
   <div id="sidebar"></div>
   <div id="content">
     <div id="topbar"></div>
-    <div id="pages"></div>
+    <div id="workspace">
+      <div id="pages"></div>
+      <aside id="esp-preview-shell"></aside>
+    </div>
   </div>
 </div>
 <div id="statusbar">
   <span class="s-dot" id="status-dot"></span>
   <span class="s-text" id="status-text">Ready</span>
   <span class="s-url" id="s-url" style="flex:1;font-size:10px;color:var(--text3);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none"></span>
-  <button class="s-btn" id="cheat-btn" onclick="toggleCheat()" disabled>Start Cheat</button>
-  <button class="s-btn" style="background:var(--bg4);color:var(--text2);margin-left:4px;padding:5px 10px;font-size:10px" onclick="killSensivity()">Kill</button>
+  <button class="s-btn" id="cheat-btn" onclick="toggleCheat()" disabled>Start</button>
+  <button class="s-btn kill-btn" onclick="killSensivity()">Kill</button>
 </div>
 
 <svg style="display:none" id="icons-sprite" xmlns="http://www.w3.org/2000/svg">

package/public/js/app.js

@@ -1,107 +1,423 @@
 const SOCKET = (typeof io !== 'undefined') ? io() : null;
 let state = {}, currentSection = 0, currentSub = 0;
 let licenseAccepted = false, cheatRunning = false, listeningKeybind = null;
+let espSyncTimer = null;
 
-function svgIcon(id, size) { size = size || 18; return `<svg width="${size}" height="${size}"><use href="#ic-${id}"></use></svg>`; }
+const SECTION_GROUPS = [
+  { label: 'AIMBOT', ids: ['aim'] },
+  { label: 'TOOLS', ids: ['misc'] },
+  { label: 'VISUALS', ids: ['visuals'] },
+  { label: 'PLAYERS', ids: ['playerlist', 'vehiclelist'] },
+  { label: 'WORLD', ids: ['world', 'settings'] }
+];
+
+function svgIcon(id, size) {
+  size = size || 18;
+  return `<svg width="${size}" height="${size}"><use href="#ic-${id}"></use></svg>`;
+}
 
 function initState() {
   if (!SCHEMA) return;
-  SCHEMA.sections.forEach(s => { (s.subs || []).forEach(sub => { (sub.children || []).forEach(ch => { (ch.controls || []).forEach(c => {
-    if (!(c.key in state)) state[c.key] = c.type === 'color_checkbox' ? { value: c.def, color: [...(c.color || [1,1,1,1])] } : c.def;
-  });});});});
+  SCHEMA.sections.forEach(s => (s.subs || []).forEach(sub => (sub.children || []).forEach(ch => (ch.controls || []).forEach(c => {
+    if (!(c.key in state)) state[c.key] = c.type === 'color_checkbox' ? { value: c.def, color: [...(c.color || [1, 1, 1, 1])] } : c.def;
+  }))));
+}
+
+function sectionById(id) {
+  return SCHEMA.sections.findIndex(s => s.id === id);
+}
+
+function currentSubData() {
+  const s = SCHEMA.sections[currentSection];
+  return ((s && s.subs) || [])[currentSub] || ((s && s.subs) || [])[0];
 }
 
 function renderSidebar() {
   const el = document.getElementById('sidebar');
   if (!SCHEMA) return;
-  el.innerHTML = SCHEMA.sections.map((s, i) =>
-    `<button class="tab-btn${i===currentSection?' active':''}" onclick="setSection(${i})" title="${s.label}">${svgIcon(s.icon,19)}</button>`
-  ).join('');
+  const grouped = SECTION_GROUPS.map(group => {
+    const items = group.ids.map(id => {
+      const index = sectionById(id);
+      if (index < 0) return '';
+      const s = SCHEMA.sections[index];
+      return `<button class="tab-btn${index === currentSection ? ' active' : ''}" onclick="setSection(${index})" title="${s.label}">
+        <span class="tab-ico">${svgIcon(s.icon, 18)}</span>
+        <span class="tab-label">${s.label}</span>
+      </button>`;
+    }).join('');
+    return items ? `<div class="nav-group"><div class="nav-heading">${group.label}</div>${items}</div>` : '';
+  }).join('');
+
+  el.innerHTML = `
+    <div class="brand"><img src="/assets/logo.png" alt="Sensivity"><span>SENSIVITY</span></div>
+    <div class="nav-scroll">${grouped}</div>`;
 }
 
 function renderTopbar() {
-  const s = SCHEMA.sections[currentSection], subs = s.subs || [], sub = subs[currentSub] || subs[0];
+  const s = SCHEMA.sections[currentSection];
+  const subs = s.subs || [];
+  const sub = currentSubData();
   document.getElementById('topbar').innerHTML = `
-    ${sub&&sub.icon?`<span class="tb-icon">${svgIcon(sub.icon,16)}</span>`:''}
-    <span class="title">${s.label}</span><span class="sep">/</span><span class="sub">${sub?sub.label:''}</span>
-    ${subs.length>1?`<select onchange="setSub(this.value)">${subs.map((x,i)=>`<option value="${i}"${i===currentSub?' selected':''}>${x.label}</option>`).join('')}</select>`:''}`;
+    <div class="top-title">
+      <span class="tb-icon">${svgIcon((sub && sub.icon) || s.icon, 17)}</span>
+      <div>
+        <span class="top-primary">${s.label}</span>
+        <span class="top-secondary">${sub ? sub.label : ''}</span>
+      </div>
+    </div>
+    <div class="sub-tabs">
+      ${subs.map((x, i) => `<button class="sub-tab${i === currentSub ? ' active' : ''}" onclick="setSub(${i})">${x.label}</button>`).join('')}
+    </div>
+    <div class="profile-dot"><img src="/assets/logo.png" alt=""></div>`;
 }
 
 function renderPage() {
-  const sub = (SCHEMA.sections[currentSection].subs||[])[currentSub];
+  const sub = currentSubData();
   const pg = document.getElementById('pages');
-  if (!sub||!sub.children||!sub.children.length) { pg.innerHTML='<div class="child" style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text3)">No settings</div>'; return; }
-  pg.innerHTML = sub.children.map(ch=>`<div class="child"><h3>${ch.label}</h3>${(ch.controls||[]).map(ctrl).join('')}</div>`).join('');
+  const showPreview = shouldShowEspPreview();
+  const workspace = document.getElementById('workspace');
+  if (workspace) workspace.classList.toggle('has-preview', showPreview);
+  if (!sub || !sub.children || !sub.children.length) {
+    pg.innerHTML = '<div class="child empty-state">No settings</div>';
+    renderEspPreviewShell(false);
+    return;
+  }
+
+  const children = sub.children.map(ch => `<div class="child"><h3>${ch.label}</h3>${(ch.controls || []).map(ctrl).join('')}</div>`).join('');
+  pg.innerHTML = children;
+  renderEspPreviewShell(showPreview);
+}
+
+function prettyLabel(key) {
+  return String(key).replace(/^Enable\s+/i, '').replace(/\s+ESP$/i, ' ESP');
 }
 
 function ctrl(c) {
-  const v = state[c.key], vs = c.type==='color_checkbox'?v?.value:v, id = 'c_'+c.key.replace(/[^a-zA-Z0-9]/g,'_');
-  switch(c.type) {
+  const v = state[c.key];
+  const vs = c.type === 'color_checkbox' ? v?.value : v;
+  const id = 'c_' + c.key.replace(/[^a-zA-Z0-9]/g, '_');
+  switch (c.type) {
     case 'checkbox':
-      return `<div class="ctrl"><label>${c.key}</label><label class="tgl"><input type="checkbox" id="${id}"${vs?' checked':''} onchange="set('${c.key}','checkbox',this.checked)"><span class="track"><span class="knob"></span></span></label></div>`;
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><label class="tgl"><input type="checkbox" id="${id}"${vs ? ' checked' : ''} onchange="set('${c.key}','checkbox',this.checked)"><span class="track"><span class="knob"></span></span></label></div>`;
     case 'slider_int':
-      return `<div class="ctrl"><label>${c.key}</label><div class="rng"><input type="range" id="${id}" min="${c.min||0}" max="${c.max||100}" value="${vs||0}" oninput="sliderUp('${c.key}','slider_int',this)"><span class="rng-val">${vs||0}</span></div></div>`;
+      return `<div class="ctrl range-ctrl"><label>${prettyLabel(c.key)}</label><div class="rng"><span class="rng-val">${vs || 0}</span><input type="range" id="${id}" min="${c.min || 0}" max="${c.max || 100}" value="${vs || 0}" oninput="sliderUp('${c.key}','slider_int',this)"></div></div>`;
     case 'slider_float':
-      return `<div class="ctrl"><label>${c.key}</label><div class="rng"><input type="range" id="${id}" min="${c.min||0}" max="${c.max||100}" step="${c.step||0.1}" value="${vs||0}" oninput="sliderUp('${c.key}','slider_float',this)"><span class="rng-val">${parseFloat(vs||0).toFixed(1)}</span></div></div>`;
+      return `<div class="ctrl range-ctrl"><label>${prettyLabel(c.key)}</label><div class="rng"><span class="rng-val">${parseFloat(vs || 0).toFixed(1)}</span><input type="range" id="${id}" min="${c.min || 0}" max="${c.max || 100}" step="${c.step || 0.1}" value="${vs || 0}" oninput="sliderUp('${c.key}','slider_float',this)"></div></div>`;
     case 'dropdown':
-      return `<div class="ctrl"><label>${c.key}</label><select id="${id}" onchange="set('${c.key}','dropdown',this.selectedIndex)">${(c.items||[]).map((x,i)=>`<option value="${i}"${i===vs?' selected':''}>${x}</option>`).join('')}</select></div>`;
-    case 'color_checkbox':{
-      const clr = v?.color||[1,1,1,1], hex = '#'+clr.slice(0,3).map(x=>('0'+Math.round(x*255).toString(16)).slice(-2)).join('');
-      return `<div class="ctrl"><label>${c.key}</label><label class="tgl"><input type="checkbox"${v?.value?' checked':''} onchange="set('${c.key}','color_checkbox',{value:this.checked,color:(state['${c.key}']?.color||[1,1,1,1])})"><span class="track"><span class="knob"></span></span></label><span class="clr-btn" style="background:${hex}"><span class="swatch" style="background:${hex}"></span><input type="color" value="${hex}" onchange="colorUp('${c.key}',this.value)"></span></div>`;}
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><select id="${id}" onchange="set('${c.key}','dropdown',this.selectedIndex)">${(c.items || []).map((x, i) => `<option value="${i}"${i === vs ? ' selected' : ''}>${x}</option>`).join('')}</select></div>`;
+    case 'color_checkbox': {
+      const clr = v?.color || [1, 1, 1, 1], hex = colorToHex(clr);
+      return `<div class="ctrl color-row"><label>${prettyLabel(c.key)}</label><div class="color-actions"><label class="tgl"><input type="checkbox"${v?.value ? ' checked' : ''} onchange="set('${c.key}','color_checkbox',{value:this.checked,color:(state['${c.key}']?.color||[1,1,1,1])})"><span class="track"><span class="knob"></span></span></label><span class="clr-btn" style="background:${hex}"><span class="swatch" style="background:${hex}"></span><input type="color" value="${hex}" onchange="colorUp('${c.key}',this.value)"></span></div></div>`;
+    }
     case 'keybind':
-      return `<div class="ctrl"><label>${c.key}</label><button class="key-btn${listeningKeybind===c.key?' listening':''}" id="${id}" onclick="keyStart('${c.key}')">${vkName(vs||0)}</button></div>`;
-  }return '';
+      return `<div class="ctrl"><label>${prettyLabel(c.key)}</label><button class="key-btn${listeningKeybind === c.key ? ' listening' : ''}" id="${id}" onclick="keyStart('${c.key}')">${vkName(vs || 0)}</button></div>`;
+  }
+  return '';
+}
+
+function set(k, t, v) {
+  if (t === 'color_checkbox') {
+    state[k] = state[k] || { value: false, color: [1, 1, 1, 1] };
+    if (typeof v === 'object') state[k] = v;
+  } else state[k] = v;
+  if (shouldAutoEnablePlayerEsp(k, t, state[k])) {
+    state['Enable ESP'] = true;
+    emit('Enable ESP', 'checkbox', true);
+  }
+  emit(k, t, state[k]);
+  queuePlayerEspSync(k);
+  rerender();
+}
+
+function sliderUp(k, t, el) {
+  const v = t === 'slider_int' ? parseInt(el.value) : parseFloat(el.value);
+  state[k] = v;
+  el.previousElementSibling.textContent = t === 'slider_int' ? v : v.toFixed(1);
+  emit(k, t, v);
+  queuePlayerEspSync(k);
+  if (shouldShowEspPreview()) updateEspPreview();
+}
+
+function colorUp(k, hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255, g = parseInt(hex.slice(3, 5), 16) / 255, b = parseInt(hex.slice(5, 7), 16) / 255;
+  const cur = state[k] || { value: false, color: [1, 1, 1, 1] };
+  cur.color = [r, g, b, cur.color[3] || 1];
+  state[k] = cur;
+  emit(k, 'color_checkbox', cur);
+  queuePlayerEspSync(k);
+  rerender();
+}
+
+function emit(k, t, v) {
+  if (SOCKET && SOCKET.connected) SOCKET.emit('setConfig', { key: k, type: t, value: v });
+}
+
+function visualPlayerControls() {
+  const visuals = SCHEMA.sections.find(s => s.id === 'visuals');
+  const player = visuals && (visuals.subs || []).find(sub => sub.id === 'vplayer');
+  if (!player) return [];
+  return (player.children || []).flatMap(ch => ch.controls || []);
+}
+
+function shouldAutoEnablePlayerEsp(key, type, value) {
+  if (key === 'Enable ESP' || type !== 'color_checkbox') return false;
+  if (!visualPlayerControls().some(c => c.key === key)) return false;
+  return !!(value && value.value) && !state['Enable ESP'];
+}
+
+function queuePlayerEspSync(changedKey) {
+  const controls = visualPlayerControls();
+  if (!controls.some(c => c.key === changedKey)) return;
+  clearTimeout(espSyncTimer);
+  espSyncTimer = setTimeout(() => {
+    controls.forEach(c => {
+      if (state[c.key] !== undefined) emit(c.key, c.type, state[c.key]);
+    });
+  }, 35);
+}
+
+function setSection(i) {
+  currentSection = i;
+  currentSub = 0;
+  rerender();
+}
+
+function setSub(i) {
+  currentSub = parseInt(i, 10);
+  rerender();
 }
 
-function set(k,t,v){ if(t==='color_checkbox'){state[k]=state[k]||{value:false,color:[1,1,1,1]};if(typeof v==='object')state[k]=v;}else state[k]=v; emit(k,t,state[k]); rerender(); }
-function sliderUp(k,t,el){ const v=t==='slider_int'?parseInt(el.value):parseFloat(el.value); state[k]=v; el.nextElementSibling.textContent=t==='slider_int'?v:v.toFixed(1); emit(k,t,v); }
-function colorUp(k,hex){ const r=parseInt(hex.slice(1,3),16)/255,g=parseInt(hex.slice(3,5),16)/255,b=parseInt(hex.slice(5,7),16)/255; const cur=state[k]||{value:false,color:[1,1,1,1]}; cur.color=[r,g,b,cur.color[3]||1]; state[k]=cur; emit(k,'color_checkbox',cur); rerender(); }
-function emit(k,t,v){ if(SOCKET&&SOCKET.connected) SOCKET.emit('setConfig',{key:k,type:t,value:v}); }
-function setSection(i){ currentSection=i;currentSub=0;rerender(); } function setSub(i){ currentSub=parseInt(i);rerender(); }
+function rerender() {
+  renderSidebar();
+  renderTopbar();
+  renderPage();
+}
+
+function vkName(vk) {
+  const m = { 0: 'None', 1: 'LMB', 2: 'RMB', 4: 'MMB', 5: 'XB1', 6: 'XB2', 8: 'Back', 9: 'Tab', 13: 'Enter', 16: 'Shift', 17: 'Ctrl', 18: 'Alt', 20: 'Caps', 27: 'Esc', 32: 'Space', 33: 'PgUp', 34: 'PgDn', 37: 'Left', 38: 'Up', 39: 'Right', 40: 'Down', 44: 'PrtSc', 45: 'Ins', 46: 'Del', 160: 'LShift', 161: 'RShift', 162: 'LCtrl', 163: 'RCtrl', 164: 'LAlt', 165: 'RAlt' };
+  for (let i = 48; i <= 57; i++) m[i] = String(i - 48);
+  for (let i = 65; i <= 90; i++) m[i] = String.fromCharCode(i);
+  for (let i = 96; i <= 105; i++) m[i] = 'Num' + String(i - 96);
+  for (let i = 112; i <= 135; i++) m[i] = 'F' + (i - 111);
+  return m[vk] || ('VK' + vk);
+}
+
+function keyStart(key) {
+  if (listeningKeybind === key) {
+    listeningKeybind = null;
+    rerender();
+    return;
+  }
+  listeningKeybind = key;
+  rerender();
+}
+
+function submitLicense() {
+  const k = document.getElementById('license-key').value.trim();
+  if (!k) return;
+  const b = document.getElementById('license-btn'), m = document.getElementById('license-msg');
+  b.disabled = true;
+  b.textContent = 'Checking...';
+  m.textContent = '';
+  m.className = 'msg';
+  if (SOCKET) SOCKET.emit('checkLicense', k);
+}
+
+document.addEventListener('keydown', function(e) {
+  if (!listeningKeybind) return;
+  e.preventDefault();
+  set(listeningKeybind, 'keybind', e.keyCode);
+  listeningKeybind = null;
+  rerender();
+});
+
+document.addEventListener('mousedown', function(e) {
+  if (!listeningKeybind) return;
+  e.preventDefault();
+  set(listeningKeybind, 'keybind', { 0: 1, 1: 4, 2: 2 }[e.button] || 0);
+  listeningKeybind = null;
+  rerender();
+});
+
+function toggleCheat() {
+  if (!SOCKET || !SOCKET.connected) return;
+  SOCKET.emit(cheatRunning ? 'stopCheat' : 'startCheat');
+}
+
+function updateStatus() {
+  const d = document.getElementById('status-dot'), t = document.getElementById('status-text'), b = document.getElementById('cheat-btn');
+  if (cheatRunning) {
+    d.className = 's-dot live';
+    t.textContent = 'Running';
+    b.textContent = 'Stop';
+    b.className = 's-btn stop';
+  } else {
+    d.className = 's-dot';
+    t.textContent = 'Ready';
+    b.textContent = 'Start';
+    b.className = 's-btn';
+  }
+}
+
+function colorToHex(color) {
+  return '#' + (color || [1, 1, 1]).slice(0, 3).map(x => ('0' + Math.round(Math.max(0, Math.min(1, x)) * 255).toString(16)).slice(-2)).join('');
+}
+
+function ctrlValue(key) {
+  const v = state[key];
+  return v && typeof v === 'object' && 'value' in v ? v.value : v;
+}
+
+function ctrlColor(key, fallback) {
+  return colorToHex((state[key] && state[key].color) || fallback || [1, 1, 1, 1]);
+}
+
+function shouldShowEspPreview() {
+  const section = SCHEMA.sections[currentSection];
+  const sub = currentSubData();
+  return section && section.id === 'visuals' && sub && sub.id === 'vplayer';
+}
+
+function renderEspPreviewCard() {
+  return `<div class="esp-preview-panel"><h3>Live Preview</h3><div class="esp-stage" id="esp-stage">${espPreviewMarkup()}</div></div>`;
+}
 
-function rerender(){ renderSidebar();renderTopbar();renderPage(); }
+function renderEspPreviewShell(showPreview) {
+  const shell = document.getElementById('esp-preview-shell');
+  if (!shell) return;
+  shell.innerHTML = showPreview ? renderEspPreviewCard() : '';
+}
 
-function vkName(vk){
-  const m={0:'None',1:'LMB',2:'RMB',4:'MMB',5:'XB1',6:'XB2',8:'Back',9:'Tab',13:'Enter',16:'Shift',17:'Ctrl',18:'Alt',20:'Caps',27:'Esc',32:'Space',33:'PgUp',34:'PgDn',37:'Left',38:'Up',39:'Right',40:'Down',44:'PrtSc',45:'Ins',46:'Del',160:'LShift',161:'RShift',162:'LCtrl',163:'RCtrl',164:'LAlt',165:'RAlt'};
-  for(let i=48;i<=57;i++)m[i]=String(i-48); for(let i=65;i<=90;i++)m[i]=String.fromCharCode(i);
-  for(let i=96;i<=105;i++)m[i]='Num'+String(i-96); for(let i=112;i<=135;i++)m[i]='F'+(i-111);
-  return m[vk]||('VK'+vk);
+function updateEspPreview() {
+  const stage = document.getElementById('esp-stage');
+  if (stage) stage.innerHTML = espPreviewMarkup();
 }
 
-function keyStart(key){ if(listeningKeybind===key){listeningKeybind=null;rerender();return;} listeningKeybind=key;rerender(); }
-function submitLicense(){ const k=document.getElementById('license-key').value.trim(); if(!k)return; const b=document.getElementById('license-btn'),m=document.getElementById('license-msg'); b.disabled=true;b.textContent='Checking...';m.textContent='';m.className='msg'; if(SOCKET)SOCKET.emit('checkLicense',k); }
+function placementClass(key) {
+  const map = ['bottom', 'top', 'left-upper', 'right-upper', 'left-lower', 'right-lower'];
+  return map[Number(state[key] || 0)] || 'bottom';
+}
 
-document.addEventListener('keydown',function(e){ if(!listeningKeybind)return; e.preventDefault(); set(listeningKeybind,'keybind',e.keyCode); listeningKeybind=null;rerender(); });
-document.addEventListener('mousedown',function(e){ if(!listeningKeybind)return; e.preventDefault(); set(listeningKeybind,'keybind',{0:1,1:4,2:2}[e.button]||0); listeningKeybind=null;rerender(); });
+function espPreviewMarkup() {
+  const espOn = !!ctrlValue('Enable ESP');
+  const boxOn = !!ctrlValue('Enable Box ESP');
+  const skeletonOn = !!ctrlValue('Enable Skeleton ESP');
+  const headOn = !!ctrlValue('Enable Head ESP');
+  const lineOn = !!ctrlValue('Enable Line ESP');
+  const healthOn = !!ctrlValue('Enable Health Bar ESP');
+  const armorOn = !!ctrlValue('Enable Armor Bar ESP');
+  const tracerOn = !!ctrlValue('Enable Tracer ESP');
+  const offscreenOn = !!ctrlValue('Enable Offscreen ESP');
+  const nameOn = !!ctrlValue('Enable Name ESP');
+  const idOn = !!ctrlValue('Enable ID ESP');
+  const distOn = !!ctrlValue('Enable Distance ESP');
+  const weaponOn = !!ctrlValue('Enable Weapon ESP');
+  const boxColor = ctrlColor('Enable Box ESP');
+  const skelColor = ctrlColor('Enable Skeleton ESP');
+  const headColor = ctrlColor('Enable Head ESP');
+  const lineColor = ctrlColor('Enable Line ESP');
+  const healthColor = ctrlColor('Enable Health Bar ESP', [0, 1, 0, 1]);
+  const armorColor = ctrlColor('Enable Armor Bar ESP', [0, 0.45, 1, 1]);
+  const tracerColor = ctrlColor('Enable Tracer ESP');
+  const offscreenColor = ctrlColor('Enable Offscreen ESP', [1, 0, 0, 1]);
+  const boxType = Number(state['Box Type'] || 0);
+  const boxLine = Number(state['Box Line Type'] || 0);
+  const skeletonLine = Number(state['Skeleton Line Type'] || 0);
+  const linePlacement = Number(state['Line Placement'] || 0);
+  const boxThickness = Number(state['Box Line Thickness'] || 1);
+  const skeletonThickness = Number(state['Skeleton Line Thickness'] || 1);
+  const headSize = Number(state['Head Size'] || 10);
+  const lineThickness = Number(state['Line Thickness'] || 1);
+  const tracerThickness = Number(state['Tracer Thickness'] || 2);
 
-function toggleCheat(){ if(!SOCKET||!SOCKET.connected)return; SOCKET.emit(cheatRunning?'stopCheat':'startCheat'); }
-function updateStatus(){ const d=document.getElementById('status-dot'),t=document.getElementById('status-text'),b=document.getElementById('cheat-btn'); if(cheatRunning){ d.className='s-dot live';t.textContent='Cheat running';b.textContent='Stop';b.className='s-btn stop';}else{ d.className='s-dot';t.textContent='Ready';b.textContent='Start Cheat';b.className='s-btn';} }
+  return `
+    <div class="esp-grid-bg"></div>
+    <div class="esp-horizon"></div>
+    <div class="esp-crosshair"></div>
+    <div class="esp-target ${espOn ? 'is-on' : 'is-off'}">
+      ${boxOn ? `<div class="esp-box ${boxType ? 'corner' : 'full'} ${boxLine ? 'solid' : 'dashed'}" style="--esp-color:${boxColor};--esp-thick:${Math.max(1, Math.min(6, boxThickness))}px"></div>` : ''}
+      ${healthOn ? `<div class="esp-bar health" style="--esp-color:${healthColor}"><span></span></div>` : ''}
+      ${armorOn ? `<div class="esp-bar armor" style="--esp-color:${armorColor}"><span></span></div>` : ''}
+      ${headOn ? `<div class="esp-head" style="--esp-color:${headColor};--head-size:${Math.max(8, Math.min(42, headSize))}px"></div>` : ''}
+      ${skeletonOn ? `<div class="esp-skeleton ${skeletonLine ? 'solid' : 'dashed'}" style="--esp-color:${skelColor};--esp-thick:${Math.max(1, Math.min(6, skeletonThickness))}px"><span class="spine"></span><span class="arms"></span><span class="leg left"></span><span class="leg right"></span></div>` : ''}
+      ${nameOn ? `<span class="esp-text ${placementClass('Name Placement')}" style="--esp-color:${ctrlColor('Enable Name ESP')}">Player_24</span>` : ''}
+      ${idOn ? `<span class="esp-text ${placementClass('ID Placement')}" style="--esp-color:${ctrlColor('Enable ID ESP')}">ID 182</span>` : ''}
+      ${distOn ? `<span class="esp-text ${placementClass('Distance Placement')}" style="--esp-color:${ctrlColor('Enable Distance ESP')}">128m</span>` : ''}
+      ${weaponOn ? `<span class="esp-text ${placementClass('Weapon Placement')}" style="--esp-color:${ctrlColor('Enable Weapon ESP')}">Rifle</span>` : ''}
+    </div>
+    ${lineOn ? `<div class="esp-line place-${linePlacement}" style="--esp-color:${lineColor};--esp-thick:${Math.max(1, Math.min(8, lineThickness))}px"></div>` : ''}
+    ${tracerOn ? `<div class="esp-tracer" style="--esp-color:${tracerColor};--esp-thick:${Math.max(1, Math.min(8, tracerThickness))}px"></div>` : ''}
+    ${offscreenOn ? `<div class="esp-offscreen" style="--esp-color:${offscreenColor}"></div>` : ''}
+    <div class="esp-caption">${espOn ? 'ESP Enabled' : 'ESP Disabled'}</div>`;
+}
 
-if(SOCKET){ SOCKET.on('connect',()=>{fetch('/api/url').then(r=>r.json()).then(d=>{if(d.url)document.getElementById('s-url').textContent=d.url}).catch(()=>{});}); SOCKET.on('licenseResult',(r)=>{ const b=document.getElementById('license-btn'),m=document.getElementById('license-msg'); b.disabled=false;b.textContent='Authenticate'; if(r.ok){ licenseAccepted=true; m.textContent=r.message||'Accepted';m.className='msg ok'; document.getElementById('cheat-btn').disabled=false; setTimeout(()=>{document.getElementById('license-overlay').style.display='none';rerender();},300); }else{ m.textContent=r.message||'Invalid key';m.className='msg err'; } }); SOCKET.on('configSync',(c)=>{Object.assign(state,c);rerender();}); SOCKET.on('status',(s)=>{cheatRunning=s.running;updateStatus();}); SOCKET.on('killed',()=>{document.body.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100vh;color:var(--danger);font-size:18px;font-family:var(--font)">Sensivity Terminated</div>';}); SOCKET.on('ytTrigger',(d)=>{const el=document.getElementById('qr-overlay');if(d.active){el.classList.add('show');document.getElementById('qr-url').textContent=d.url;document.getElementById('qr-img').src='/api/qr.png?'+Date.now();}else{el.classList.remove('show');}}); }
+if (SOCKET) {
+  SOCKET.on('connect', () => {
+    fetch('/api/url').then(r => r.json()).then(d => {
+      if (d.url) document.getElementById('s-url').textContent = d.url;
+    }).catch(() => {});
+  });
+  SOCKET.on('licenseResult', (r) => {
+    const b = document.getElementById('license-btn'), m = document.getElementById('license-msg');
+    b.disabled = false;
+    b.textContent = 'Authenticate';
+    if (r.ok) {
+      licenseAccepted = true;
+      m.textContent = r.message || 'Accepted';
+      m.className = 'msg ok';
+      document.getElementById('cheat-btn').disabled = false;
+      setTimeout(() => {
+        document.getElementById('license-overlay').style.display = 'none';
+        rerender();
+      }, 300);
+    } else {
+      m.textContent = r.message || 'Invalid key';
+      m.className = 'msg err';
+    }
+  });
+  SOCKET.on('configSync', (c) => { Object.assign(state, c); rerender(); });
+  SOCKET.on('status', (s) => { cheatRunning = s.running; updateStatus(); });
+  SOCKET.on('killed', () => { document.body.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100vh;color:var(--danger);font-size:18px;font-family:var(--font)">Sensivity Terminated</div>'; });
+  SOCKET.on('ytTrigger', (d) => {
+    const el = document.getElementById('qr-overlay');
+    if (d.active) {
+      el.classList.add('show');
+      document.getElementById('qr-url').textContent = d.url;
+      document.getElementById('qr-img').src = '/api/qr.png?' + Date.now();
+    } else {
+      el.classList.remove('show');
+    }
+  });
+}
 
-function killSensivity(){ if(!SOCKET||!SOCKET.connected)return; SOCKET.emit('killSensivity'); }
+function killSensivity() {
+  if (!SOCKET || !SOCKET.connected) return;
+  SOCKET.emit('killSensivity');
+}
 
 function drawQR(url) {
-  const c=document.getElementById('qr-canvas'),ctx=c.getContext('2d');
-  const s=8,m=4,qrSize=21;
-  c.width=c.height=(qrSize+2*m)*s;
-  ctx.fillStyle='#fff';ctx.fillRect(0,0,c.width,c.height);
-  // Simple QR drawing using pattern generator
-  const hash=Array.from(url).reduce((a,c)=>((a<<5)-a)+c.charCodeAt(0),0);
-  ctx.fillStyle='#000';
-  for(let y=0;y<qrSize;y++)for(let x=0;x<qrSize;x++){
-    const v=(hash>>((x*y)%31))&1;
-    // Simple finder patterns in corners
-    const fx=x<7&&y<7, f2=x>qrSize-8&&y<7, f3=x<7&&y>qrSize-8;
-    if(fx||f2||f3){
-      const ix=fx?x:f2?x-(qrSize-7):x, iy=fx?y:f2?y:y-(qrSize-7);
-      if(!(ix===0||ix===6||iy===0||iy===6||(ix>=2&&ix<=4&&iy>=2&&iy<=4)||ix===1||ix===5||iy===1||iy===5)){
-        ctx.fillRect((x+m)*s,(y+m)*s,s,s);
+  const c = document.getElementById('qr-canvas');
+  if (!c) return;
+  const ctx = c.getContext('2d');
+  const s = 8, m = 4, qrSize = 21;
+  c.width = c.height = (qrSize + 2 * m) * s;
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, c.width, c.height);
+  const hash = Array.from(url).reduce((a, ch) => ((a << 5) - a) + ch.charCodeAt(0), 0);
+  ctx.fillStyle = '#000';
+  for (let y = 0; y < qrSize; y++) for (let x = 0; x < qrSize; x++) {
+    const v = (hash >> ((x * y) % 31)) & 1;
+    const fx = x < 7 && y < 7, f2 = x > qrSize - 8 && y < 7, f3 = x < 7 && y > qrSize - 8;
+    if (fx || f2 || f3) {
+      const ix = fx ? x : f2 ? x - (qrSize - 7) : x, iy = fx ? y : f2 ? y : y - (qrSize - 7);
+      if (!(ix === 0 || ix === 6 || iy === 0 || iy === 6 || (ix >= 2 && ix <= 4 && iy >= 2 && iy <= 4) || ix === 1 || ix === 5 || iy === 1 || iy === 5)) {
+        ctx.fillRect((x + m) * s, (y + m) * s, s, s);
       }
-    } else if(v&&x>0&&y>0){
-      ctx.fillRect((x+m)*s,(y+m)*s,s,s);
+    } else if (v && x > 0 && y > 0) {
+      ctx.fillRect((x + m) * s, (y + m) * s, s, s);
     }
   }
 }
 
-initState(); rerender();
+initState();
+rerender();

package/public/js/config_schema.js

@@ -191,7 +191,7 @@ const SCHEMA = {
           label: 'Player',
           children: [
             { id: 'espMain', label: 'ESP Settings', controls: [
-              { key: 'Enable ESP', type: 'checkbox', def: false },
+              { key: 'Enable ESP', type: 'checkbox', def: false, bind: true },
               { key: 'ESP Distance', type: 'slider_int', def: 0, min: 0, max: 3000 },
               { key: 'ESP Show Local Player', type: 'checkbox', def: false },
               { key: 'ESP Ignore Invisible', type: 'checkbox', def: false },
@@ -343,7 +343,13 @@ const SCHEMA = {
       subs: [{
         id: 'wmain',
         label: 'Teleport',
-        children: []
+        children: [
+          { id: 'worldTeleport', label: 'World Teleport', controls: [
+            { key: 'Enable Freecam', type: 'checkbox', def: false, bind: true },
+            { key: 'Freecam Speed', type: 'slider_float', def: 100, min: 1, max: 1000, step: 1 },
+            { key: 'Freecam Teleport', type: 'checkbox', def: false, bind: true },
+          ]},
+        ]
       }]
     },
     {