Having fun with cheap combat animations...

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