From aa8f51713f34d3f57b44b3a2a9417a446a51184f Mon Sep 17 00:00:00 2001
From: Netz <49691921+Netz00@users.noreply.github.com>
Date: Thu, 4 May 2023 20:28:57 +0200
Subject: [PATCH 1/3] #937 - Solution proposal

---
 src/js/views/gitDemonstrationView.js | 12 ++++++++++--
 src/style/main.css                   | 10 +++++++++-
 src/template.index.html              |  3 +++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/js/views/gitDemonstrationView.js b/src/js/views/gitDemonstrationView.js
index 6d064940..ab901957 100644
--- a/src/js/views/gitDemonstrationView.js
+++ b/src/js/views/gitDemonstrationView.js
@@ -129,17 +129,25 @@ var GitDemonstrationView = ContainedBase.extend({
   },
 
   positive: function() {
-    if (this.demonstrated || !this.hasControl) {
+    if (!this.hasControl) {
       // don't do anything if we are demonstrating, and if
       // we receive a meta nav event and we aren't listening,
       // then don't do anything either
       return;
     }
+
+    // already demonstrated, let's reset demonstration
+    if(this.demonstrated) {
+      this.reset();
+      return;
+    }
+
     this.demonstrated = true;
     this.demonstrate();
   },
 
   demonstrate: function() {
+    this.releaseControl();
     this.$el.toggleClass('demonstrating', true);
 
     var whenDone = Q.defer();
@@ -147,7 +155,7 @@ var GitDemonstrationView = ContainedBase.extend({
     whenDone.promise.then(function() {
       this.$el.toggleClass('demonstrating', false);
       this.$el.toggleClass('demonstrated', true);
-      this.releaseControl();
+      this.takeControl();
     }.bind(this));
   },
 
diff --git a/src/style/main.css b/src/style/main.css
index 4693bc39..0d6686c8 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -1146,6 +1146,10 @@ div.gitDemonstrationView {
   opacity: 0;
 }
 
+.gitDemonstrationView  p.uiButton[target="reset"] {
+  display: none;
+}
+
 .gitDemonstrationView.demonstrated div.afterText {
   opacity: 1;
 }
@@ -1155,7 +1159,11 @@ div.gitDemonstrationView {
 }
 
 .gitDemonstrationView.demonstrated p.uiButton {
-  opacity: 0.4;
+  display: none;
+}
+
+.gitDemonstrationView.demonstrated p.uiButton[target="reset"] {
+  display: block;
 }
 
 /* LeftRightView */
diff --git a/src/template.index.html b/src/template.index.html
index 72e135fb..1878632b 100644
--- a/src/template.index.html
+++ b/src/template.index.html
@@ -155,6 +155,9 @@
         -->
           <%= command.replace(' --aboveAll', '') %>
         </p>
+        <p class="uiButton uiButtonPink transitionOpacity" target="reset">
+            Reset
+        </p>
       </div>
 
       <div class="afterText transitionOpacity">

From 7a55e66b376485ec51af4bbd18e38afb9062af24 Mon Sep 17 00:00:00 2001
From: Netz <49691921+Netz00@users.noreply.github.com>
Date: Fri, 5 May 2023 18:41:13 +0200
Subject: [PATCH 2/3] #937 - Fix advancing to the next screen

---
 src/js/views/gitDemonstrationView.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/js/views/gitDemonstrationView.js b/src/js/views/gitDemonstrationView.js
index ab901957..84332e3f 100644
--- a/src/js/views/gitDemonstrationView.js
+++ b/src/js/views/gitDemonstrationView.js
@@ -20,7 +20,8 @@ var GitDemonstrationView = ContainedBase.extend({
   template: _.template($('#git-demonstration-view').html()),
 
   events: {
-    'click div.command > p.uiButton': 'positive'
+    'click div.command > p.uiButton:not([target="reset"])': 'positive',
+    'click div.command > p.uiButton[target="reset"]': 'onResetButtonClick',
   },
 
   initialize: function(options) {
@@ -59,6 +60,7 @@ var GitDemonstrationView = ContainedBase.extend({
     this.navEvents = Object.assign({}, Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
     this.navEvents.on('negative', this.negative, this);
+    this.navEvents.on('onResetButtonClick', this.onResetButtonClick, this);
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,
       aliasMap: {
@@ -129,25 +131,22 @@ var GitDemonstrationView = ContainedBase.extend({
   },
 
   positive: function() {
-    if (!this.hasControl) {
+    if (this.demonstrated || !this.hasControl) {
       // don't do anything if we are demonstrating, and if
       // we receive a meta nav event and we aren't listening,
       // then don't do anything either
       return;
     }
-
-    // already demonstrated, let's reset demonstration
-    if(this.demonstrated) {
-      this.reset();
-      return;
-    }
-
     this.demonstrated = true;
     this.demonstrate();
   },
 
+  onResetButtonClick: function() {
+    this.takeControl();
+    this.reset();
+  },
+
   demonstrate: function() {
-    this.releaseControl();
     this.$el.toggleClass('demonstrating', true);
 
     var whenDone = Q.defer();
@@ -155,7 +154,7 @@ var GitDemonstrationView = ContainedBase.extend({
     whenDone.promise.then(function() {
       this.$el.toggleClass('demonstrating', false);
       this.$el.toggleClass('demonstrated', true);
-      this.takeControl();
+      this.releaseControl();
     }.bind(this));
   },
 

From 02e23bb9d1830593a750b89da50b26b3b5a65c76 Mon Sep 17 00:00:00 2001
From: Peter Cottle <pcottle@instagram.com>
Date: Fri, 5 May 2023 16:06:30 -0600
Subject: [PATCH 3/3] #1072 some tweaks

---
 src/style/main.css      | 1 +
 src/template.index.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/style/main.css b/src/style/main.css
index 0d6686c8..1b85ec08 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -1164,6 +1164,7 @@ div.gitDemonstrationView {
 
 .gitDemonstrationView.demonstrated p.uiButton[target="reset"] {
   display: block;
+  opacity: 0.5;
 }
 
 /* LeftRightView */
diff --git a/src/template.index.html b/src/template.index.html
index 1878632b..d6404d07 100644
--- a/src/template.index.html
+++ b/src/template.index.html
@@ -156,7 +156,7 @@
           <%= command.replace(' --aboveAll', '') %>
         </p>
         <p class="uiButton uiButtonPink transitionOpacity" target="reset">
-            Reset
+            (Reset Animation)
         </p>
       </div>