Add the option to switch on / off the display of variations started b…

…y mouse over. (#668)
SabakiHQ · Mar 22, 2020 · d81a3d8 · d81a3d8
1 parent 4d95db6
commit d81a3d8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/src/components/ContentDisplay.js b/src/components/ContentDisplay.js
@@ -87,9 +87,7 @@ export default class ContentDisplay extends Component {
 
       sabaki.setState({playVariation: {sign, moves, sibling}})
 
-      if (setting.get('board.variation_instant_replay')) {
-        currentTarget.style.backgroundSize = '100% 100%'
-      } else {
+      if (setting.get('board.variation_replay_mode') === 'move_by_move') {
         clearInterval(this.variationIntervalId)
         this.variationIntervalId = setInterval(() => {
           if (counter >= moves.length) {
@@ -102,6 +100,8 @@ export default class ContentDisplay extends Component {
           currentTarget.style.backgroundSize = `${percent}% 100%`
           counter++
         }, setting.get('board.variation_replay_interval'))
+      } else {
+        currentTarget.style.backgroundSize = '100% 100%'
       }
     }
 

diff --git a/src/components/Goban.js b/src/components/Goban.js
@@ -172,7 +172,8 @@ export default class Goban extends Component {
   }
 
   playVariation(sign, moves, sibling = false) {
-    if (setting.get('board.variation_instant_replay')) {
+    let replayMode = setting.get('board.variation_replay_mode')
+    if (replayMode === 'instantly') {
       this.variationIntervalId = true
 
       this.setState({
@@ -181,7 +182,7 @@ export default class Goban extends Component {
         variationSibling: sibling,
         variationIndex: moves.length
       })
-    } else {
+    } else if (replayMode === 'move_by_move') {
       clearInterval(this.variationIntervalId)
 
       this.variationIntervalId = setInterval(() => {
@@ -192,6 +193,8 @@ export default class Goban extends Component {
           variationIndex: variationIndex + 1
         }))
       }, setting.get('board.variation_replay_interval'))
+    } else {
+      this.stopPlayingVariation()
     }
   }
 

diff --git a/src/components/drawers/PreferencesDrawer.js b/src/components/drawers/PreferencesDrawer.js
@@ -66,7 +66,8 @@ class GeneralTab extends Component {
     super(props)
 
     this.state = {
-      appLang: setting.get('app.lang')
+      appLang: setting.get('app.lang'),
+      variationReplayMode: setting.get('board.variation_replay_mode')
     }
 
     this.handleSoundEnabledChange = evt => {
@@ -91,9 +92,15 @@ class GeneralTab extends Component {
       )
     }
 
+    this.handleVariationReplayModeChange = evt => {
+      setting.set('board.variation_replay_mode', evt.currentTarget.value)
+    }
+
     setting.events.on(sabaki.window.id, 'change', ({key, value}) => {
       if (key === 'app.lang') {
         this.setState({appLang: value})
+      } else if (key === 'board.variation_replay_mode') {
+        this.setState({variationReplayMode: value})
       }
     })
   }
@@ -130,10 +137,49 @@ class GeneralTab extends Component {
           id: 'view.animated_stone_placement',
           text: t('Animate fuzzy placement')
         }),
-        h(PreferencesItem, {
-          id: 'board.variation_instant_replay',
-          text: t('Instantly play out analysis variations on board')
-        }),
+
+        h(
+          'li',
+          {class: 'select'},
+          h(
+            'label',
+            {},
+            t('Replay mode of analysis variations:'),
+            ' ',
+
+            h(
+              'select',
+              {onChange: this.handleVariationReplayModeChange},
+
+              h(
+                'option',
+                {
+                  value: 'dont_play',
+                  selected: this.state.variationReplayMode === 'dont_play'
+                },
+                t("Don't Play")
+              ),
+
+              h(
+                'option',
+                {
+                  value: 'instantly',
+                  selected: this.state.variationReplayMode === 'instantly'
+                },
+                t('Instantly')
+              ),
+
+              h(
+                'option',
+                {
+                  value: 'move_by_move',
+                  selected: this.state.variationReplayMode === 'move_by_move'
+                },
+                t('Move by Move')
+              )
+            )
+          )
+        ),
 
         h(
           'li',

diff --git a/src/setting.js b/src/setting.js
@@ -45,7 +45,7 @@ let defaults = {
   'board.analysis_interval': 50,
   'board.analysis_type': 'winrate',
   'board.show_analysis': true,
-  'board.variation_instant_replay': false,
+  'board.variation_replay_mode': 'move_by_move',
   'board.variation_replay_interval': 500,
   'cleanmarkup.annotations': false,
   'cleanmarkup.arrow': true,