From 65b90f76b84d43c53ad98e5aa298077ffe407b78 Mon Sep 17 00:00:00 2001
From: Lurkars <git@8lh.de>
Date: Wed, 4 Oct 2023 20:04:12 +0200
Subject: [PATCH] fix overlaying element on character card

---
 package-lock.json                                        | 4 ++--
 package.json                                             | 2 +-
 src/app/ui/figures/attackmodifier/attackmodifier-draw.ts | 6 +++++-
 src/app/ui/figures/character/character.html              | 5 +++--
 src/app/ui/figures/character/character.scss              | 5 +++++
 src/app/ui/figures/character/character.ts                | 1 +
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8d095d7a6..20676a560 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gloomhavensecretariat",
-  "version": "0.77.13",
+  "version": "0.77.14",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "gloomhavensecretariat",
-      "version": "0.77.13",
+      "version": "0.77.14",
       "license": "AGPL3",
       "dependencies": {
         "@angular/animations": "^16.2.7",
diff --git a/package.json b/package.json
index 04cdaac6e..0d8144767 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/ui/figures/attackmodifier/attackmodifier-draw.ts b/src/app/ui/figures/attackmodifier/attackmodifier-draw.ts
index f4162b908..442349fb5 100644
--- a/src/app/ui/figures/attackmodifier/attackmodifier-draw.ts
+++ b/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--;
diff --git a/src/app/ui/figures/character/character.html b/src/app/ui/figures/character/character.html
index f43018fcd..198a49f06 100644
--- a/src/app/ui/figures/character/character.html
+++ b/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
diff --git a/src/app/ui/figures/character/character.scss b/src/app/ui/figures/character/character.scss
index de7dcaf26..bb33d3823 100644
--- a/src/app/ui/figures/character/character.scss
+++ b/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);
       }
diff --git a/src/app/ui/figures/character/character.ts b/src/app/ui/figures/character/character.ts
index ed3ba9c54..8c41fef1a 100644
--- a/src/app/ui/figures/character/character.ts
+++ b/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[] = [];