fvtt-hamalron/templates/chat-competence.hbs

<div class="{{cssClass}}">
  <div class="competence-roll-header">
    <div class="actor-info-compact">
      <img src="{{actingCharImg}}" class="actor-avatar" data-tooltip="{{actingCharName}}" />
      <div class="actor-details">
        <h3 class="competence-name">{{competence.name}}</h3>
        <div class="competence-meta">
          <span class="meta-item">
            <i class="fas fa-shapes"></i>
            {{upperFirst competence.system.carteSymbole}}
          </span>
          <span class="meta-item">
            <i class="fas fa-layer-group"></i>
            {{upperFirst competence.system.niveau}} ({{competenceModifier}})
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="competence-roll-body">
    {{#if selectedCard}}
      <div class="card-used-section">
        <div class="card-used-label">
          <i class="fas fa-hand-sparkles"></i>
          {{localize "HAMALRON.Label.cardUsed"}}
        </div>
        <div class="card-used-content">
          <img src="{{selectedCard.img}}" class="card-thumbnail" />
          <div class="card-info">
            <span class="card-name">{{selectedCard.name}}</span>
            {{#if cardBonus}}
              <span class="card-match {{#if (eq cardSymboleMatch true)}}match-success{{else if isAtout}}match-atout{{else}}match-partial{{/if}}">
                {{#if (eq cardSymboleMatch true)}}
                  <i class="fas fa-check-circle"></i>
                  {{localize "HAMALRON.Label.matchingSymbol"}}
                {{else if isAtout}}
                  <i class="fas fa-star"></i>
                  Atout
                {{else}}
                  <i class="fas fa-adjust"></i>
                  {{localize "HAMALRON.Label.differentSymbol"}}
                {{/if}}
              </span>
            {{/if}}
            {{#if isValet}}
              <span class="valet-special-rule">
                <i class="fas fa-info-circle"></i>
                Valet : Compensation en cas d'échec
              </span>
            {{/if}}
            {{#if isCavalier}}
              <span class="cavalier-special-rule">
                <i class="fas fa-info-circle"></i>
                Cavalier : Échec transformé en égalité
              </span>
            {{/if}}
            {{#if isReine}}
              <span class="reine-special-rule">
                <i class="fas fa-info-circle"></i>
                Reine : Effet exceptionnel et désagrément
              </span>
            {{/if}}
            {{#if isRoi}}
              <span class="roi-special-rule">
                <i class="fas fa-info-circle"></i>
                Roi : Effet exceptionnel
              </span>
            {{/if}}
          </div>
        </div>
      </div>
    {{/if}}

    <div class="calculation-section">
      <div class="calculation-row">
        <span class="calc-label">{{localize "HAMALRON.Label.competenceModifier"}}</span>
        <span class="calc-value">{{competenceModifier}}</span>
      </div>
      {{#if cardBonus}}
        <div class="calculation-row">
          <span class="calc-label">{{localize "HAMALRON.Label.cardBonus"}}</span>
          <span class="calc-value calc-bonus">+{{cardBonus}}</span>
        </div>
      {{/if}}
      <div class="calculation-divider"></div>
      <div class="calculation-row total-row">
        <span class="calc-label">{{localize "HAMALRON.Label.totalValue"}}</span>
        <span class="calc-value calc-total">{{totalValue}}</span>
      </div>
    </div>

    {{#unless isSousTensionOppose}}
      <div class="difficulty-section">
        <div class="difficulty-info">
          <i class="fas fa-bullseye"></i>
          <span class="difficulty-label">{{difficulty}}</span>
          <span class="difficulty-target">{{localize "HAMALRON.Label.targetScore"}}: <strong>{{targetScore}}</strong></span>
        </div>
      </div>
    {{/unless}}
  </div>

  {{#if isSousTensionOppose}}
    <div class="competence-roll-footer gm-only-buttons">
      {{#if isAutomaticSuccess}}
        <div class="automatic-success-banner">
          <i class="fas fa-star"></i>
          {{localize "HAMALRON.Label.automaticSuccess"}}
          <i class="fas fa-star"></i>
        </div>
      {{/if}}

      <div class="gm-buttons">
        <button class="sous-tension-btn" data-action="sousTension">
          <i class="fas fa-bolt"></i>
          {{localize "HAMALRON.Label.sousTension"}}
        </button>
        <button class="oppose-btn" data-action="oppose">
          <i class="fas fa-shield-alt"></i>
          {{localize "HAMALRON.Label.oppose"}}
        </button>
      </div>
    </div>
  {{else}}
    <div class="competence-roll-footer {{#if isSuccess}}result-success{{else if isEquality}}result-equality{{else}}result-failure{{/if}}">
      {{#if isAutomaticSuccess}}
        <div class="automatic-success-banner">
          <i class="fas fa-star"></i>
          {{localize "HAMALRON.Label.automaticSuccess"}}
          <i class="fas fa-star"></i>
        </div>
      {{/if}}
      <div class="result-icon">
        {{#if isSuccess}}
          <i class="fas fa-check-circle"></i>
        {{else if isEquality}}
          <i class="fas fa-equals"></i>
        {{else}}
          <i class="fas fa-times-circle"></i>
        {{/if}}
      </div>
      <div class="result-text">
        {{#if isSuccess}}
          {{localize "HAMALRON.Label.success"}}
        {{else if isEquality}}
          Égalité
        {{else}}
          {{localize "HAMALRON.Label.failure"}}
        {{/if}}
      </div>
    </div>
  {{/if}}
</div>