From 55eb0dce8e2b9bb2c26f856640c1116cb07973ce Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Thu, 28 May 2020 22:43:36 +0200 Subject: Working on Puppeteer driven animations. There's still some buggy behavior in there... --- src/css/src/battle/keyframes.scss | 6 +++ src/css/src/battle/map.scss | 1 + src/css/src/battle/map/character-effects.scss | 69 +++++++++++++++++++++++++++ src/css/src/battle/map/character.scss | 54 +-------------------- 4 files changed, 77 insertions(+), 53 deletions(-) create mode 100644 src/css/src/battle/map/character-effects.scss (limited to 'src/css') diff --git a/src/css/src/battle/keyframes.scss b/src/css/src/battle/keyframes.scss index 049e9d5..b6229cb 100644 --- a/src/css/src/battle/keyframes.scss +++ b/src/css/src/battle/keyframes.scss @@ -19,6 +19,12 @@ 100% { opacity: 1.0; transform: scale(1);} } +@keyframes strongly-pulsating-full-opacity { + 0% { transform: scale(1);} + 50% { transform: scale(1.5);} + 100% { transform: scale(1);} +} + @keyframes brown-alarm-bg { 0% {background-color: #917C6F;} 25% {background-color: #AC9D93} diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss index 1501ca1..2fb3581 100644 --- a/src/css/src/battle/map.scss +++ b/src/css/src/battle/map.scss @@ -54,5 +54,6 @@ @import 'map/animation.scss'; @import 'map/character.scss'; +@import 'map/character-effects.scss'; @import 'map/marker.scss'; @import 'map/path.scss'; diff --git a/src/css/src/battle/map/character-effects.scss b/src/css/src/battle/map/character-effects.scss new file mode 100644 index 0000000..e2902f0 --- /dev/null +++ b/src/css/src/battle/map/character-effects.scss @@ -0,0 +1,69 @@ +.character-icon.display-effect-ally +{ +} + +.character-icon.display-effect-enemy +{ + transform: scale(-1, 1); +} + +.character-icon.display-effect-ally.character-icon-effect-disabled, +{ + filter: contrast(35%); +} + +.character-icon.display-effect-target +{ + background-color: rgba(255,0,0,0.7); + animation-name: red-alarm-bg; + animation-duration: 5s; + animation-iteration-count: infinite; +} + +.character-icon.display-effect-active, +.character-icon.display-effect-focused +{ + animation-name: strongly-pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; +} + +.display-effect-team-0 .character-icon-body{background-image: url(/asset/svg/icon/body_team_0.svg);} +.display-effect-team-1 .character-icon-body{background-image: url(/asset/svg/icon/body_team_1.svg);} +.display-effect-team-2 .character-icon-body{background-image: url(/asset/svg/icon/body_team_2.svg);} +.display-effect-team-3 .character-icon-body{background-image: url(/asset/svg/icon/body_team_3.svg);} +.display-effect-team-4 .character-icon-body{background-image: url(/asset/svg/icon/body_team_4.svg);} +.display-effect-team-5 .character-icon-body{background-image: url(/asset/svg/icon/body_team_5.svg);} +.display-effect-team-6 .character-icon-body{background-image: url(/asset/svg/icon/body_team_6.svg);} +.display-effect-team-7 .character-icon-body{background-image: url(/asset/svg/icon/body_team_7.svg);} + +.character-icon.display-effect-enabled +{ + animation-name: pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; + transform-origin: center; +} + +.character-icon.display-effect-switching-weapons > .character-icon-above-effect, +.character-icon.display-effect-attacking > .character-icon-above-effect +{ + animation-name: strongly-pulsating-full-opacity; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +.character-icon.display-effect-switching-weapons > .character-icon-above-effect +{ + background-image: url(/asset/svg/damage_type/swapwp.svg); +} + +.character-icon.display-effect-attacking > .character-icon-above-effect +{ + background-image: url(/asset/svg/damage_type/attack.svg); +} + +.character-icon.display-effect-using-skill > .character-icon-above-effect +{ + background-image: url(/asset/svg/damage_type/skill.svg); +} diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss index 2ba519b..2090a32 100644 --- a/src/css/src/battle/map/character.scss +++ b/src/css/src/battle/map/character.scss @@ -15,58 +15,6 @@ height: inherit; } -.character-icon.display-effect-enabled, -.character-icon-enabled -{ - animation-name: pulsating; - animation-duration: 1.5s; - animation-iteration-count: infinite; - transform-origin: center; -} - -.character-icon-banner { z-index: 2; } +.character-icon-above-effect { z-index: 2; } .character-icon-head { z-index: 1; } .character-icon-body { z-index: 0; } - -.character-icon.display-effect-ally, -.character-ally -{ -} - -.character-icon.display-effect-enemy, -.character-enemy -{ - transform: scale(-1, 1); -} - -.character-icon.display-effect-ally.character-icon-effect-disabled, -.character-ally.character-icon-disabled -{ - filter: contrast(35%); -} - -.character-icon.display-effect-target, -.character-targeted -{ - background-color: rgba(255,0,0,0.7); - animation-name: red-alarm-bg; - animation-duration: 5s; - animation-iteration-count: infinite; -} - -.character-icon.display-effect-active, -.character-selected -{ - animation-name: strongly-pulsating; - animation-duration: 1.5s; - animation-iteration-count: infinite; -} - -.display-effect-team-0 .character-icon-body{background-image: url(/asset/svg/icon/body_team_0.svg);} -.display-effect-team-1 .character-icon-body{background-image: url(/asset/svg/icon/body_team_1.svg);} -.display-effect-team-2 .character-icon-body{background-image: url(/asset/svg/icon/body_team_2.svg);} -.display-effect-team-3 .character-icon-body{background-image: url(/asset/svg/icon/body_team_3.svg);} -.display-effect-team-4 .character-icon-body{background-image: url(/asset/svg/icon/body_team_4.svg);} -.display-effect-team-5 .character-icon-body{background-image: url(/asset/svg/icon/body_team_5.svg);} -.display-effect-team-6 .character-icon-body{background-image: url(/asset/svg/icon/body_team_6.svg);} -.display-effect-team-7 .character-icon-body{background-image: url(/asset/svg/icon/body_team_7.svg);} -- cgit v1.2.3-70-g09d2