refactor gamebook mascot

ui/analyse/src/study/gamebook/gamebookPlayCtrl.ts

@@ -1,19 +1,12 @@
 import AnalyseCtrl from '../../ctrl';
 import { StudyCtrl } from '../interfaces';
 import { readOnlyProp } from '../../util';
+import Mascot from './mascot';
 
 export default class GamebookPlayCtrl {
 
   ply: Ply;
-
-  private mascots = [
-    'octopus',
-    'parrot-head',
-    'camel-head',
-    'owl'
-  ];
-  private mascotStorage = window.lichess.storage.make('gamebook.mascot');
-  mascot = this.mascotStorage.get() || this.mascots[0];
+  mascot = new Mascot();
 
   constructor(readonly root: AnalyseCtrl, readonly chapterId: string, readonly redraw: () => void) {
     this.ply = this.root.node.ply;
@@ -29,12 +22,5 @@ export default class GamebookPlayCtrl {
     // analysisUrl('/analysis/standard/' + root.node.fen.replace(/ /g, '_') + '?color=' + root.bottomColor());
   }
 
-  switchMascot = () => {
-    const newIndex = this.mascots.indexOf(this.mascot) + 1;
-    this.mascot = this.mascots[newIndex % this.mascots.length];
-    this.mascotStorage.set(this.mascot);
-    this.redraw();
-  }
-
   private study = (): StudyCtrl => this.root.study!;
 }

ui/analyse/src/study/gamebook/gamebookPlayView.ts

@@ -26,10 +26,10 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
       attrs: {
         width: 120,
         height: 120,
-        src: window.lichess.assetUrl(`/assets/images/mascot/${ctrl.mascot}.svg`),
+        src: window.lichess.assetUrl(`/assets/images/mascot/${ctrl.mascot.current}.svg`),
         title: 'Click to choose your teacher'
       },
-      hook: bind('click', ctrl.switchMascot)
+      hook: bind('click', ctrl.mascot.switch, ctrl.redraw)
     }),
     h('div.act', [
       gb.hint ? h('a.hint', [

ui/analyse/src/study/gamebook/mascot.ts

@@ -0,0 +1,19 @@
+export default class Mascot {
+
+  private list = [
+    'octopus',
+    'parrot-head',
+    'camel-head',
+    'owl'
+  ];
+
+  private storage = window.lichess.storage.make('gamebook.mascot');
+
+  current = this.storage.get() || this.list[0];
+
+  switch = () => {
+    const newIndex = this.list.indexOf(this.current) + 1;
+    this.current = this.list[newIndex % this.list.length];
+    this.storage.set(this.current);
+  }
+}