add sfx samples

Author: luizbills

public/about.html

@@ -149,6 +149,19 @@
         line-height: 1.3;
       }
 
+      #sfx-list button {
+        margin-left: 0.5em;
+        padding: 0.5em 1em;
+        border: 1px solid rgba(0,0,0,.5);
+      }
+      #sfx-list {
+        overflow-x: auto;
+      }
+      #sfx-list strong {
+        display: inline-block;
+        margin-right: 0.5em;
+      }
+
       @media print {
         html {
           font-size: 14px;
@@ -809,6 +822,17 @@ <h3>Public assets</h3>
   pop()
 }</code></pre>
 
+      <h2>Sound Effect Samples</h2>
+
+      <ul id="sfx-list">
+        <li><strong>Jump:</strong><code>sfx([,,392,,.03,.12,1,3.6,,69,,,,,,,,.95,.1])</code></li>
+        <li><strong>Coin:</strong><code>sfx([,,1675,,.06,.24,1,1.82,,,837,.06])</code></li>
+        <li><strong>Bounce:</strong><code>sfx([2,.8,999,,,,,1.5,,.3,-99,.1,1.63,,,.11,.22])</code></li>
+        <li><strong>Explosion:</strong><code>sfx([,,333,.01,0,.9,4,1.9,,,,,,.5,,.6])</code></li>
+        <li><strong>Attack:</strong><code>sfx([,,150,.05,,.05,,1.3,,,,,,3])</code></li>
+        <li><strong>Damage:</strong><code>sfx([,,537,.02,.02,.22,1,1.59,-6.98,4.97])</code></li>
+      </ul>
+
       <h2><a id="tools">Useful tools</a></h2>
 
       <ul>
@@ -843,6 +867,8 @@ <h2><a id="tools">Useful tools</a></h2>
     <script src="prism/prism-typescript.js"></script>
     <script src="prism/prism-autolinker.js"></script>
 
+    <script src="js/zzfx.js"></script>
+
     <script>
       for (const element of document.querySelectorAll('[data-copy]')) {
         const data = element.dataset.copy || ''
@@ -872,10 +898,31 @@ <h2><a id="tools">Useful tools</a></h2>
         }
       }
 
+      const sfx = (arr) => zzfx(...arr)
+      for (const item of document.querySelectorAll('#sfx-list li code')) {
+        const btnPlay = document.createElement('button')
+        btnPlay.textContent = '▶️'
+        btnPlay.onclick = () => eval(item.textContent)
+
+        const btnCopy = document.createElement('button')
+        btnCopy.textContent = '📄'
+        btnCopy.onclick = () => {
+          selectNodeContent(item)
+          copyNodeContent(item)
+        }
+
+        item.parentElement.append(document.createElement('br'))
+        item.parentElement.append(btnPlay)
+        item.parentElement.append(btnCopy)
+      }
+
       /**
        * @param {HTMLElement} node
        */
       function copyNodeContent(node) {
+        if ('https:' !== location.protocol) {
+          return alert("Could not copy text: Not in secure context (HTTPS).");
+        };
         if (!navigator.clipboard) {
           return alert("Could not copy text: Unsupported browser.");
         };