Various enhancements, restyling and new options

src/ui/gm/DirectorsBoard.js

@@ -391,13 +391,31 @@ export class DirectorsBoard extends _AppBase {
       { value: '200', label: '200px' },
     ];
 
+    // Tile shape selector
+    const currentTileShape = this._adapter.settings?.get?.('tileShape') ?? 'circle';
+    const TILE_SHAPES = [
+      { key: 'rounded', icon: 'fa-square', isActive: currentTileShape === 'rounded', label: 'Rounded' },
+      { key: 'circle', icon: 'fa-circle', isActive: currentTileShape === 'circle', label: 'Circle' },
+      { key: 'hexagon', icon: 'fa-hexagon', isActive: currentTileShape === 'hexagon', label: 'Hexagon' },
+      { key: 'octagon', icon: 'fa-shapes', isActive: currentTileShape === 'octagon', label: 'Octagon' },
+    ];
+
+    // Tile border around video shapes
+    const currentTileBorderWidth = this._adapter.settings?.get?.('tileBorderWidth') ?? 0;
+    const currentTileBorderColor = this._adapter.settings?.get?.('tileBorderColor') ?? '#ffffff';
+    const TILE_BORDER_WIDTHS = [
+      { value: 0, label: 'None', isActive: currentTileBorderWidth === 0 },
+      { value: 1, label: '1px', isActive: currentTileBorderWidth === 1 },
+      { value: 2, label: '2px', isActive: currentTileBorderWidth === 2 },
+      { value: 4, label: '4px', isActive: currentTileBorderWidth === 4 },
+    ];
+
     return {
       ...base,
       hasUndo: this._undoSnapshot !== null,
       hasRestore: this._spotlightSnapshot !== null,
       presetCount,
       hasPresets: presetCount > 0,
-      // Story 3.2: Auto-apply configuration
       hasScene: !!this._adapter.scenes?.current?.(),
       autoApplyEnabled: autoApplyConfig.enabled,
       autoApplyPresetName: autoApplyConfig.presetName,
@@ -407,6 +425,13 @@ export class DirectorsBoard extends _AppBase {
       avModeEnabled: (game.webrtc?.settings?.world?.mode ?? 0) !== 0,
       // Dock layout selector
       dockLayouts,
+      // Tile shape selector
+      tileShape: currentTileShape,
+      tileShapes: TILE_SHAPES,
+      // Tile border
+      tileBorderWidth: currentTileBorderWidth,
+      tileBorderColor: currentTileBorderColor,
+      tileBorderWidths: TILE_BORDER_WIDTHS,
       // Story 5.2: Video widget width customization
       widthOptions: WIDTH_OPTIONS,
       widgetWidthSm,
@@ -469,6 +494,8 @@ export class DirectorsBoard extends _AppBase {
         case 'toggle-av-mode': this._onToggleAVMode(); break;
         case 'open-av-config': this._onOpenAVConfig(); break;
         case 'set-dock-layout': this._onSetDockLayout(btn.dataset.layout); break;
+        case 'set-tile-shape': this._onSetTileShape(btn.dataset.shape); break;
+        case 'set-tile-border-width': this._onSetTileBorderWidth(parseInt(btn.dataset.width, 10)); break;
         case 'close': this.close(); break;
       }
     };
@@ -501,6 +528,15 @@ export class DirectorsBoard extends _AppBase {
       mdSelect.addEventListener('change', () => this._onSetWidgetWidth(mdSelect.value, 'md'));
     }
 
+    // Tile border color picker — Foundry overwrites inline template styles via setPosition,
+    // but the color input's value attribute IS preserved. However, click fires when opening
+    // the picker (before the user chooses), so listen for 'change' instead.
+    const borderColorInput = root.querySelector('input[data-action="set-tile-border-color"]');
+    if (borderColorInput) {
+      borderColorInput.value = this._adapter.settings?.get?.('tileBorderColor') ?? '#ffffff';
+      borderColorInput.addEventListener('change', () => this._onSetTileBorderColor(borderColorInput.value));
+    }
+
     // Drag grip — custom drag (ApplicationV2 header is hidden)
     const grip = root.querySelector('[data-action="drag-grip"]');
     if (grip) {
@@ -737,6 +773,8 @@ export class DirectorsBoard extends _AppBase {
     if (!layoutKey) return;
     try {
       await this._adapter.settings?.set?.('dockLayout', layoutKey);
+      // Reset per-user size override so the world layout takes effect
+      await this._adapter.settings?.set?.('dockLayoutExpanded', '');
     } catch (err) {
       console.error('[ScryingPool] Failed to set dockLayout:', err);
     }
@@ -760,6 +798,48 @@ export class DirectorsBoard extends _AppBase {
     if (this.rendered) this.render({ force: true });
   }
 
+  /**
+   * Sets the tile shape for participant avatars.
+   * @param {string} shape - 'rounded', 'circle', 'hexagon', or 'octagon'
+   */
+  async _onSetTileShape(shape) {
+    if (!shape) return;
+    try {
+      await this._adapter.settings?.set?.('tileShape', shape);
+    } catch (err) {
+      console.error('[ScryingPool] Failed to set tile shape:', err);
+    }
+    if (this.rendered) this.render({ force: true });
+  }
+
+  /**
+   * Sets the border width around video shapes.
+   * @param {number} width - 0, 1, 2, or 4
+   */
+  async _onSetTileBorderWidth(width) {
+    if (width == null) return;
+    try {
+      await this._adapter.settings?.set?.('tileBorderWidth', width);
+    } catch (err) {
+      console.error('[ScryingPool] Failed to set tile border width:', err);
+    }
+    if (this.rendered) this.render({ force: true });
+  }
+
+  /**
+   * Sets the border color around video shapes.
+   * @param {string} color - hex color string e.g. '#ff0000'
+   */
+  async _onSetTileBorderColor(color) {
+    if (!color) return;
+    try {
+      await this._adapter.settings?.set?.('tileBorderColor', color);
+    } catch (err) {
+      console.error('[ScryingPool] Failed to set tile border color:', err);
+    }
+    if (this.rendered) this.render({ force: true });
+  }
+
   /**
    * Opens the PresetSaveDialog for saving the current visibility matrix as a preset.
    */