From 61d7569d923aead8941fa1521e04f29c0ea2c503 Mon Sep 17 00:00:00 2001
From: alan <masteralan2001@gmail.com>
Date: Wed, 6 Dec 2023 15:39:53 -0500
Subject: [PATCH] Set up status messages (requires multi-threading to actually
 work)

---
 assets/css/puzzle.css       |  4 ++++
 assets/index.html           |  1 +
 buildwin.cmd                |  6 +++---
 src/client/client.ts        | 28 +++++++++++++++++++++-------
 src/client/mesh/import.ts   | 11 ++++++-----
 src/client/render/canvas.ts |  2 --
 6 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/assets/css/puzzle.css b/assets/css/puzzle.css
index 54dadac..453728e 100644
--- a/assets/css/puzzle.css
+++ b/assets/css/puzzle.css
@@ -22,3 +22,7 @@ canvas {
     margin-left: auto;
     margin-right: auto;
 }
+
+p.status {
+    text-align: center;
+}
diff --git a/assets/index.html b/assets/index.html
index 1fb82d1..4c20d0a 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -13,5 +13,6 @@
                 
             </canvas>
         </div>
+        <p class="status" id="status">Loading...</p>
     </body>
 </html>
diff --git a/buildwin.cmd b/buildwin.cmd
index 337a059..99463f4 100644
--- a/buildwin.cmd
+++ b/buildwin.cmd
@@ -1,4 +1,4 @@
-@REM rmdir dist\
-@REM mkdir dist\public
-@REM xcopy .\assets .\dist\public /e /h /y /f
+rmdir dist\
+mkdir dist\public
+xcopy .\assets .\dist\public /e /h /y /f
 tsc && webpack --config .\webpack\development.js --watch
diff --git a/src/client/client.ts b/src/client/client.ts
index 25d6daf..368d101 100644
--- a/src/client/client.ts
+++ b/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);
-            console.log(`Got mesh array at ${mesh.name}`);
-            console.log(mesh);
-
+            const mesh = MeshImport.parse(req.responseText, update_status);
+            update_status('Drawing');
             canvas.draw_shells(mesh.shells);
+            update_status('Done!', false);
         }
     }
+    
+    update_status('Fetching mesh over network');
     request_mesh(req, 'clover.obj');
+
 });
diff --git a/src/client/mesh/import.ts b/src/client/mesh/import.ts
index 3368f72..bf7ca02 100644
--- a/src/client/mesh/import.ts
+++ b/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();
         });
diff --git a/src/client/render/canvas.ts b/src/client/render/canvas.ts
index 9e0a63c..9713458 100644
--- a/src/client/render/canvas.ts
+++ b/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");
     }
 };