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 @@
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 @@
-
+
Attack
- Move
+
+ Move
+
- Item
+
+ Item
+
- Run Away
+
+ Run Away
+
@@ -39,6 +52,7 @@
3" [class.friendly]="i <= 3">
1"
*ngFor="let char of col.containedCharacters"
>
@@ -58,6 +72,7 @@
size="small"
[padding]="0"
[noScale]="true"
+ [active]="isMyCharacterActive"
>