Displays some of the effects using the new approach.

2 files changed, 50 insertions, 11 deletions

diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss
index 0f07dad..2ba519b 100644
--- a/src/css/src/battle/map/character.scss
+++ b/src/css/src/battle/map/character.scss
@@ -15,7 +15,7 @@
    height: inherit;
 }
 
-.character-icon-effect-enabled,
+.character-icon.display-effect-enabled,
 .character-icon-enabled
 {
    animation-name: pulsating;
@@ -28,21 +28,24 @@
 .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-effect-target,
+.character-icon.display-effect-target,
 .character-targeted
 {
    background-color: rgba(255,0,0,0.7);
@@ -51,7 +54,7 @@
    animation-iteration-count: infinite;
 }
 
-.character-icon-effect-active,
+.character-icon.display-effect-active,
 .character-selected
 {
    animation-name: strongly-pulsating;
@@ -59,3 +62,11 @@
    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);}
diff --git a/src/css/src/shared/battle-characters/info-card.scss b/src/css/src/shared/battle-characters/info-card.scss
index 5529a74..52f7f3a 100644
--- a/src/css/src/shared/battle-characters/info-card.scss
+++ b/src/css/src/shared/battle-characters/info-card.scss
@@ -38,14 +38,42 @@
    background-size: 200% 100%;
 }
 
-.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); }
-.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); }
-.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); }
-.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); }
-.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); }
-.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); }
-.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
-.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }
+/*
+ * no space between the class names because the effect is directly applied to
+ * the div with the "character-portrait" class.
+ */
+.character-portrait.display-effect-team-0
+{
+   background-color: rgba(57, 106, 177, 0.3);
+}
+.character-portrait.display-effect-team-1
+{
+   background-color: rgba(204, 37, 41, 0.3);
+}
+.character-portrait.display-effect-team-2
+{
+   background-color: rgba(62, 150, 81, 0.3);
+}
+.character-portrait.display-effect-team-3
+{
+   background-color: rgba(218, 124, 48, 0.3);
+}
+.character-portrait.display-effect-team-4
+{
+   background-color: rgba(83, 81, 84, 0.3);
+}
+.character-portrait.display-effect-team-5
+{
+   background-color: rgba(107, 76, 154, 0.3);
+}
+.character-portrait.display-effect-team-6
+{
+   background-color: rgba(127, 167, 169, 0.3);
+}
+.character-portrait.display-effect-team-7
+{
+   background-color: rgba(231, 167, 169, 0.3);
+}
 
 .character-card-statuses
 {