fix overlaying element on character card

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomhavensecretariat",
-  "version": "0.77.13",
+  "version": "0.77.14",
   "license": "AGPL3",
   "description": "Gloomhaven Secretariat is a Gloomhaven Companion app.",
   "homepage": "https://gloomhaven-secretariat.de",

src/app/ui/figures/attackmodifier/attackmodifier-draw.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { gameManager, GameManager } from 'src/app/game/businesslogic/GameManager';
 import { SettingsManager, settingsManager } from 'src/app/game/businesslogic/SettingsManager';
 import { AttackModifierDeck, AttackModifierType } from 'src/app/game/model/data/AttackModifier';
@@ -14,6 +14,7 @@ import { Subscription } from 'rxjs';
 export class AttackModifierDrawComponent implements OnInit, OnDestroy, OnChanges {
 
   @Input('character') character!: Character;
+  @Output('drawing') drawingEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Input() initTimeout: number = 1500;
 
   gameManager: GameManager = gameManager;
@@ -96,15 +97,18 @@ export class AttackModifierDrawComponent implements OnInit, OnDestroy, OnChanges
       }
       this.queue = 0;
       this.drawing = false;
+      this.drawingEmitter.emit(false);
       this.current = this.deck.current;
     }
   }
 
   drawQueue() {
     this.drawing = true;
+    this.drawingEmitter.emit(true);
     this.element.nativeElement.getElementsByClassName('attack-modifier-draw')[0].classList.add('drawing');
     this.queueTimeout = setTimeout(() => {
       this.drawing = false;
+      this.drawingEmitter.emit(false);
       this.queueTimeout = null;
       if (this.queue > 0) {
         this.queue--;

src/app/ui/figures/character/character.html

@@ -161,9 +161,10 @@
         <img src="./assets/images/attackmodifier/icon.png" />
       </span>
 
-      <span class="attack-modifier-draw"
+      <span class="attack-modifier-draw" [ngClass]="{'drawing': amAnimationDrawing}"
         *ngIf="settingsManager.settings.characterAttackModifierDeck && settingsManager.settings.characterAttackModifierAnimate && !character.attackModifierDeckVisible && (!settingsManager.settings.characterAttackModifierDeckPermanentActive || !character.active)">
-        <ghs-attackmodifier-draw [character]="character"></ghs-attackmodifier-draw>
+        <ghs-attackmodifier-draw [character]="character"
+          (drawing)="amAnimationDrawing = $event"></ghs-attackmodifier-draw>
       </span>
 
       <div

src/app/ui/figures/character/character.scss

@@ -475,6 +475,11 @@
 
       ghs-attackmodifier-draw {
         position: absolute;
+        width: 0;
+        height: 0;
+      }
+
+      &.drawing ghs-attackmodifier-draw {
         width: calc(var(--ghs-unit) * 18);
         height: calc(var(--ghs-unit) * 12);
       }

src/app/ui/figures/character/character.ts

@@ -52,6 +52,7 @@ export class CharacterComponent implements OnInit, OnDestroy {
   loot: number = 0;
   maxHp: number = 0;
   token: number = 0;
+  amAnimationDrawing: boolean = false;
 
   summonCount: number = 0;
   activeConditions: EntityCondition[] = [];