From 28751cd364200cfd76c665fa1c151619b8245cdd Mon Sep 17 00:00:00 2001
From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@0d.be>
Date: Fri, 5 May 2023 16:54:25 +0200
Subject: [PATCH] display keyboard shortcut

---
 index.html  |  1 +
 nanofun.css | 13 +++++++++++++
 nanofun.js  |  1 +
 3 files changed, 15 insertions(+)

diff --git a/index.html b/index.html
index 1854c66..f0661c1 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
   <div id="nanopad">
    <div class="nanotouch">
      <span class="name"></span>
+     <span class="key"></span>
      <span class="duration"></span>
      <label class="effects"><input type="checkbox">Effects</label><br>
      <label class="loop"><input type="checkbox">Loop</label><br>
diff --git a/nanofun.css b/nanofun.css
index 85f73f0..c93ff91 100644
--- a/nanofun.css
+++ b/nanofun.css
@@ -79,12 +79,25 @@ div.nanotouch .loop {
 
 div.nanotouch span.name {
   position: absolute;
+  z-index: 10;
+}
+
+div.nanotouch span.key {
+  position: absolute;
+  pointer-events: none;
+  right: 1ex;
+  top: 1ex;
+  opacity: 0.3;
+  font-size: 100px;
+  line-height: 50px;
+  z-index: 0;
 }
 
 div.nanotouch span.duration {
   position: absolute;
   bottom: 2ex;
   right: 1ex;
+  z-index: 10;
 }
 
 div#gitclone {
diff --git a/nanofun.js b/nanofun.js
index d84962b..5deb9c4 100644
--- a/nanofun.js
+++ b/nanofun.js
@@ -342,6 +342,7 @@ var nanofun = function() {
     for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
       var $new_touch = $nanotouch.clone();
       $new_touch.attr('data-touch', i);
+      $new_touch.find('.key').text(KEYBOARD_CODES[i]);
       $new_touch.appendTo($nanopad);
     }
     $nanotouch.remove(); /* remove template */
-- 
2.39.2