Working on Puppeteer driven animations.

There's still some buggy behavior in there...

4 files changed, 77 insertions, 53 deletions

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);}