adventure: give the Siege a war room instead of a Matrix-only rumour
The Siege is the one mechanic where the whole town works on a single object, and it existed exclusively in Matrix — so anybody not in the room at the time never knew it happened. A communal event nobody can see is a communal event that fails. gogobee now pushes the war room on the roster tick and Pete replaces its copy, the same snapshot contract the board has and for the same reason: the shared pool is state, not history, and a retried snapshot would be a lie about how much HP is left. /adventure/siege draws it. The load-bearing detail is one CSS line — the health bar has a width transition, so a poll that lands a lower pool slides the bar down instead of snapping it. That is the difference between watching the town chip a boss down and reading a report about it. Alongside: a countdown to the window's close, past sieges with the bar each one ended on, and the muster split into who took today's bout and who still has one going spare — the mechanic is one fight per person per day, so that second column is a hit the town hasn't taken yet. The opt-out rule here deliberately differs from the board's. The board omits an opted-out player outright, because class + level + zone re-identifies them. A Siege contributor is anonymised instead: their damage is part of what the town did to the boss, and deleting it would understate the shared effort and stop the totals adding up. They keep their rank, lose their name, and carry no token — so there is no link back to a page that names them. An opted-out player who never fought is still omitted; there is nothing to account for. siege_start / siege_win / siege_loss are wired on the gogobee side; the templates for all three have been sitting unused in renderAdventure since the section shipped.
This commit is contained in:
@@ -2757,3 +2757,78 @@ html[data-room] .pete-felt {
|
||||
.cmp-delta-up { color: color-mix(in srgb, #3fa66a 65%, var(--ink)); background: color-mix(in srgb, #3fa66a 13%, var(--card)); }
|
||||
.cmp-delta-down { color: color-mix(in srgb, #c0392b 60%, var(--ink)); background: color-mix(in srgb, #c0392b 12%, var(--card)); }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* The Siege war room. One rule carries the whole page: the health bar has a
|
||||
width transition, so a poll that lands a lower pool *slides* the bar down
|
||||
instead of snapping it. That is the difference between watching the town
|
||||
chip a boss and reading a report about it, and it costs one line.
|
||||
prefers-reduced-motion turns the slide off — the number is still correct,
|
||||
it just arrives instantly.
|
||||
|
||||
The ember palette is deliberate and not the adventure purple: a siege is
|
||||
the one thing on the site that should look like an emergency. It mixes a
|
||||
fixed hue into --card/--ink like the map and compare chips do, so it lands
|
||||
readable in all four phases without a dark: variant. */
|
||||
.siege-track {
|
||||
position: relative;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--ink) 12%, var(--card));
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
|
||||
}
|
||||
.siege-fill {
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
background: linear-gradient(90deg, #e0562f 0%, #c0392b 60%, #8f1f16 100%);
|
||||
transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
.siege-fill-spent { background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%); }
|
||||
|
||||
/* A living siege breathes. Slow and low-contrast on purpose — it should read
|
||||
as "this is happening now", not as a thing demanding to be clicked. */
|
||||
.siege-live .siege-fill { animation: siege-pulse 3.2s ease-in-out infinite; }
|
||||
@keyframes siege-pulse {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.12); }
|
||||
}
|
||||
|
||||
.siege-chip {
|
||||
display: inline-flex; align-items: center; gap: 0.3rem;
|
||||
font-size: 11px; font-weight: 600; line-height: 1;
|
||||
border-radius: 9999px; padding: 0.22rem 0.6rem;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.siege-chip-fought {
|
||||
color: color-mix(in srgb, #3fa66a 65%, var(--ink));
|
||||
background: color-mix(in srgb, #3fa66a 15%, var(--card));
|
||||
border-color: color-mix(in srgb, #3fa66a 36%, transparent);
|
||||
}
|
||||
.siege-chip-waiting {
|
||||
color: var(--warn);
|
||||
background: color-mix(in srgb, var(--warn) 14%, var(--card));
|
||||
border-color: color-mix(in srgb, var(--warn) 34%, transparent);
|
||||
}
|
||||
.siege-chip-held {
|
||||
color: color-mix(in srgb, #3fa66a 65%, var(--ink));
|
||||
background: color-mix(in srgb, #3fa66a 15%, var(--card));
|
||||
border-color: color-mix(in srgb, #3fa66a 36%, transparent);
|
||||
}
|
||||
.siege-chip-fell {
|
||||
color: color-mix(in srgb, #c0392b 60%, var(--ink));
|
||||
background: color-mix(in srgb, #c0392b 15%, var(--card));
|
||||
border-color: color-mix(in srgb, #c0392b 36%, transparent);
|
||||
}
|
||||
|
||||
/* The past-siege bar: same track, smaller, and frozen at the pool the Siege
|
||||
ended on. A won Siege ends at zero and draws as an empty track, which is
|
||||
exactly the right picture. */
|
||||
.siege-track-sm { height: 0.5rem; }
|
||||
.siege-track-sm .siege-fill { transition: none; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.siege-fill { transition: none; }
|
||||
.siege-live .siege-fill { animation: none; }
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user