From 1574fd0f6b62e664cbe5e0e5dac3c61d8e6c0631 Mon Sep 17 00:00:00 2001
From: Beau Blyth <teknopants@gmail.com>
Date: Thu, 26 Sep 2019 16:28:35 -0700
Subject: [PATCH] < > frame input. Down resets

---
 app/canvas_handler.ts            | 14 +++++---------
 app/frame_handler.ts             | 15 ++++++++++++++-
 app/page.ts                      | 20 ++++++++++++++++----
 dist/assets/stylesheets/main.css |  9 ++-------
 dist/index.html                  | 18 +++++++++++++-----
 5 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts
index 71878ab..4aa763f 100644
--- a/app/canvas_handler.ts
+++ b/app/canvas_handler.ts
@@ -4,18 +4,14 @@ export class CanvasHandler {
 
 	constructor(currentImageDiv: HTMLElement) {
 		this.currentImageDiv = currentImageDiv;
+		console.log(this.currentImageDiv);
 	}
 
 	public Load() {
-		this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
-		this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage);
-	}
+		const mouseDown = (event: MouseEvent) => {
+			console.log(event.x + ' ' + event.y);
+		};
 
-	private hoverOverImage() {
-		console.log('hovering over image');
+		this.currentImageDiv.addEventListener('mousedown', mouseDown);
 	}
-
-	private clickOnImage = (e: Event) => {
-		console.log('Clicked on image');
-	};
 }
diff --git a/app/frame_handler.ts b/app/frame_handler.ts
index 0aec0b8..2a23e5d 100644
--- a/app/frame_handler.ts
+++ b/app/frame_handler.ts
@@ -4,10 +4,18 @@ export class FrameHandler {
 	private filenames: string[] = [];
 	private currentFrame: number = 0;
 	private currentImageDiv: HTMLElement;
+	private playingAnimation: boolean;
 
 	constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
 		this.currentImageDiv = currentImageDiv;
 		this.frameNumberDiv = frameNumberDiv;
+		setTimeout(this.Update, 1000 / 60);
+	}
+
+	public Update() {
+		console.log('updating');
+		AdvanceFrames(1);
+		setTimeout(this.Update, 1000 / 60);
 	}
 
 	public GetCurrentFrame(): number {
@@ -42,7 +50,12 @@ export class FrameHandler {
 		} else {
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
-				'Frame ' + this.currentFrame.toString() + '/' + (this.filenames.length - 1).toString();
+				'Frame  ' + this.currentFrame.toString() + ' / ' + (this.filenames.length - 1).toString();
 		}
 	}
+
+	public TogglePlayingAnimation() {
+		this.playingAnimation = !this.playingAnimation;
+		console.log('playingAnimation = ', this.playingAnimation);
+	}
 }
diff --git a/app/page.ts b/app/page.ts
index 2703672..2836f88 100644
--- a/app/page.ts
+++ b/app/page.ts
@@ -48,19 +48,31 @@ export class Page {
 
 		const keyDown = (event: KeyboardEvent) => {
 			switch (event.keyCode) {
-				case 39: {
-					// right_arrow
+				case 39:
+				case 190: {
+					// right_arrow, carrot
 					console.log('next frame action');
 					this.frameHandler.AdvanceFrames(1);
 					break;
 				}
 
-				case 37: {
-					// left arrow
+				case 37:
+				case 188: {
+					// left arrow, carrot
 					console.log('previous frame action');
 					this.frameHandler.AdvanceFrames(-1);
 					break;
 				}
+
+				case 40: {
+					// down arrow
+					this.frameHandler.GoToFrame(0);
+				}
+
+				case 32: {
+					// spacebar
+					this.frameHandler.TogglePlayingAnimation();
+				}
 			}
 		};
 
diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css
index 16e55df..a977550 100644
--- a/dist/assets/stylesheets/main.css
+++ b/dist/assets/stylesheets/main.css
@@ -35,8 +35,8 @@ body {
 }
 
 #currentImage {
-	width: 50%;
-	height: 50%;
+	width: 256;
+	height: 256;
 	-ms-interpolation-mode: nearest-neighbor;
 	image-rendering: pixelated;
 }
@@ -48,10 +48,5 @@ body {
 	min-width: 256;
 	min-height: 256;
 	-ms-interpolation-mode: nearest-neighbor;
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges; /* Firefox */
-	image-rendering: -o-crisp-edges; /* Opera */
-	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
 	image-rendering: crisp-edges;
-	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }
diff --git a/dist/index.html b/dist/index.html
index 4c31331..55006ea 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,19 +7,27 @@
     <link rel="stylesheet" href="assets/stylesheets/main.css">
   </head>
 	<body>
-
         <div id="dropZone">
-          <div id="instructions" class="instruction">
-            <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
+          <div id = "topbar">
+            <div id="instructions" class="instruction">
+              <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
+            </div>
           </div>
-          <div id="output"></div>
 
           <div id="frameNumber" class="warning">
               <p></p>
           </div>
           <!-- canvas -->
           <div id="currentImage">
-            <img alt="">
+            <img alt="No images uploaded">
+          </div>
+
+          <div id="settings">
+              Origin X: <input type="text" name="originX" value="0" size="2">
+              Y: <input type="text" name="originX" value="0" size="2"><br>
+              Fps: <input type="text" name="FirstName" value="60"><br>
+              <input type="checkbox" name="looping" > Looping <br>
+              <button type="button" onclick="alert('saved')">export .anim</button>
           </div>
           
         </div>