267 lines
14 KiB
JavaScript
267 lines
14 KiB
JavaScript
function initAdmin(token){
|
||
const overlay = document.getElementById('authOverlay');
|
||
const authMsg = document.getElementById('authMsg');
|
||
const tokenInput = document.getElementById('tokenInput');
|
||
const setTokenBtn = document.getElementById('setTokenBtn');
|
||
const statusEl = document.getElementById('statuspill');
|
||
function showOverlay(msg){
|
||
if(authMsg && msg){ authMsg.textContent = msg; }
|
||
if(overlay){ overlay.classList.add('show'); }
|
||
if(setTokenBtn && tokenInput){
|
||
setTokenBtn.onclick = () => {
|
||
const t = (tokenInput.value||'').trim();
|
||
if(!t) return;
|
||
const url = new URL(location.href);
|
||
url.searchParams.set('token', t);
|
||
location.href = url.toString();
|
||
};
|
||
}
|
||
}
|
||
function hideOverlay(){ if(overlay){ overlay.classList.remove('show'); } }
|
||
function setStatus(txt, cls){ if(!statusEl) return; statusEl.textContent = txt; statusEl.className = 'statuspill ' + (cls||''); }
|
||
|
||
let state=null, since=0, presets=[], groups=[];
|
||
const rows = document.getElementById('rows');
|
||
const presetlist = document.getElementById('presetlist');
|
||
const pg_list = document.getElementById('pg_list');
|
||
const g_checks = document.getElementById('g_checks');
|
||
|
||
function openBoard(){ window.open('/board?token='+encodeURIComponent(token), '_blank'); }
|
||
window.openBoard = openBoard;
|
||
|
||
function iconImg(name){ return `<span class="ico_wrap"><img class="icoimg" src="/icons/${encodeURIComponent(name)}.svg" alt="${name}"></span>`; }
|
||
function typeChip(t){ return `<span class="tagType ${t}">${t}</span>`; }
|
||
|
||
function row(a, idx){
|
||
const main = `<tr class="${idx===state.turn_idx? 'active':''}">
|
||
<td>${idx+1}</td>
|
||
<td>${a.name}</td>
|
||
<td>${a.init}</td>
|
||
<td>${a.hp}</td>
|
||
<td>${a.ac}${a.reveal_ac?'':' (hidden)'} </td>
|
||
<td>${typeChip(a.type)}</td>
|
||
<td>
|
||
<button class="btn" title="Concentration" onclick=toggle('${a.id}','conc')>✦</button>
|
||
<button class="btn" title="Dead" onclick=toggle('${a.id}','dead')>☠</button>
|
||
<button class="btn" title="Visible to players" onclick=toggle('${a.id}','visible')>👁</button>
|
||
<button class="btn" title="Reveal AC" onclick=toggle('${a.id}','reveal_ac')>🛡</button>
|
||
</td>
|
||
<td>
|
||
<button class="btn btn-danger" onclick=removeA('${a.id}')>🗑 Remove</button>
|
||
</td>
|
||
</tr>`;
|
||
const active = (a.effects||[]);
|
||
const KNOWN_CONDITIONS = ['poisoned','prone','grappled','restrained','stunned','blinded','deafened','charmed','frightened','paralyzed','petrified','unconscious'];
|
||
const cond = `<tr class="condrow"><td colspan="8"><div class="condbar">${
|
||
KNOWN_CONDITIONS.map(c=>`<button class="${active.includes(c)?'on':''}" onclick=toggleEffect('${a.id}','${c}')>${iconImg(c)} ${c}</button>`).join(' ')
|
||
} <button class="btn" style="margin-left:8px" onclick=clearEffects('${a.id}')>Clear conditions</button></div></td></tr>`;
|
||
return main + cond;
|
||
}
|
||
|
||
function render(){
|
||
document.getElementById('round').textContent = state.round;
|
||
rows.innerHTML = '';
|
||
(state.actors||[]).forEach((a, idx)=>{ rows.insertAdjacentHTML('beforeend', row(a, idx)); });
|
||
}
|
||
|
||
function renderPresets(){
|
||
presetlist.innerHTML = '';
|
||
presets.forEach(p=>{
|
||
const div = document.createElement('div'); div.className='preset';
|
||
if(p.avatar){ const img=document.createElement('img'); img.className='pav'; img.alt=p.name; img.src=(p.avatar.startsWith('http')||p.avatar.startsWith('/'))?p.avatar:('/avatars/'+encodeURIComponent(p.avatar)); div.appendChild(img); }
|
||
const span = document.createElement('span'); span.innerHTML = `${typeChip(p.type)} ${p.name}${p.ac? ' · AC '+p.ac: ''}${p.hp? ' · HP '+p.hp: ''}`; div.appendChild(span);
|
||
const addb = document.createElement('button'); addb.className='btn'; addb.textContent='➕ Add'; addb.onclick=()=>presetApply(p.id); div.appendChild(addb);
|
||
const delb = document.createElement('button'); delb.className='btn btn-danger'; delb.textContent='🗑'; delb.style.marginLeft='6px'; delb.onclick=()=>presetRemove(p.id); div.appendChild(delb);
|
||
presetlist.appendChild(div);
|
||
});
|
||
renderGroupChecks();
|
||
}
|
||
|
||
function renderGroupChecks(){
|
||
g_checks.innerHTML = '';
|
||
if(!presets.length){ g_checks.innerHTML = '<div class="muted">No presets yet.</div>'; return; }
|
||
presets.forEach(p=>{
|
||
const id = 'chk_'+p.id; const w=document.createElement('div');
|
||
w.innerHTML = `<label><input type="checkbox" id="${id}" data-id="${p.id}"/> ${p.name} <span class="muted">(${p.type}${p.ac? ' · AC '+p.ac:''}${p.hp? ' · HP '+p.hp:''})</span></label>`;
|
||
g_checks.appendChild(w);
|
||
});
|
||
}
|
||
|
||
function renderGroups(){
|
||
pg_list.innerHTML = '';
|
||
groups.forEach(g=>{
|
||
const div = document.createElement('div'); div.className='preset';
|
||
const names = g.member_ids.map(id=>{ const p=presets.find(x=>x.id===id); return p? p.name : 'unknown'; }).join(', ');
|
||
const span = document.createElement('span'); span.innerHTML = `<strong>${g.name}</strong> <span class="muted">(${g.member_ids.length} members)</span> — ${names}`;
|
||
div.appendChild(span);
|
||
const addb = document.createElement('button'); addb.className='btn'; addb.textContent='➕ Add Group'; addb.onclick=()=>groupApply(g.id); div.appendChild(addb);
|
||
const delb = document.createElement('button'); delb.className='btn btn-danger'; delb.textContent='🗑'; delb.style.marginLeft='6px'; delb.onclick=()=>groupRemove(g.id); div.appendChild(delb);
|
||
pg_list.appendChild(div);
|
||
});
|
||
}
|
||
|
||
async function post(p, body){
|
||
const r = await fetch(p+`?token=${encodeURIComponent(token)}`, { method:'POST', headers:{'Content-Type':'application/json'}, body: body?JSON.stringify(body):null });
|
||
if(r.status===401){ setStatus('Unauthorized', 'bad'); showOverlay('Unauthorized: token missing or invalid. Fix the token and reload.'); return false; }
|
||
if(!r.ok){ const t = await r.text(); alert('Error '+r.status+' '+t); setStatus('Reconnecting…','warn'); }
|
||
return r.ok;
|
||
}
|
||
async function get(p){
|
||
const r = await fetch(p+`?token=${encodeURIComponent(token)}`);
|
||
if(r.status===401){ setStatus('Unauthorized', 'bad'); showOverlay('Unauthorized: token missing or invalid. Fix the token and reload.'); return null; }
|
||
if(!r.ok){ const t = await r.text(); alert('Error '+r.status+' '+t); setStatus('Reconnecting…','warn'); return null; }
|
||
return r.json();
|
||
}
|
||
|
||
// Upload helpers
|
||
async function uploadAvatar(fileInputId, targetInputId, previewId){
|
||
const fileEl = document.getElementById(fileInputId);
|
||
if(fileEl && fileEl.files && fileEl.files.length){
|
||
await uploadAvatarFile(fileEl.files[0], targetInputId, previewId);
|
||
fileEl.value = '';
|
||
} else { alert('Select or drop a file first.'); }
|
||
}
|
||
async function uploadAvatarFile(file, targetInputId, previewId){
|
||
const fd = new FormData(); fd.append('file', file);
|
||
const r = await fetch('/api/upload_avatar?token='+encodeURIComponent(token), { method: 'POST', body: fd });
|
||
if(r.status===401){ setStatus('Unauthorized', 'bad'); showOverlay('Unauthorized: token missing or invalid.'); return; }
|
||
if(!r.ok){ const t = await r.text(); alert('Upload error '+r.status+' '+t); setStatus('Reconnecting…','warn'); return; }
|
||
const j = await r.json();
|
||
document.getElementById(targetInputId).value = j.filename;
|
||
if(previewId){ setPreview(j.filename, previewId); }
|
||
}
|
||
function setPreview(val, previewId){
|
||
const img = document.getElementById(previewId);
|
||
if(!img) return; if(!val){ img.src=''; img.style.opacity=.3; return; }
|
||
const src = (val.startsWith('http')||val.startsWith('/')) ? val : ('/avatars/'+encodeURIComponent(val));
|
||
img.src = src; img.style.opacity=1;
|
||
}
|
||
function bindPreview(inputId, previewId){ const el = document.getElementById(inputId); el.addEventListener('input', ()=> setPreview(el.value.trim(), previewId)); setPreview(el.value.trim(), previewId); }
|
||
function makeDropzone(zoneId, targetInputId, previewId){
|
||
const dz = document.getElementById(zoneId);
|
||
['dragenter','dragover'].forEach(ev=> dz.addEventListener(ev, e=>{ e.preventDefault(); dz.classList.add('drag'); }));
|
||
['dragleave','drop'].forEach(ev=> dz.addEventListener(ev, e=>{ e.preventDefault(); dz.classList.remove('drag'); }));
|
||
dz.addEventListener('drop', async (e)=>{ const files = e.dataTransfer.files; if(!files || !files.length) return; await uploadAvatarFile(files[0], targetInputId, previewId); });
|
||
}
|
||
|
||
// Mutations
|
||
async function add(){
|
||
const name = document.getElementById('name').value.trim();
|
||
const init = parseFloat(document.getElementById('init').value||'0');
|
||
const hp = parseInt(document.getElementById('hp').value||'0');
|
||
const ac = parseInt(document.getElementById('ac').value||'0');
|
||
const type = document.getElementById('type').value;
|
||
const note = document.getElementById('note').value.trim();
|
||
const avatar = document.getElementById('avatar').value.trim();
|
||
await post('/api/add', { name, init, hp, ac, type, note, avatar });
|
||
}
|
||
async function clearAll(){ await post('/api/clear'); }
|
||
async function toggleVisible(){ await post('/api/toggle_visible'); }
|
||
async function next(){ await post('/api/next'); }
|
||
async function prev(){ await post('/api/prev'); }
|
||
async function toggle(id, field){ await post('/api/update', { id, [field]: 'toggle' }); }
|
||
async function toggleEffect(id, effect){ await post('/api/toggle_effect', { id, effect }); }
|
||
async function clearEffects(id){ await post('/api/clear_effects', { id }); }
|
||
async function removeA(id){ await post('/api/remove', { id }); }
|
||
async function setDeadMode(mode){ await post('/api/dead_mode', { mode }); updateDeadSeg(mode); }
|
||
function updateDeadSeg(mode){ const seg = document.getElementById('deadseg'); if(!seg) return; seg.querySelectorAll('button[data-mode]').forEach(b=>{ b.classList.toggle('on', b.getAttribute('data-mode')===mode); }); }
|
||
|
||
// Presets
|
||
async function presetAdd(){
|
||
const name = document.getElementById('p_name').value.trim();
|
||
const type = document.getElementById('p_type').value;
|
||
const hp = parseInt(document.getElementById('p_hp').value||'0');
|
||
const ac = parseInt(document.getElementById('p_ac').value||'0');
|
||
const note = document.getElementById('p_note').value.trim();
|
||
const avatar = document.getElementById('p_avatar').value.trim();
|
||
await post('/api/preset/add', { name, type, hp, ac, note, avatar });
|
||
await loadPresets(); await loadPresetGroups();
|
||
}
|
||
async function presetRemove(id){ await post('/api/preset/remove', { id }); await loadPresets(); await loadPresetGroups(); }
|
||
async function presetApply(id){
|
||
const init = prompt('Initiative roll for this actor?', '10');
|
||
const p = parseFloat(init||'0');
|
||
await post('/api/preset/apply', { id, init: p });
|
||
}
|
||
|
||
// Groups
|
||
async function groupAdd(){
|
||
const name = document.getElementById('g_name').value.trim();
|
||
const member_ids = Array.from(g_checks.querySelectorAll('input[type=checkbox]:checked')).map(x=>x.getAttribute('data-id'));
|
||
if(!name){ alert('Name required'); return; }
|
||
if(!member_ids.length){ alert('Select at least one preset'); return; }
|
||
await post('/api/preset/group/add', { name, member_ids });
|
||
document.getElementById('g_name').value='';
|
||
g_checks.querySelectorAll('input[type=checkbox]').forEach(c=> c.checked=false);
|
||
await loadPresetGroups();
|
||
}
|
||
async function groupRemove(id){ await post('/api/preset/group/remove', { id }); await loadPresetGroups(); }
|
||
async function groupApply(id){
|
||
const r = await fetch('/api/preset_groups?token='+encodeURIComponent(token));
|
||
if(r.status===401){ setStatus('Unauthorized', 'bad'); showOverlay('Unauthorized: token missing or invalid.'); return; }
|
||
const all = await r.json(); groups = all.items||[];
|
||
const g = groups.find(x=>x.id===id); if(!g){ alert('Group not found'); return; }
|
||
const mode = (prompt('Group add mode: single | list | per | step','single')||'single').trim().toLowerCase();
|
||
let payload = { id };
|
||
if(mode==='list'){
|
||
const raw = prompt('Comma-separated initiatives in group order','12,11,10');
|
||
if(raw && raw.trim().length){ payload.inits = raw.split(',').map(s=>parseFloat((s||'0').trim())); }
|
||
} else if(mode==='per'){
|
||
const arr = [];
|
||
g.member_ids.forEach((pid, i)=>{
|
||
const p = presets.find(x=>x.id===pid); const lbl = p? p.name : ('Member '+(i+1));
|
||
const v = prompt('Initiative for '+lbl,'10'); arr.push(parseFloat(v||'0'));
|
||
});
|
||
payload.inits = arr;
|
||
} else if(mode==='step'){
|
||
const base = parseFloat(prompt('Base initiative for first member','12')||'12');
|
||
const step = parseFloat(prompt('Step per next member (e.g. -1 for descending)','-1')||'-1');
|
||
payload.inits = g.member_ids.map((_,i)=> base + i*step);
|
||
} else {
|
||
const v = prompt('Single initiative value for all members','12');
|
||
payload.init = parseFloat(v||'12');
|
||
}
|
||
await post('/api/preset/group/apply', payload);
|
||
}
|
||
|
||
async function loadPresets(){ const r = await get('/api/presets'); if(r) { presets = r.items||[]; renderPresets(); } }
|
||
async function loadPresetGroups(){ const r = await get('/api/preset_groups'); if(r){ groups = r.items||[]; renderGroups(); } }
|
||
|
||
async function poll(){
|
||
try{
|
||
const r = await fetch(`/api/state?since=${since}&token=${encodeURIComponent(token)}`);
|
||
if(r.status===401){ setStatus('Unauthorized', 'bad'); showOverlay('Unauthorized: token missing or invalid. Fix the token and reload.'); setTimeout(poll, 1500); return; }
|
||
if(r.ok){ hideOverlay(); setStatus('Connected','ok'); state = await r.json(); since = state.version; render(); updateDeadSeg(state.dead_mode||'normal'); }
|
||
else { setStatus('Reconnecting…','warn'); }
|
||
} catch(e){ setStatus('Reconnecting…','warn'); }
|
||
setTimeout(poll, 300);
|
||
}
|
||
|
||
// init
|
||
window.clearAll = clearAll;
|
||
window.toggleVisible = toggleVisible;
|
||
window.next = next;
|
||
window.prev = prev;
|
||
window.toggle = toggle;
|
||
window.toggleEffect = toggleEffect;
|
||
window.clearEffects = clearEffects;
|
||
window.removeA = removeA;
|
||
window.setDeadMode = setDeadMode;
|
||
window.presetAdd = presetAdd;
|
||
window.presetRemove = presetRemove;
|
||
window.presetApply = presetApply;
|
||
window.groupAdd = groupAdd;
|
||
window.groupRemove = groupRemove;
|
||
window.groupApply = groupApply;
|
||
|
||
bindPreview('avatar','avatar_preview');
|
||
bindPreview('p_avatar','p_avatar_preview');
|
||
makeDropzone('avatar_drop','avatar','avatar_preview');
|
||
makeDropzone('p_avatar_drop','p_avatar','p_avatar_preview');
|
||
|
||
loadPresets();
|
||
loadPresetGroups();
|
||
setStatus('Connecting…','warn');
|
||
poll();
|
||
}
|