refactor: standardize number parsing, adjust animation timing test: Add mocks and new suite for grid rendering.

Author: thundermage117

core/src/wavelet.cpp

@@ -30,7 +30,8 @@ static const double INV_SQRT2 = 0.70710678118654752440; // 1.0 / sqrt(2)
  *   det[k] = (data[2k] - data[2k+1]) / sqrt(2)
  */
 static void haar1d_fwd(double* data, int n) {
-    double tmp[8];
+    if (n > 8) return; // Basic safety check
+    double tmp[8] = {0};
     int half = n / 2;
     for (int k = 0; k < half; ++k) {
         tmp[k]        = (data[2*k] + data[2*k+1]) * INV_SQRT2;
@@ -47,7 +48,8 @@ static void haar1d_fwd(double* data, int n) {
  *   x[2k+1] = (avg[k] - det[k]) / sqrt(2)
  */
 static void haar1d_inv(double* data, int n) {
-    double tmp[8];
+    if (n > 8) return; // Basic safety check
+    double tmp[8] = {0};
     int half = n / 2;
     for (int k = 0; k < half; ++k) {
         tmp[2*k]     = (data[k] + data[k + half]) * INV_SQRT2;
@@ -279,9 +281,13 @@ void idwtImage(double* data, int width, int height, int levels) {
 }
 
 double dwtQuantStep(int x, int y, int width, int height, int levels, double baseStep) {
-    // Replay the forward pass dimensions (levels capped at 6, so fixed arrays suffice).
-    // fwdW[lev] / fwdH[lev] = even dimension of the subimage transformed at forward level `lev`.
-    int fwdW[6], fwdH[6];
+    if (levels <= 0) return baseStep;
+    
+    // Safety cap to prevent buffer overflow and integer shift overflow.
+    // 16 levels is enough for any image up to 65536x65536.
+    if (levels > 16) levels = 16;
+
+    int fwdW[16], fwdH[16];
     {
         int fw = width, fh = height;
         for (int lev = 0; lev < levels; ++lev) {

readme.md

@@ -4,18 +4,24 @@
 
 An interactive codec laboratory to visualize how transform-based image compression works. The C++ core is compiled to WebAssembly, allowing for real-time, in-browser experimentation.
 
-This project demonstrates:
+## ✨ Key Features
 
-- 8x8 block splitting
-- Color space transformation (RGB → YCbCr)
-- Discrete Cosine Transform (DCT)
-- Quantization
-- Inverse DCT (reconstruction)
-- PSNR computation
-- Visual difference and artifact analysis
-- Block-level coefficient inspection
+- Real-time transform-based compression in the browser
+- C++ codec core compiled to WebAssembly
+- DCT and Wavelet transform comparison
+- Interactive block inspector
+- Zig-zag and zero-run visualization
+- Artifact analysis maps
+- PSNR-based quality metrics
 
----
+## 🛠 Technologies
+
+- C++17
+- WebAssembly (Emscripten)
+- Svelte 5
+- TypeScript
+- Vite
+- OpenCV (native testing)
 
 ## 🏗 Project Structure
 
@@ -128,16 +134,18 @@ Run `./build/codec_app --help` to see available options.
 - [x] DWT-specific artifact analysis in Inspector
 - [x] Multi-transform bitrate estimation & comparison
 
-### Phase 4: Motion Estimation
+### Phase 4: Future Work
 
 - [ ] Two-frame video input
 - [ ] Block matching (SAD/MSE)
 - [ ] Motion vector visualization
 - [ ] Temporal bitrate comparison vs. static frames
 
-## ▶️ Why This Project Exists
+## ▶️ Motivation
+
+Modern image and video codecs rely heavily on transform-based compression, but the internal mechanisms are often hidden behind opaque implementations.
 
-Transform-based compression is often treated as a black box.
+Codec Explorer makes these algorithms visible and interactive.
 
 This project aims to:
 - Build intuition for energy compaction

web/public/codec.wasm

@@ -143,8 +143,8 @@ export function renderGrid(
             const cell = target.closest('.grid-cell') as HTMLElement;
             if (!cell) return;
 
-            const row = parseInt(cell.dataset.row || '0');
-            const col = parseInt(cell.dataset.col || '0');
+            const row = Number.parseInt(cell.dataset.row || '0');
+            const col = Number.parseInt(cell.dataset.col || '0');
             const valStr = cell.dataset.val || '';
             const desc = cell.dataset.desc || '';
             const isBasis = cell.dataset.isBasis === 'true';
@@ -177,8 +177,8 @@ export function renderGrid(
             const isBasis = cell.dataset.isBasis === 'true';
             if (!isBasis) return;
 
-            const row = parseInt(cell.dataset.row || '0');
-            const col = parseInt(cell.dataset.col || '0');
+            const row = Number.parseInt(cell.dataset.row || '0');
+            const col = Number.parseInt(cell.dataset.col || '0');
             const targetGridId = el.dataset.target || '';
 
             window.dispatchEvent(new CustomEvent('animate-basis', {
@@ -295,7 +295,7 @@ export function renderGrid(
                     badge.style.cursor = 'help';
                     badge.addEventListener('mouseenter', (e) => {
                         const target = e.currentTarget as HTMLElement;
-                        const count = parseInt(target.textContent || '0');
+                        const count = Number.parseInt(target.textContent || '0');
                         showTooltip(e, `${count}/64`, '-', '-', 'Non-zero coefficients (|value| ≥ 0.5)');
                     });
                     badge.addEventListener('mouseleave', () => hideTooltip());
@@ -527,10 +527,10 @@ function applyPartialReconToGrid(row: number, col: number): void {
             const t = Math.min(1, Math.abs(contrib) / maxContrib) * 0.75;
             if (contrib > 0) {
                 r = Math.round(r + (239 - r) * t);
-                g = Math.round(g + (68  - g) * t);
-                b = Math.round(b + (68  - b) * t);
+                g = Math.round(g + (68 - g) * t);
+                b = Math.round(b + (68 - b) * t);
             } else if (contrib < 0) {
-                r = Math.round(r + (59  - r) * t);
+                r = Math.round(r + (59 - r) * t);
                 g = Math.round(g + (130 - g) * t);
                 b = Math.round(b + (246 - b) * t);
             }
@@ -580,7 +580,7 @@ export function startReconstructionAnimation(): void {
 
     // Resume if paused mid-animation
     if (reconState !== null) {
-        reconState.startTime = performance.now() - reconState.currentIndex * RECON_STEP_MS;
+        reconState.startTime = Date.now() - reconState.currentIndex * RECON_STEP_MS;
         setReconstructionButtonIcon(true);
         reconstructionAnimationId = requestAnimationFrame(runReconFrame);
         return;
@@ -603,7 +603,7 @@ export function startReconstructionAnimation(): void {
         currentIndex: 0,
         lastBasisPattern: null,
         lastBasisCoeff: 0,
-        startTime: performance.now(),
+        startTime: Date.now(),
         lastZigzagIdx: 0,
         lastRawCoeff: 0,
     };
@@ -705,7 +705,7 @@ function updateReconstructionProgress(index: number): void {
     if (!el) return;
 
     if (index < 0) { el.style.display = 'none'; return; }
-    if (index === 0) { el.textContent = ''; el.style.display = 'none'; return; }
+    if (index === 0) { el.textContent = '0/64'; el.style.display = ''; return; }
 
     if (index >= 64) {
         el.textContent = '64/64';
@@ -744,16 +744,16 @@ function showBannerForCell(row: number, col: number): void {
 }
 
 const FREQ_DESCRIPTIONS: Record<string, string> = {
-    'DC':   'Sets the average brightness across the whole block',
-    'Low':  'Broad shapes and gentle gradients',
-    'Mid':  'Edges and moderate detail',
+    'DC': 'Sets the average brightness across the whole block',
+    'Low': 'Broad shapes and gentle gradients',
+    'Mid': 'Edges and moderate detail',
     'High': 'Sharp edges and fine texture',
 };
 
 const FREQ_COLORS: Record<string, string> = {
-    'DC':   '#8b5cf6',
-    'Low':  '#10b981',
-    'Mid':  '#f59e0b',
+    'DC': '#8b5cf6',
+    'Low': '#10b981',
+    'Mid': '#f59e0b',
     'High': '#ef4444',
 };
 
@@ -768,16 +768,16 @@ function updateReconAnimBanner(
 
     if (processedCount >= 64) {
         // Done state
-        const stepEl  = document.getElementById('reconBannerStep');
-        const fillEl  = document.getElementById('reconBannerFill') as HTMLElement | null;
-        const freqEl  = document.getElementById('reconBannerFreq');
+        const stepEl = document.getElementById('reconBannerStep');
+        const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null;
+        const freqEl = document.getElementById('reconBannerFreq');
         const coeffEl = document.getElementById('reconBannerCoeff');
-        const descEl  = document.getElementById('reconBannerDesc');
-        if (stepEl)  stepEl.textContent  = '64';
-        if (fillEl)  fillEl.style.width  = '100%';
-        if (freqEl)  { freqEl.textContent = 'Complete'; freqEl.style.background = '#10b981'; freqEl.style.color = 'white'; }
+        const descEl = document.getElementById('reconBannerDesc');
+        if (stepEl) stepEl.textContent = '64';
+        if (fillEl) fillEl.style.width = '100%';
+        if (freqEl) { freqEl.textContent = 'Complete'; freqEl.style.background = '#10b981'; freqEl.style.color = 'white'; }
         if (coeffEl) { coeffEl.textContent = ''; coeffEl.style.color = ''; }
-        if (descEl)  descEl.textContent  = 'All 64 coefficients applied — reconstruction complete';
+        if (descEl) descEl.textContent = 'All 64 coefficients applied — reconstruction complete';
         // Clear the canvas
         const canvas = document.getElementById('reconBasisCanvas') as HTMLCanvasElement | null;
         if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); }
@@ -787,19 +787,19 @@ function updateReconAnimBanner(
 
     banner.style.display = '';
 
-    const row   = Math.floor(zigzagIdx / 8);
-    const col   = zigzagIdx % 8;
+    const row = Math.floor(zigzagIdx / 8);
+    const col = zigzagIdx % 8;
     const label = getTransformFreqLabel(row, col);
     const isZero = Math.abs(coeff) < 0.0001;
 
-    const stepEl  = document.getElementById('reconBannerStep');
-    const fillEl  = document.getElementById('reconBannerFill') as HTMLElement | null;
-    const freqEl  = document.getElementById('reconBannerFreq');
+    const stepEl = document.getElementById('reconBannerStep');
+    const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null;
+    const freqEl = document.getElementById('reconBannerFreq');
     const coeffEl = document.getElementById('reconBannerCoeff');
-    const descEl  = document.getElementById('reconBannerDesc');
+    const descEl = document.getElementById('reconBannerDesc');
 
-    if (stepEl)  stepEl.textContent = String(processedCount);
-    if (fillEl)  fillEl.style.width = `${(processedCount / 64) * 100}%`;
+    if (stepEl) stepEl.textContent = String(processedCount);
+    if (fillEl) fillEl.style.width = `${(processedCount / 64) * 100}%`;
 
     if (freqEl) {
         freqEl.textContent = label;

web/src/lib/grid-renderer.ts

@@ -26,8 +26,8 @@ export function inspectBlock(blockX: number, blockY: number): void {
     const qualitySlider = document.getElementById('qualitySlider') as HTMLInputElement | null;
 
     const quality = (appState.appMode === 'inspector' && inspQualitySlider)
-        ? parseInt(inspQualitySlider.value)
-        : (qualitySlider ? parseInt(qualitySlider.value) : appState.quality);
+        ? Number.parseInt(inspQualitySlider.value)
+        : (qualitySlider ? Number.parseInt(qualitySlider.value) : appState.quality);
 
     const ptr = inspectBlockData(blockX, blockY, channelIndex, quality);
     if (!ptr) {