561 lines
19 KiB
Plaintext
561 lines
19 KiB
Plaintext
<section class="card">
|
|
<h1>Auto VC</h1>
|
|
<p>Automatically create temporary voice channels when members join your lobby channels. Rooms inherit lobby permissions and can be managed with <code>!vc</code> commands.</p>
|
|
<div class="callout">
|
|
<strong>Placeholders</strong>
|
|
<p>Use <code>[username]</code>, <code>[room_number]</code>, and <code>[game_name]</code> inside channel names.</p>
|
|
<p class="hint">[game_name] is pulled from the creator's Discord presence.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.lobby-permissions {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
border-radius: 14px;
|
|
background: var(--surface-2);
|
|
border: 1px dashed var(--border);
|
|
}
|
|
.lobby-permissions h4 {
|
|
margin: 0 0 8px;
|
|
font-family: "Space Grotesk", sans-serif;
|
|
}
|
|
.lobby-permissions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.lobby-permission-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.lobby-permission-item[data-missing="true"] {
|
|
border-color: color-mix(in srgb, var(--rose) 40%, var(--border));
|
|
}
|
|
.lobby-permissions-hint {
|
|
margin: 6px 0 0;
|
|
color: var(--ink-soft);
|
|
font-size: 0.9rem;
|
|
}
|
|
.lobby-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.lobby-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.button.danger-hover {
|
|
background: var(--surface-2);
|
|
color: var(--ink);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.button.danger-hover:hover {
|
|
background: var(--rose);
|
|
color: white;
|
|
}
|
|
.lobby-card.is-deleted {
|
|
display: none;
|
|
}
|
|
.lobby-id-note {
|
|
margin: 6px 0 0;
|
|
color: var(--ink-soft);
|
|
font-size: 0.85rem;
|
|
}
|
|
.rate-limit-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
.rate-limit-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.rate-limit-row input {
|
|
max-width: 120px;
|
|
}
|
|
.rate-limit-unit {
|
|
color: var(--ink-soft);
|
|
font-size: 0.85rem;
|
|
}
|
|
.permissions-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: "Space Grotesk", sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
.permissions-ok {
|
|
color: #2cb678;
|
|
font-weight: 700;
|
|
}
|
|
.lobby-permissions summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.lobby-permissions summary::marker {
|
|
content: "";
|
|
}
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 30;
|
|
}
|
|
.modal.is-open {
|
|
display: flex;
|
|
}
|
|
.modal-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
.modal-dialog {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
width: min(420px, calc(100% - 32px));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|
|
|
|
<section class="card">
|
|
<h2>Stats</h2>
|
|
<% if (!stats || !stats.length) { %>
|
|
<p>No rooms created yet.</p>
|
|
<% } else { %>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Rooms created</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% stats.forEach((row) => { %>
|
|
<tr>
|
|
<td><%= row.label %></td>
|
|
<td><%= row.count %></td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
<% } %>
|
|
</section>
|
|
|
|
<% if (isAdmin) { %>
|
|
<section class="card">
|
|
<h2>Lobby setup</h2>
|
|
<form method="post" action="/plugins/auto-vc/settings" class="form-grid">
|
|
<div class="card">
|
|
<h3>Rate limits</h3>
|
|
<div class="form-grid rate-limit-grid">
|
|
<div class="field">
|
|
<label>Room creations per user</label>
|
|
<div class="rate-limit-row">
|
|
<input
|
|
name="rate_create_count"
|
|
type="number"
|
|
min="1"
|
|
value="<%= limits?.create?.max || 3 %>"
|
|
/>
|
|
<span class="rate-limit-unit">per</span>
|
|
<input
|
|
name="rate_create_window"
|
|
type="number"
|
|
min="10"
|
|
value="<%= limits?.create?.windowSeconds || 600 %>"
|
|
/>
|
|
<span class="rate-limit-unit">seconds</span>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Room action changes per user</label>
|
|
<div class="rate-limit-row">
|
|
<input
|
|
name="rate_action_count"
|
|
type="number"
|
|
min="1"
|
|
value="<%= limits?.action?.max || 8 %>"
|
|
/>
|
|
<span class="rate-limit-unit">per</span>
|
|
<input
|
|
name="rate_action_window"
|
|
type="number"
|
|
min="10"
|
|
value="<%= limits?.action?.windowSeconds || 60 %>"
|
|
/>
|
|
<span class="rate-limit-unit">seconds</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="hint">Applies to room creation and commands that update channels or permissions.</p>
|
|
</div>
|
|
<div class="field full">
|
|
<div id="lobby-sections" class="form-grid">
|
|
<% lobbies.forEach((lobby, index) => { %>
|
|
<div class="card lobby-card" data-lobby>
|
|
<div class="lobby-header">
|
|
<h3>Lobby <%= index + 1 %></h3>
|
|
<div class="lobby-actions">
|
|
<input type="hidden" name="lobby_remove" value="<%= lobby.id %>" data-remove disabled />
|
|
<button type="button" class="button danger-hover" data-lobby-delete>Delete lobby</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="lobby_id" value="<%= lobby.id %>" />
|
|
<% const lobbyVoice = voiceChannels?.find((channel) => channel.id === lobby.lobbyChannelId); %>
|
|
<% const lobbyCategory = categoryChannels?.find((channel) => channel.id === lobby.categoryId); %>
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label>Lobby voice channel</label>
|
|
<% if (voiceChannels && voiceChannels.length) { %>
|
|
<select name="lobby_channel_id" data-channel-select>
|
|
<% if (lobby.lobbyChannelId && !lobbyVoice) { %>
|
|
<option value="<%= lobby.lobbyChannelId %>" selected>
|
|
Unknown channel (<%= lobby.lobbyChannelId %>)
|
|
</option>
|
|
<% } %>
|
|
<option value="">Select a lobby voice channel</option>
|
|
<% voiceChannels.forEach((channel) => { %>
|
|
<option value="<%= channel.id %>" <%= channel.id === lobby.lobbyChannelId ? 'selected' : '' %>>
|
|
<%= channel.label %>
|
|
</option>
|
|
<% }) %>
|
|
</select>
|
|
<div class="lobby-id-note">Selected ID: <span data-channel-id-display><%= lobby.lobbyChannelId || "-" %></span></div>
|
|
<% } else { %>
|
|
<input name="lobby_channel_id" value="<%= lobby.lobbyChannelId %>" placeholder="123456789012345678" />
|
|
<% } %>
|
|
</div>
|
|
<div class="field">
|
|
<label>Target category</label>
|
|
<% if (categoryChannels && categoryChannels.length) { %>
|
|
<select name="lobby_category_id" data-category-select>
|
|
<% if (lobby.categoryId && !lobbyCategory) { %>
|
|
<option value="<%= lobby.categoryId %>" selected>
|
|
Unknown category (<%= lobby.categoryId %>)
|
|
</option>
|
|
<% } %>
|
|
<option value="">Select a category</option>
|
|
<% categoryChannels.forEach((channel) => { %>
|
|
<option value="<%= channel.id %>" <%= channel.id === lobby.categoryId ? 'selected' : '' %>>
|
|
<%= channel.label %>
|
|
</option>
|
|
<% }) %>
|
|
</select>
|
|
<div class="lobby-id-note">Selected ID: <span data-category-id-display><%= lobby.categoryId || "-" %></span></div>
|
|
<% } else { %>
|
|
<input name="lobby_category_id" value="<%= lobby.categoryId %>" placeholder="123456789012345678" />
|
|
<% } %>
|
|
</div>
|
|
<div class="field">
|
|
<label>Channel name template</label>
|
|
<input name="lobby_name_template" value="<%= lobby.nameTemplate %>" />
|
|
<p class="hint">Examples: <code>[username]'s room</code>, <code>[game_name] [room_number]</code></p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Empty room cleanup (seconds)</label>
|
|
<input name="lobby_empty_timeout" value="<%= lobby.emptyTimeoutSeconds %>" type="number" min="5" />
|
|
</div>
|
|
</div>
|
|
<% if (lobby.permissions && lobby.permissions.length) { %>
|
|
<% const totalPerms = lobby.permissions.length; %>
|
|
<% const okPerms = lobby.permissions.filter((perm) => perm.granted).length; %>
|
|
<% const allOk = okPerms === totalPerms; %>
|
|
<details class="lobby-permissions" <%= allOk ? "" : "open" %>>
|
|
<summary class="permissions-summary">
|
|
Permissions Check (<%= okPerms %>/<%= totalPerms %>
|
|
<% if (allOk) { %>
|
|
<span class="permissions-ok">all ok</span>
|
|
<% } %>
|
|
)
|
|
</summary>
|
|
<div class="lobby-permissions-grid">
|
|
<% lobby.permissions.forEach((perm) => { %>
|
|
<div
|
|
class="lobby-permission-item"
|
|
data-missing="<%= perm.granted ? 'false' : 'true' %>"
|
|
title="<%= perm.granted ? '' : perm.help %>"
|
|
>
|
|
<span class="perm-toggle <%= perm.granted ? 'on' : 'off' %>" aria-hidden="true">
|
|
<span class="perm-thumb"></span>
|
|
</span>
|
|
<span class="perm-label"><%= perm.label %></span>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
<p class="lobby-permissions-hint">Hover red checks to see how to fix missing permissions.</p>
|
|
</details>
|
|
<% } %>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
<div class="field full">
|
|
<button type="button" class="button subtle" id="add-lobby">Add VC lobby</button>
|
|
<button type="submit" class="button">Save lobby settings</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<% } %>
|
|
|
|
<% if (canModerate) { %>
|
|
<section class="card">
|
|
<h2>VC creation bans</h2>
|
|
<form method="post" action="/plugins/auto-vc/bans" class="form-grid">
|
|
<div class="field">
|
|
<label>Ban user (mention or ID)</label>
|
|
<input name="ban_input" placeholder="@user or 123456789012345678" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Reason (optional)</label>
|
|
<input name="ban_reason" placeholder="Optional reason" />
|
|
</div>
|
|
<div class="field full">
|
|
<button type="submit" class="button">Ban user</button>
|
|
</div>
|
|
</form>
|
|
<div class="card">
|
|
<h3>Currently banned</h3>
|
|
<% if (!bans.length) { %>
|
|
<p>No banned users.</p>
|
|
<% } else { %>
|
|
<form method="post" action="/plugins/auto-vc/unban" class="form-grid">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Reason</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% bans.forEach((ban) => { %>
|
|
<tr>
|
|
<td><%= ban.label %></td>
|
|
<td><%= ban.reason || '-' %></td>
|
|
<td>
|
|
<input type="checkbox" name="unban_ids" value="<%= ban.discord_user_id %>" />
|
|
</td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
<div class="field full">
|
|
<button type="submit" class="button subtle">Unban selected</button>
|
|
</div>
|
|
</form>
|
|
<% } %>
|
|
</div>
|
|
</section>
|
|
<% } %>
|
|
|
|
<div class="modal" id="delete-lobby-modal" aria-hidden="true">
|
|
<div class="modal-backdrop" data-modal-close></div>
|
|
<div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="delete-lobby-title">
|
|
<h3 id="delete-lobby-title">Delete lobby?</h3>
|
|
<p>This removes the lobby configuration and stops auto-creating rooms from it.</p>
|
|
<div class="modal-actions">
|
|
<button type="button" class="button subtle" data-modal-cancel>Cancel</button>
|
|
<button type="button" class="button danger" data-modal-confirm>Delete lobby</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="lobby-template">
|
|
<div class="card lobby-card" data-lobby>
|
|
<div class="lobby-header">
|
|
<h3>Lobby</h3>
|
|
<div class="lobby-actions">
|
|
<input type="hidden" name="lobby_remove" value="__ID__" data-remove disabled />
|
|
<button type="button" class="button danger-hover" data-lobby-delete>Delete lobby</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="lobby_id" value="__ID__" data-placeholder />
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label>Lobby voice channel</label>
|
|
<% if (voiceChannels && voiceChannels.length) { %>
|
|
<select name="lobby_channel_id" data-channel-select>
|
|
<option value="">Select a lobby voice channel</option>
|
|
<% voiceChannels.forEach((channel) => { %>
|
|
<option value="<%= channel.id %>"><%= channel.label %></option>
|
|
<% }) %>
|
|
</select>
|
|
<div class="lobby-id-note">Selected ID: <span data-channel-id-display>-</span></div>
|
|
<% } else { %>
|
|
<input name="lobby_channel_id" placeholder="123456789012345678" />
|
|
<% } %>
|
|
</div>
|
|
<div class="field">
|
|
<label>Target category</label>
|
|
<% if (categoryChannels && categoryChannels.length) { %>
|
|
<select name="lobby_category_id" data-category-select>
|
|
<option value="">Select a category</option>
|
|
<% categoryChannels.forEach((channel) => { %>
|
|
<option value="<%= channel.id %>"><%= channel.label %></option>
|
|
<% }) %>
|
|
</select>
|
|
<div class="lobby-id-note">Selected ID: <span data-category-id-display>-</span></div>
|
|
<% } else { %>
|
|
<input name="lobby_category_id" placeholder="123456789012345678" />
|
|
<% } %>
|
|
</div>
|
|
<div class="field">
|
|
<label>Channel name template</label>
|
|
<input name="lobby_name_template" value="[username]'s room" />
|
|
<p class="hint">Examples: <code>[username]'s room</code>, <code>[game_name] [room_number]</code></p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Empty room cleanup (seconds)</label>
|
|
<input name="lobby_empty_timeout" value="30" type="number" min="5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
const addButton = document.getElementById("add-lobby");
|
|
const container = document.getElementById("lobby-sections");
|
|
const template = document.getElementById("lobby-template");
|
|
if (!addButton || !container || !template) {
|
|
return;
|
|
}
|
|
|
|
const modal = document.getElementById("delete-lobby-modal");
|
|
const modalConfirm = modal?.querySelector("[data-modal-confirm]");
|
|
const modalCancel = modal?.querySelector("[data-modal-cancel]");
|
|
const modalClose = modal?.querySelector("[data-modal-close]");
|
|
let pendingDelete = null;
|
|
|
|
const generateId = () => {
|
|
if (window.crypto && window.crypto.randomUUID) {
|
|
return window.crypto.randomUUID();
|
|
}
|
|
return `lobby-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
|
|
};
|
|
|
|
const updateHeaders = () => {
|
|
const cards = Array.from(container.querySelectorAll("[data-lobby]")).filter(
|
|
(card) => !card.classList.contains("is-deleted")
|
|
);
|
|
cards.forEach((card, index) => {
|
|
const heading = card.querySelector("h3");
|
|
if (heading) {
|
|
heading.textContent = `Lobby ${index + 1}`;
|
|
}
|
|
});
|
|
};
|
|
|
|
const updateIdDisplays = (card) => {
|
|
const channelSelect = card.querySelector("[data-channel-select]");
|
|
const channelDisplay = card.querySelector("[data-channel-id-display]");
|
|
if (channelSelect && channelDisplay) {
|
|
channelDisplay.textContent = channelSelect.value || "-";
|
|
}
|
|
const categorySelect = card.querySelector("[data-category-select]");
|
|
const categoryDisplay = card.querySelector("[data-category-id-display]");
|
|
if (categorySelect && categoryDisplay) {
|
|
categoryDisplay.textContent = categorySelect.value || "-";
|
|
}
|
|
};
|
|
|
|
const markLobbyDeleted = (card) => {
|
|
const removeInput = card.querySelector("[data-remove]");
|
|
if (removeInput) {
|
|
removeInput.disabled = false;
|
|
}
|
|
card.classList.add("is-deleted");
|
|
card.querySelectorAll("input, select, textarea").forEach((field) => {
|
|
if (field.dataset.remove !== undefined) {
|
|
return;
|
|
}
|
|
field.disabled = true;
|
|
});
|
|
updateHeaders();
|
|
};
|
|
|
|
const openModal = (card) => {
|
|
if (!modal) {
|
|
markLobbyDeleted(card);
|
|
return;
|
|
}
|
|
pendingDelete = card;
|
|
modal.classList.add("is-open");
|
|
modal.setAttribute("aria-hidden", "false");
|
|
};
|
|
|
|
const closeModal = () => {
|
|
pendingDelete = null;
|
|
modal?.classList.remove("is-open");
|
|
modal?.setAttribute("aria-hidden", "true");
|
|
};
|
|
|
|
modalConfirm?.addEventListener("click", () => {
|
|
if (pendingDelete) {
|
|
markLobbyDeleted(pendingDelete);
|
|
}
|
|
closeModal();
|
|
});
|
|
modalCancel?.addEventListener("click", closeModal);
|
|
modalClose?.addEventListener("click", closeModal);
|
|
|
|
const wireLobbyCard = (card) => {
|
|
const deleteButton = card.querySelector("[data-lobby-delete]");
|
|
if (deleteButton) {
|
|
deleteButton.addEventListener("click", () => openModal(card));
|
|
}
|
|
card.querySelectorAll("[data-channel-select]").forEach((select) => {
|
|
select.addEventListener("change", () => updateIdDisplays(card));
|
|
});
|
|
card.querySelectorAll("[data-category-select]").forEach((select) => {
|
|
select.addEventListener("change", () => updateIdDisplays(card));
|
|
});
|
|
updateIdDisplays(card);
|
|
};
|
|
|
|
addButton.addEventListener("click", () => {
|
|
const id = generateId();
|
|
const clone = template.content.cloneNode(true);
|
|
clone.querySelectorAll("[data-placeholder]").forEach((node) => {
|
|
node.value = node.value.replace(/__ID__/g, id);
|
|
});
|
|
clone.querySelectorAll("[data-remove]").forEach((node) => {
|
|
node.value = node.value.replace(/__ID__/g, id);
|
|
node.disabled = true;
|
|
});
|
|
const card = clone.querySelector("[data-lobby]");
|
|
container.appendChild(clone);
|
|
if (card) {
|
|
wireLobbyCard(card);
|
|
}
|
|
updateHeaders();
|
|
});
|
|
|
|
container.querySelectorAll("[data-lobby]").forEach((card) => {
|
|
wireLobbyCard(card);
|
|
});
|
|
|
|
updateHeaders();
|
|
});
|
|
</script>
|