diff --git a/TODO.md b/TODO.md index 5bfa062..ca88b03 100644 --- a/TODO.md +++ b/TODO.md @@ -1,10 +1,3 @@ -## Polish - -- [x] **Event log layout**. The event log should still be collapsable into a corner button to give the player the option to declutter their screen. On screens big enough for three column layouts, since the event log has an internal scrolling area, make sure that the outer panel never extends past the bottom of the screen, so that the bottom of the log stays visible no matter what. -- [ ] **Crew roster text illegible on dark mode**. The text on the crew roster bubbles is black-on-dark in dark mode. The roster items probably need some re-styling on both dark and light mode, because their background being barely different from the page background doesn't look great. -- [ ] **Enforce End-Scene requirements** Unless dev mode is turned on, enforce that the scene cannot end unless every pi-rat has been challenged at least once or the obstacle list is empty. Leave enforcement of "had a chance to complete objective" to table talk. The Deep should probably see some kind of UI informing them which Pi-Rats have already been challenged. Maybe a checkmark floating outside their bubble to the left with a tooltip on mouseover that explains what it means. -- [ ] **Declutter the Hand panel** The hand panel definitely doesn't need the explanatory text, and probably doesn't need the title either, though if there's some low profile, low-noise visual way to communicate "this is your hand", that wouldn't be a bad idea. - ## DevOps/Maintenance - [ ] **Logging**: Add some logging to the backend. The Nix service should log to /var/log/pirats.log by default (but be configurable). At very least, stderr should go there, plus important server-side events, like: diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css index 0c84d78..eb30849 100644 --- a/frontend/src/assets/css/scene-play.css +++ b/frontend/src/assets/css/scene-play.css @@ -65,6 +65,7 @@ } .crew-bubble { + position: relative; display: flex; flex-direction: column; align-items: flex-start; @@ -72,22 +73,24 @@ width: 100%; text-align: left; padding: 0.55rem 0.7rem; - background: var(--well); + background: var(--surface-raised); + color: var(--text); border: 1px solid var(--edge); border-left: 4px solid var(--pirat); border-radius: var(--radius-md); + box-shadow: var(--shadow-card); cursor: pointer; transition: var(--transition-smooth); } .crew-bubble:hover { - background: color-mix(in srgb, var(--text) 8%, transparent); + background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); transform: translateX(2px); } .crew-bubble.is-deep { border-left-color: var(--deep); - background: color-mix(in srgb, var(--deep) 6%, transparent); + background: color-mix(in srgb, var(--deep) 12%, var(--surface-raised)); } .crew-bubble.is-you { @@ -98,6 +101,33 @@ .crew-bubble.is-ghost { opacity: 0.7; filter: grayscale(0.6); } .crew-bubble.is-dead { opacity: 0.6; filter: grayscale(0.8); } +/* Challenge-progress badge the Deep sees floating just outside the bubble */ +.challenge-check { + position: absolute; + left: -0.6rem; + top: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + width: 1.15rem; + height: 1.15rem; + border-radius: 50%; + font-size: 0.7rem; + font-weight: 700; + line-height: 1; + background: var(--surface-raised); + border: 1px solid var(--edge); + color: var(--text-muted); + box-shadow: var(--shadow-card); + cursor: help; +} + +.challenge-check.done { + background: var(--success); + border-color: var(--success); + color: var(--surface); +} + .crew-bubble .bubble-icon { font-size: 1.1rem; } @@ -435,6 +465,16 @@ } /* --- Hand --- */ +.hand-label { + display: block; + margin-bottom: 0.6rem; + font-family: var(--font-heading); + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-muted); +} + .hand-flex { display: flex; flex-wrap: wrap; diff --git a/frontend/src/components/ScenePhase.svelte b/frontend/src/components/ScenePhase.svelte index 46e83c5..a6c9631 100644 --- a/frontend/src/components/ScenePhase.svelte +++ b/frontend/src/components/ScenePhase.svelte @@ -27,8 +27,7 @@
Keep your cards secret! When the Deep challenges you (or you assist a crewmate), drag a card onto an applied obstacle to play it. Jokers can hit any obstacle, any time.
+ 🃏 Your Hand