From b1f68b367b752bcb57b94f581ac2ff0ea2c91067 Mon Sep 17 00:00:00 2001
From: Beau Blyth <teknopants@gmail.com>
Date: Thu, 26 Sep 2019 15:11:13 -0700
Subject: [PATCH] shows current and max frame. Red for warning

---
 app/frame_handler.ts             |  7 +++++--
 dist/assets/stylesheets/main.css | 12 ++++++++++++
 dist/index.html                  |  8 ++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/frame_handler.ts b/app/frame_handler.ts
index c81c45e..0aec0b8 100644
--- a/app/frame_handler.ts
+++ b/app/frame_handler.ts
@@ -37,9 +37,12 @@ export class FrameHandler {
 	private SetCurrentImageDiv() {
 		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
 		if (this.filenames.length === 0) {
-			this.frameNumberDiv.innerText = 'No images uploaded yet. Drag images onto the page to upload them';
+			this.frameNumberDiv.className = 'warning';
+			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
-			this.frameNumberDiv.innerText = 'Current Frame: ' + this.currentFrame.toString();
+			this.frameNumberDiv.className = 'instruction';
+			this.frameNumberDiv.innerText =
+				'Frame ' + this.currentFrame.toString() + '/' + (this.filenames.length - 1).toString();
 		}
 	}
 }
diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css
index 35e050f..60a679f 100644
--- a/dist/assets/stylesheets/main.css
+++ b/dist/assets/stylesheets/main.css
@@ -4,6 +4,18 @@ div {
 	font-family: "Arial", Helvetica, sans-serif;
 }
 
+.instruction {
+	display: block;
+	color: blue;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
+.warning {
+	display: block;
+	color: red;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
 main {
 	width: 500px;
 }
diff --git a/dist/index.html b/dist/index.html
index 1b2694c..e039779 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,16 +11,16 @@
         <div id="dropZone">
           <div id="output"></div>
 
-          <div id="instructions" class="sub">
-            <p>advance frames with arrow keys</p>
+          <div id="instructions" class="instruction">
+            <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
           </div>
 
-          <div id="frameNumber" class="sub">
+          <div id="frameNumber" class="warning">
               <p></p>
           </div>
           <!-- canvas -->
           <div id="currentImage">
-            <img alt="Current Image">
+            <img alt="">
           </div>
         </div>