even more style

app/frame_handler.ts

@@ -181,7 +181,7 @@ export class FrameHandler {
 			// frame number update
 			this.frameNumberDiv.className = '';
 			this.frameNumberDiv.innerText =
-				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
+				(this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
 			// draw pins
 			for (let i = 0; i < 10; i++) {
 				this.canvasContext.strokeStyle = '#FF0000';

app/page.ts

@@ -239,7 +239,7 @@ export class Page {
 						// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
 						if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
 							if (!errorOnFrame) {
-								pinDataErrorString += '  Frame ' + f + ' :\n';
+								pinDataErrorString += f + ' :\n';
 							}
 							pinDataErrorString += '      Pin: ' + this.animationData.pins[p].name + '\n';
 							passPinData = false;
@@ -309,7 +309,7 @@ export class Page {
 		this.animationData.originY = null;
 		this.animationData.frameRate = 30;
 		this.animationData.loop = true;
-		this.animationData.frames = [ { filename: '' } ];
+		this.animationData.frames = [{ filename: '' }];
 
 		// blank slate canvas data
 		this.projectData.currentFrame = 0;

app/pin_handler.ts

@@ -32,26 +32,24 @@ export class PinHandler {
 			this.UpdatePinBoxStatus();
 		});
 		// put origin into pincontainer array
-		this.allPinContainers = [ originPin ];
+		this.allPinContainers = [originPin];
 	}
 
 	public UpdatePinBoxStatus = () => {
 		for (let i = 0; i < this.allPinContainers.length; i++) {
 			const pinDiv = this.allPinContainers[i];
 			pinDiv.classList.remove('selected', 'warning');
-			if (i > 0) {
-				if (this.GetPinNumberFromID(this.allPinContainers[i].id) === this.projectData.currentlySelectedPin) {
-					this.allPinContainers[i].classList.add('selected');
-				}
-				// check frames for missing pin info
-				const pinNumber = this.GetPinNumberFromID(pinDiv.id);
-				for (let f = 0; f < this.animationData.frames.length; f++) {
-					if (this.animationData.frames[f] !== undefined) {
-						if (this.animationData.frames[f][pinNumber] === undefined) {
-							pinDiv.classList.add('warning');
-							// console.log('added warning');
-							break;
-						}
+			if (this.GetPinNumberFromID(this.allPinContainers[i].id) === this.projectData.currentlySelectedPin) {
+				this.allPinContainers[i].classList.add('selected');
+			}
+			// check frames for missing pin info
+			const pinNumber = this.GetPinNumberFromID(pinDiv.id);
+			for (let f = 0; f < this.animationData.frames.length; f++) {
+				if (this.animationData.frames[f] !== undefined) {
+					if (this.animationData.frames[f][pinNumber] === undefined) {
+						pinDiv.classList.add('warning');
+						// console.log('added warning');
+						break;
 					}
 				}
 			}
@@ -137,7 +135,8 @@ export class PinHandler {
 		newDiv.appendChild(removePinButton);
 		removePinButton.textContent = 'X';
 		removePinButton.className = 'removeButton';
-		removePinButton.addEventListener('click', () => {
+		removePinButton.addEventListener('click', (event: MouseEvent) => {
+			event.stopPropagation();
 			// get ID number for this div
 			const idNumber = this.GetPinNumberFromID(newDiv.id);
 			let indexToDelete: number = 0;
@@ -155,9 +154,11 @@ export class PinHandler {
 			// remove the div itself
 			newDiv.remove();
 			this.UpdateAnimationPinNames();
+
+			//reset to origin
+			this.SelectOriginPin();
 		});
 		// break
-		newDiv.appendChild(document.createElement('br'));
 
 		this.UpdateAnimationPinNames();
 		this.UpdatePinBoxStatus();
@@ -178,6 +179,11 @@ export class PinHandler {
 		this.UpdateAnimationPinNames();
 	};
 
+	private SelectOriginPin = () => {
+		this.projectData.currentlySelectedPin = 0;
+		this.UpdatePinBoxStatus();
+	};
+
 	private RemovePinDataForID = (pinID: number) => {
 		// check for matching id in pin list and remove
 

app/stylesheets/main.scss

@@ -41,8 +41,6 @@ div {
 	padding: 0;
 	min-width: 200px;
 	border: 1px solid;
-	border-style: dashed;
-	border-radius: 10px;
 	background-color: $canvas-bg-color;
 }
 
@@ -57,25 +55,27 @@ div {
 
 #settings {
 	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	width: 20%;
-	max-width: 150px;
-	min-width: 100px;
+	flex-direction: row;
+	justify-content: center;
+	align-content: center;
 }
 
 .settingsItem {
+	display: flex;
+	flex-direction: row;
+
 	margin: 12px;
 	padding: 4px;
 
 	text-align: center;
 
-	border: 1px solid;
-	border-radius: 5px;
-
 	input {
 		width: 80%;
 	}
+
+	.label {
+		margin: 5px;
+	}
 }
 
 .settingsItem {
@@ -84,8 +84,23 @@ div {
 	}
 }
 
+#frameNumber {
+	text-align: right;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type='number'] {
+    -moz-appearance:textfield;
+}
+
 #framerate {
-	width: 30px;
+	width: 50px;
+	text-align: center;
 }
 
 .borderbox {
@@ -143,6 +158,8 @@ div {
 	width: 50%;
 	border: 4px solid $warning-border-color;
 	padding: 1px;
+	text-align: center;
+	margin: 0 auto;
 	//background-color: $warning-bg-color;
 	//color: $warning-text-color;
 }
@@ -171,7 +188,7 @@ body {
 	display: inline-grid;
 }
 
-$pin-button-size: 6vw;
+$pin-button-size: 75px;
 
 .pinButtonContainer {
 	grid-row-start: 1;
@@ -192,6 +209,10 @@ $pin-button-size: 6vw;
 	&.warning {
 		border: 2px solid $warning-border-color;
 		background-color: $warning-bg-color;
+
+		input {
+			background-color: $warning-bg-color;
+		}
 	}
 
 	&.selected {
@@ -200,12 +221,27 @@ $pin-button-size: 6vw;
 		&.warning {
 			border: 2px solid $warning-selected-border-color;
 			background-color: $warning-selected-bg-color;
+
+			input {
+				background-color: $warning-selected-bg-color;
+			}
+		}
+
+		input {
+			background-color: $selected-bg-color;
 		}
 	}
 
 	input {
+		background-color: $bg-color;
+
 		width: 80%;
-		transform: translateY($pin-button-size / 2);
+		height: 20px;
+		transform: translateY($pin-button-size / 2 - 10px);
+		border: none;
+		color: $main-font-color;
+		text-align: center;
+		font-size: 10px;
 	}
 }
 
@@ -218,11 +254,12 @@ $pin-button-size: 6vw;
 }
 
 .removeButton {
+	display: block;
+	margin: 0 auto;
 	position: relative;
 	transform: translate($pin-button-size / 2, -$pin-button-size / 2);
 	width: 15px;
-	height: 15px;
-	border-radius: 5px;
+	border-radius: 50%;
 	background-color: rgb(158, 15, 34);
 	color: rgb(227, 227, 236);
 }

dist/index.html

@@ -1,52 +1,57 @@
 <html>
-  <head>
-    <title>AnimationTool</title>
-    <meta charset="utf-8">
 
-    <link rel="icon" href="/favicon.ico">
-  </head>
-	<body>
-    <div id="dropZone" class="center">
+<head>
+  <title>AnimationTool</title>
+  <meta charset="utf-8">
+
+  <link rel="icon" href="/favicon.ico">
+</head>
+
+<body>
+  <div id="dropZone">
+    <div id="allTop">
       <div id="top">
         <div id="canvasStyle">
-          <canvas id="canvasImage"  class="spriteCanvas" alt=""></canvas>
+          <canvas id="canvasImage" class="spriteCanvas" alt=""></canvas>
           <div id="frameNumber"></div>
         </div>
-        <div id="settings">
-          <div class="settingsItem">
-            <div class="label">Name</div>
-            <input type="text" id="filename">
-          </div>
-          <div class="settingsItem">
-            <div class="label">FPS</div>
-            <input type="number" value="30" id="framerate">
-          </div>
-          <div class="settingsItem">
-            <div class="label">Looping</div>
-            <input type="checkbox" id="looping">
-          </div>
+      </div>
+      <div id="settings">
+        <div class="settingsItem">
+          <div class="label">Name</div>
+          <input type="text" id="filename">
+        </div>
+        <div class="settingsItem">
+          <div class="label">FPS</div>
+          <input type="number" value="30" id="framerate">
+        </div>
+        <div class="settingsItem">
+          <div class="label">Looping</div>
+          <input type="checkbox" id="looping">
         </div>
       </div>
-      <div class="borderbox">
-        <div id="frameViewer"></div>
-      </div>
-      <div class="borderbox">
-        <div id="pinContainer" class="pinContainer" >
-          <div class="pinButtonContainer" id="originPin">Origin</div>
-        </div>
-        <div id="addpin" class="pinButtonContainer">+</div>
-      </div>
-      <div id = "info">
-          <div class="instruction">
-            <p>Drag images onto the page to upload them</p>
-            <p><b>Arrow Keys</b> - Advance frames</p>
-            <p><b>Spacebar</b> - Play/Pause Animation</p>
-            <p><b>S</b> - Save</p>
-          </div>
-          <div id="outputMessage"></div>
-        </div>
     </div>
+    <div class="borderbox">
+      <div id="frameViewer"></div>
+    </div>
+    <div class="borderbox">
+      <div id="pinContainer" class="pinContainer">
+        <div class="pinButtonContainer" id="originPin">Origin</div>
+      </div>
+      <div id="addpin" class="pinButtonContainer">+</div>
+    </div>
+    <div id="info">
+      <div class="instruction">
+        <p>Drag images onto the page to upload them</p>
+        <p><b>Arrow Keys</b> - Advance frames</p>
+        <p><b>Spacebar</b> - Play/Pause Animation</p>
+        <p><b>S</b> - Save</p>
+      </div>
+      <div id="outputMessage"></div>
+    </div>
+  </div>
 
-    <script src="bundle.js"></script>
-	</body>
-</html>
+  <script src="bundle.js"></script>
+</body>
+
+</html>