won't export with missing data

app/page.ts

@@ -30,12 +30,14 @@ export class Page {
 	private projectData: IProjectData;
 	private filenameInput: HTMLInputElement;
 
+	private message: HTMLElement;
+
 	public Load() {
 		// defining blank slate animation data
 		this.animationData = {
 			pins: [],
-			originX: 0,
-			originY: 0,
+			originX: -1,
+			originY: -1,
 			frameRate: 30,
 			loop: true,
 			frames: [
@@ -54,6 +56,7 @@ export class Page {
 			heightRatio: 0
 		};
 
+		this.message = document.getElementById('message') as HTMLElement;
 		const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
 
 		const imageElement = new Image();
@@ -186,10 +189,33 @@ export class Page {
 	}
 
 	private CheckAllFramesForPinData(): boolean {
-		// for (let frame = 0; frame < this.animationData.frames.length; frame++) {
-		// 	this.animationData.frames[frame][pinIDChecking];
-		// }
-		return true;
+		const availablePins: number[] = this.pinHandler.GetAvailablePins();
+		let passTest: boolean = true;
+		let passPinDataTest: boolean = true;
+		let errorString: string = '';
+		let pinErrorString: string = '';
+		for (let frame = 0; frame < this.animationData.frames.length; frame++) {
+			for (let p = 0; p < availablePins.length; p++) {
+				// loop through available pinIDs
+				const pinIDChecking = availablePins[p];
+				if (this.animationData.frames[frame][pinIDChecking] === undefined) {
+					pinErrorString += 'Frame ' + frame + ', ' + this.pinHandler.GetPinName(pinIDChecking) + '\n';
+					passPinDataTest = false;
+				}
+			}
+		}
+		// construct error string
+		if (this.animationData.originX === -999 || this.animationData.originY === -999) {
+			errorString = 'Missing Origin data. \n';
+			passTest = false;
+		}
+		if (!passPinDataTest) {
+			// warn user if missing pin data
+			errorString += 'Missing the following pin data: \n\n' + pinErrorString;
+			passTest = false;
+		}
+		this.message.innerText = errorString;
+		return passTest;
 	}
 
 	private handleFileSelect = async (event: DragEvent) => {
@@ -222,8 +248,8 @@ export class Page {
 	private ResetProgram = () => {
 		// defining blank slate animation data
 		this.animationData.pins = [];
-		this.animationData.originX = 0;
-		this.animationData.originY = 0;
+		this.animationData.originX = -999;
+		this.animationData.originY = -999;
 		this.animationData.frameRate = 30;
 		this.animationData.loop = true;
 		this.animationData.frames = [ { filename: '' } ];

app/pin_handler.ts

@@ -42,10 +42,10 @@ export class PinHandler {
 		const animationPinData: IPin[] = [];
 		for (let i = 1; i < this.allPinContainers.length; i++) {
 			console.log(this.allPinContainers[i].children);
-			let pinName: string = this.allPinContainers[i].getElementsByTagName('input')[0].value;
+			const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]);
 			if (pinName !== null && pinName !== undefined) {
 				let newPinData: IPin = {
-					id: parseInt(this.allPinContainers[i].id.split('_')[1]),
+					id: this.GetPinNumberFromID(this.allPinContainers[i].id),
 					name: pinName
 				};
 				animationPinData.push(newPinData);
@@ -57,13 +57,42 @@ export class PinHandler {
 
 	public RemoveAllPins = () => {
 		for (let i = 1; i < this.allPinContainers.length; i++) {
-			const pinID: number = parseInt(this.allPinContainers[i].id.split('_')[1]);
+			const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
 			this.RemovePinDataForID(pinID);
 			this.allPinContainers[i].remove();
 		}
 		this.ResetPinSelection();
 	};
 
+	public GetAvailablePins = (): number[] => {
+		const availablePins: number[] = [];
+		for (let i = 1; i < this.allPinContainers.length; i++) {
+			const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
+			availablePins.push(pinID);
+		}
+		console.log('available pins are: ' + availablePins);
+		return availablePins;
+	};
+
+	public GetPinName = (pinID: number): string => {
+		for (let p = 0; p < this.allPinContainers.length; p++) {
+			const pinContainer = this.allPinContainers[p];
+			if (this.GetPinNumberFromID(pinContainer.id) === pinID) {
+				const pinName: string = this.GetPinNameFromDiv(pinContainer);
+				return pinName;
+			}
+		}
+		return 'failed_to_return_pin_name_for_pin_' + pinID.toString();
+	};
+
+	private GetPinNameFromDiv = (pinElement: HTMLElement): string => {
+		return pinElement.getElementsByTagName('input')[0].value;
+	};
+
+	private GetPinNumberFromID = (id: string): number => {
+		return parseInt(id.split('_')[1]);
+	};
+
 	private ResetPinSelection = () => {
 		this.DeselectAllPinContainers();
 		this.allPinContainers[0].className = 'pinButtonContainerSelected';

dist/assets/stylesheets/main.css

@@ -8,7 +8,7 @@ div {
 	width: 64px;
 }
 
-#instructions {
+.instruction {
 	font-size: 12px;
 	margin: auto;
 	width: 50%;
@@ -17,10 +17,41 @@ div {
 	text-align: center;
 }
 
-.instruction {
-	display: block;
+.frame {
+	width: 32px;
+	height: 32px;
 	color: #101e24;
-	font-family: "Arial", Helvetica, sans-serif;
+	width: 50%;
+	border: 2px solid #3f4446;
+	padding: 1px;
+	background-color: rgb(90, 92, 95);
+}
+.frameActive {
+	width: 32px;
+	height: 32px;
+	color: #101e24;
+	width: 50%;
+	border: 2px solid #0865df;
+	padding: 1px;
+	background-color: rgb(35, 75, 185);
+}
+.frameWarning {
+	width: 32px;
+	height: 32px;
+	color: #101e24;
+	width: 50%;
+	border: 2px solid rgb(233, 7, 75);
+	padding: 1px;
+	background-color: rgb(83, 14, 20);
+}
+
+.errorMessage {
+	font-size: 12px;
+	color: rgb(233, 7, 75);
+	width: 50%;
+	border: 2px solid rgb(233, 7, 75);
+	padding: 1px;
+	background-color: rgb(83, 14, 20);
 }
 
 .warning {

dist/index.html

@@ -9,11 +9,11 @@
 	<body>
         <div id="dropZone">
           <div id = "topbar">
-            <div id="instructions" class="instruction">
+            <div class="instruction">
               <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
             </div>
           </div>
-
+          <!-- <div id="message" class="errorMessage"></div> -->
           <div id="frameNumber" class="warning">
               <p></p>
           </div>