111 lines
5.1 KiB
JavaScript
111 lines
5.1 KiB
JavaScript
const resource = typeof GetParentResourceName === 'function' ? GetParentResourceName() : 'devx_housing';
|
||
const preview = document.querySelector('#preview');
|
||
const panel = document.querySelector('#panel');
|
||
const building = document.querySelector('#building');
|
||
const label = document.querySelector('#label');
|
||
const meta = document.querySelector('#meta');
|
||
const price = document.querySelector('#price');
|
||
const buy = document.querySelector('#buy');
|
||
const buyText = document.querySelector('#buyText');
|
||
const panelTitle = document.querySelector('#panelTitle');
|
||
const panelText = document.querySelector('#panelText');
|
||
const panelBody = document.querySelector('#panelBody');
|
||
let currentDoor = null;
|
||
|
||
async function post(name, data = {}) {
|
||
const response = await fetch(`https://${resource}/${name}`, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(data)
|
||
});
|
||
return response.json();
|
||
}
|
||
|
||
function money(value){return `${new Intl.NumberFormat('de-DE').format(Number(value)||0)} $`}
|
||
function closePanel(){panel.classList.add('hidden');post('uiClose')}
|
||
|
||
document.querySelector('#previous').onclick = () => post('previewPrevious');
|
||
document.querySelector('#next').onclick = () => post('previewNext');
|
||
document.querySelector('#previewClose').onclick = () => post('previewClose');
|
||
document.querySelector('#panelClose').onclick = closePanel;
|
||
buy.onclick = async () => {
|
||
buy.disabled = true;
|
||
const result = await post('previewBuy');
|
||
if (!result.ok) {
|
||
buyText.textContent = result.error || 'KAUF FEHLGESCHLAGEN';
|
||
setTimeout(() => buyText.textContent = 'KAUFEN', 2200);
|
||
buy.disabled = false;
|
||
}
|
||
};
|
||
|
||
document.addEventListener('keyup', event => {
|
||
if (event.key === 'Escape') {
|
||
if (!preview.classList.contains('hidden')) post('previewClose');
|
||
else if (!panel.classList.contains('hidden')) closePanel();
|
||
}
|
||
});
|
||
|
||
function elevator(data){
|
||
panel.classList.remove('hidden');
|
||
panelTitle.textContent = data.building;
|
||
panelText.textContent = `Aufzug · aktuelle Etage ${data.currentFloor || 'Lobby'}`;
|
||
panelBody.innerHTML = '';
|
||
for(let floor=1;floor<=Number(data.floors||1);floor++){
|
||
const button=document.createElement('button');button.className='panel-action';
|
||
button.innerHTML=`<b>Etage ${floor}</b><span>Wohnungen ${floor}01–${floor}04</span>`;
|
||
button.onclick=()=>post('elevatorFloor',{floor});
|
||
panelBody.appendChild(button);
|
||
}
|
||
}
|
||
|
||
|
||
function invite(data){
|
||
panel.classList.remove('hidden');
|
||
panelTitle.textContent=data.title||'Spieler einladen';
|
||
panelText.textContent='Der ausgewählte Spieler erhält eine Einladung und wird erst nach der Annahme teleportiert.';
|
||
panelBody.innerHTML='';
|
||
const players=Array.isArray(data.players)?data.players:[];
|
||
if(players.length===0){
|
||
const empty=document.createElement('div');empty.className='empty-state';empty.textContent='Aktuell ist kein anderer Spieler online.';panelBody.appendChild(empty);return;
|
||
}
|
||
for(const player of players){
|
||
const button=document.createElement('button');button.className='panel-action';
|
||
button.innerHTML=`<b>${player.name||'Spieler'}</b><span>Server-ID ${player.source}</span>`;
|
||
button.onclick=async()=>{button.disabled=true;const result=await post('invitePlayer',{target:player.source});if(!result.ok)button.disabled=false;};
|
||
panelBody.appendChild(button);
|
||
}
|
||
}
|
||
|
||
function door(data){
|
||
currentDoor=data;
|
||
panel.classList.remove('hidden');
|
||
panelTitle.textContent=data.label;
|
||
panelText.textContent=data.sold?`Bewohner: ${data.ownerName||'Unbekannt'}`:'Diese Wohnung ist noch frei.';
|
||
panelBody.innerHTML='';
|
||
const actions=document.createElement('div');actions.className='door-actions';
|
||
if(data.sold){
|
||
const ring=document.createElement('button');ring.className='panel-action';ring.innerHTML='<b>Klingeln</b>';ring.onclick=()=>post('doorRing',{propertyKey:data.propertyKey});
|
||
const knock=document.createElement('button');knock.className='panel-action';knock.innerHTML='<b>Klopfen</b>';knock.onclick=()=>post('doorKnock',{propertyKey:data.propertyKey});
|
||
actions.append(ring,knock);
|
||
const enter=document.createElement('button');enter.className='panel-action enter';enter.innerHTML='<b>Mit Einladung eintreten</b>';enter.onclick=()=>post('doorEnter',{propertyKey:data.propertyKey});actions.appendChild(enter);
|
||
}
|
||
panelBody.appendChild(actions);
|
||
}
|
||
|
||
window.addEventListener('message', event => {
|
||
const data=event.data||{};
|
||
if(data.action==='previewOpen'){preview.classList.remove('hidden');panel.classList.add('hidden')}
|
||
if(data.action==='previewData'){
|
||
building.textContent=data.building||'DEVX IMMOBILIEN';
|
||
label.textContent=data.label||'Wohnung';
|
||
meta.textContent=`Etage ${data.floor} · Wohnung ${data.unitNumber} · ${data.style} · ${data.index}/${data.total}`;
|
||
price.textContent=money(data.price);
|
||
buy.disabled=Boolean(data.sold);
|
||
buyText.textContent=data.ownedByMe?'DEINE WOHNUNG':data.sold?`VERKAUFT · ${data.ownerName||'Bewohnt'}`:'KAUFEN';
|
||
}
|
||
if(data.action==='elevatorOpen')elevator(data);
|
||
if(data.action==='doorOpen')door(data);
|
||
if(data.action==='inviteOpen')invite(data);
|
||
if(data.action==='close'){preview.classList.add('hidden');panel.classList.add('hidden')}
|
||
});
|