ddidderr
8f151e38b4
Extend the launcher design specification and prototype reference with the "Call to Play" multiplayer coordination feature and clean up top-bar chrome. Key additions and changes: - Spec & Roadmap: Document Call to Play mechanics in SPEC.md, including Play Now / Scheduled call flavors, 15-minute check-in windows, top-bar button with active count badge, quick-bar ticker stack above grid, overlay modal, and per-call group chat. Update design/README.md. - Components & Logic: Add calltoplay.jsx and ctp-chat.jsx components for call creation, status progression, and chat. Extend data.jsx with a mock peer roster (PEERS) and helper functions for peer install count tracking. - Top-bar Cleanup: Move game-folder configuration from top bar into Settings -> Library, freeing top-bar space for the Call to Play action button. - Styling & Layout: Add CTP quick-bar, ticker, badge, card, and chat styles to styles.css, and integrate CTP components into launcher.jsx, components.jsx, and SoftLAN Launcher.html. Test Plan: - `git diff --cached --check` -- passed (no trailing whitespace or conflict markers) - `cargo check --workspace` -- passed cleanly - Manual review of staged diff across 9 design/launcher files -- confirmed clean staging
SoftLAN Launcher — Design Handoff
This folder is the complete, current state of design for the SoftLAN Launcher. Everything an implementor needs to build the product is in here — and nothing that isn't. (The exploration mockups, logo concept boards, and variant studies live back in the project workspace; they're history, not handoff.)
Target codebase: Tauri + React desktop app. The references here are HTML/React prototypes that communicate the intended look, layout, and behavior — recreate them inside the codebase using its own patterns. They are not meant to be shipped as-is.
What's inside
design_handoff_softlan_launcher/
├── README.md ← you are here — start here
│
├── launcher/ ← THE APP
│ ├── SPEC.md full spec: every screen, component, token, interaction
│ └── design_reference/ the working prototype the spec describes
│ ├── SoftLAN Launcher.html open this to see all screens/variants
│ ├── styles.css
│ ├── data.jsx mock catalog + LAN peer roster + format helpers
│ ├── components.jsx Icon set, cards, modals, Settings dialog
│ ├── ctp-chat.jsx Call-to-Play chat panel + shared helpers
│ ├── calltoplay.jsx Call-to-Play: quick bars, overlay, create form
│ └── launcher.jsx composes chrome + grid + modals + Call to Play
│
└── logo/ ← THE BRAND MARK
├── INTEGRATION.md how to ship the logo (component + assets + lockup)
├── pixel-live.jsx the live animated "S" + Wordmark + Lockup components
├── demo.html open to see the mark animate + the lockup
└── assets/
├── softlan-mark.svg static S (currentColor)
├── softlan-mark-blue.svg static S (fixed blue)
├── softlan-tile.svg app-icon tile (gradient + white S)
├── softlan-lockup.svg full lockup (icon + wordmark), on dark
├── softlan-lockup-ink.svg full lockup, on light
└── favicon.svg = tile, drop-in favicon
Two pieces, one product
| launcher/ | logo/ | |
|---|---|---|
| What | The full launcher UI redesign | The brand mark + wordmark lockup |
| Read first | launcher/SPEC.md |
logo/INTEGRATION.md |
| Preview | open launcher/design_reference/SoftLAN Launcher.html |
open logo/demo.html |
| Fidelity | High — final colors/type/spacing/interactions | Final — recolors live via the accent token |
The two share one design language. The accent color is a single token
(--accent, default #3b82f6) that drives the launcher's primary actions and
the logo — wire it once and both follow. The brand mark in the launcher's top
bar (launcher/SPEC.md → "Top bar → Brand") is the logo component from
logo/pixel-live.jsx at size={28}; the static 28px "S" in the mock is a
placeholder for it.
Recommended reading order
- This file — the map.
launcher/SPEC.md— the bulk of the work. Screens, components, data shapes, design tokens, interactions, and what's out of scope. Start at "Screens / views" and keep the "Design tokens" section open alongside.logo/INTEGRATION.md— drop the live mark and the wordmark lockup into the chrome. Short; mostly a component API + static-asset reference.- Open both preview files in a browser to see the real thing in motion.
Status
- Launcher: high-fidelity, decisions locked. Variant A is the chosen
chrome. Includes Call to Play (rally the LAN around a game + time — live
or scheduled, with RSVP, check-in window, and per-call chat). Open questions
(empty/error states, logs viewer, keyboard grid nav, German strings, "server
running" state, real-time transport for Call to Play) are listed at the end
of
SPEC.md. - Logo: final. Live component + static assets + horizontal lockup (dark and light) all included.
Do not ship the Babel-in-browser setup, the design-canvas wrappers, or the
Tweaks panel from the prototypes — they're presentation scaffolding. The Tweaks
panel is superseded by the in-app Settings dialog (spec'd in SPEC.md).