ついに再生！

js/main.js

@@ -2,6 +2,7 @@ import FramesController from "./frames-controller";
 import DrawingConfiguration from "./drawing-configuration";
 import ViewManager from "./view-manager";
 import PaintManager from "./paint-manager";
+import Player from "./player";
 
 // webpack
 import "./../css/style.css";
@@ -12,6 +13,7 @@ let framesController;
 let drawingConfiguration;
 let viewManager;
 let paintManager;
+let player;
 
 document.addEventListener("DOMContentLoaded", function() {
   const firstFrameId = 0;
@@ -23,6 +25,8 @@ document.addEventListener("DOMContentLoaded", function() {
 
   paintManager = new PaintManager(canvas);
 
+  player = new Player(framesController);
+
   drawingConfiguration.setDefaultValues();
 
   framesController.append(firstFrameId);

js/player.js

@@ -0,0 +1,34 @@
+import eventPublisher from "./publisher";
+
+// 将来的にもこれが変えられると面白いような（#85 参照）
+const playInterval = 250;
+
+/**
+ * 再生しているかを表すisPlayingを所持し、
+ * 再生された時に、Frameを切り替える処理もここで行う。
+ * 再生された時に他に必要な処理（Menuを隠すなど）は、各自クラスでsubscribeして行う。
+ */
+function Player(framesController) {
+  this.isPlaying = false;
+  this.playInterval = playInterval;
+  this.framesController = framesController;
+  eventPublisher.subscribe("isPlaying", (isPlaying) => {
+    this.isPlaying = isPlaying;
+    this.changeFrame(0);
+  });
+}
+
+Player.prototype.changeFrame = function(currentFrameId) {
+  let nextCurrentFrameId;
+  this.framesController.setCurrentFrame(currentFrameId);
+  if (currentFrameId >= this.framesController.frames.length - 1) {
+    nextCurrentFrameId = 0;
+  } else {
+    nextCurrentFrameId = currentFrameId + 1;
+  }
+  setTimeout(() => {
+    this.changeFrame(nextCurrentFrameId);
+  }, this.playInterval);
+};
+
+export default Player;

js/view-manager.js

@@ -2,6 +2,7 @@ import ColorPickerView from "./view/color-picker-view";
 import LineWidthPickerView from "./view/line-width-picker-view";
 import MenuView from "./view/menu-view";
 import SequenceView from "./view/sequence-view";
+import PlayerView from "./view/player-view";
 import eventPublisher from "./publisher";
 
 function ViewManager(framesController) {
@@ -20,6 +21,7 @@ function ViewManager(framesController) {
   this.sequenceEditor =
     new SequenceView(document.getElementById("thumbnails"), framesController);
 
+  this.player = new PlayerView(document.getElementById("btn-play"));
   this.menu = new MenuView();
 }
 

js/view/player-view.js

@@ -0,0 +1,10 @@
+import eventPublisher from "./../publisher";
+
+function PlayerView(element) {
+  this.element = element;
+  this.element.addEventListener("click", () => {
+    eventPublisher.publish("isPlaying", true);
+  });
+}
+
+export default PlayerView;