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 @@
@@ -58,6 +72,7 @@ size="small" [padding]="0" [noScale]="true" + [active]="isMyCharacterActive" >