129 lines
5.7 KiB
HTML
129 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BDSM Game – Einladung – xXx Sphere</title>
|
||
<link rel="stylesheet" href="/css/variables.css">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<style>
|
||
.invite-card {
|
||
background: var(--color-card);
|
||
border: 1px solid var(--color-secondary);
|
||
border-radius: 14px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.invite-icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||
.invite-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
||
.invite-sub { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.6; }
|
||
.invite-actions { display: flex; flex-direction: column; gap: 0.75rem; }
|
||
.invite-actions button { width: 100%; padding: 0.85rem; }
|
||
.decline-btn {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-muted);
|
||
font-size: 0.82rem;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
padding: 0.25rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="app">
|
||
<div class="main">
|
||
<div class="content">
|
||
<div id="loading" style="text-align:center;color:var(--color-muted);padding:3rem 0;">Einladung wird geladen…</div>
|
||
<div class="invite-card" id="card" style="display:none;">
|
||
<div class="invite-icon">⛓️</div>
|
||
<div class="invite-title" id="title"></div>
|
||
<div class="invite-sub" id="sub"></div>
|
||
<div class="message" id="message" style="display:none;margin-bottom:1rem;"></div>
|
||
<div class="invite-actions" id="actions"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/icons.js"></script>
|
||
<script src="/js/sidebar.js"></script>
|
||
<script>
|
||
const params = new URLSearchParams(location.search);
|
||
const einladungId = params.get('id');
|
||
if (!einladungId) window.location.replace('/userhome.html');
|
||
|
||
let einladung = null;
|
||
|
||
async function laden() {
|
||
try {
|
||
const res = await fetch(`/bdsm/einladung/${einladungId}`);
|
||
if (!res.ok) { zeigeFehler('Einladung nicht gefunden.'); return; }
|
||
einladung = await res.json();
|
||
document.getElementById('loading').style.display = 'none';
|
||
document.getElementById('card').style.display = '';
|
||
|
||
if (einladung.status === 'ACCEPTED_OWN' || einladung.status === 'ACCEPTED_HOST') {
|
||
zeigeBestaetigt();
|
||
return;
|
||
}
|
||
if (einladung.status === 'DECLINED' || einladung.status === 'CANCELLED') {
|
||
zeigeFehler('Diese Einladung ist nicht mehr gültig.');
|
||
return;
|
||
}
|
||
|
||
document.getElementById('title').textContent = `${einladung.inviterName || 'Jemand'} lädt dich ein`;
|
||
document.getElementById('sub').textContent = 'Du wurdest zu einem BDSM Game eingeladen. Wie möchtest du mitspielen?';
|
||
const actions = document.getElementById('actions');
|
||
actions.innerHTML = `
|
||
<button onclick="antworten(true, 'OWN_DEVICE')">Am eigenen Gerät mitspielen</button>
|
||
<button class="secondary" onclick="antworten(true, 'HOST_DEVICE')">Am Gerät von ${einladung.inviterName || 'der einladenden Person'}</button>
|
||
<button class="decline-btn" onclick="antworten(false, null)">Einladung ablehnen</button>`;
|
||
} catch (e) {
|
||
zeigeFehler('Fehler beim Laden der Einladung.');
|
||
}
|
||
}
|
||
|
||
async function antworten(accepted, mode) {
|
||
document.getElementById('actions').innerHTML = '<div style="color:var(--color-muted);font-size:0.9rem;">Wird gespeichert…</div>';
|
||
try {
|
||
const res = await fetch(`/bdsm/einladung/${einladungId}/antwort`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ accepted, mode }),
|
||
});
|
||
if (!res.ok) throw new Error();
|
||
if (!accepted) {
|
||
document.getElementById('title').textContent = 'Einladung abgelehnt';
|
||
document.getElementById('sub').textContent = 'Du hast die Einladung abgelehnt.';
|
||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||
} else if (mode === 'OWN_DEVICE') {
|
||
window.location.replace(`/games/bdsm/neubdsm.html`);
|
||
} else {
|
||
zeigeBestaetigt();
|
||
}
|
||
} catch (_) {
|
||
document.getElementById('actions').innerHTML = '';
|
||
zeigeFehler('Fehler beim Speichern der Antwort.');
|
||
}
|
||
}
|
||
|
||
function zeigeBestaetigt() {
|
||
document.getElementById('title').textContent = 'Einladung angenommen';
|
||
document.getElementById('sub').textContent = 'Du spielst am Gerät der einladenden Person mit. Das Spiel wird dort von ihr gestartet.';
|
||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||
}
|
||
|
||
function zeigeFehler(text) {
|
||
document.getElementById('loading').style.display = 'none';
|
||
document.getElementById('card').style.display = '';
|
||
document.getElementById('title').textContent = 'Hinweis';
|
||
document.getElementById('sub').textContent = text;
|
||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||
}
|
||
|
||
laden();
|
||
</script>
|
||
</body>
|
||
</html>
|