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 @@ +

Loading...

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 = this.document.getElementById('status'); + let lastStatus = Date.now(); + const canvas = new Canvas(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"); } };