From f32ffc8d08bdd77fa8d2636bdf18169ee83145b8 Mon Sep 17 00:00:00 2001
From: Kyle Kemp <kyle@seiyria.com>
Date: Wed, 23 Aug 2023 05:04:58 -0500
Subject: [PATCH] show glow around active character

---
 .../components/avatar/avatar.component.html   |  2 +-
 .../components/avatar/avatar.component.scss   | 27 +++++++++++++++++++
 .../app/components/avatar/avatar.component.ts |  1 +
 client/src/app/pages/combat/combat.page.html  | 23 +++++++++++++---
 client/src/app/pages/combat/combat.page.ts    |  4 +++
 5 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/client/src/app/components/avatar/avatar.component.html b/client/src/app/components/avatar/avatar.component.html
index f779a0f..b9a048a 100644
--- a/client/src/app/components/avatar/avatar.component.html
+++ b/client/src/app/components/avatar/avatar.component.html
@@ -1,6 +1,6 @@
 <div
   class="avatar"
-  [ngClass]="[size, noScale ? 'no-scale' : '']"
+  [ngClass]="[size, noScale ? 'no-scale' : '', active ? 'active' : '']"
   [style.padding.px]="padding"
 >
   <ion-avatar>
diff --git a/client/src/app/components/avatar/avatar.component.scss b/client/src/app/components/avatar/avatar.component.scss
index 63b6ba7..39d719d 100644
--- a/client/src/app/components/avatar/avatar.component.scss
+++ b/client/src/app/components/avatar/avatar.component.scss
@@ -23,4 +23,31 @@
       transform: scale(1);
     }
   }
+  &.active {
+    --glow-color-start: #033;
+    --glow-color-end: #0ff;
+
+    filter: drop-shadow(1px 1px 0 var(--glow-color-start))
+            drop-shadow(-1px 1px 0 var(--glow-color-start))
+            drop-shadow(1px -1px 0 var(--glow-color-start))
+            drop-shadow(-1px -1px 0 var(--glow-color-start));
+
+    animation: glow 1s ease-in-out infinite alternate;
+
+    @keyframes glow {
+      0% {
+        filter: drop-shadow(1px 1px 0 var(--glow-color-start))
+                drop-shadow(-1px 1px 0 var(--glow-color-start))
+                drop-shadow(1px -1px 0 var(--glow-color-start))
+                drop-shadow(-1px -1px 0 var(--glow-color-start));
+      }
+
+      100% {
+        filter: drop-shadow(1px 1px 0 var(--glow-color-end))
+                drop-shadow(-1px 1px 0 var(--glow-color-end))
+                drop-shadow(1px -1px 0 var(--glow-color-end))
+                drop-shadow(-1px -1px 0 var(--glow-color-end));
+      }
+    }
+  }
 }
diff --git a/client/src/app/components/avatar/avatar.component.ts b/client/src/app/components/avatar/avatar.component.ts
index 750e046..69a543b 100644
--- a/client/src/app/components/avatar/avatar.component.ts
+++ b/client/src/app/components/avatar/avatar.component.ts
@@ -10,6 +10,7 @@ export class AvatarComponent implements OnInit {
   @Input() padding = 32;
   @Input() noScale = false;
   @Input() size: 'normal' | 'small' = 'normal';
+  @Input() active = false;
 
   constructor() {}
 
diff --git a/client/src/app/pages/combat/combat.page.html b/client/src/app/pages/combat/combat.page.html
index 15f6f75..c7a535e 100644
--- a/client/src/app/pages/combat/combat.page.html
+++ b/client/src/app/pages/combat/combat.page.html
@@ -11,21 +11,34 @@
     <ion-card-content>
       <ion-row>
         <ion-col class="action-container">
-          <ion-button class="action-button" id="abilitiesModal">
+          <ion-button
+            class="action-button"
+            id="abilitiesModal"
+            [disabled]="!isMyCharacterActive"
+          >
             Attack
           </ion-button>
         </ion-col>
 
         <ion-col class="action-container">
-          <ion-button class="action-button">Move</ion-button>
+          <ion-button class="action-button" [disabled]="!isMyCharacterActive">
+            Move
+          </ion-button>
         </ion-col>
 
         <ion-col class="action-container">
-          <ion-button class="action-button" disabled>Item</ion-button>
+          <ion-button
+            class="action-button"
+            [disabled]="!isMyCharacterActive || true"
+          >
+            Item
+          </ion-button>
         </ion-col>
 
         <ion-col class="action-container">
-          <ion-button class="action-button">Run Away</ion-button>
+          <ion-button class="action-button" [disabled]="!isMyCharacterActive">
+            Run Away
+          </ion-button>
         </ion-col>
       </ion-row>
     </ion-card-content>
@@ -39,6 +52,7 @@
             <div class="tile" [class.enemy]="i > 3" [class.friendly]="i <= 3">
               <div
                 class="character-container"
+                [class.active]="isMyCharacterActive"
                 [class.small]="col.containedCharacters.length > 1"
                 *ngFor="let char of col.containedCharacters"
               >
@@ -58,6 +72,7 @@
                     size="small"
                     [padding]="0"
                     [noScale]="true"
+                    [active]="isMyCharacterActive"
                   ></app-avatar>
 
                   <app-monster-icon
diff --git a/client/src/app/pages/combat/combat.page.ts b/client/src/app/pages/combat/combat.page.ts
index 2c709d3..31aa46c 100644
--- a/client/src/app/pages/combat/combat.page.ts
+++ b/client/src/app/pages/combat/combat.page.ts
@@ -56,6 +56,10 @@ export class CombatPage implements OnInit {
     return this.fightCharacters[this.myCharacterId];
   }
 
+  public get isMyCharacterActive(): boolean {
+    return this.fight.currentTurn === this.myCharacterId;
+  }
+
   constructor(private store: Store, private contentService: ContentService) {}
 
   ngOnInit() {