summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/battlemap/src/View/MessageBoard/Animator/Attack.elm139
-rw-r--r--src/battlemap/www/style.css82
2 files changed, 216 insertions, 5 deletions
diff --git a/src/battlemap/src/View/MessageBoard/Animator/Attack.elm b/src/battlemap/src/View/MessageBoard/Animator/Attack.elm
index 1557ae2..54c821b 100644
--- a/src/battlemap/src/View/MessageBoard/Animator/Attack.elm
+++ b/src/battlemap/src/View/MessageBoard/Animator/Attack.elm
@@ -94,6 +94,138 @@ get_attack_html attacker defender attack =
]
)
+get_attack_animation_class : (
+ Struct.Attack.Type ->
+ Struct.Character.Type ->
+ String
+ )
+get_attack_animation_class attack char =
+ if (attack.critical)
+ then
+ "battlemap-animated-portrait-attack-critical"
+ else
+ "battlemap-animated-portrait-attacks"
+
+get_defense_animation_class : (
+ Struct.Attack.Type ->
+ Struct.Character.Type ->
+ String
+ )
+get_defense_animation_class attack char =
+ if (attack.damage == 0)
+ then
+ if (attack.precision == Struct.Attack.Miss)
+ then
+ "battlemap-animated-portrait-dodges"
+ else
+ "battlemap-animated-portrait-undamaged"
+ else if ((Struct.Character.get_current_health char) > 0)
+ then
+ if (attack.precision == Struct.Attack.Graze)
+ then
+ "battlemap-animated-portrait-grazed-damage"
+ else
+ "battlemap-animated-portrait-damaged"
+ else
+ if (attack.precision == Struct.Attack.Graze)
+ then
+ "battlemap-animated-portrait-grazed-death"
+ else
+ "battlemap-animated-portrait-dies"
+
+get_attacker_card : (
+ (Maybe Struct.Attack.Type) ->
+ Struct.Character.Type ->
+ (Html.Html Struct.Event.Type)
+ )
+get_attacker_card maybe_attack char =
+ (Html.div
+ (case maybe_attack of
+ Nothing ->
+ if ((Struct.Character.get_current_health char) > 0)
+ then
+ [
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+ else
+ [
+ (Html.Attributes.class "battlemap-animated-portrait-absent"),
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+
+ (Just attack) ->
+ [
+ (Html.Attributes.class
+ (case (attack.order, attack.parried) of
+ (Struct.Attack.Counter, True) ->
+ (get_attack_animation_class attack char)
+
+ (Struct.Attack.Counter, _) ->
+ (get_defense_animation_class attack char)
+
+ (_, True) ->
+ (get_defense_animation_class attack char)
+
+ (_, _) ->
+ (get_attack_animation_class attack char)
+ )
+ ),
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+ )
+ [
+ (View.Controlled.CharacterCard.get_minimal_html
+ (Struct.Character.get_player_id char)
+ char
+ )
+ ]
+ )
+
+get_defender_card : (
+ (Maybe Struct.Attack.Type) ->
+ Struct.Character.Type ->
+ (Html.Html Struct.Event.Type)
+ )
+get_defender_card maybe_attack char =
+ (Html.div
+ (case maybe_attack of
+ Nothing ->
+ if ((Struct.Character.get_current_health char) > 0)
+ then
+ [
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+ else
+ [
+ (Html.Attributes.class "battlemap-animated-portrait-absent"),
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+
+ (Just attack) ->
+ [
+ (Html.Attributes.class
+ (case (attack.order, attack.parried) of
+ (Struct.Attack.Counter, True) ->
+ (get_defense_animation_class attack char)
+
+ (Struct.Attack.Counter, _) ->
+ (get_attack_animation_class attack char)
+
+ (_, True) ->
+ (get_attack_animation_class attack char)
+
+ (_, _) ->
+ (get_defense_animation_class attack char)
+ )
+ ),
+ (Html.Attributes.class "battlemap-animated-portrait")
+ ]
+ )
+ [
+ (View.Controlled.CharacterCard.get_minimal_html "" char)
+ ]
+ )
+
--------------------------------------------------------------------------------
-- EXPORTED --------------------------------------------------------------------
--------------------------------------------------------------------------------
@@ -118,10 +250,7 @@ get_placeholder_html characters attacker_ix defender_ix maybe_attack =
]
(
[
- (View.Controlled.CharacterCard.get_minimal_html
- (Struct.Character.get_player_id atkchar)
- atkchar
- ),
+ (get_attacker_card maybe_attack atkchar),
(
case maybe_attack of
(Just attack) ->
@@ -130,7 +259,7 @@ get_placeholder_html characters attacker_ix defender_ix maybe_attack =
Nothing ->
(Util.Html.nothing)
),
- (View.Controlled.CharacterCard.get_minimal_html "" defchar)
+ (get_defender_card maybe_attack defchar)
]
)
)
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 7d4ba53..2688bdd 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -712,6 +712,60 @@
transition: top linear 0.3s, left linear 0.3s;
}
+.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
+{
+ animation: blinking 0.2s steps(2, start) 8;
+}
+
+.battlemap-animated-portrait-absent .battlemap-character-portrait > *
+{
+ visibility: hidden;
+}
+
+.battlemap-animated-portrait-dodges .battlemap-character-portrait,
+.battlemap-animated-portrait-dies .battlemap-character-portrait,
+.battlemap-animated-portrait-parries .battlemap-character-portrait,
+.battlemap-animated-portrait-attacks .battlemap-character-portrait
+{
+ overflow: hidden;
+}
+
+.battlemap-animated-portrait
+{
+ width: 100%;
+ height: 100%;
+}
+
+.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
+{
+ animation-name: dodges;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
+
+.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
+{
+ animation-name: attacks;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
+
+.battlemap-animated-portrait-dies .battlemap-character-portrait > *
+{
+ animation-name: blinking, dies;
+ animation-duration: 1s, 2s;
+ animation-delay: 0s, 1s;
+ animation-iteration-count: 1, 1;
+ animation-fill: default, forwards;
+}
+
+.battlemap-animated-portrait-parries .battlemap-character-portrait > *
+{
+ animation-name: parries;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
+
.battlemap-animation-move-1
.battlemap-animation-move-R,
.battlemap-animation-move-L,
@@ -795,6 +849,34 @@
100% {background-color: rgba(0,0,255,0.2);}
}
+@keyframes blinking {
+ to { visibility: hidden; }
+}
+
+@keyframes dodges {
+ 0% { transform: translate(0, 0); }
+ 50% { transform: translate(-75%, 0); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes attacks {
+ 0% { transform: translate(0, 0); }
+ 25% { transform: translate(25%, 0); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes parries {
+ 0% { transform: translate(0, 0); }
+ 25% { transform: translate(-25%, 0); }
+ 50% { transform: translate(50%, 20%); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes dies {
+ from { transform: translate(0, 0); }
+ to { transform: translate(0, 100%); }
+}
+
@keyframes blue-alarm-bd {
0% {border-color: rgba(0,0,255,0.25);}
25% {border-color: rgba(0,0,255,1);}