Various enhancements, restyling and new options

templates/directors-board.hbs

@@ -18,7 +18,7 @@
 
     {{#unless isEmpty}}
       {{#each participants}}
-        {{> "modules/scrying-pool/templates/participant-card.hbs"}}
+        {{> "modules/scrying-pool/templates/participant-card.hbs" shape=../tileShape}}
       {{/each}}
     {{else}}
       <p class="directors-board__empty" role="listitem">
@@ -78,6 +78,41 @@
     </div>
   </div>
 
+  {{!-- Tile shape selector --}}
+  <div class="directors-board__tile-shape-bar" role="toolbar" aria-label="Tile shape">
+    <span class="directors-board__tile-shape-label">Shape</span>
+    <div class="directors-board__tile-shape-group">
+      {{#each tileShapes}}
+      <button type="button"
+              class="directors-board__tile-shape-btn{{#if isActive}} is-active{{/if}}"
+              data-action="set-tile-shape"
+              data-shape="{{key}}"
+              data-tooltip="{{label}}">
+        <i class="fas {{icon}}" aria-hidden="true"></i>
+      </button>
+      {{/each}}
+    </div>
+  </div>
+
+  {{!-- Tile border controls --}}
+  <div class="directors-board__tile-border-bar" role="toolbar" aria-label="Tile border">
+    <span class="directors-board__tile-border-label">Border</span>
+    <div class="directors-board__tile-border-group">
+      {{#each tileBorderWidths}}
+      <button type="button"
+              class="directors-board__tile-border-btn{{#if isActive}} is-active{{/if}}"
+              data-action="set-tile-border-width"
+              data-width="{{value}}"
+              data-tooltip="{{label}}">{{label}}</button>
+      {{/each}}
+    </div>
+    <input type="color"
+           class="directors-board__tile-border-color"
+           data-action="set-tile-border-color"
+           value="{{tileBorderColor}}"
+           data-tooltip="Border color" />
+  </div>
+
   {{!-- Story 5.2: Video widget width customization --}}
   <div class="directors-board__widget-width-bar" role="toolbar" aria-label="{{localize 'scrying-pool.directorsBoard.widgetWidth.label'}}">
     <span class="directors-board__widget-width-label">{{localize "scrying-pool.directorsBoard.widgetWidth.label"}}</span>