show glow around active character

After-the-End-of-All-Things · Aug 23, 2023 · f32ffc8 · f32ffc8
1 parent d23a5f1
commit f32ffc8
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {