Add features: escalating turn reminder, AFK AI takeover, public rooms, persistent rejoin
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
goyban
@@ -1019,3 +1019,165 @@ html, body {
|
||||
:root { --card-w: 52px; --card-h: 74px; }
|
||||
#my-area { padding-bottom: 4px; }
|
||||
}
|
||||
|
||||
/* ── Visibility toggle (Create tab) ──────────── */
|
||||
.visibility-toggle {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.visibility-btn {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
background: transparent;
|
||||
color: rgba(255,255,255,.6);
|
||||
font-size: .9rem;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
.visibility-btn.active {
|
||||
background: rgba(100,180,255,.2);
|
||||
border-color: rgba(100,180,255,.5);
|
||||
color: rgba(200,230,255,.95);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Public rooms list (Join tab) ─────────────── */
|
||||
.public-rooms-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.rooms-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: .8rem;
|
||||
color: rgba(255,255,255,.55);
|
||||
}
|
||||
.btn-refresh {
|
||||
background: none;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
border-radius: 6px;
|
||||
color: rgba(255,255,255,.6);
|
||||
font-size: .75rem;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
}
|
||||
.btn-refresh:hover { background: rgba(255,255,255,.1); color: #fff; }
|
||||
#public-rooms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.public-room-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
background: rgba(255,255,255,.07);
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.public-room-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.public-room-host {
|
||||
font-size: .85rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.public-room-meta { font-size: .72rem; color: rgba(255,255,255,.5); }
|
||||
.btn-join-pub {
|
||||
padding: 5px 12px;
|
||||
background: var(--gold);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
.btn-join-pub:hover { opacity: .85; }
|
||||
|
||||
/* ── Waiting room public badge ─────────────────── */
|
||||
.waiting-public-badge {
|
||||
font-size: .78rem;
|
||||
color: rgba(255,255,255,.65);
|
||||
background: rgba(255,255,255,.09);
|
||||
border: 1px solid rgba(255,255,255,.15);
|
||||
border-radius: 10px;
|
||||
padding: 2px 10px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* ── Your-turn escalation ─────────────────────── */
|
||||
@keyframes your-turn-flash {
|
||||
0%,100% { opacity:1; } 50% { opacity:.55; }
|
||||
}
|
||||
.phase-msg.your-turn-lvl1 {
|
||||
font-size: .96rem; color: #ffc400;
|
||||
animation: your-turn-flash .6s ease-in-out infinite;
|
||||
}
|
||||
.phase-msg.your-turn-lvl2 {
|
||||
font-size: 1.18rem; color: #ffeb3b;
|
||||
text-shadow: 0 0 10px #ffeb3b88;
|
||||
animation: your-turn-flash .4s ease-in-out infinite;
|
||||
}
|
||||
.phase-msg.your-turn-lvl3 {
|
||||
font-size: 1.4rem; color: #fff;
|
||||
text-shadow: 0 0 22px #ffffffcc, 0 0 8px #ffcc00cc;
|
||||
animation: your-turn-flash .25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── AFK warning banner ───────────────────────── */
|
||||
.afk-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 14px;
|
||||
background: rgba(180,60,30,.88);
|
||||
border-bottom: 1px solid rgba(255,120,60,.35);
|
||||
font-size: .82rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.afk-banner span { flex: 1; color: rgba(255,255,255,.9); }
|
||||
.afk-banner button {
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255,255,255,.35);
|
||||
background: rgba(255,255,255,.18);
|
||||
color: #fff;
|
||||
font-size: .76rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.afk-banner button:hover { background: rgba(255,255,255,.3); }
|
||||
|
||||
/* ── AI control banner ────────────────────────── */
|
||||
.ai-control-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 14px;
|
||||
font-size: .8rem;
|
||||
flex-shrink: 0;
|
||||
color: rgba(255,255,255,.9);
|
||||
}
|
||||
.ai-control-banner.ai-self { background: rgba(190,40,90,.75); border-bottom: 1px solid rgba(255,80,140,.25); }
|
||||
.ai-control-banner.ai-other { background: rgba(70,45,160,.75); border-bottom: 1px solid rgba(120,90,220,.25); }
|
||||
|
||||
Reference in New Issue
Block a user