[UI] Minor updates to tag team initialization visuals (#1882)

* Visual updates to tag team initialization

* Center players and handlet he case where is 5 or 6 players

module/applications/dialogs/tagTeamDialog.mjs

@@ -38,6 +38,9 @@ export default class TagTeamDialog extends HandlebarsApplicationMixin(Applicatio
         tag: 'form',
         classes: ['daggerheart', 'views', 'dh-style', 'dialog', 'tag-team-dialog'],
         position: { width: 550, height: 'auto' },
+        window: {
+            icon: 'fa-solid fa-user-group'
+        },
         actions: {
             toggleSelectMember: TagTeamDialog.#toggleSelectMember,
             startTagTeamRoll: TagTeamDialog.#startTagTeamRoll,

styles/less/dialog/group-roll-dialog/_common.less

@@ -1,9 +1,7 @@
 h1 {
     color: light-dark(@dark-blue, @golden);
-    font-family: var(--dh-font-subtitle);
+    font: 700 var(--font-size-24) var(--dh-font-subtitle);
-    font-size: var(--font-size-24);
     text-align: center;
-    font-weight: 700;
 }
 
 header {

styles/less/dialog/tag-team-dialog/initialization.less

@@ -7,39 +7,85 @@
 }
 
 .daggerheart.dialog.dh-style.views.tag-team-dialog {
-    .initialization-container {
+    .initialization-container.active {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacer-4);
+
         h2 {
             text-align: center;
         }
 
         .members-container {
-            display: grid;
+            display: flex;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
+            flex-wrap: wrap;
+            justify-content: center;
             gap: 8px;
 
+            // Force 3 columns for 5 -> 6 players
+            &:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
+                padding-left: 10%;
+                padding-right: 10%;
+            }
+
             .member-container {
                 position: relative;
                 display: flex;
+                align-items: stretch;
                 justify-content: center;
+                border-radius: 6px;
+                border: 1px solid light-dark(@dark-blue, @golden);
+                overflow: hidden;
+                height: 11.5rem;
+                width: 122px;
 
                 &.inactive {
-                    opacity: 0.4;
+                    border-color: light-dark(@dark-blue-40, @golden-40);
+                    img {
+                        opacity: 0.4;
+                    }
                 }
 
                 .member-name {
+                    --shadow-color: light-dark(white, black);
                     position: absolute;
-                    padding: 0 2px;
+                    bottom: 0;
-                    border: 1px solid;
+                    left: 0;
-                    border-radius: 6px;
+                    right: 0;
-                    margin-top: 4px;
+
-                    color: light-dark(@dark, @beige);
+                    display: flex;
-                    background-image: url('../assets/parchments/dh-parchment-dark.png');
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    min-height: 4rem;
+                    padding: 5rem 4px var(--spacer-8) 4px;
                     text-align: center;
+
+                    color: var(--color-text-primary);
+                    text-shadow: 1px 1px 2px var(--shadow-color), 0 0 10px var(--shadow-color);
+
+                    // Basic "scrim" gradient
+                    background-image: linear-gradient(
+                        to top,
+                        var(--shadow-color),
+                        rgba(from var(--shadow-color) r g b / 0.834) 10.6%,
+                        rgba(from var(--shadow-color) r g b / 0.541) 34%,
+                        rgba(from var(--shadow-color) r g b / 0.382) 47%,
+                        rgba(from var(--shadow-color) r g b / 0.194) 65%,
+                        transparent 100%
+                    );
                 }
 
                 img {
-                    border-radius: 6px;
+                    object-fit: cover;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    object-position: top center;
+                    flex: 1;
+                }
+
+                .leader-mark {
+                    position: absolute;
+                    top: 4px;
+                    right: 4px;
+                    text-shadow: var(--shadow-text-stroke), 0 0 20px black;
                 }
             }
         }

styles/less/dialog/tag-team-dialog/sheet.less

@@ -1,4 +1,10 @@
-.daggerheart.dialog.dh-style.views.tag-team-dialog {
+.daggerheart.dialog.dh-style.views.tag-team-dialog .window-content {
+    h1 {
+        color: light-dark(@dark-blue, @golden);
+        font: 700 var(--font-size-24) var(--dh-font-subtitle);
+        text-align: center;
+    }
+
     .team-container {
         display: flex;
         gap: 16px;

templates/dialogs/tagTeamDialog/initialization.hbs

@@ -1,13 +1,18 @@
 <section class="initialization-container tab {{#if tabs.initialization.active}} active{{/if}}" data-group="{{tabs.initialization.group}}" data-tab="{{tabs.initialization.id}}">
-    <h2>{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.selectParticipants"}}</h2>
+    <h1>{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.selectParticipants"}}</h1>
     <div class="members-container">
         {{#each memberSelection as |member|}}
             <a 
                 class="member-container {{#unless member.selected}}inactive {{#if ../allselected}}locked{{/if}}{{/unless}}" 
                 data-action="toggleSelectMember" data-id="{{member.id}}" {{#if (and (not member.selected) ../allSelected)}}disabled{{/if}}
             >
-                <span class="member-name">{{member.name}}</span>
                 <img src="{{member.img}}" />
+                <span class="member-name">{{member.name}}</span>
+                {{#if (eq @root.initiator.memberId member.id)}}
+                    <div class="leader-mark">
+                        <i class="fa-solid fa-crown" inert></i>
+                    </div>
+                {{/if}}
             </a>
         {{/each}} 
     </div>
@@ -30,10 +35,13 @@
     </div>
 
     <footer>
-        <button type="button" data-action="startTagTeamRoll" {{#unless canStartTagTeam}}disabled{{/unless}}>{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.startTagTeamRoll"}} <i class="fa-solid fa-arrow-right-long"></i></button>
         <div class="finish-tools {{#unless canStartTagTeam}}inactive{{/unless}}">
             <span>{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.openDialogForAll"}}</span>
             <input type="checkbox" class="openforall-field" {{#unless canStartTagTeam}}disabled{{/unless}} {{checked openForAllPlayers}} />
         </div>
+        <button type="button" data-action="startTagTeamRoll" {{#unless canStartTagTeam}}disabled{{/unless}}>
+            <i class="fa-solid fa-arrow-right-long" inert></i>
+            {{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.startTagTeamRoll"}}
+        </button>
     </footer>
 </section>

templates/dialogs/tagTeamDialog/result.hbs

@@ -32,7 +32,10 @@
 
         <div class="finish-container">
             <button type="button" data-action="cancelRoll">{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.cancelTagTeamRoll"}}</button>
-            <button type="button" data-action="finishRoll" {{#if hintText}}disabled{{/if}} class="finish-button">{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.finishTagTeamRoll"}}</button>
+            <button type="button" data-action="finishRoll" {{#if hintText}}disabled{{/if}} class="finish-button">
+                <i class="fa-solid fa-dice" inert></i>
+                {{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.finishTagTeamRoll"}}
+            </button>
         </div>
     </div>
 </section>