Server-Monitor v3, Composer v2, Temp-Voice-Panel und Embed-Polish
- Server-Monitor v3: gamedig-Integration (300+ Spiele), GSM-Stil-Embeds (Spieler-Balken mit %, Map, Spieler-Liste, klickbarer Connect-Link, Ping im Footer), Down/Up-Alerts (2 Fails → 🚨, Recovery → ✅ mit Downtime) in konfigurierbaren Alert-Kanal; Server-Tab mit 19 Spiel-Presets, Host/Port bzw. Query-URL und Connect-URL - Composer v2: visueller Embed-Builder mit Live-Discord-Preview (Autor, Felder, Bilder, Farbe, Footer, Timestamp), speicherbare Vorlagen (/api/templates), /api/compose versteht volle Embeds - Temp-Voice: Control-Panel im erstellten Kanal (Umbenennen, Sperren, Limit, Löschen) — nur der Kanal-Besitzer darf bedienen - Embed-Polish: brandEmbed-Factory (src/embeds.js), Footer überall mit Bot-Avatar-Icon Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,262 @@
|
||||
// Composer v2 (Vorbild: message.style / embed-generator): voller Embed-Builder
|
||||
// mit Live-Vorschau im Discord-Look + speicherbaren Vorlagen.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
|
||||
import { Markdown } from '../markdown.jsx';
|
||||
|
||||
const EMPTY_EMBED = {
|
||||
author_name: '', author_icon: '', title: '', url: '', description: '',
|
||||
color: '#f5c518', thumbnail: '', image: '', footer: '', timestamp: true,
|
||||
fields: [],
|
||||
};
|
||||
|
||||
/** Builder-State → Discord-Embed-Objekt (nur gesetzte Felder) */
|
||||
function toApiEmbed(e) {
|
||||
const out = {};
|
||||
if (e.author_name.trim()) {
|
||||
out.author = { name: e.author_name.trim() };
|
||||
if (e.author_icon.trim()) out.author.icon_url = e.author_icon.trim();
|
||||
}
|
||||
if (e.title.trim()) out.title = e.title.trim();
|
||||
if (e.url.trim()) out.url = e.url.trim();
|
||||
if (e.description.trim()) out.description = e.description;
|
||||
out.color = parseInt(e.color.replace('#', ''), 16) || 0xf5c518;
|
||||
if (e.thumbnail.trim()) out.thumbnail = { url: e.thumbnail.trim() };
|
||||
if (e.image.trim()) out.image = { url: e.image.trim() };
|
||||
if (e.footer.trim()) out.footer = { text: e.footer.trim() };
|
||||
if (e.timestamp) out.timestamp = new Date().toISOString();
|
||||
const fields = e.fields.filter((f) => f.name.trim() && f.value.trim());
|
||||
if (fields.length) out.fields = fields;
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Discord-Embed-Objekt (aus Vorlage) → Builder-State */
|
||||
function fromApiEmbed(embed) {
|
||||
if (!embed) return { ...EMPTY_EMBED, fields: [] };
|
||||
return {
|
||||
author_name: embed.author?.name ?? '',
|
||||
author_icon: embed.author?.icon_url ?? '',
|
||||
title: embed.title ?? '',
|
||||
url: embed.url ?? '',
|
||||
description: embed.description ?? '',
|
||||
color: `#${Number(embed.color ?? 0xf5c518).toString(16).padStart(6, '0')}`,
|
||||
thumbnail: embed.thumbnail?.url ?? '',
|
||||
image: embed.image?.url ?? '',
|
||||
footer: embed.footer?.text ?? '',
|
||||
timestamp: Boolean(embed.timestamp),
|
||||
fields: (embed.fields ?? []).map((f) => ({ name: f.name, value: f.value, inline: Boolean(f.inline) })),
|
||||
};
|
||||
}
|
||||
|
||||
/** Live-Vorschau im Discord-Look */
|
||||
function DiscordPreview({ content, embed, useEmbed }) {
|
||||
const hasEmbed = useEmbed && (embed.title || embed.description || embed.author_name || embed.fields.some((f) => f.name));
|
||||
return (
|
||||
<div className="dpv">
|
||||
<div className="dpv-msg">
|
||||
<div className="dpv-avatar">🤖</div>
|
||||
<div className="dpv-body">
|
||||
<div className="dpv-name">d4rkbot <span className="dpv-tag">APP</span> <span className="dpv-time">heute um {new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr</span></div>
|
||||
{content.trim() && <div className="dpv-content"><Markdown text={content} /></div>}
|
||||
{hasEmbed && (
|
||||
<div className="dpv-embed" style={{ borderLeftColor: embed.color }}>
|
||||
<div className="dpv-embed-main">
|
||||
{embed.author_name && (
|
||||
<div className="dpv-author">
|
||||
{embed.author_icon && <img src={embed.author_icon} alt="" />}
|
||||
{embed.author_name}
|
||||
</div>
|
||||
)}
|
||||
{embed.title && <div className="dpv-title">{embed.title}</div>}
|
||||
{embed.description && <div className="dpv-desc"><Markdown text={embed.description} /></div>}
|
||||
{embed.fields.filter((f) => f.name && f.value).length > 0 && (
|
||||
<div className="dpv-fields">
|
||||
{embed.fields.filter((f) => f.name && f.value).map((f, i) => (
|
||||
<div className={`dpv-field ${f.inline ? 'inline' : ''}`} key={i}>
|
||||
<div className="dpv-field-name">{f.name}</div>
|
||||
<div className="dpv-field-value"><Markdown text={f.value} /></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{embed.image && <img className="dpv-image" src={embed.image} alt="" />}
|
||||
{(embed.footer || embed.timestamp) && (
|
||||
<div className="dpv-footer">
|
||||
{embed.footer}{embed.footer && embed.timestamp ? ' • ' : ''}{embed.timestamp ? 'heute' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{embed.thumbnail && <img className="dpv-thumb" src={embed.thumbnail} alt="" />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EmbedComposer({ channelOptions, flash }) {
|
||||
const [channel, setChannel] = useState('');
|
||||
const [messageId, setMessageId] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [useEmbed, setUseEmbed] = useState(true);
|
||||
const [embed, setEmbed] = useState({ ...EMPTY_EMBED, fields: [] });
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [templateName, setTemplateName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
apiGet('/api/templates').then((d) => setTemplates(d.templates)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const setE = (patch) => setEmbed({ ...embed, ...patch });
|
||||
const setField = (i, patch) =>
|
||||
setE({ fields: embed.fields.map((f, j) => (j === i ? { ...f, ...patch } : f)) });
|
||||
|
||||
async function send() {
|
||||
if (!channel) return flash('✗ Kanal wählen');
|
||||
const apiEmbed = useEmbed ? toApiEmbed(embed) : undefined;
|
||||
if (!content.trim() && !useEmbed) return flash('✗ Text oder Embed nötig');
|
||||
try {
|
||||
const res = await apiPost('/api/compose', {
|
||||
channel_id: channel,
|
||||
message_id: messageId.trim() || undefined,
|
||||
content,
|
||||
embed: apiEmbed,
|
||||
});
|
||||
flash(res.edited ? '✓ Aktualisiert' : `✓ Gesendet (ID ${res.message_id})`);
|
||||
if (!res.edited) setMessageId(res.message_id);
|
||||
} catch {
|
||||
flash('✗ Senden fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveTemplate() {
|
||||
if (!templateName.trim()) return flash('✗ Vorlagen-Name nötig');
|
||||
try {
|
||||
const res = await apiPut(`/api/templates/${encodeURIComponent(templateName.trim())}`, {
|
||||
content,
|
||||
embed: useEmbed ? toApiEmbed(embed) : null,
|
||||
});
|
||||
setTemplates(res.templates);
|
||||
flash('✓ Vorlage gespeichert');
|
||||
} catch {
|
||||
flash('✗ Vorlage fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
|
||||
function loadTemplate(name) {
|
||||
const t = templates.find((x) => x.name === name);
|
||||
if (!t) return;
|
||||
setContent(t.payload.content ?? '');
|
||||
setUseEmbed(Boolean(t.payload.embed));
|
||||
setEmbed(fromApiEmbed(t.payload.embed));
|
||||
setTemplateName(name);
|
||||
}
|
||||
|
||||
async function removeTemplate() {
|
||||
if (!templateName.trim() || !window.confirm(`Vorlage „${templateName}" löschen?`)) return;
|
||||
const res = await apiDelete(`/api/templates/${encodeURIComponent(templateName.trim())}`).catch(() => null);
|
||||
if (res) { setTemplates(res.templates); setTemplateName(''); flash('✓ Vorlage gelöscht'); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Post verfassen</h2>
|
||||
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<select value={channel} onChange={(e) => setChannel(e.target.value)}>
|
||||
<option value="" disabled>— Kanal wählen —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
<input type="text" style={{ flex: 'none', width: '13rem' }} placeholder="Message-ID (= bearbeiten)" value={messageId} onChange={(e) => setMessageId(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<select style={{ flex: 1 }} value={templateName} onChange={(e) => loadTemplate(e.target.value)}>
|
||||
<option value="">— Vorlage laden —</option>
|
||||
{templates.map((t) => <option key={t.name} value={t.name}>{t.name}</option>)}
|
||||
</select>
|
||||
<input type="text" style={{ flex: 1 }} placeholder="Als Vorlage speichern unter…" value={templateName} onChange={(e) => setTemplateName(e.target.value)} />
|
||||
<button className="btn" onClick={saveTemplate}>💾</button>
|
||||
<button className="card-delete" title="Vorlage löschen" onClick={removeTemplate}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="composer-grid">
|
||||
<div className="composer-form">
|
||||
<div className="field">
|
||||
<label>Text über dem Embed <span className="field-hint">Discord-Markdown</span></label>
|
||||
<textarea rows={3} value={content} onChange={(e) => setContent(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="toggle">
|
||||
<input type="checkbox" checked={useEmbed} onChange={(e) => setUseEmbed(e.target.checked)} />
|
||||
<span>Embed anhängen</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{useEmbed && (
|
||||
<>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="color" className="color-pick" title="Embed-Farbe" value={embed.color} onChange={(e) => setE({ color: e.target.value })} />
|
||||
<input type="text" placeholder="Author-Name" value={embed.author_name} onChange={(e) => setE({ author_name: e.target.value })} />
|
||||
<input type="text" placeholder="Author-Icon-URL" value={embed.author_icon} onChange={(e) => setE({ author_icon: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Titel" value={embed.title} onChange={(e) => setE({ title: e.target.value })} />
|
||||
<input type="text" placeholder="Titel-URL" value={embed.url} onChange={(e) => setE({ url: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<textarea rows={5} placeholder="Beschreibung (Markdown: **fett**, Listen, ## Überschriften …)" value={embed.description} onChange={(e) => setE({ description: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Thumbnail-URL (klein, rechts)" value={embed.thumbnail} onChange={(e) => setE({ thumbnail: e.target.value })} />
|
||||
<input type="text" placeholder="Bild-URL (groß, unten)" value={embed.image} onChange={(e) => setE({ image: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Felder</label>
|
||||
{embed.fields.map((f, i) => (
|
||||
<div className="rr-row" key={i}>
|
||||
<input type="text" style={{ flex: 'none', width: '11rem' }} placeholder="Feld-Name" value={f.name} onChange={(e) => setField(i, { name: e.target.value })} />
|
||||
<input type="text" placeholder="Feld-Wert" value={f.value} onChange={(e) => setField(i, { value: e.target.value })} />
|
||||
<label className="scope-pick" title="Nebeneinander">
|
||||
<input type="checkbox" checked={f.inline} onChange={(e) => setField(i, { inline: e.target.checked })} />
|
||||
inline
|
||||
</label>
|
||||
<button className="card-delete" onClick={() => setE({ fields: embed.fields.filter((_, j) => j !== i) })}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-mini" style={{ marginTop: '.4rem' }} disabled={embed.fields.length >= 25}
|
||||
onClick={() => setE({ fields: [...embed.fields, { name: '', value: '', inline: true }] })}>+ Feld</button>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="Footer-Text" value={embed.footer} onChange={(e) => setE({ footer: e.target.value })} />
|
||||
<label className="scope-pick"><input type="checkbox" checked={embed.timestamp} onChange={(e) => setE({ timestamp: e.target.checked })} /> Zeitstempel</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="settings-actions">
|
||||
<button className="btn btn-save" onClick={send}>{messageId.trim() ? 'Aktualisieren' : 'Senden'}</button>
|
||||
{messageId.trim() && <button className="btn btn-ghost" onClick={() => setMessageId('')}>Neu statt bearbeiten</button>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="composer-preview">
|
||||
<label>Vorschau</label>
|
||||
<DiscordPreview content={content} embed={embed} useEmbed={useEmbed} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { apiGet, apiPut, apiPost, apiDelete } from '../api.js';
|
||||
import EmbedComposer from '../components/EmbedComposer.jsx';
|
||||
|
||||
const API_SCOPES = [
|
||||
{ id: 'message', label: 'message', hint: 'Nachrichten/Embeds in Kanäle posten' },
|
||||
@@ -77,8 +78,6 @@ export default function Settings({ me }) {
|
||||
};
|
||||
const [menus, setMenus] = useState([]);
|
||||
const [menuDraft, setMenuDraft] = useState(emptyMenu);
|
||||
// Composer
|
||||
const [composer, setComposer] = useState({ channel: '', title: '', text: '', messageId: '' });
|
||||
// Branding
|
||||
const [giteaToken, setGiteaToken] = useState('');
|
||||
const [botName, setBotName] = useState('');
|
||||
@@ -97,7 +96,17 @@ export default function Settings({ me }) {
|
||||
const [triggers, setTriggers] = useState([]);
|
||||
const [triggerDraft, setTriggerDraft] = useState({ keyword: '', reply: '' });
|
||||
// Game-Server
|
||||
const emptyServer = { id: null, name: '', type: 'fivem', query_url: '', address: '' };
|
||||
const GAME_PRESETS = [
|
||||
['fivem', '🚗 FiveM'], ['http', '🌐 HTTP-Check'], ['minecraft', '⛏️ Minecraft (Java)'],
|
||||
['minecraftbe', '⛏️ Minecraft (Bedrock)'], ['rust', '🪓 Rust'], ['valheim', '🛡️ Valheim'],
|
||||
['palworld', '🐑 Palworld'], ['arkse', '🦖 ARK: Survival Evolved'], ['dayz', '🧟 DayZ'],
|
||||
['projectzomboid', '🧟 Project Zomboid'], ['sevendaystodie', '🧟 7 Days to Die'],
|
||||
['teamfortress2', '🎩 Team Fortress 2'], ['counterstrike2', '🔫 Counter-Strike 2'],
|
||||
['garrysmod', '🔧 Garry’s Mod'], ['satisfactory', '🏭 Satisfactory'],
|
||||
['terraria', '🌳 Terraria'], ['arma3', '🪖 Arma 3'], ['squad', '🪖 Squad'],
|
||||
['unturned', '🏝️ Unturned'],
|
||||
];
|
||||
const emptyServer = { id: null, name: '', type: 'fivem', query_url: '', address: '', host: '', port: '', connect_url: '' };
|
||||
const [servers, setServers] = useState([]);
|
||||
const [serverDraft, setServerDraft] = useState(emptyServer);
|
||||
// Bot-Beschreibung + Team
|
||||
@@ -177,9 +186,10 @@ export default function Settings({ me }) {
|
||||
if (res) setTeam(res.admins);
|
||||
}
|
||||
|
||||
const serverNeedsUrl = ['fivem', 'http'].includes(serverDraft.type);
|
||||
async function saveServer() {
|
||||
if (!serverDraft.name.trim() || !serverDraft.query_url.trim()) {
|
||||
flash('✗ Name und Query-URL nötig');
|
||||
if (!serverDraft.name.trim() || (serverNeedsUrl ? !serverDraft.query_url.trim() : !serverDraft.host.trim())) {
|
||||
flash(serverNeedsUrl ? '✗ Name und Query-URL nötig' : '✗ Name und Host nötig');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
@@ -388,25 +398,6 @@ export default function Settings({ me }) {
|
||||
if (createdKey?.id === id) setCreatedKey(null);
|
||||
}
|
||||
|
||||
async function sendCompose() {
|
||||
if (!composer.channel || !composer.text.trim()) {
|
||||
flash('✗ Kanal und Text nötig');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await apiPost('/api/compose', {
|
||||
channel_id: composer.channel,
|
||||
message_id: composer.messageId.trim() || undefined,
|
||||
embed_title: composer.title.trim() || undefined,
|
||||
content: composer.text,
|
||||
});
|
||||
flash(res.edited ? '✓ Aktualisiert' : `✓ Gesendet (ID ${res.message_id})`);
|
||||
if (!res.edited) setComposer({ ...composer, messageId: res.message_id });
|
||||
} catch {
|
||||
flash('✗ Senden fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
|
||||
const reloadMenus = async () => setMenus((await apiGet('/api/rolemenus')).menus);
|
||||
|
||||
async function saveMenu(publish = false) {
|
||||
@@ -1024,33 +1015,7 @@ export default function Settings({ me }) {
|
||||
|
||||
const tabComposer = (
|
||||
<>
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Post verfassen</h2>
|
||||
<div className="field">
|
||||
<label>Kanal</label>
|
||||
<select value={composer.channel} onChange={(e) => setComposer({ ...composer, channel: e.target.value })}>
|
||||
<option value="" disabled>— Kanal wählen —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Embed-Titel <span className="field-hint">leer = normale Nachricht statt Embed</span></label>
|
||||
<input type="text" placeholder="z. B. 📣 Ankündigung" value={composer.title} onChange={(e) => setComposer({ ...composer, title: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Text <span className="field-hint">Discord-Markdown (##, **, Listen …)</span></label>
|
||||
<textarea rows={8} value={composer.text} onChange={(e) => setComposer({ ...composer, text: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Message-ID <span className="field-hint">optional — vorhandenen Bot-Post bearbeiten</span></label>
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="leer = neue Nachricht" value={composer.messageId} onChange={(e) => setComposer({ ...composer, messageId: e.target.value })} />
|
||||
<button className="btn btn-save" onClick={sendCompose}>
|
||||
{composer.messageId.trim() ? 'Aktualisieren' : 'Senden'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EmbedComposer channelOptions={channelOptions} flash={flash} />
|
||||
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Geplante Posts</h2>
|
||||
@@ -1311,14 +1276,25 @@ export default function Settings({ me }) {
|
||||
Spieler-Balken, Map, Adresse) — aktualisiert alle 2 Minuten, DiscordGSM-Style.
|
||||
</p>
|
||||
<div className="field">
|
||||
<label>Status-Kanal</label>
|
||||
<select value={form.status_channel_id ?? ''} onChange={(e) => setForm({ ...form, status_channel_id: e.target.value })}>
|
||||
<option value="">— deaktiviert —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
<div className="field-row">
|
||||
<div style={{ flex: 1 }}>
|
||||
<label>Status-Kanal</label>
|
||||
<select value={form.status_channel_id ?? ''} onChange={(e) => setForm({ ...form, status_channel_id: e.target.value })}>
|
||||
<option value="">— deaktiviert —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label>Alert-Kanal <span className="field-hint">🚨 down / ✅ online</span></label>
|
||||
<select value={form.server_alert_channel_id ?? ''} onChange={(e) => setForm({ ...form, server_alert_channel_id: e.target.value })}>
|
||||
<option value="">— keine Alerts —</option>
|
||||
{channelOptions}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-actions" style={{ marginBottom: '1.4rem' }}>
|
||||
<button className="btn btn-save" onClick={save}>Kanal speichern</button>
|
||||
<button className="btn btn-save" onClick={save}>Kanäle speichern</button>
|
||||
</div>
|
||||
|
||||
{servers.length > 0 && (
|
||||
@@ -1329,7 +1305,8 @@ export default function Settings({ me }) {
|
||||
<span className="key-scopes">{s.type}</span>
|
||||
<span className="key-used" title={s.query_url}>{s.query_url}</span>
|
||||
<button className="btn btn-mini" onClick={() => setServerDraft({
|
||||
id: s.id, name: s.name, type: s.type, query_url: s.query_url, address: s.address ?? '',
|
||||
id: s.id, name: s.name, type: s.type, query_url: s.query_url ?? '',
|
||||
address: s.address ?? '', host: s.host ?? '', port: s.port ?? '', connect_url: s.connect_url ?? '',
|
||||
})}>Bearbeiten</button>
|
||||
<button className="card-delete" title="Server + Embed entfernen" onClick={() => removeServer(s.id)}>✕</button>
|
||||
</div>
|
||||
@@ -1341,17 +1318,35 @@ export default function Settings({ me }) {
|
||||
<label>{serverDraft.id ? `Server #${serverDraft.id} bearbeiten` : 'Neuer Server'}</label>
|
||||
<div className="field-row">
|
||||
<input type="text" style={{ flex: 'none', width: '11rem' }} placeholder="Name, z. B. FiveM" value={serverDraft.name} onChange={(e) => setServerDraft({ ...serverDraft, name: e.target.value })} />
|
||||
<select style={{ flex: 'none', width: '8rem' }} value={serverDraft.type} onChange={(e) => setServerDraft({ ...serverDraft, type: e.target.value })}>
|
||||
<option value="fivem">FiveM</option>
|
||||
<option value="http">HTTP-Check</option>
|
||||
</select>
|
||||
<input type="text" placeholder={serverDraft.type === 'fivem' ? 'http://ip:30120' : 'https://dienst.example/health'} value={serverDraft.query_url} onChange={(e) => setServerDraft({ ...serverDraft, query_url: e.target.value })} />
|
||||
<input
|
||||
type="text" list="game-presets" style={{ flex: 'none', width: '13rem' }}
|
||||
placeholder="Spiel (gamedig-ID)" title="Vorschläge oder beliebige gamedig-Spiel-ID"
|
||||
value={serverDraft.type}
|
||||
onChange={(e) => setServerDraft({ ...serverDraft, type: e.target.value })}
|
||||
/>
|
||||
<datalist id="game-presets">
|
||||
{GAME_PRESETS.map(([id, label]) => <option key={id} value={id}>{label}</option>)}
|
||||
</datalist>
|
||||
{serverNeedsUrl ? (
|
||||
<input type="text" placeholder={serverDraft.type === 'fivem' ? 'http://ip:30120' : 'https://dienst.example/health'} value={serverDraft.query_url} onChange={(e) => setServerDraft({ ...serverDraft, query_url: e.target.value })} />
|
||||
) : (
|
||||
<>
|
||||
<input type="text" placeholder="Host / IP" value={serverDraft.host} onChange={(e) => setServerDraft({ ...serverDraft, host: e.target.value })} />
|
||||
<input type="text" style={{ flex: 'none', width: '6rem' }} placeholder="Port" value={serverDraft.port} onChange={(e) => setServerDraft({ ...serverDraft, port: e.target.value })} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="field-hint" style={{ marginTop: '.3rem' }}>
|
||||
Neben FiveM/HTTP funktioniert jede <a href="https://github.com/gamedig/node-gamedig#games-list" target="_blank" rel="noreferrer" style={{ textDecoration: 'underline' }}>gamedig-Spiel-ID</a> (300+ Spiele) — Host + Query-Port eintragen.
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Anzeige-Adresse <span className="field-hint">optional — steht als Copy-Paste-Block im Embed (z. B. connect play.d4rkst3r.de)</span></label>
|
||||
<label>Connect-Link + Anzeige-Adresse <span className="field-hint">Link ist im Embed klickbar (auch steam:// / fivem://); Adresse als Copy-Paste-Block</span></label>
|
||||
<div className="field-row">
|
||||
<input type="text" placeholder="fivem://connect/play.d4rkst3r.de" value={serverDraft.connect_url} onChange={(e) => setServerDraft({ ...serverDraft, connect_url: e.target.value })} />
|
||||
<input type="text" placeholder="connect play.d4rkst3r.de" value={serverDraft.address} onChange={(e) => setServerDraft({ ...serverDraft, address: e.target.value })} />
|
||||
</div>
|
||||
<div className="field-row" style={{ marginTop: '.6rem' }}>
|
||||
<button className="btn btn-save" onClick={saveServer}>{serverDraft.id ? 'Aktualisieren' : 'Hinzufügen'}</button>
|
||||
{serverDraft.id && <button className="btn btn-ghost" onClick={() => setServerDraft(emptyServer)}>Abbrechen</button>}
|
||||
</div>
|
||||
|
||||
@@ -1009,3 +1009,85 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
transition: opacity .15s;
|
||||
}
|
||||
.act-bar:hover { opacity: .7; }
|
||||
|
||||
/* ── COMPOSER v2: Builder + Discord-Preview ────────── */
|
||||
.composer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 900px) { .composer-grid { grid-template-columns: 1fr; } }
|
||||
.composer-preview > label {
|
||||
display: block;
|
||||
font-family: var(--mono);
|
||||
font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
/* Discord-Look (bewusst Discord-Farben, nicht Brand) */
|
||||
.dpv {
|
||||
background: #313338;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
font-family: 'gg sans', 'Noto Sans', sans-serif;
|
||||
font-size: .95rem;
|
||||
line-height: 1.35;
|
||||
color: #dbdee1;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
}
|
||||
.dpv-msg { display: flex; gap: .8rem; }
|
||||
.dpv-avatar {
|
||||
width: 40px; height: 40px; flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: #f5c518;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.dpv-body { min-width: 0; flex: 1; }
|
||||
.dpv-name { font-weight: 600; color: #f2f3f5; margin-bottom: .15rem; }
|
||||
.dpv-tag {
|
||||
background: #5865f2; color: #fff;
|
||||
font-size: .6rem; font-weight: 700;
|
||||
border-radius: 4px; padding: .05rem .3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dpv-time { font-size: .7rem; color: #949ba4; font-weight: 400; }
|
||||
.dpv-content { white-space: pre-wrap; word-break: break-word; }
|
||||
.dpv-content p, .dpv-desc p { margin: .15rem 0; }
|
||||
.dpv-content .md-h, .dpv-desc .md-h {
|
||||
font-family: inherit; text-transform: none; letter-spacing: 0;
|
||||
font-size: 1.15rem; font-weight: 700; color: #f2f3f5; margin: .4rem 0 .1rem;
|
||||
}
|
||||
.dpv .md-list li::before { color: #dbdee1; }
|
||||
.dpv .md-hr { background: #3f4147; }
|
||||
.dpv code { background: #1e1f22; border: none; color: #dbdee1; }
|
||||
|
||||
.dpv-embed {
|
||||
display: flex; gap: 1rem;
|
||||
background: #2b2d31;
|
||||
border-left: 4px solid #f5c518;
|
||||
border-radius: 4px;
|
||||
padding: .7rem .9rem .8rem;
|
||||
margin-top: .35rem;
|
||||
max-width: 520px;
|
||||
}
|
||||
.dpv-embed-main { min-width: 0; flex: 1; }
|
||||
.dpv-author {
|
||||
display: flex; align-items: center; gap: .5rem;
|
||||
font-size: .82rem; font-weight: 600; color: #f2f3f5;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
.dpv-author img { width: 22px; height: 22px; border-radius: 50%; }
|
||||
.dpv-title { font-weight: 700; color: #f2f3f5; margin-bottom: .3rem; }
|
||||
.dpv-desc { font-size: .9rem; word-break: break-word; }
|
||||
.dpv-fields { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; }
|
||||
.dpv-field { flex: 0 0 100%; }
|
||||
.dpv-field.inline { flex: 1 0 30%; min-width: 8rem; }
|
||||
.dpv-field-name { font-size: .8rem; font-weight: 700; color: #f2f3f5; margin-bottom: .1rem; }
|
||||
.dpv-field-value { font-size: .85rem; }
|
||||
.dpv-image { max-width: 100%; border-radius: 6px; margin-top: .6rem; display: block; }
|
||||
.dpv-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
|
||||
.dpv-footer { font-size: .72rem; color: #949ba4; margin-top: .55rem; }
|
||||
|
||||
Reference in New Issue
Block a user