From aa0f2dddfa64c87223e3cc133a0df0a3ed25582e Mon Sep 17 00:00:00 2001
From: Beau Blyth <teknopants@gmail.com>
Date: Fri, 4 Oct 2019 17:03:48 -0700
Subject: [PATCH] fixed infinite for loop

---
 app/frame_handler.ts      |  3 +--
 app/pin_handler.ts        | 41 +++++++++++++++++++--------------------
 app/stylesheets/main.scss | 24 +++++++++++------------
 dist/index.html           |  2 +-
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/app/frame_handler.ts b/app/frame_handler.ts
index 833d244..2849c22 100644
--- a/app/frame_handler.ts
+++ b/app/frame_handler.ts
@@ -67,13 +67,13 @@ export class FrameHandler {
 			this.currentFrame = this.filenames.length - 1;
 		}
 		this.GoToFrame(this.currentFrame);
-		this.RefreshFrameViewer();
 	}
 
 	public GoToFrame(frame: number) {
 		this.currentFrame = frame;
 		this.RefreshImage();
 		this.projectData.currentFrame = this.currentFrame;
+		this.RefreshFrameViewer();
 	}
 
 	public TogglePlayingAnimation() {
@@ -107,7 +107,6 @@ export class FrameHandler {
 			newDiv.addEventListener('click', () => {
 				this.StopPlayingAnimation();
 				this.GoToFrame(i);
-				this.RefreshFrameViewer();
 			});
 		}
 	};
diff --git a/app/pin_handler.ts b/app/pin_handler.ts
index fab498f..dd4c558 100644
--- a/app/pin_handler.ts
+++ b/app/pin_handler.ts
@@ -10,6 +10,7 @@ export class PinHandler {
 	private allPinContainers: HTMLElement[];
 	private projectData: IProjectData;
 	private animationData: IAnimationData;
+	private originPin: HTMLElement;
 
 	constructor(
 		addPinButton: HTMLElement,
@@ -25,10 +26,15 @@ export class PinHandler {
 		this.projectData = projectData;
 		this.animationData = animationData;
 
+		this.originPin = originPin;
+		this.originPin.classList.add('pinButtonContainer');
 		// add origin click behaviour
-		originPin.id = 'pinID_0';
-		originPin.addEventListener('click', () => {
-			this.SelectPin(originPin);
+		this.originPin.id = 'pinID_0';
+		this.originPin.addEventListener('click', () => {
+			this.projectData.currentlySelectedPin = 0;
+			this.DeselectAllPinContainers();
+			this.originPin.classList.add('selected');
+			this.CheckOriginDataExists();
 		});
 		// put origin into pincontainer array
 		this.allPinContainers = [ originPin ];
@@ -96,20 +102,12 @@ export class PinHandler {
 
 	private ResetPinSelection = () => {
 		this.DeselectAllPinContainers();
-		this.allPinContainers[0].className = 'pinButtonContainerSelected';
 	};
 
 	private CheckOriginDataExists = () => {
-		this.allPinContainers[0].className = 'pinButtonContainer';
-		if (this.projectData.currentlySelectedPin === 0) {
-			this.allPinContainers[0].className = 'pinButtonContainerSelected';
-		}
+		this.originPin.classList.remove('selected');
 		if (this.animationData.originX === null || this.animationData.originY === null) {
-			if (this.projectData.currentlySelectedPin === 0) {
-				this.allPinContainers[0].className = 'pinButtonContainerErrorSelected';
-			} else {
-				this.allPinContainers[0].className = 'pinButtonContainerError';
-			}
+			this.originPin.classList.add('warning');
 		}
 	};
 
@@ -169,11 +167,7 @@ export class PinHandler {
 		this.CheckOriginDataExists();
 		this.DeselectAllPinContainers();
 		this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
-		if (pinDiv.className === 'pinButtonContainerError') {
-			pinDiv.className = 'pinButtonContainerErrorSelected';
-		} else {
-			pinDiv.className = 'pinButtonContainerSelected';
-		}
+		pinDiv.classList.add('selected');
 		console.log('selected pin ' + this.projectData.currentlySelectedPin);
 		this.UpdateAnimationPinNames();
 	};
@@ -209,14 +203,19 @@ export class PinHandler {
 	private DeselectAllPinContainers = () => {
 		for (let i = 0; i < this.allPinContainers.length; i++) {
 			const pinDiv = this.allPinContainers[i];
-			pinDiv.className = 'pinButtonContainer';
+			pinDiv.classList.remove('selected', 'warning');
+			console.log('in i');
 			if (i > 0) {
+				console.log('i>0');
 				// check frames for missing pin info
 				const pinNumber = this.GetPinNumberFromID(pinDiv.id);
-				for (let f = 0; this.animationData.frames.length; f++) {
+
+				for (let f = 0; f < this.animationData.frames.length; f++) {
+					console.log('f = ' + f + ' this.animationData.frames.length = ' + this.animationData.frames.length);
 					if (this.animationData.frames[f] !== undefined) {
 						if (this.animationData.frames[f][pinNumber] === undefined) {
-							pinDiv.className = 'pinButtonContainerError';
+							pinDiv.classList.add('warning');
+							console.log('added warning');
 							break;
 						}
 					}
diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss
index 0864362..8651cda 100644
--- a/app/stylesheets/main.scss
+++ b/app/stylesheets/main.scss
@@ -98,19 +98,19 @@ body {
 	border: 2px solid $main-border-color;
 	padding: 1px;
 
-	// .warning {
-	// 	border: 2px solid $warning-border-color;
-	// 	background-color: $warning-bg-color;
-	// }
+	.warning {
+		border: 2px solid $warning-border-color;
+		background-color: $warning-bg-color;
+	}
 
-	// .selected {
-	// 	border: 2px solid $selected-border-color;
-	// 	background-color: $selected-bg-color;
-	// 	.warning {
-	// 		border: 2px solid $warning-selected-border-color;
-	// 		background-color: $warning-selected-bg-color;
-	// 	}
-	// }
+	.selected {
+		border: 2px solid $selected-border-color;
+		background-color: $selected-bg-color;
+		.warning {
+			border: 2px solid $warning-selected-border-color;
+			background-color: $warning-selected-bg-color;
+		}
+	}
 }
 
 .removeButton {
diff --git a/dist/index.html b/dist/index.html
index 2fdb4a3..f93dee5 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -20,7 +20,7 @@
           <div id="frameViewer"></div>
           <button id="addpin">Create New Pin</button>
           <div id="pinContainer" class="pinContainer">
-            <div class="pinButtonContainerSelected" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
+            <div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
             </div>
           </div>
           <div id="settings">