Turned reset time button into a timer. (#67)

static/index.html

@@ -138,7 +138,7 @@
 
 			var quality = 2, quality_levels = [ 0.5, 1, 2, 4, 8 ];
 			var toolbar, compileButton, fullscreenButton, compileTimer, errorLines = [];
-			var code, canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition, panButton,
+			var code, canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition, panButton, timeButton,
 			parameters = { startTime: Date.now(), time: 0, mouseX: 0.5, mouseY: 0.5, screenWidth: 0, screenHeight: 0 },
 			surface = { centerX: 0, centerY: 0, width: 1, height: 1, isPanning: false, isZooming: false, lastX: 0, lastY: 0 },
 			frontTarget, backTarget, screenProgram, getWebGL, resizer = {}, compileOnChangeCode = true;
@@ -220,14 +220,14 @@
 				}, false );
 				toolbar.appendChild( button );
 
-				var resetButton = document.createElement( 'button' );
-				resetButton.textContent = 'reset time';
-				resetButton.addEventListener( 'click', function ( event ) {
+				timeButton = document.createElement( 'button' );
+				timeButton.textContent = '0:00.00';
+				timeButton.addEventListener( 'click', function ( event ) {
 
 					parameters.startTime = Date.now();
 
 				}, false );
-				toolbar.appendChild( resetButton );
+				toolbar.appendChild( timeButton );
 
 				var select = document.createElement( 'select' );
 
@@ -850,6 +850,8 @@
 
 				parameters.time = Date.now() - parameters.startTime;
 
+				timeButton.textContent = parseTime( parameters.time );
+
 				// Set uniforms for custom shader
 
 				gl.useProgram( currentProgram );
@@ -904,6 +906,15 @@
 
 			}
 
+			// utils
+
+			function parseTime( ms ) {
+
+				const minutes = Math.floor( ms / 60000 );
+				const seconds = ( ( ms % 60000 ) / 1000 ).toFixed( 2 ).padStart( 5, '0' );
+				return `${ minutes }:${ seconds }`;
+			}
+
 		</script>
 
 	</body>