Adds "movie" controls to the timeline.

17 files changed, 697 insertions, 28 deletions

diff --git a/src/asset/www/svg/damage_type/backwardend.svg b/src/asset/www/svg/damage_type/backwardend.svg
new file mode 100644
index 0000000..2429e11
--- /dev/null
+++ b/src/asset/www/svg/damage_type/backwardend.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16mm"
+   height="16mm"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="backwardend.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5999999"
+     inkscape:cx="32.324964"
+     inkscape:cy="24.160828"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g1929"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="false"
+     inkscape:window-width="1908"
+     inkscape:window-height="1078"
+     inkscape:window-x="11"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-281)">
+    <g
+       id="g1929"
+       transform="translate(0.68063443,-0.17502609)">
+      <path
+         style="fill:#e9ddaf;fill-opacity:1;fill-rule:evenodd;stroke:#483e37;stroke-width:0.54918063px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         d="m 14.213768,294.33253 v -10.31501 l -9.0812445,5.1575 z"
+         id="path898"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+      <path
+         style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:1.03782165;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         d="m 3.6232365,283.69392 h -1.658492 v 10.96222 h 1.658492 z"
+         id="rect900"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/src/asset/www/svg/damage_type/backwardplay.svg b/src/asset/www/svg/damage_type/backwardplay.svg
new file mode 100644
index 0000000..df1e7d6
--- /dev/null
+++ b/src/asset/www/svg/damage_type/backwardplay.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16mm"
+   height="16mm"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="backwardplay.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5999999"
+     inkscape:cx="32.324964"
+     inkscape:cy="24.160828"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g1929"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="false"
+     inkscape:window-width="1908"
+     inkscape:window-height="1078"
+     inkscape:window-x="11"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-281)">
+    <g
+       id="g1929"
+       transform="translate(0.68063443,-0.17502609)">
+      <path
+         style="fill:#e9ddaf;fill-opacity:1;fill-rule:evenodd;stroke:#483e37;stroke-width:0.54918063px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         d="m 11.859974,294.33253 v -10.31501 l -9.0812447,5.1575 z"
+         id="path898"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+    </g>
+  </g>
+</svg>
diff --git a/src/asset/www/svg/damage_type/forwardend.svg b/src/asset/www/svg/damage_type/forwardend.svg
new file mode 100644
index 0000000..e8727e9
--- /dev/null
+++ b/src/asset/www/svg/damage_type/forwardend.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16mm"
+   height="16mm"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="forwardend.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5999999"
+     inkscape:cx="32.324964"
+     inkscape:cy="24.160828"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g1929"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="false"
+     inkscape:window-width="1908"
+     inkscape:window-height="1078"
+     inkscape:window-x="11"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-281)">
+    <g
+       id="g1929"
+       transform="translate(0.68063443,-0.17502609)">
+      <path
+         style="fill:#e9ddaf;fill-opacity:1;fill-rule:evenodd;stroke:#483e37;stroke-width:0.54918063px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         d="m 1.720424,294.33253 v -10.31501 l 9.081244,5.1575 z"
+         id="path898"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+      <path
+         style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:1.03782165;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         d="m 12.310955,283.69392 h 1.658492 v 10.96222 h -1.658492 z"
+         id="rect900"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/src/asset/www/svg/damage_type/forwardplay.svg b/src/asset/www/svg/damage_type/forwardplay.svg
new file mode 100644
index 0000000..d1b3a71
--- /dev/null
+++ b/src/asset/www/svg/damage_type/forwardplay.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16mm"
+   height="16mm"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="forwardplay.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5999999"
+     inkscape:cx="32.324964"
+     inkscape:cy="24.160828"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g1929"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="false"
+     inkscape:window-width="1908"
+     inkscape:window-height="1078"
+     inkscape:window-x="11"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-281)">
+    <g
+       id="g1929"
+       transform="translate(0.68063443,-0.17502609)">
+      <path
+         style="fill:#e9ddaf;fill-opacity:1;fill-rule:evenodd;stroke:#483e37;stroke-width:0.54918063px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         d="m 2.7787574,294.33253 v -10.31501 l 9.0812446,5.1575 z"
+         id="path898"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+    </g>
+  </g>
+</svg>
diff --git a/src/asset/www/svg/damage_type/pause.svg b/src/asset/www/svg/damage_type/pause.svg
new file mode 100644
index 0000000..5c1a1ce
--- /dev/null
+++ b/src/asset/www/svg/damage_type/pause.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16mm"
+   height="16mm"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="pause.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5999999"
+     inkscape:cx="11.80413"
+     inkscape:cy="36.660828"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g1929"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="false"
+     inkscape:window-width="1908"
+     inkscape:window-height="1078"
+     inkscape:window-x="11"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-281)">
+    <g
+       id="g1929"
+       transform="translate(0.68063443,-0.17502609)">
+      <path
+         style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:1.03782165;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         d="m 3.8442866,283.69392 h 1.6584911 v 10.96222 H 3.8442866 Z"
+         id="rect900"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:1.03782165;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         d="m 9.6651213,283.69392 h 1.6584917 v 10.96222 H 9.6651213 Z"
+         id="rect900-6"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/src/battle/src/ElmModule/Update.elm b/src/battle/src/ElmModule/Update.elm
index 5e9d4ca..46940b4 100644
--- a/src/battle/src/ElmModule/Update.elm
+++ b/src/battle/src/ElmModule/Update.elm
@@ -16,6 +16,10 @@ import Update.SelectCharacterOrTile
 import Update.SelectTile
 import Update.SetRequestedHelp
 
+import Update.Puppeteer.Play
+import Update.Puppeteer.TogglePause
+import Update.Puppeteer.SkipTo
+
 import Update.Character.ScrollTo
 import Update.Character.DisplayNavigator
 
@@ -70,6 +74,15 @@ update event model =
       Struct.Event.AnimationEnded ->
          (Update.Puppeteer.apply_to model)
 
+      (Struct.Event.PuppeteerPlay forward) ->
+         (Update.Puppeteer.Play.apply_to forward model)
+
+      (Struct.Event.PuppeteerSkipTo forward) ->
+         (Update.Puppeteer.SkipTo.apply_to forward model)
+
+      Struct.Event.PuppeteerTogglePause ->
+         (Update.Puppeteer.TogglePause.apply_to model)
+
       (Struct.Event.DirectionRequested d) ->
          (Update.CharacterTurn.RequestDirection.apply_to d model)
 
diff --git a/src/battle/src/Struct/Event.elm b/src/battle/src/Struct/Event.elm
index 7b91ae9..0e6de21 100644
--- a/src/battle/src/Struct/Event.elm
+++ b/src/battle/src/Struct/Event.elm
@@ -23,6 +23,9 @@ type Type =
    | SkillRequest
    | SkipRequest
    | MoveRequest
+   | PuppeteerPlay Bool
+   | PuppeteerSkipTo Bool
+   | PuppeteerTogglePause
    | CharacterOrTileSelected BattleMap.Struct.Location.Ref
    | CharacterSelected Int
    | CharacterCardSelected Int
diff --git a/src/battle/src/Struct/Puppeteer.elm b/src/battle/src/Struct/Puppeteer.elm
index 60e554c..3460546 100644
--- a/src/battle/src/Struct/Puppeteer.elm
+++ b/src/battle/src/Struct/Puppeteer.elm
@@ -9,6 +9,10 @@ module Struct.Puppeteer exposing
       step,
       get_is_playing_forward,
       set_is_playing_forward,
+      get_is_paused,
+      set_is_paused,
+      get_is_ignoring_time,
+      set_is_ignoring_time,
       maybe_get_current_action
    )
 
@@ -29,7 +33,9 @@ type alias Type =
    {
       forward_actions : (List Struct.PuppeteerAction.Type),
       backward_actions : (List Struct.PuppeteerAction.Type),
-      is_playing_forward : Bool
+      is_ignoring_time : Bool,
+      is_playing_forward : Bool,
+      is_paused : Bool
    }
 
 --------------------------------------------------------------------------------
@@ -44,7 +50,9 @@ new =
    {
       forward_actions = [],
       backward_actions = [],
-      is_playing_forward = True
+      is_ignoring_time = False,
+      is_playing_forward = True,
+      is_paused = False
    }
 
 append_forward : (List Struct.PuppeteerAction.Type) -> Type -> Type
@@ -93,6 +101,18 @@ get_is_playing_forward puppeteer = puppeteer.is_playing_forward
 set_is_playing_forward : Bool -> Type -> Type
 set_is_playing_forward val puppeteer = {puppeteer | is_playing_forward = val}
 
+get_is_paused : Type -> Bool
+get_is_paused puppeteer = puppeteer.is_paused
+
+set_is_paused : Bool -> Type -> Type
+set_is_paused val puppeteer = {puppeteer | is_paused = val}
+
+get_is_ignoring_time : Type -> Bool
+get_is_ignoring_time puppeteer = puppeteer.is_ignoring_time
+
+set_is_ignoring_time : Bool -> Type -> Type
+set_is_ignoring_time val puppeteer = {puppeteer | is_ignoring_time = val}
+
 maybe_get_current_action : Type -> (Maybe (Struct.PuppeteerAction.Type))
 maybe_get_current_action puppeteer =
    if (puppeteer.is_playing_forward)
diff --git a/src/battle/src/Update/Puppeteer.elm b/src/battle/src/Update/Puppeteer.elm
index b79cddb..b21584f 100644
--- a/src/battle/src/Update/Puppeteer.elm
+++ b/src/battle/src/Update/Puppeteer.elm
@@ -199,22 +199,28 @@ apply_to_rec model cmds =
                         else (apply_effects_backward effects model)
                      )
                in
-                  (
-                     new_model,
-                     (Cmd.batch
-                        (
-                           (Delay.after
-                              time
-                              Delay.Second
-                              Struct.Event.AnimationEnded
+                  if (Struct.Puppeteer.get_is_ignoring_time model.puppeteer)
+                  then (apply_to_rec new_model (new_cmds ++ cmds))
+                  else
+                     (
+                        new_model,
+                        (Cmd.batch
+                           (
+                              (Delay.after
+                                 time
+                                 Delay.Second
+                                 Struct.Event.AnimationEnded
+                              )
+                              :: (new_cmds ++ cmds)
                            )
-                           :: (new_cmds ++ cmds)
                         )
                      )
-                  )
 
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
 --------------------------------------------------------------------------------
 apply_to : Struct.Model.Type -> (Struct.Model.Type, (Cmd Struct.Event.Type))
-apply_to model = (apply_to_rec model [])
+apply_to model =
+   if (Struct.Puppeteer.get_is_paused model.puppeteer)
+   then (model, Cmd.none)
+   else (apply_to_rec model [])
diff --git a/src/battle/src/Update/Puppeteer/Play.elm b/src/battle/src/Update/Puppeteer/Play.elm
new file mode 100644
index 0000000..6df2347
--- /dev/null
+++ b/src/battle/src/Update/Puppeteer/Play.elm
@@ -0,0 +1,33 @@
+module Update.Puppeteer.Play exposing (apply_to)
+
+-- Elm -------------------------------------------------------------------------
+
+-- Local module ----------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+import Struct.Puppeteer
+
+import Update.Puppeteer
+
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+apply_to : (
+      Bool ->
+      Struct.Model.Type ->
+      (Struct.Model.Type, (Cmd Struct.Event.Type))
+   )
+apply_to play_forward model =
+   (Update.Puppeteer.apply_to
+      {model|
+         puppeteer =
+            (Struct.Puppeteer.set_is_playing_forward
+               play_forward
+               model.puppeteer
+            )
+      }
+   )
diff --git a/src/battle/src/Update/Puppeteer/SkipTo.elm b/src/battle/src/Update/Puppeteer/SkipTo.elm
new file mode 100644
index 0000000..d3b20aa
--- /dev/null
+++ b/src/battle/src/Update/Puppeteer/SkipTo.elm
@@ -0,0 +1,72 @@
+module Update.Puppeteer.SkipTo exposing (apply_to)
+
+-- Elm -------------------------------------------------------------------------
+
+-- Shared ----------------------------------------------------------------------
+import Shared.Update.Sequence
+
+-- Local module ----------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+import Struct.Puppeteer
+
+import Update.Puppeteer
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+restore_puppeteer : (
+      Bool ->
+      Bool ->
+      Struct.Model.Type ->
+      (Struct.Model.Type, (Cmd Struct.Event.Type))
+   )
+restore_puppeteer is_paused play_forward model =
+   (
+      {model |
+         puppeteer =
+            (Struct.Puppeteer.set_is_ignoring_time
+               False
+               (Struct.Puppeteer.set_is_paused
+                  is_paused
+                  (Struct.Puppeteer.set_is_playing_forward
+                     play_forward
+                     model.puppeteer
+                  )
+               )
+            )
+      },
+      Cmd.none
+   )
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+apply_to : (
+      Bool ->
+      Struct.Model.Type ->
+      (Struct.Model.Type, (Cmd Struct.Event.Type))
+   )
+apply_to skip_forward model =
+   (Shared.Update.Sequence.sequence
+      [
+         (Update.Puppeteer.apply_to),
+         (restore_puppeteer
+            (Struct.Puppeteer.get_is_paused model.puppeteer)
+            (Struct.Puppeteer.get_is_playing_forward model.puppeteer)
+         )
+      ]
+      {model |
+         puppeteer =
+            (Struct.Puppeteer.set_is_ignoring_time
+               True
+               (Struct.Puppeteer.set_is_paused
+                  False
+                  (Struct.Puppeteer.set_is_playing_forward
+                     skip_forward
+                     model.puppeteer
+                  )
+               )
+            )
+      }
+   )
diff --git a/src/battle/src/Update/Puppeteer/TogglePause.elm b/src/battle/src/Update/Puppeteer/TogglePause.elm
new file mode 100644
index 0000000..a093483
--- /dev/null
+++ b/src/battle/src/Update/Puppeteer/TogglePause.elm
@@ -0,0 +1,28 @@
+module Update.Puppeteer.TogglePause exposing (apply_to)
+
+-- Elm -------------------------------------------------------------------------
+
+-- Local module ----------------------------------------------------------------
+import Struct.Event
+import Struct.Model
+import Struct.Puppeteer
+
+import Update.Puppeteer
+--------------------------------------------------------------------------------
+-- LOCAL -----------------------------------------------------------------------
+--------------------------------------------------------------------------------
+
+--------------------------------------------------------------------------------
+-- EXPORTED --------------------------------------------------------------------
+--------------------------------------------------------------------------------
+apply_to : Struct.Model.Type -> (Struct.Model.Type, (Cmd Struct.Event.Type))
+apply_to model =
+   (Update.Puppeteer.apply_to
+      {model|
+         puppeteer =
+            (Struct.Puppeteer.set_is_paused
+               (not (Struct.Puppeteer.get_is_paused model.puppeteer))
+               model.puppeteer
+            )
+      }
+   )
diff --git a/src/battle/src/View/Controlled.elm b/src/battle/src/View/Controlled.elm
index 8f78fd9..aa34b48 100644
--- a/src/battle/src/View/Controlled.elm
+++ b/src/battle/src/View/Controlled.elm
@@ -58,7 +58,7 @@ action_or_undo_button current_action relevant_action event =
                (Html.Attributes.class "action-button"),
                (action_to_class relevant_action),
                (Html.Events.onClick Struct.Event.UndoActionRequest),
-               (Html.Attributes.class "undo")
+               (Html.Attributes.class "active")
             ]
          else
             [
@@ -147,7 +147,7 @@ path_button char_turn =
                   (Html.Attributes.class "action-button"),
                   (Html.Attributes.class "path-button"),
                   (Html.Events.onClick Struct.Event.UndoActionRequest),
-                  (Html.Attributes.class "undo")
+                  (Html.Attributes.class "active")
                ]
          else
             [
@@ -158,7 +158,7 @@ path_button char_turn =
                   (
                      if ((Struct.CharacterTurn.get_path char_turn) == [])
                      then ""
-                     else "undo"
+                     else "active"
                   )
                )
             ]
diff --git a/src/battle/src/View/SubMenu/Timeline.elm b/src/battle/src/View/SubMenu/Timeline.elm
index 2c1818e..0af85fe 100644
--- a/src/battle/src/View/SubMenu/Timeline.elm
+++ b/src/battle/src/View/SubMenu/Timeline.elm
@@ -5,6 +5,7 @@ import Array
 
 import Html
 import Html.Attributes
+import Html.Events
 import Html.Lazy
 
 -- Shared ----------------------------------------------------------------------
@@ -14,8 +15,9 @@ import Shared.Util.Html
 import Struct.Battle
 import Struct.Character
 import Struct.Event
-import Struct.TurnResult
 import Struct.Model
+import Struct.Puppeteer
+import Struct.TurnResult
 
 import View.SubMenu.Timeline.Attack
 import View.SubMenu.Timeline.Movement
@@ -66,12 +68,11 @@ get_turn_result_html characters player_ix turn_result =
       (Struct.TurnResult.PlayerTurnStarted pturns) ->
          (View.SubMenu.Timeline.PlayerTurnStart.get_html pturns)
 
-true_get_html : Struct.Battle.Type -> (Html.Html Struct.Event.Type)
-true_get_html battle =
+get_events_html : Struct.Battle.Type -> (Html.Html Struct.Event.Type)
+get_events_html battle =
    (Html.div
       [
-         (Html.Attributes.class "tabmenu-content"),
-         (Html.Attributes.class "tabmenu-timeline-tab")
+         (Html.Attributes.class "tabmenu-timeline-events")
       ]
       (Array.toList
          (Array.map
@@ -84,9 +85,92 @@ true_get_html battle =
       )
    )
 
+get_skip_to_button : Bool -> (Html.Html Struct.Event.Type)
+get_skip_to_button skip_forward =
+   (Html.button
+      [
+         (Html.Attributes.class
+            (
+               if (skip_forward)
+               then "skip_forward"
+               else "skip_backward"
+            )
+         ),
+         (Html.Events.onClick (Struct.Event.PuppeteerSkipTo skip_forward))
+      ]
+      [
+      ]
+   )
+
+get_play_button : Bool -> Bool -> (Html.Html Struct.Event.Type)
+get_play_button play_forward current_dir =
+   (Html.button
+      [
+         (Html.Attributes.class
+            (
+               if (play_forward)
+               then "play_forward"
+               else "play_backward"
+            )
+         ),
+         (
+            if (play_forward == current_dir)
+            then (Html.Attributes.class "active")
+            else (Html.Events.onClick (Struct.Event.PuppeteerPlay play_forward))
+         )
+      ]
+      [
+      ]
+   )
+
+get_pause_button : Bool -> (Html.Html Struct.Event.Type)
+get_pause_button is_paused =
+   (Html.button
+      [
+         (Html.Attributes.class "pause"),
+         (Html.Events.onClick Struct.Event.PuppeteerTogglePause),
+         (Html.Attributes.class
+            (
+               if (is_paused)
+               then "active"
+               else ""
+            )
+         )
+      ]
+      [
+      ]
+   )
+
+get_controls_html : Struct.Puppeteer.Type -> (Html.Html Struct.Event.Type)
+get_controls_html puppeteer =
+   let
+      is_playing_forward = (Struct.Puppeteer.get_is_playing_forward puppeteer)
+      is_paused = (Struct.Puppeteer.get_is_paused puppeteer)
+   in
+      (Html.div
+         [
+            (Html.Attributes.class "tabmenu-timeline-controls")
+         ]
+         [
+            (get_skip_to_button False),
+            (get_play_button False is_playing_forward),
+            (get_pause_button is_paused),
+            (get_play_button True is_playing_forward),
+            (get_skip_to_button True)
+         ]
+      )
 --------------------------------------------------------------------------------
 -- EXPORTED --------------------------------------------------------------------
 --------------------------------------------------------------------------------
 get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type)
 get_html model =
-   (Html.Lazy.lazy (true_get_html) model.battle)
+   (Html.div
+      [
+         (Html.Attributes.class "tabmenu-content"),
+         (Html.Attributes.class "tabmenu-timeline-tab")
+      ]
+      [
+         (get_controls_html model.puppeteer),
+         (Html.Lazy.lazy (get_events_html) model.battle)
+      ]
+   )
diff --git a/src/css/src/battle/controlled-panel/buttons.scss b/src/css/src/battle/controlled-panel/buttons.scss
index fb55a61..903642b 100644
--- a/src/css/src/battle/controlled-panel/buttons.scss
+++ b/src/css/src/battle/controlled-panel/buttons.scss
@@ -95,12 +95,6 @@
       var(--bg-end-turn);
 }
 
-.action-button.undo
-{
-   border-bottom-width: 1px;
-   filter: brightness(0.8);
-
-}
 .action-button.end-turn-button.no-path-was-queued
 {
    background-image: var(--bg-second-act), var(--bg-end-turn);
diff --git a/src/css/src/battle/sub-menus/timeline-tab.scss b/src/css/src/battle/sub-menus/timeline-tab.scss
index 23c664b..616ee16 100644
--- a/src/css/src/battle/sub-menus/timeline-tab.scss
+++ b/src/css/src/battle/sub-menus/timeline-tab.scss
@@ -29,3 +29,40 @@
    margin-left: 1em;
 }
 
+.tabmenu-timeline-controls button
+{
+   width: 32px;
+   height: 32px;
+   background-size: 100%;
+   background-position: center;
+}
+
+.tabmenu-timeline-tab
+{
+   text-align: center;
+}
+
+.tabmenu-timeline-controls button.pause
+{
+   background-image: url(/asset/svg/damage_type/pause.svg);
+}
+
+.tabmenu-timeline-controls button.play_forward
+{
+   background-image: url(/asset/svg/damage_type/forwardplay.svg);
+}
+
+.tabmenu-timeline-controls button.play_backward
+{
+   background-image: url(/asset/svg/damage_type/backwardplay.svg);
+}
+
+.tabmenu-timeline-controls button.skip_backward
+{
+   background-image: url(/asset/svg/damage_type/backwardend.svg);
+}
+
+.tabmenu-timeline-controls button.skip_forward
+{
+   background-image: url(/asset/svg/damage_type/forwardend.svg);
+}
diff --git a/src/css/src/shared/battle-view/button.scss b/src/css/src/shared/battle-view/button.scss
index 75788ca..1fc3548 100644
--- a/src/css/src/shared/battle-view/button.scss
+++ b/src/css/src/shared/battle-view/button.scss
@@ -16,6 +16,12 @@ button + button
    margin-left: 0.5em;
 }
 
+button.active
+{
+   border-bottom-width: 1px;
+   filter: brightness(0.8);
+}
+
 button:hover
 {
    background-color: $BROWN-4;