add clipboard button

includes/style.less

@@ -22,6 +22,11 @@ button {
     white-space: nowrap;
     width: 100%;
     
+    &.half {
+        float: left;
+        width: 50%;
+    }
+    
     &.pagination:not(.normal) {
         position: absolute;
         bottom: 5vmin;

index.pug

@@ -101,9 +101,9 @@ html(lang="en-gb")
                 p#added
 
                 textarea#output(autocomplete="off")
-                br
 
-                button#download download
+                button#clipboard.half copy to clipboard
+                button#download.half download
 
                 button.pagination.prev#add add another image
                 button.pagination.start#reset start again

script.js

@@ -24,6 +24,18 @@ function download(filename, text) {
     document.body.removeChild(element);
 }
 
+function copyToClipboard() {
+    const button = el("clipboard");
+
+    el("output").select();
+    document.execCommand("copy");
+    button.innerText = "copied!";
+
+    setTimeout(() => {
+        button.innerText = "copy to clipboard";
+    }, 2000);
+}
+
 function el(id) {
     return document.getElementById(id);
 }
@@ -64,6 +76,7 @@ async function run() {
 
     const buttonAddImage         = el("add");
     const buttonBackToImage      = el("back-to-image");
+    const buttonCopyToClipboard  = el("clipboard")
     const buttonDownload         = el("download");
     const buttonGameDataProceed  = el("game-data-next");
     const buttonImageProceed     = el("image-next");
@@ -241,6 +254,9 @@ async function run() {
         download("output.bitsy", textareaGameDataOutput.value);
     }
 
+    buttonCopyToClipboard.addEventListener("click",    copyToClipboard);
+    buttonCopyToClipboard.addEventListener("touchend", copyToClipboard);
+
     buttonDownload.addEventListener("click",    handleDownload);
     buttonDownload.addEventListener("touchend", handleDownload);