Use 'syncState' rather than 'setState' in components

marijnh · marijnh · commit ed12fd97a7af · 2018-06-07T11:26:59.000+02:00
diff --git a/16_game.md b/16_game.md
@@ -640,7 +640,7 @@ defined earlier.
 
 {{index graphics, optimization, efficiency, state}}
 
-The `setState` method is used to make the display show a given state.
+The `syncState` method is used to make the display show a given state.
 It first removes the old actor graphics, if any, and then redraws the
 actors in their new positions. It may be tempting to try to reuse the
 ((DOM)) elements for actors, but to make that work, we would need a
@@ -650,7 +650,7 @@ there will typically be only a handful of actors in the game,
 redrawing all of them is not expensive.
 
 ```{includeCode: true}
-DOMDisplay.prototype.setState = function(state) {
+DOMDisplay.prototype.syncState = function(state) {
   if (this.actorLayer) this.actorLayer.remove();
   this.actorLayer = drawActors(state.actors);
   this.dom.appendChild(this.actorLayer);
@@ -772,7 +772,7 @@ We are now able to display our tiny level.
 <script>
   let simpleLevel = new Level(simpleLevelPlan);
   let display = new DOMDisplay(document.body, simpleLevel);
-  display.setState(State.start(simpleLevel));
+  display.syncState(State.start(simpleLevel));
 </script>
 ```
 
@@ -1175,7 +1175,7 @@ function runLevel(level, Display) {
   return new Promise(resolve => {
     runAnimation(time => {
       state = state.update(time, arrowKeys);
-      display.setState(state);
+      display.syncState(state);
       if (state.status == "playing") {
         return true;
       } else if (ending > 0) {
@@ -1323,7 +1323,7 @@ it is finished.
     return new Promise(resolve => {
       runAnimation(time => {
         state = state.update(time, arrowKeys);
-        display.setState(state);
+        display.syncState(state);
         if (state.status == "playing") {
           return true;
         } else if (ending > 0) {
diff --git a/17_canvas.md b/17_canvas.md
@@ -863,7 +863,7 @@ that represent the game's elements.
 
 We define another display object type called `CanvasDisplay`,
 supporting the same ((interface)) as `DOMDisplay` from [Chapter
-?](game#domdisplay), namely the methods `setState` and `clear`.
+?](game#domdisplay), namely the methods `syncState` and `clear`.
 
 {{index state}}
 
@@ -899,11 +899,11 @@ class CanvasDisplay {
 }
 ```
 
-The `setState` method first computes a new viewport and then draws
+The `syncState` method first computes a new viewport and then draws
 the game scene at the appropriate position.
 
 ```{sandbox: "game", includeCode: true}
-CanvasDisplay.prototype.setState = function(state) {
+CanvasDisplay.prototype.syncState = function(state) {
   this.updateViewport(state);
   this.clearDisplay(state.status);
   this.drawBackground(state.level);
diff --git a/19_paint.md b/19_paint.md
@@ -115,9 +115,9 @@ the component. Most constructors will also take some other values,
 that won't change over time, such as the function they can use to
 ((dispatch)) an action.
 
-{{index "setState method"}}
+{{index "syncState method"}}
 
-Each component has a `setState` method that is used to synchronize it
+Each component has a `syncState` method that is used to synchronize it
 to a new state value. The method takes one argument, the state, which
 is of the same type as the first argument to its constructor.
 
@@ -287,21 +287,21 @@ class PictureCanvas {
       onmousedown: event => this.mouse(event, pointerDown),
       ontouchstart: event => this.touch(event, pointerDown)
     });
-    this.setState(picture);
+    this.syncState(picture);
   }
-  setState(picture) {
+  syncState(picture) {
     if (this.picture == picture) return;
     this.picture = picture;
     drawPicture(this.picture, this.dom, scale);
   }
 }
 ```
 
-{{index "setState method", efficiency}}
+{{index "syncState method", efficiency}}
 
 We draw each pixel as a 10-by-10 square, as determined by the `scale`
 constant. To avoid unnecessary work, the component keeps track of its
-current picture, and does a redraw only when `setState` is given a new
+current picture, and does a redraw only when `syncState` is given a new
 picture.
 
 {{index "drawPicture function"}}
@@ -445,10 +445,10 @@ class PixelEditor {
                    ...this.controls.reduce(
                      (a, c) => a.concat(" ", c.dom), []));
   }
-  setState(state) {
+  syncState(state) {
     this.state = state;
-    this.canvas.setState(state.picture);
-    for (let ctrl of this.controls) ctrl.setState(state);
+    this.canvas.syncState(state.picture);
+    for (let ctrl of this.controls) ctrl.syncState(state);
   }
 }
 ```
@@ -457,14 +457,14 @@ The pointer handler given to `PictureCanvas` calls the currently
 selected tool with the appropriate arguments and, if that returns a
 move handler, adapts it to also receive the state.
 
-{{index "reduce method", "map method", whitespace, "setState method"}}
+{{index "reduce method", "map method", whitespace, "syncState method"}}
 
 All controls are constructed and stored in `this.controls` so that
 they can be updated when the application state changes. The call to
 `reduce` introduces spaces between the controls' DOM elements. That
 way they don't look so pressed together.
 
-{{index "select (HTML tag)", "change event", "ToolSelect class", "setState method"}}
+{{index "select (HTML tag)", "change event", "ToolSelect class", "syncState method"}}
 
 The first control is the ((tool)) selection menu. It creates a
 `<select>` element with an option for each tool, and sets up a
@@ -481,7 +481,7 @@ class ToolSelect {
     }, name)));
     this.dom = elt("label", null, "🖌 Tool: ", this.select);
   }
-  setState(state) { this.select.value = state.tool; }
+  syncState(state) { this.select.value = state.tool; }
 }
 ```
 
@@ -508,7 +508,7 @@ Depending on the browser, the color picker might look like this:
 
 if}}
 
-{{index "ColorSelect class", "setState method"}}
+{{index "ColorSelect class", "syncState method"}}
 
 This ((control)) creates such a field and wires it up to stay
 synchronized with the application state's `color` property.
@@ -523,7 +523,7 @@ class ColorSelect {
     });
     this.dom = elt("label", null, "🎨 Color: ", this.input);
   }
-  setState(state) { this.input.value = state.color; }
+  syncState(state) { this.input.value = state.color; }
 }
 ```
 
@@ -664,7 +664,7 @@ We can now test our application!
     controls: [ToolSelect, ColorSelect],
     dispatch(action) {
       state = updateState(state, action);
-      app.setState(state);
+      app.syncState(state);
     }
   });
   document.querySelector("div").appendChild(app.dom);
@@ -700,7 +700,7 @@ class SaveButton {
     link.click();
     link.remove();
   }
-  setState(state) { this.picture = state.picture; }
+  syncState(state) { this.picture = state.picture; }
 }
 ```
 
@@ -742,7 +742,7 @@ class LoadButton {
       onclick: () => startLoad(dispatch)
     }, "📁 Load");
   }
-  setState() {}
+  syncState() {}
 }
 
 function startLoad(dispatch) {
@@ -916,7 +916,7 @@ class UndoButton {
       disabled: state.done.length == 0
     }, "⮪ Undo");
   }
-  setState(state) {
+  syncState(state) {
     this.dom.disabled = state.done.length == 0;
   }
 }
@@ -955,7 +955,7 @@ function startPixelEditor({state = startState,
     controls,
     dispatch(action) {
       state = historyUpdateState(state, action);
-      app.setState(state);
+      app.syncState(state);
     }
   });
   return app.dom;
@@ -1081,10 +1081,10 @@ keys are held down.
                      ...this.controls.reduce(
                        (a, c) => a.concat(" ", c.dom), []));
     }
-    setState(state) {
+    syncState(state) {
       this.state = state;
-      this.canvas.setState(state.picture);
-      for (let ctrl of this.controls) ctrl.setState(state);
+      this.canvas.syncState(state.picture);
+      for (let ctrl of this.controls) ctrl.syncState(state);
     }
   }
 
@@ -1126,9 +1126,9 @@ in `drawPicture`. Creating a new state and updating the rest of the
 DOM isn't very expensive, but repainting all the pixels on the canvas
 is quite a bit of work.
 
-{{index "setState method", "PictureCanvas class"}}
+{{index "syncState method", "PictureCanvas class"}}
 
-Find a way to make the `setState` method of `PictureCanvas` faster by
+Find a way to make the `syncState` method of `PictureCanvas` faster by
 redrawing only the pixels that actually changed.
 
 {{index "drawPicture function", compatibility}}
@@ -1149,7 +1149,7 @@ transparent again.
 <div></div>
 <script>
   // Change this method
-  PictureCanvas.prototype.setState = function(picture) {
+  PictureCanvas.prototype.syncState = function(picture) {
     if (this.picture == picture) return;
     this.picture = picture;
     drawPicture(this.picture, this.dom, scale);
diff --git a/21_skillsharing.md b/21_skillsharing.md
@@ -971,10 +971,10 @@ class SkillShareApp {
                    renderUserField(state.user, dispatch),
                    this.talkDOM,
                    renderTalkForm(dispatch));
-    this.setState(state);
+    this.syncState(state);
   }
 
-  setState(state) {
+  syncState(state) {
     if (state.talks != this.talks) {
       this.talkDOM.textContent = "";
       for (let talk of state.talks) {
@@ -1000,7 +1000,7 @@ function runApp() {
   let state, app;
   function dispatch(action) {
     state = handleAction(state, action);
-    app.setState(state);
+    app.syncState(state);
   }
 
   pollTalks(talks => {
@@ -1091,12 +1091,12 @@ to solve it?
 
 {{hint
 
-{{index "comment field reset (exercise)", template, "setState method"}}
+{{index "comment field reset (exercise)", template, "syncState method"}}
 
 The best way to do this is probably to make talks component objects,
-with a `setState` method, so that they can be updated to show a
+with a `syncState` method, so that they can be updated to show a
 modified version of the talk. During normal operation, the only way a
-talk can be changed is by adding more comments, so the `setState`
+talk can be changed is by adding more comments, so the `syncState`
 method can be relatively simple.
 
 The difficult part is that, when a changed list of talks comes in, we
diff --git a/code/solutions/16_2_pausing_the_game.html b/code/solutions/16_2_pausing_the_game.html
@@ -53,7 +53,7 @@
         }
 
         state = state.update(time, arrowKeys);
-        display.setState(state);
+        display.syncState(state);
         if (state.status == "playing") {
           return true;
         } else if (ending > 0) {
diff --git a/code/solutions/19_1_keyboard_bindings.html b/code/solutions/19_1_keyboard_bindings.html
@@ -40,10 +40,10 @@
         }
       }
     }
-    setState(state) {
+    syncState(state) {
       this.state = state;
-      this.canvas.setState(state.picture);
-      for (let ctrl of this.controls) ctrl.setState(state);
+      this.canvas.syncState(state.picture);
+      for (let ctrl of this.controls) ctrl.syncState(state);
     }
   }
 
diff --git a/code/solutions/19_2_efficient_drawing.html b/code/solutions/19_2_efficient_drawing.html
@@ -5,7 +5,7 @@
 
 <div></div>
 <script>
-  PictureCanvas.prototype.setState = function(picture) {
+  PictureCanvas.prototype.syncState = function(picture) {
     if (this.picture == picture) return;
     drawPicture(picture, this.dom, scale, this.picture);
     this.picture = picture;
diff --git a/code/solutions/21_2_comment_field_resets.js b/code/solutions/21_2_comment_field_resets.js
@@ -26,10 +26,10 @@ class Talk {
         }
       }, elt("input", {type: "text", name: "comment"}), " ",
           elt("button", {type: "submit"}, "Add comment")));
-    this.setState(talk);
+    this.syncState(talk);
   }
 
-  setState(talk) {
+  syncState(talk) {
     this.talk = talk;
     this.comments.textContent = "";
     for (let comment of talk.comments) {
@@ -47,18 +47,18 @@ class SkillShareApp {
                    renderUserField(state.user, dispatch),
                    this.talkDOM,
                    renderTalkForm(dispatch));
-    this.setState(state);
+    this.syncState(state);
   }
 
-  setState(state) {
+  syncState(state) {
     if (state.talks == this.talks) return;
     this.talks = state.talks;
 
     for (let talk of state.talks) {
       let cmp = this.talkMap[talk.title];
       if (cmp && cmp.talk.author == talk.author &&
           cmp.talk.summary == talk.summary) {
-        cmp.setState(talk);
+        cmp.syncState(talk);
       } else {
         if (cmp) cmp.dom.remove();
         cmp = new Talk(talk, this.dispatch);

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`state = state.update(time, arrowKeys);`
`56`		`- display.setState(state);`
	`56`	`+ display.syncState(state);`
`57`	`57`	`if (state.status == "playing") {`
`58`	`58`	`return true;`
`59`	`59`	`} else if (ending > 0) {`
Original file line number	Diff line number	Diff line change
`@@ -40,10 +40,10 @@`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`	`}`
`43`		`- setState(state) {`
	`43`	`+ syncState(state) {`
`44`	`44`	`this.state = state;`
`45`		`- this.canvas.setState(state.picture);`
`46`		`- for (let ctrl of this.controls) ctrl.setState(state);`
	`45`	`+ this.canvas.syncState(state.picture);`
	`46`	`+ for (let ctrl of this.controls) ctrl.syncState(state);`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`