Set up status messages (requires multi-threading to actually work)

assets/css/puzzle.css

@@ -22,3 +22,7 @@ canvas {
     margin-left: auto;
     margin-right: auto;
 }
+
+p.status {
+    text-align: center;
+}

assets/index.html

@@ -13,5 +13,6 @@
                 
             </canvas>
         </div>
+        <p class="status" id="status">Loading...</p>
     </body>
 </html>

buildwin.cmd

@@ -1,4 +1,4 @@
-@REM rmdir dist\
+rmdir dist\
-@REM mkdir dist\public
+mkdir dist\public
-@REM xcopy .\assets .\dist\public /e /h /y /f
+xcopy .\assets .\dist\public /e /h /y /f
 tsc && webpack --config .\webpack\development.js --watch

src/client/client.ts

@@ -23,20 +23,34 @@ const request_mesh = (request: XMLHttpRequest, filename: string) => {
 
 // Wait for page load before executing code
 window.addEventListener('load', function() {
-    console.log('PAGE LOADED');
+    const status = <HTMLParagraphElement>this.document.getElementById('status');
+    let lastStatus = Date.now();
 
     const canvas = new Canvas(<HTMLCanvasElement>this.document.getElementById('draw'));
     const req = new XMLHttpRequest();
 
+    const update_status = (text: string, punctuate: boolean = true) => {
+        let newStatus = Date.now();
+        const timeDiff = newStatus - lastStatus
+        console.log(`Completed step '${status.textContent}' in ${timeDiff} ms`);
+        if (punctuate) {
+            status.textContent = `${text}...`;
+        } else {
+            status.textContent = text;
+        }
+        lastStatus = newStatus;
+    }
+
     req.onreadystatechange = function() {
         if (req.readyState == XMLHttpRequest.DONE) {
-            console.log(req.responseText);
+            const mesh = MeshImport.parse(req.responseText, update_status);
-            const mesh = MeshImport.parse(req.responseText);
+            update_status('Drawing');
-            console.log(`Got mesh array at ${mesh.name}`);
-            console.log(mesh);
-
             canvas.draw_shells(mesh.shells);
+            update_status('Done!', false);
         }
     }
+    
+    update_status('Fetching mesh over network');
     request_mesh(req, 'clover.obj');
+
 });

src/client/mesh/import.ts

@@ -31,7 +31,8 @@ const parse_tri = (line: string) => {
 }
 
 class MeshImport {
-    public static parse(buffer: string) {
+    public static parse(buffer: string, statusEvent: CallableFunction) {
+        statusEvent('Parsing mesh file');
         const buff = buffer.split('\n');
 
         // Initialize buffers
@@ -56,6 +57,7 @@ class MeshImport {
         console.log(`# VERTs: ${verts.length / 3}\t# UVs ${uvs.length}\t# TRIs: ${tris.length / 6}`);
 
         // Construct triangles
+        statusEvent('Constructing triangles');
         let t: Triangle[] = [];
         for (let i = 0; i < tris.length; i += 6) {
             let indices: number[] = [tris[i], tris[i+2], tris[i+4]];
@@ -70,9 +72,8 @@ class MeshImport {
             t.push(new Triangle(v, uv, uvi));
         }
 
-        console.log('IMPORT: Total triangles found', t.length);
-
         // Create an initial shell
+        statusEvent('Initializing UV shells');
         let shells: Shell[] = [];
         // Initialize shells by sorting triangles roughly int othem
         for (let i = 0; i < t.length; i++) {
@@ -92,9 +93,8 @@ class MeshImport {
             }
         }
 
-        console.log('IMPORT: Total shells initial', shells.length);
-
         // Now, combine shells
+        statusEvent('Merging UV shells');
         for (let i = 0; i < shells.length; i++) {
             const a = shells[i];
             for (let j = i+1; j < shells.length; j++) {
@@ -109,6 +109,7 @@ class MeshImport {
         }
 
         // Finally, calculate shells
+        statusEvent('Baking UV shells');
         shells.forEach((s: Shell) => {
             s.precompute();
         });

src/client/render/canvas.ts

@@ -33,8 +33,6 @@ class Canvas {
             this.context.fill(s.path);
             this.context.stroke(s.path);
         });
-
-        console.log("Canvas drawn");
     }
 };