user card Hand becomes the action surface, the board shows the train, and a reverse stops turning it around, other bug fixes too.
This commit is contained in:
Jesse
+28
-77
@@ -27,37 +27,7 @@ header button:hover{border-color:#4d6fa8}
|
||||
.pace{font-size:12px;padding:1px 7px;border-radius:10px}
|
||||
.pace.good{background:rgba(40,140,60,.32)}
|
||||
.pace.behind{background:rgba(190,120,40,.28)}
|
||||
/* CARDS YOU HOLD vs CARDS YOU READ.
|
||||
Both are drawn as cards, because they are cards. What separates them is the frame: a card in
|
||||
Your Move is clickable and carries the action border; a reference card is flat, unlit and
|
||||
explicitly not a target. Previously the hand was a list of bare names and the Department slots a
|
||||
second list, so nothing looked like a card at all. */
|
||||
.cardrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px}
|
||||
/* THE YARDS. Rolling stock is finite and the Classification Yard only comes back when the Division
|
||||
Yard is bare, so a player has to be able to watch the supply run down. */
|
||||
.yard{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 6px}
|
||||
.stock{background:#1c2129;border:1px solid #39424e;border-radius:4px;padding:2px 7px;font-size:11px}
|
||||
.stock b{color:#e6e9ee}
|
||||
.stock .ld{color:#8fd6a0}
|
||||
.stock .mt{color:#9fb6d8}
|
||||
.stock.none{opacity:.4}
|
||||
.yard.bare{outline:1px dashed #e0a060;outline-offset:3px;border-radius:4px;padding:3px}
|
||||
.handcard{background:#242c36;border:1px solid var(--line);border-radius:5px;
|
||||
padding:5px 8px;font-size:11px;min-width:96px;position:relative}
|
||||
.handcard:focus{outline:2px solid #4d6fa8;outline-offset:1px}
|
||||
.cardrow.ref .handcard{background:#1c2129;border-style:dashed;border-color:#39424e;color:#b6bec9}
|
||||
/* A pile shows two things: which card is face up on top, and how many are under it. The depth is a
|
||||
count and not a hint — only the top card may ever be drawn, so everything below it is out of
|
||||
reach, and choosing where to discard is choosing what to put there. */
|
||||
.pilehd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px;
|
||||
font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
|
||||
.pilehd .depth{font-variant-numeric:tabular-nums;background:#2a3038;border-radius:8px;
|
||||
padding:0 6px;color:#cfe0f5}
|
||||
/* NOT YET PLAYABLE, drawn rather than captioned. A "not yet" tag had to be read; a crosshatch is
|
||||
seen. The card stays legible underneath — it is unavailable, not irrelevant. */
|
||||
.handcard.unplayable{color:#7d8794;border-color:#39424e}
|
||||
.handcard.unplayable::after{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
|
||||
background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(150,160,175,.20) 5px 6px)}
|
||||
main{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;padding:14px;align-items:start}
|
||||
@media(max-width:1100px){main{grid-template-columns:1fr}}
|
||||
section{background:var(--panel);border:1px solid var(--line);border-radius:7px;
|
||||
@@ -90,18 +60,28 @@ section{background:var(--panel);border:1px solid var(--line);border-radius:7px;
|
||||
.enh{font-size:10px;background:rgba(90,140,220,.30);border-radius:3px;padding:1px 4px;margin-top:2px}
|
||||
.crew{font-size:11px;margin-top:3px;color:#8fd6a0}
|
||||
.cars{font-size:10px;color:var(--dim)}
|
||||
/* facilities */
|
||||
.fac{border-top:1px solid var(--line);padding:7px 0}
|
||||
.fac:first-child{border-top:0}
|
||||
.boxes{display:flex;gap:3px;align-items:center;margin-top:3px;flex-wrap:wrap}
|
||||
.box{display:inline-block;min-width:22px;text-align:center;border-radius:3px;padding:1px 4px;font-size:10px}
|
||||
.box.empty{background:#242a32;color:#5a6472}
|
||||
.box.f{background:#2f6b3d}
|
||||
.box.m{background:#8a6d1f}
|
||||
.fstat{margin-top:3px;font-size:10px;padding:1px 6px;border-radius:3px;display:inline-block}
|
||||
.fstat.good{background:rgba(40,140,60,.28)}
|
||||
.fstat.bad{background:rgba(190,50,50,.38);font-weight:700}
|
||||
.fstat.idle{opacity:.6}
|
||||
/* THE HAND IS THE ACTION SURFACE. Each card carries its own verbs, so the twelve-button discard
|
||||
block and the separate "play a card" subject list are both gone. The buttons are small and quiet
|
||||
until the card is picked — the card is the thing being read, they are what you do with it. */
|
||||
.handcard .cardacts{display:flex;gap:4px;margin-top:5px}
|
||||
button.cardact{margin:0;padding:1px 7px;font-size:10px;background:#2f3a48;border:1px solid #46536440;
|
||||
border-radius:9px;color:#cfd6e0;text-align:center}
|
||||
button.cardact:hover{background:#3d4c60;border-color:#5aa9e6}
|
||||
button.cardact.on{background:#2b3444;border-color:#c8912f;color:#f2e6cf;font-weight:700}
|
||||
button.cardact.discard{color:#d6b48a}
|
||||
.handcard.picked{border-color:#c8912f;box-shadow:0 0 0 2px rgba(200,145,47,.18)}
|
||||
#phasenote{position:fixed;left:50%;top:14px;transform:translateX(-50%) translateY(-14px);z-index:40;
|
||||
background:#241d33;border:1px solid var(--now);color:#e7dcfb;border-radius:14px;padding:5px 16px;
|
||||
font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
|
||||
box-shadow:0 6px 22px rgba(0,0,0,.5)}
|
||||
#phasenote.shown{opacity:1;transform:translateX(-50%) translateY(0)}
|
||||
@media(prefers-reduced-motion:reduce){#phasenote{transition:none}}
|
||||
.makeup-note{font-size:11px;margin:0 0 5px}
|
||||
/* Moves left, beside the moves. Amber like the actions, because it is a budget being spent by the
|
||||
buttons underneath it; struck through in red once it is gone. */
|
||||
.moves{display:inline-block;font-size:11px;margin:0 0 7px;padding:1px 8px;border-radius:10px;
|
||||
background:rgba(200,145,47,.16);border:1px solid #8a6d1f;color:#f2e6cf}
|
||||
.moves.spent{background:rgba(190,50,50,.20);border-color:#8a4040;color:#e58080}
|
||||
/* actions */
|
||||
#actions{max-height:none}
|
||||
.grp{margin-bottom:6px}
|
||||
@@ -154,35 +134,6 @@ h3.actions-hd{font-size:13px;text-transform:none;letter-spacing:.01em;color:#cfe
|
||||
ul.blocked{list-style:none;margin:0;padding:0;font-size:12px}
|
||||
ul.blocked li{padding:2px 0}
|
||||
.sev-warn{color:#e0b060}.sev-stop{color:#e58080}
|
||||
/* turn chart */
|
||||
#turnchart{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
|
||||
background:#161b22;border-bottom:1px solid var(--line);padding:7px 14px}
|
||||
.tc-when{display:flex;align-items:baseline;gap:10px}
|
||||
.tc-when b{font-size:15px;color:#cfe0f5}
|
||||
.tc-now{font-size:12px;color:var(--dim)}
|
||||
.tc-now b{color:var(--now);font-size:13px}
|
||||
/* WHO EVERYONE IS WAITING ON. Solitaire has one player, but the seat still has a name — the log
|
||||
says "Player Solitaire", so the chart should agree. In multiplayer this is the thing a table
|
||||
glances at most often, so it gets its own chip rather than hiding in the phase text. */
|
||||
.tc-who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
|
||||
.tc-who b{color:var(--now);background:rgba(150,110,230,.16);border:1px solid #8b6ad0;
|
||||
border-radius:11px;padding:1px 9px;font-size:12px}
|
||||
ol.tc-phases{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
|
||||
.tc-phase{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;
|
||||
padding:3px 10px 3px 7px;font-size:11px;color:var(--dim);background:#1a1f26;cursor:help}
|
||||
.tc-phase svg{display:block;flex:0 0 auto}
|
||||
.tc-phase .ic{stroke:#5f6b7a;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
|
||||
.tc-phase .icf{fill:#5f6b7a;stroke:none}
|
||||
.tc-phase.done{opacity:.55}
|
||||
/* VIOLET, not the amber used for actions.
|
||||
The palette already spends amber on "you can click this", blue on "this is a legal square or a
|
||||
link", green on good and red on bad. The turn chart is none of those — it reports WHERE YOU ARE,
|
||||
and a player should never read it as something to press. Violet is the one hue not already
|
||||
carrying a meaning here, so it cannot be confused with any of them. */
|
||||
.tc-phase.now{border-color:var(--now);background:rgba(150,110,230,.15);color:#e7dcfb;font-weight:700;
|
||||
box-shadow:0 0 0 2px rgba(150,110,230,.18)}
|
||||
.tc-phase.now .ic{stroke:var(--now)}
|
||||
.tc-phase.now .icf{fill:var(--now)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -202,12 +153,12 @@ ol.tc-phases{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:w
|
||||
|
||||
<!-- The turn chart: where in the Day we are, and which of the five phases is running. Lifted out
|
||||
of the title bar, where "phase: Mainline" said nothing about what came before or after it. -->
|
||||
<div id="turnchart">
|
||||
<div class="tc-when"><b id="tc-day">Day —</b><span id="tc-stage">Stage —</span><span class="dim" id="tc-clock">—</span></div>
|
||||
<div class="tc-now">phase <b id="tc-phase">—</b></div>
|
||||
<div class="tc-who">waiting on <b id="tc-who">—</b></div>
|
||||
<ol class="tc-phases" id="tc-phases"></ol>
|
||||
</div>
|
||||
<!-- Filled by `turnChartHtml`, shared with both replay viewers so all three screens report where
|
||||
you are in the Day identically. -->
|
||||
<div id="turnchart"></div>
|
||||
<!-- Announces a phase CHANGE. The turn chart says where you are; this says that it moved, which is
|
||||
what you miss when the automatic phases run between two clicks. -->
|
||||
<div id="phasenote"></div>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user