framrate change and animation

app/frame_handler.ts

@@ -72,6 +72,6 @@ export class FrameHandler {
 			this.start = 0;
 		}
 		window.requestAnimationFrame(this.windowAnimationUpdate);
-		console.log('timestamp = ' + timestamp);
+		// console.log('timestamp = ' + timestamp);
 	};
 }

app/page.ts

@@ -16,6 +16,7 @@ export class Page {
 	private frameHandler: FrameHandler;
 	private canvasHandler: CanvasHandler;
 	private animationData: IAnimationData;
+	private frameRateInput: HTMLInputElement;
 
 	public Load() {
 		// defining blank slate animation data
@@ -42,6 +43,9 @@ export class Page {
 			document.getElementById('frameNumber') as HTMLElement
 		);
 
+		this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
+		this.frameRateInput.addEventListener('change', this.updateFrameRate);
+
 		const dropZone = document.getElementById('dropZone') as HTMLElement;
 
 		dropZone.addEventListener('dragover', Page.handleDragOver, false);
@@ -102,7 +106,7 @@ export class Page {
 
 				case 83: {
 					// s
-					this.download('.anim', String(this.animationData));
+					this.download('.anim', JSON.stringify(this.animationData));
 					break;
 				}
 			}
@@ -143,4 +147,9 @@ export class Page {
 
 		document.body.removeChild(element);
 	}
+
+	private updateFrameRate = () => {
+		this.animationData.frameRate = this.frameRateInput.valueAsNumber;
+		console.log('new frame rate = ' + this.animationData.frameRate);
+	};
 }

dist/assets/stylesheets/main.css

@@ -4,6 +4,10 @@ div {
 	font-family: "Arial", Helvetica, sans-serif;
 }
 
+.numberinput {
+	width: 64px;
+}
+
 #instructions {
 	font-size: 12px;
 	margin: auto;

dist/index.html

@@ -23,9 +23,9 @@
           </div>
 
           <div id="settings">
-              Origin X: <input type="text" name="originX" value="0" size="2">
-              Y: <input type="text" name="originY" value="0" size="2"><br>
-              Fps: <input type="text" name="framerate" value="60"><br>
+              Origin X: <input type="number" name="originX" value="0" class="numberinput">
+              Y: <input type="number" name="originY" value="0" class="numberinput"><br>
+              Fps: <input type="number" id="framerate" value="60" class="numberinput"><br>
               <input type="checkbox" name="looping" > Looping <br>
               <button id="saveButton" type="button">export .anim with (S)</button>
           </div>