Animate model movement

elm-package.json

@@ -14,6 +14,7 @@
         "elm-lang/mouse": "1.0.1 <= v < 2.0.0",
         "elm-lang/svg": "2.0.0 <= v < 3.0.0",
         "elm-lang/window": "1.0.1 <= v < 2.0.0",
+        "mdgriffith/elm-style-animation": "3.5.1 <= v < 4.0.0",
         "toastal/either": "3.0.0 <= v < 4.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"

src/Campaign.elm

@@ -1,6 +1,7 @@
 module Campaign exposing (..)
 
 import Action exposing (Action, Failure)
+import Animation
 import Dice exposing (Dice, oneD6)
 import Game exposing (Game)
 import Gang exposing (Gang)
@@ -66,6 +67,7 @@ type Msg
     | Advance
     | Hover Mouse.Position
     | Click Mouse.Position
+    | Transition Animation.Msg
     | KeyPress KeyCode
     | Resize Window.Size
     | NoOp
@@ -183,6 +185,25 @@ update msg campaign =
                         Nothing ->
                             noop
 
+            Transition animation ->
+                let
+                    moveModels : Player -> Player
+                    moveModels player =
+                        { player
+                            | gang =
+                                player.gang
+                                    |> Gang.map (\_ model -> { model | transition = Animation.update animation model.transition })
+                        }
+                in
+                    ( { campaign
+                        | game =
+                            campaign.game
+                                |> Game.mapActivePlayer (moveModels)
+                                |> Game.mapEnemyPlayer (moveModels)
+                      }
+                    , Cmd.none
+                    )
+
             KeyPress key ->
                 let
                     actions =
@@ -272,13 +293,17 @@ subscriptions campaign =
         activePlayer =
             Game.activePlayer campaign.game
 
+        enemyPlayer =
+            Game.enemyPlayer campaign.game
+
         currentPhase =
             Game.turn campaign.game |> Turn.phase
     in
         Sub.batch
             [ Window.resizes Resize
             , Keyboard.presses KeyPress
             , Mouse.clicks Click
+            , Animation.subscription Transition ((List.append (Gang.toList activePlayer.gang) (Gang.toList enemyPlayer.gang)) |> List.map (.transition))
             , case currentPhase of
                 Turn.Movement ->
                     activePlayer.selection

src/Gang.elm

@@ -160,7 +160,7 @@ positionedGenerator table =
                 in
                     Random.list (List.length fighters) (Tabletop.positionGenerator table)
                         |> Random.map
-                            (List.map2 (\( id, fighter ) pos -> ( id, { fighter | position = pos } )) fighters)
+                            (List.map2 (\( id, fighter ) pos -> ( id, Model.reposition fighter pos )) fighters)
                         |> Random.map (Dict.fromList)
                         |> Random.map (\fighters -> Gang { gang | roster = fighters })
             )

src/Model.elm

@@ -16,6 +16,7 @@ From the rulebook:
 
 -}
 
+import Animation exposing (px)
 import Dice exposing (Die)
 import Html exposing (Html, table, th, td, tr, colgroup, col)
 import List
@@ -42,6 +43,7 @@ type alias Model =
     , name : String
     , equipment : List Weapon
     , bearing : Float
+    , transition : Animation.State
     }
 
 
@@ -180,6 +182,9 @@ init role =
 
                 Juve ->
                     juve
+
+        offTable =
+            Tabletop.offTable
     in
         { profile = template
         , position = Tabletop.offTable
@@ -193,6 +198,7 @@ init role =
         , name = "Mac McMadd"
         , equipment = [ knife ]
         , bearing = 0
+        , transition = Animation.style [ translate offTable ]
         }
 
 
@@ -231,6 +237,25 @@ generator role =
             |> Random.map (equip autopistol)
 
 
+translate : Position -> Animation.Property
+translate pos =
+    Animation.translate (px <| posX pos) (px <| posY pos)
+
+
+reposition : Model -> Position -> Model
+reposition fighter pos =
+    let
+        updatedTransition =
+            Animation.interrupt
+                [ Animation.set [ translate pos ] ]
+                fighter.transition
+    in
+        { fighter
+            | position = pos
+            , transition = updatedTransition
+        }
+
+
 type alias MovementError =
     ( String, Model )
 
@@ -251,13 +276,15 @@ attemptMove model pos =
             Ok
                 { model
                     | position = pos
+                    , transition = Animation.interrupt [ Animation.to [ translate pos ] ] model.transition
                     , remainingMove = allowableDistance
                 }
         else
             Err
                 ( "Can't move there"
                 , { model
                     | position = maxPosition
+                    , transition = Animation.interrupt [ Animation.to [ translate maxPosition ] ] model.transition
                     , remainingMove = 0
                   }
                 )
@@ -287,7 +314,11 @@ run model pos =
             Tabletop.positionFromDirection model.position pos (model.remainingMove * 2)
     in
         if (canRun model) then
-            { model | position = maxPosition, remainingMove = 0 }
+            { model
+                | position = maxPosition
+                , remainingMove = 0
+                , transition = Animation.interrupt [ Animation.to [ translate maxPosition ] ] model.transition
+            }
         else
             model
 
@@ -362,12 +393,13 @@ view model msg =
             Tabletop.millimeter 25 |> toString
     in
         g
-            [ onClickWithoutPropagation msg
-            , Svg.Attributes.cursor "pointer"
-            , class "model"
-            , id ("model" ++ toString model.id)
-            , Tabletop.transformTranslate (model.position)
-            ]
+            ([ onClickWithoutPropagation msg
+             , Svg.Attributes.cursor "pointer"
+             , class "model"
+             , id ("model" ++ toString model.id)
+             ]
+                ++ Animation.render model.transition
+            )
             [ circle [ cx "0", cy "0", r size, opacity "0.35" ] []
             , text_
                 [ fontSize size