From 6dee1787f3988911f444f9a4d2473e1057327e18 Mon Sep 17 00:00:00 2001
From: Andy Sloane <andy@a1k0n.net>
Date: Sat, 31 Oct 2015 11:39:04 -0700
Subject: [PATCH] show the instruments

---
 index.html |  4 ++--
 xm.js      | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3784657..6b798bd 100644
--- a/index.html
+++ b/index.html
@@ -7,14 +7,14 @@
   <div><canvas id='gfxpattern' width=640 height=200></canvas></div>
 <pre id='debug'>
 </pre>
-<pre id='pattern'>
+<pre id='instruments'>
 </pre>
 <pre>
 code: <a href="http://github.com/a1k0n/jsxm/">github.com/a1k0n/jsxm</a>
 todo:
  - file picker, upload more xms to a host we can access cross-origin
  - make display even more faithfully FT2-like
- - render instrument list
+ - render instrument list in ft2 font
  - oscilloscopes
  - fix bugs!
    - envelope loops - are they right or not now?
diff --git a/xm.js b/xm.js
index ed1416d..66eb132 100644
--- a/xm.js
+++ b/xm.js
@@ -52,7 +52,9 @@ function RenderPattern(canv, pattern) {
       // render instrument
       var inst = data[1];
       if (inst != -1) {  // no instrument = render nothing
-        ctx.drawImage(fontimg, 8*(inst>>4), 4*8, 4, 8, dx, dy, 4, 8);
+        if (inst > 15) {
+          ctx.drawImage(fontimg, 8*(inst>>4), 4*8, 4, 8, dx, dy, 4, 8);
+        }
         ctx.drawImage(fontimg, 8*(inst&15), 4*8, 4, 8, dx+4, dy, 4, 8);
       }
       dx += 12;
@@ -1137,6 +1139,17 @@ function playXM(arrayBuf) {
   var gfxpattern = document.getElementById("gfxpattern");
   gfxpattern.width = _pattern_cellwidth * nchan + _pattern_border;
 
+  var instrlist = document.getElementById("instruments");
+  var list = [];
+  for (var i = 0; i < ninst; i++) {
+    var inst = instruments[i];
+    if (inst == null) continue;
+    var n = (i+1).toString(16);
+    if (i < 15) n = ' ' + n;
+    list.push(n + " " + inst.name);
+  }
+  instrlist.innerHTML = list.join("\n");
+
   // start playing
   gainNode.connect(audioctx.destination);
 }