Story 4.1: Tasks 3-6 Complete - Director's Board Integration & Settings Menu
- Task 3: Extended FoundryAdapter with user flag access methods
- Added getFlag(userId, scope, key) method
- Added setFlag(userId, scope, key, value) method
- Added getFlagModule(userId, key) convenience method
- Added setFlagModule(userId, key, value) convenience method
- Task 4: Integrated Privacy Settings with Director's Board
- Updated participant-card.hbs to show Reaction Cam badge
- Modified boardUtils.js to pass playerPrivacyManager through context
- Updated DirectorsBoard to accept and pass playerPrivacyManager
- Added CSS styles for Reaction Cam badge (SP accent color)
- Task 5: Registered PlayerPrivacyPanel in module settings
- Added settings menu registration in module.js Hooks.once('ready')
- Available to all users (restricted: false)
- Uses localized labels and hints
- Task 6: Added all localization strings
- Added SCRYING_POOL.PrivacyPanel.* strings for panel UI
- Added SCRYING_POOL.Settings.* strings for settings menu
- Updated story file with task completion status
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
@@ -39,6 +39,7 @@
|
||||
height: 48px;
|
||||
margin: 8px auto 4px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -47,6 +48,32 @@
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ── Badge (Reaction Cam enabled indicator) ─────────────────────────────
|
||||
&-badge {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 8px;
|
||||
border: 1px solid var(--sp-surface);
|
||||
box-shadow: 0 0 0 2px var(--sp-surface);
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
color: var(--sp-text-primary);
|
||||
}
|
||||
|
||||
&--reaction-cam {
|
||||
background: var(--sp-accent);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Name (12px, 2-line truncate) ─────────────────────────────────────────
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Player Privacy Panel styles.
|
||||
*
|
||||
* Uses SP (Scrying Pool) semantic token system.
|
||||
* All colors and spacing come from SP tokens, not Foundry tokens directly.
|
||||
*/
|
||||
|
||||
// Import SP tokens
|
||||
@import "../tokens/_base.less";
|
||||
|
||||
.scrying-pool {
|
||||
// Container
|
||||
.player-privacy-panel__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.player-privacy-panel__header {
|
||||
padding: @sp-spacing-sm @sp-spacing-md;
|
||||
border-bottom: 1px solid var(--sp-border);
|
||||
background: var(--sp-surface);
|
||||
}
|
||||
|
||||
.player-privacy-panel__title {
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: var(--sp-text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Body
|
||||
.player-privacy-panel__body {
|
||||
padding: @sp-spacing-md;
|
||||
background: var(--sp-surface);
|
||||
}
|
||||
|
||||
// Notice (read-only)
|
||||
.player-privacy-panel__notice {
|
||||
padding: @sp-spacing-sm @sp-spacing-md;
|
||||
margin-bottom: @sp-spacing-md;
|
||||
border-radius: @sp-border-radius;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.player-privacy-panel__notice--readonly {
|
||||
background: var(--sp-urgency-awareness);
|
||||
color: var(--sp-text-secondary);
|
||||
border: 1px solid var(--sp-border);
|
||||
}
|
||||
|
||||
// Section
|
||||
.player-privacy-panel__section {
|
||||
margin-bottom: @sp-spacing-md;
|
||||
}
|
||||
|
||||
.player-privacy-panel__section-header {
|
||||
margin: 0 0 @sp-spacing-xs 0;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
color: var(--sp-text-primary);
|
||||
}
|
||||
|
||||
.player-privacy-panel__section-description {
|
||||
margin: 0 0 @sp-spacing-md 0;
|
||||
font-size: 0.85em;
|
||||
color: var(--sp-text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Effects list
|
||||
.player-privacy-panel__effects-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @sp-spacing-md;
|
||||
}
|
||||
|
||||
// Individual effect
|
||||
.player-privacy-panel__effect {
|
||||
padding: @sp-spacing-sm;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: @sp-border-radius;
|
||||
background: var(--sp-surface-elevated);
|
||||
}
|
||||
|
||||
.player-privacy-panel__effect-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: @sp-spacing-xs;
|
||||
}
|
||||
|
||||
.player-privacy-panel__effect-label {
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: var(--sp-text-primary);
|
||||
}
|
||||
|
||||
.player-privacy-panel__effect-description {
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
color: var(--sp-text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Toggle switch
|
||||
.player-privacy-panel__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-privacy-panel__toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: @sp-spacing-xs;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
// Toggle input - visually hidden, uses custom styling
|
||||
.player-privacy-panel__toggle-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:focus-visible + .player-privacy-panel__toggle-text {
|
||||
outline: 2px solid var(--sp-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled + .player-privacy-panel__toggle-text {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.player-privacy-panel__toggle-text {
|
||||
display: inline-block;
|
||||
padding: @sp-spacing-xs @sp-spacing-sm;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: @sp-border-radius;
|
||||
background: var(--sp-surface);
|
||||
color: var(--sp-text-primary);
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
.player-privacy-panel__toggle-input:checked + & {
|
||||
background: var(--sp-accent);
|
||||
color: white;
|
||||
border-color: var(--sp-accent);
|
||||
}
|
||||
|
||||
.player-privacy-panel__toggle-input:disabled + & {
|
||||
background: var(--sp-surface);
|
||||
border-color: var(--sp-border);
|
||||
}
|
||||
|
||||
.player-privacy-panel__toggle-input:checked:disabled + & {
|
||||
background: var(--sp-accent);
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user