From 34e975ef55c9eb77ed3869609d233574bda80f6c Mon Sep 17 00:00:00 2001
From: Andy Sloane <andy@a1k0n.net>
Date: Thu, 19 Nov 2015 20:47:28 -0800
Subject: [PATCH] changed my mind: render 000 effect as ...

also make the track view much taller in the standalone player
---
 index.html   |  2 +-
 trackview.js | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 0827785..dff04a5 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
     <div><canvas class="centered" id='title' width="640" height="22"></canvas></div>
     <div class="hscroll">
       <div><canvas class="centered" id='vu' width="224" height="64"></canvas></div>
-      <div><canvas class="centered" id='gfxpattern' width="640" height="200"></canvas></div>
+      <div><canvas class="centered" id='gfxpattern' width="640" height="504"></canvas></div>
     </div>
     <div id='instruments'></div>
     <div>
diff --git a/trackview.js b/trackview.js
index 202a917..16c7ddd 100644
--- a/trackview.js
+++ b/trackview.js
@@ -115,6 +115,7 @@ function RenderPattern(canv, pattern) {
       // render note
       var note = data[0];
       if (note < 0) {
+        // no note = ...
         ctx.drawImage(fontimg, 0, 8*5, 16, 8, dx, dy, 16, 8);
       } else {
         var octave = (note/12)|0;
@@ -137,6 +138,7 @@ function RenderPattern(canv, pattern) {
       // render volume
       var vol = data[2];
       if (vol < 0x10) {
+        // no volume = ..
         ctx.drawImage(fontimg, 312, 0, 8, 8, dx, dy, 8, 8);
       } else {
         ctx.drawImage(fontimg, 8*(vol>>4) + 56*8, 4*8, 8, 8, dx, dy, 8, 8);
@@ -147,10 +149,17 @@ function RenderPattern(canv, pattern) {
       // render effect
       var eff = data[3];
       var effdata = data[4];
-      ctx.drawImage(fontimg, 8*eff + 16*8, 4*8, 8, 8, dx, dy, 8, 8);
-      dx += 8;
-      ctx.drawImage(fontimg, 8*(effdata>>4), 4*8, 4, 8, dx, dy, 4, 8);
-      ctx.drawImage(fontimg, 8*(effdata&15), 4*8, 4, 8, dx+4, dy, 4, 8);
+      if (eff !== 0 || effdata !== 0) {
+        // draw effect with tiny font (4px space + effect type 0..9a..z)
+        ctx.drawImage(fontimg, 8*eff + 16*8, 4*8, 8, 8, dx, dy, 8, 8);
+        dx += 8;
+        // (hexadecimal 4-width font)
+        ctx.drawImage(fontimg, 8*(effdata>>4), 4*8, 4, 8, dx, dy, 4, 8);
+        ctx.drawImage(fontimg, 8*(effdata&15), 4*8, 4, 8, dx+4, dy, 4, 8);
+      } else {
+        // no effect = ...
+        ctx.drawImage(fontimg, 0, 8*5, 16, 8, dx+2, dy, 16, 8);
+      }
     }
   }
 }