Add console output

5 files changed, 43 insertions, 8 deletions

diff --git a/index.html b/index.html
index 1c74f6e..c74d2a7 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
                 </div>
               </div>
               <button id="render" class="btn btn-primary">Render</button>
+              <pre class="code"><code id="console"></code></pre>
             </div>
           </div>
         </div>
diff --git a/src/Logger.ts b/src/Logger.ts
new file mode 100644
index 0000000..4087e91
--- /dev/null
+++ b/src/Logger.ts
@@ -0,0 +1,10 @@
+export class Logger {
+  constructor() {}
+
+  log(message: string) {
+    const elem = document.getElementById('console')!;
+    elem.innerText += `${message}\n`;
+    elem.scrollTop = elem.scrollHeight;
+    console.log(message);
+  }
+}
diff --git a/src/RaytraceDispatcher.ts b/src/RaytraceDispatcher.ts
index 866d2d1..1ce412f 100644
--- a/src/RaytraceDispatcher.ts
+++ b/src/RaytraceDispatcher.ts
@@ -3,13 +3,16 @@ import {Framebuffer} from './Framebuffer';
 import {RaytraceContext} from './RaytraceContext';
 import {instanceToPlain} from 'class-transformer';
 import 'reflect-metadata';
+import {Logger} from './Logger';
 
 export class RaytraceDispatcher {
   private renderStartMs: number;
   private responsesReceived = 0;
   constructor(
     readonly framebuffer: Framebuffer,
-    readonly context: RaytraceContext
+    readonly context: RaytraceContext,
+    readonly logger: Logger,
+    readonly onComplete: Function
   ) {
     this.renderStartMs = new Date().getTime();
   }
@@ -30,9 +33,7 @@ export class RaytraceDispatcher {
     rowEndIndex: number,
     context: RaytraceContext
   ) {
-    console.log(
-      `Dispatching worker for lines ${rowStartIndex} to ${rowEndIndex}`
-    );
+    this.logger.log(`Dispatching worker: rows ${rowStartIndex}-${rowEndIndex}`);
 
     const raytracer = new Worker(new URL('./Raytracer.ts', import.meta.url));
 
@@ -55,9 +56,10 @@ export class RaytraceDispatcher {
 
   private handleWorkerComplete() {
     if (++this.responsesReceived === this.context.options.numThreads) {
-      console.log(
-        `Render completed in ${new Date().getTime() - this.renderStartMs}ms`
+      this.logger.log(
+        `Raytrace completed in ${new Date().getTime() - this.renderStartMs}ms`
       );
+      this.onComplete();
     }
   }
 
diff --git a/src/index.ts b/src/index.ts
index 5696fe0..3736c92 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,8 +6,10 @@ import {Material} from './Material';
 import {RaytraceDispatcher} from './RaytraceDispatcher';
 import {RaytraceContext, RaytracerOptions} from './RaytraceContext';
 import {Vector} from './Vector';
+import {Logger} from './Logger';
 
 function render() {
+  getRenderButton().classList.add('loading');
   const dispatcher = initDispatcher(parseOptions());
   dispatcher.requestRender();
 }
@@ -49,7 +51,12 @@ function initDispatcher(options: RaytracerOptions): RaytraceDispatcher {
     options
   );
 
-  return new RaytraceDispatcher(framebuffer, context);
+  return new RaytraceDispatcher(
+    framebuffer,
+    context,
+    new Logger(),
+    onRenderComplete
+  );
 }
 
 function parseOptions(): RaytracerOptions {
@@ -65,7 +72,7 @@ function parseOptions(): RaytracerOptions {
 }
 
 function registerEventListeners() {
-  document.getElementById('render')?.addEventListener('click', render); // TODO disable once clicked
+  getRenderButton().addEventListener('click', render);
 
   const threadsSlider = getInputElement('threads');
   threadsSlider.addEventListener('input', () => {
@@ -86,6 +93,14 @@ function getDesiredThreadCount(): number {
   }
 }
 
+function onRenderComplete() {
+  getRenderButton().classList.remove('loading');
+}
+
+function getRenderButton(): HTMLElement {
+  return document.getElementById('render')!;
+}
+
 function getInputElement(elementId: string) {
   return document.getElementById(elementId) as HTMLInputElement;
 }
diff --git a/style.css b/style.css
index 3abbf1a..0403e47 100644
--- a/style.css
+++ b/style.css
@@ -24,4 +24,11 @@ p {
 
 .thread-slider {
   padding-left: 40px;
+}
+
+#console {
+  height: 150px;
+  width: 300px;
+  padding: 0rem;
+  white-space: pre-line;
 }
\ No newline at end of file