Animations

Author: StephenTangCook

build/debugger.js

@@ -32,6 +32,8 @@ ScriptDebugger.prototype.initialize = function() {
     $( "#next-opcode-container").css({"background-color": "#dddddd", "color":"black"});
     $( "#current-execution-pass").animate({ 'opacity': '0.0' });
     $( "#current-execution-fail").animate({ 'opacity': '0.0' });
+
+    $(" .next-opcode ").animate({ 'opacity': '1.0' }, 300);
 };
 
 
@@ -77,6 +79,7 @@ ScriptDebugger.prototype.nextStep = function(){
 	if (this.visibleStack.peek() == 0) {
 	    this.index = -1;
 	} else {
+        $(" .next-opcode ").animate({ 'opacity': '0.0' });
 	    $( "#next-opcode-container").text("Execution successful");
 	    $( "#next-opcode-container").css({"background-color": "green", "color":"white"});
 	    $( "#current-execution-pass").animate({ 'opacity': '1.0' });
@@ -85,6 +88,7 @@ ScriptDebugger.prototype.nextStep = function(){
     }
 
     if (this.index == -1) { // Execution Failure
+    $(" .next-opcode ").animate({ 'opacity': '0.0' });
 	$( "#next-opcode-container").text("Execution unsuccessful");
 	$( "#next-opcode-container").css({"background-color": "red", "color":"white"});
 	$( "#current-execution-fail").animate({ 'opacity': '1.0' });

build/editor.css

@@ -177,7 +177,9 @@ body {
 .completion-icon {
 	font-size: 3.0em;
 	position: absolute;
-	margin-top: 2.5%;
+	display:block;
+	margin-top: 46px;
+	margin-left:87%;
 	width: 50px;
 }
 
@@ -221,7 +223,6 @@ body {
   	letter-spacing: 1px;
 
     background-color: #dddddd;
-
 	text-shadow: 1px 1px #BFBFBF;
 }
 
@@ -271,7 +272,6 @@ body {
 	float:right;
 }
 
-
 #editor {
 	height: 100%;
 	margin: 0;

build/editor.html

@@ -151,9 +151,9 @@ <h2 id="ide-subtitle">Bitcoin Script for dummies.</h2>
                         </button>
                     </div>
                     <div id="next-opcode-container" class=""></div>
-                    <span id="next-opcode-arrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 
+                    <span id="next-opcode-arrow" class="glyphicon glyphicon-arrow-down next-opcode" aria-hidden="true"></span> 
 
-                    <h3 id="next-opcode-text" class="">Next Argument</h3>
+                    <h3 id="next-opcode-text" class="next-opcode">Next Argument</h3>
                     <span id="current-execution-pass" class="glyphicon glyphicon-ok completion-icon" aria-hidden="true" style="opacity:0.0; color:green;"></span>
                     <span id="current-execution-fail" class="glyphicon glyphicon-remove completion-icon" aria-hidden="true" style="opacity:0.0; color:red;"></span>
                 </div>

build/editor.js

@@ -139,10 +139,7 @@ var resizeDebuggerElements = function() {
 	var debuggerCenteredWidth = buttonsWidth + $("#next-opcode-container").outerWidth(true);
 	var widthRemainingLeftSide = (totalWidth - debuggerCenteredWidth)/2;
 	var leftMarginForCenter = widthRemainingLeftSide + buttonsWidth + ($("#next-opcode-container").outerWidth(true)/2);
-	console.log(totalWidth);
-	console.log(debuggerCenteredWidth);
-	console.log(widthRemainingLeftSide);
-	console.log(leftMarginForCenter);
+
 	$("#next-opcode-arrow").css({
 		"margin-left" : leftMarginForCenter - 19
 	});

build/stack-visualizer.js

@@ -27,47 +27,20 @@ StackVisualizer.msToWaitBeforeQueueing = 0; //setTimeout timer
 StackVisualizer.msToWaitPerCall = 0; //delay between calls
 
 
-/*
-//Have an element with id myQueue
-var qname = 'stackAnimQueue';
-
-//Add animation to the queue
-$('#myQueue').queue(qname, function(next) {
-    $('#t1').animate({
-		left: 100
-		}, {
-		duration: stackAnimationTime, 
-     	queue: false, //so other anim queues are independent
-        complete: next //THIS IS IMPORTANT FOR ANIMATION
-    });
-});
-
-//Add variable actions to the queue
-$('#myQueue').queue(qname, function(next) {
-    console.log("Remove");
-    $('#t1').append(stackElement);
-    $('#t1').remove();
-    $('#myQueue').dequeue(qname); //THIS IS IMPORTANT TO CONTINUE THE QUEUE SEQUENCE
-});
-
-$('#myQueue').dequeue(qname); //Needed at some point to start the queue sequence
-
-*/
-
 function StackVisualizer (elemID, isHiddenStack) {
     this.name = "Bitcoin Stack Visualizer";
     this.stack = new Array();
     this.hasFailed = false;
 
-    if(isHiddenStack == undefined || !isHiddenStack) {
+    if(elemID != undefined && (isHiddenStack == undefined || !isHiddenStack)) {
 	    this.parentID = elemID;
 	    this.stackID = StackVisualizer.stackID;
 	    this.parentElement = $("#"+elemID);
 	    this.createStackDiagram();
 	    this.isHiddenStack = false;
 	    this.callerCount = 0;
 	} else {
-		this.isHiddenStack = true;
+		this.isHiddenStack = true; //Do not visualize this stack
 	}
 }