Lumi/plugins/echonomy-games/views/games.ejs
2026-05-30 20:37:42 +02:00

609 lines
22 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%- include("../../../src/web/views/partials/layout-top", { title }) %>
<style>
.game-list {
display: grid;
gap: 16px;
}
.game-row {
border-radius: 16px;
border: 1px solid var(--border);
background: var(--surface-2);
overflow: hidden;
}
.game-row summary {
list-style: none;
cursor: pointer;
}
.game-row summary::-webkit-details-marker {
display: none;
}
.game-row__summary {
display: grid;
grid-template-columns: minmax(180px, 1.2fr) auto minmax(160px, 1fr) auto;
gap: 16px;
align-items: center;
padding: 16px;
}
.game-row__title h2 {
margin: 0;
font-size: 1.15rem;
}
.game-row__status,
.game-row__platforms {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-start;
}
.status-pill,
.platform-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid transparent;
}
.status-pill.on {
color: #60d394;
background: rgba(96, 211, 148, 0.15);
border-color: rgba(96, 211, 148, 0.4);
}
.status-pill.off {
color: #ff7a7a;
background: rgba(255, 122, 122, 0.15);
border-color: rgba(255, 122, 122, 0.4);
}
.platform-pill {
color: var(--text);
border-color: var(--border);
background: var(--surface-3);
opacity: 0.45;
}
.platform-pill.on {
opacity: 1;
}
.platform-pill.discord.on {
color: #7c8dff;
border-color: rgba(124, 141, 255, 0.4);
background: rgba(124, 141, 255, 0.12);
}
.platform-pill.twitch.on {
color: #b88cff;
border-color: rgba(184, 140, 255, 0.4);
background: rgba(184, 140, 255, 0.12);
}
.platform-pill.youtube.on {
color: #ff6d6d;
border-color: rgba(255, 109, 109, 0.4);
background: rgba(255, 109, 109, 0.12);
}
.game-row__chevron {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--surface-3);
display: grid;
place-items: center;
font-size: 1.1rem;
color: var(--muted);
transition: transform 0.2s ease;
}
.game-row[open] .game-row__chevron {
transform: rotate(90deg);
}
.game-row__body {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height 0.35s ease, opacity 0.2s ease, padding 0.3s ease;
}
.game-row[open] .game-row__body {
max-height: 12000px;
opacity: 1;
padding: 0 16px 16px;
overflow: visible;
}
.game-card {
background: var(--surface-2);
border-radius: 14px;
padding: 16px;
border: 1px solid var(--border);
}
.game-card h3 {
margin-top: 0;
font-family: "Space Grotesk", sans-serif;
}
.game-row__footer {
padding: 12px 16px 16px;
border-top: 1px solid var(--border);
}
.game-footer {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-size: 0.85rem;
color: var(--muted);
}
.game-footer span {
background: var(--surface-3);
border-radius: 999px;
padding: 6px 10px;
border: 1px solid var(--border);
}
.responses-grid {
display: grid;
gap: 16px;
}
.responses-grid .button {
width: 100%;
}
.reply-body {
overflow: visible;
}
.response-field textarea {
min-height: 120px;
resize: vertical;
}
.reply-toggle {
margin-top: 16px;
border-top: 1px dashed var(--border);
padding-top: 12px;
}
.reply-toggle summary {
font-weight: 600;
color: var(--text);
cursor: pointer;
margin-bottom: 8px;
}
.reply-toggle summary::-webkit-details-marker {
display: none;
}
.reply-toggle summary::after {
content: "+";
margin-left: 8px;
color: var(--muted);
}
.reply-toggle[open] summary::after {
content: "";
}
</style>
<section class="card">
<div class="section-header">
<div>
<h1>Echonomy Games</h1>
<p class="command-subtitle">Mini-games that spend and reward coins via the Echonomy framework.</p>
</div>
<span class="badge <%= frameworkReady ? 'discord' : 'youtube' %>">
<%= frameworkReady ? 'Framework connected' : 'Framework missing' %>
</span>
</div>
</section>
<% const renderLastPlayed = (entry) => {
if (!entry || entry.lastPlayedLabel === "Never") {
return "Never";
}
const user = entry.lastPlayedUser ? ` (${entry.lastPlayedUser})` : "";
return `${entry.lastPlayedLabel}${user}`;
}; %>
<div class="game-list">
<details class="game-row">
<summary class="game-row__summary">
<div class="game-row__title">
<h2><%= config.hotpotato.name %></h2>
</div>
<div class="game-row__status">
<span class="status-pill <%= config.hotpotato.enabled ? 'on' : 'off' %>">
<%= config.hotpotato.enabled ? 'Enabled' : 'Disabled' %>
</span>
</div>
<div class="game-row__platforms">
<span class="platform-pill discord <%= config.hotpotato.platforms.discord ? 'on' : 'off' %>">Discord</span>
<span class="platform-pill twitch <%= config.hotpotato.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
<span class="platform-pill youtube <%= config.hotpotato.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
</div>
<div class="game-row__chevron"></div>
</summary>
<div class="game-row__body">
<section class="game-card">
<form method="post" action="/plugins/echonomy-games/settings/hotpotato" class="form-grid">
<div class="field">
<label>Enable Hot Potato</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="hotpotato_enabled"
<%= config.hotpotato.enabled ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.hotpotato.enabled ? 'Enabled' : 'Disabled' %></span>
</label>
</div>
<div class="field">
<label>Display name</label>
<input name="hotpotato_name" value="<%= config.hotpotato.name %>" />
</div>
<div class="field">
<label>Command trigger</label>
<input name="hotpotato_trigger" value="<%= config.hotpotato.trigger %>" />
</div>
<div class="field">
<label>Command aliases (comma or space separated)</label>
<input name="hotpotato_aliases" value="<%= config.hotpotato.aliases.join(', ') %>" />
</div>
<div class="field">
<label>Minimum entry cost</label>
<input name="hotpotato_min_cost" value="<%= config.hotpotato.minCost %>" />
</div>
<div class="field">
<label>Maximum entry cost</label>
<input name="hotpotato_max_cost" value="<%= config.hotpotato.maxCost %>" />
</div>
<div class="field">
<label>Toss timer min (seconds)</label>
<input name="hotpotato_toss_min" value="<%= config.hotpotato.tossMin %>" />
</div>
<div class="field">
<label>Toss timer max (seconds)</label>
<input name="hotpotato_toss_max" value="<%= config.hotpotato.tossMax %>" />
</div>
<div class="field">
<label>Loss multiplier</label>
<input name="hotpotato_loss_multiplier" value="<%= config.hotpotato.lossMultiplier %>" />
</div>
<div class="field">
<label>Loss additive</label>
<input name="hotpotato_loss_additive" value="<%= config.hotpotato.lossAdditive %>" />
</div>
<div class="field">
<label>Presence window (seconds)</label>
<input name="hotpotato_presence_window" value="<%= config.hotpotato.presenceWindow %>" />
<span class="hint">Active users are pulled from recent chatters on the same platform.</span>
</div>
<div class="field">
<label>Discord</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="hotpotato_platform_discord"
<%= config.hotpotato.platforms.discord ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.hotpotato.platforms.discord ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>Twitch</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="hotpotato_platform_twitch"
<%= config.hotpotato.platforms.twitch ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.hotpotato.platforms.twitch ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>YouTube</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="hotpotato_platform_youtube"
<%= config.hotpotato.platforms.youtube ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.hotpotato.platforms.youtube ? 'On' : 'Off' %></span>
</label>
</div>
<button type="submit" class="button">Save Hot Potato</button>
</form>
<details class="reply-toggle">
<summary>Edit replies</summary>
<div class="reply-body">
<p class="hint">One reply per line. Tokens: {user}, {target}, {amount}, {payout}, {seconds}, {min}, {max}, {game}, {holder}, {loss}, {winners}, {trigger}.</p>
<form method="post" action="/plugins/echonomy-games/settings/responses" class="form-grid responses-grid">
<% responsesByGame.hotpotato.forEach((response) => { %>
<div class="field response-field">
<label><%= response.label %></label>
<textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
</div>
<% }) %>
<div class="field full">
<button type="submit" class="button">Save replies</button>
</div>
</form>
</div>
</details>
</section>
</div>
<div class="game-row__footer">
<div class="game-footer">
<span>Last played: <%= renderLastPlayed(stats.hotpotato) %></span>
<span>Times played: <%= stats.hotpotato.plays %></span>
<span><%= currencyLabel %> lost: <%= stats.hotpotato.coinsLost %></span>
<span><%= currencyLabel %> won: <%= stats.hotpotato.coinsWon %></span>
</div>
</div>
</details>
<details class="game-row">
<summary class="game-row__summary">
<div class="game-row__title">
<h2><%= config.coinflip.name %></h2>
</div>
<div class="game-row__status">
<span class="status-pill <%= config.coinflip.enabled ? 'on' : 'off' %>">
<%= config.coinflip.enabled ? 'Enabled' : 'Disabled' %>
</span>
</div>
<div class="game-row__platforms">
<span class="platform-pill discord <%= config.coinflip.platforms.discord ? 'on' : 'off' %>">Discord</span>
<span class="platform-pill twitch <%= config.coinflip.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
<span class="platform-pill youtube <%= config.coinflip.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
</div>
<div class="game-row__chevron"></div>
</summary>
<div class="game-row__body">
<section class="game-card">
<form method="post" action="/plugins/echonomy-games/settings/coinflip" class="form-grid">
<div class="field">
<label>Enable Coinflip</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="coinflip_enabled"
<%= config.coinflip.enabled ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.coinflip.enabled ? 'Enabled' : 'Disabled' %></span>
</label>
</div>
<div class="field">
<label>Display name</label>
<input name="coinflip_name" value="<%= config.coinflip.name %>" />
</div>
<div class="field">
<label>Command trigger</label>
<input name="coinflip_trigger" value="<%= config.coinflip.trigger %>" />
</div>
<div class="field">
<label>Command aliases (comma or space separated)</label>
<input name="coinflip_aliases" value="<%= config.coinflip.aliases.join(', ') %>" />
</div>
<div class="field">
<label>Minimum bet</label>
<input name="coinflip_min_bet" value="<%= config.coinflip.minBet %>" />
</div>
<div class="field">
<label>Maximum bet</label>
<input name="coinflip_max_bet" value="<%= config.coinflip.maxBet %>" />
</div>
<div class="field">
<label>Payout multiplier</label>
<input name="coinflip_multiplier" value="<%= config.coinflip.multiplier %>" />
</div>
<div class="field">
<label>Cooldown (seconds)</label>
<input name="coinflip_cooldown" value="<%= config.coinflip.cooldown %>" />
</div>
<div class="field">
<label>Discord</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="coinflip_platform_discord"
<%= config.coinflip.platforms.discord ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.coinflip.platforms.discord ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>Twitch</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="coinflip_platform_twitch"
<%= config.coinflip.platforms.twitch ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.coinflip.platforms.twitch ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>YouTube</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="coinflip_platform_youtube"
<%= config.coinflip.platforms.youtube ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.coinflip.platforms.youtube ? 'On' : 'Off' %></span>
</label>
</div>
<button type="submit" class="button">Save Coinflip</button>
</form>
<details class="reply-toggle">
<summary>Edit replies</summary>
<div class="reply-body">
<p class="hint">One reply per line. Tokens: {user}, {amount}, {payout}, {min}, {max}, {seconds}.</p>
<form method="post" action="/plugins/echonomy-games/settings/responses" class="form-grid responses-grid">
<% responsesByGame.coinflip.forEach((response) => { %>
<div class="field response-field">
<label><%= response.label %></label>
<textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
</div>
<% }) %>
<div class="field full">
<button type="submit" class="button">Save replies</button>
</div>
</form>
</div>
</details>
</section>
</div>
<div class="game-row__footer">
<div class="game-footer">
<span>Last played: <%= renderLastPlayed(stats.coinflip) %></span>
<span>Times played: <%= stats.coinflip.plays %></span>
<span><%= currencyLabel %> lost: <%= stats.coinflip.coinsLost %></span>
<span><%= currencyLabel %> won: <%= stats.coinflip.coinsWon %></span>
</div>
</div>
</details>
<details class="game-row">
<summary class="game-row__summary">
<div class="game-row__title">
<h2><%= config.mystery.name %></h2>
</div>
<div class="game-row__status">
<span class="status-pill <%= config.mystery.enabled ? 'on' : 'off' %>">
<%= config.mystery.enabled ? 'Enabled' : 'Disabled' %>
</span>
</div>
<div class="game-row__platforms">
<span class="platform-pill discord <%= config.mystery.platforms.discord ? 'on' : 'off' %>">Discord</span>
<span class="platform-pill twitch <%= config.mystery.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
<span class="platform-pill youtube <%= config.mystery.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
</div>
<div class="game-row__chevron"></div>
</summary>
<div class="game-row__body">
<section class="game-card">
<form method="post" action="/plugins/echonomy-games/settings/mystery" class="form-grid">
<div class="field">
<label>Enable Mystery Box</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="mystery_enabled"
<%= config.mystery.enabled ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.mystery.enabled ? 'Enabled' : 'Disabled' %></span>
</label>
</div>
<div class="field">
<label>Display name</label>
<input name="mystery_name" value="<%= config.mystery.name %>" />
</div>
<div class="field">
<label>Command trigger</label>
<input name="mystery_trigger" value="<%= config.mystery.trigger %>" />
</div>
<div class="field">
<label>Command aliases (comma or space separated)</label>
<input name="mystery_aliases" value="<%= config.mystery.aliases.join(', ') %>" />
</div>
<div class="field">
<label>Minimum bet</label>
<input name="mystery_min_bet" value="<%= config.mystery.minBet %>" />
</div>
<div class="field">
<label>Maximum bet</label>
<input name="mystery_max_bet" value="<%= config.mystery.maxBet %>" />
</div>
<div class="field">
<label>Payout multiplier</label>
<input name="mystery_multiplier" value="<%= config.mystery.multiplier %>" />
</div>
<div class="field">
<label>Cooldown (seconds)</label>
<input name="mystery_cooldown" value="<%= config.mystery.cooldown %>" />
</div>
<div class="field">
<label>Discord</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="mystery_platform_discord"
<%= config.mystery.platforms.discord ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.mystery.platforms.discord ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>Twitch</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="mystery_platform_twitch"
<%= config.mystery.platforms.twitch ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.mystery.platforms.twitch ? 'On' : 'Off' %></span>
</label>
</div>
<div class="field">
<label>YouTube</label>
<label class="switch">
<input
type="checkbox"
class="switch-input"
name="mystery_platform_youtube"
<%= config.mystery.platforms.youtube ? 'checked' : '' %>
/>
<span class="switch-track" aria-hidden="true"></span>
<span class="switch-text"><%= config.mystery.platforms.youtube ? 'On' : 'Off' %></span>
</label>
</div>
<button type="submit" class="button">Save Mystery Box</button>
</form>
<details class="reply-toggle">
<summary>Edit replies</summary>
<div class="reply-body">
<p class="hint">One reply per line. Tokens: {user}, {amount}, {payout}, {min}, {max}, {seconds}.</p>
<form method="post" action="/plugins/echonomy-games/settings/responses" class="form-grid responses-grid">
<% responsesByGame.mystery.forEach((response) => { %>
<div class="field response-field">
<label><%= response.label %></label>
<textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
</div>
<% }) %>
<div class="field full">
<button type="submit" class="button">Save replies</button>
</div>
</form>
</div>
</details>
</section>
</div>
<div class="game-row__footer">
<div class="game-footer">
<span>Last played: <%= renderLastPlayed(stats.mystery) %></span>
<span>Times played: <%= stats.mystery.plays %></span>
<span><%= currencyLabel %> lost: <%= stats.mystery.coinsLost %></span>
<span><%= currencyLabel %> won: <%= stats.mystery.coinsWon %></span>
</div>
</div>
</details>
</div>
<%- include("../../../src/web/views/partials/layout-bottom") %>