From 1b3e2e8add5a681e6a2e169095be0367e1d9bb65 Mon Sep 17 00:00:00 2001
From: Nordine Bittich <nordine@bittich.be>
Date: Fri, 9 Feb 2024 20:11:40 +0100
Subject: [PATCH] split css js html

---
 adana-playground/app.js     |  67 +++++++++++++++++++++++
 adana-playground/index.html | 106 +-----------------------------------
 adana-playground/style.css  |  32 +++++++++++
 3 files changed, 101 insertions(+), 104 deletions(-)
 create mode 100644 adana-playground/app.js
 create mode 100644 adana-playground/style.css

diff --git a/adana-playground/app.js b/adana-playground/app.js
new file mode 100644
index 0000000..1d7554c
--- /dev/null
+++ b/adana-playground/app.js
@@ -0,0 +1,67 @@
+import init, { compute_as_string as compute } from "./pkg/adana_script_wasm.js";
+
+async function run() {
+  const form = document.querySelector("form");
+  form.classList.add("d-none");
+  await init();
+  const memory = new WebAssembly.Memory({
+    initial: 32, // 2mb
+    maximum: 512, // 32mb
+    shared: true,
+  });
+  const ctx = new Uint8Array(memory.buffer);
+  form.classList.remove("d-none");
+
+  const text_area = document.querySelector("#code");
+  text_area.value = "";
+  text_area.focus();
+
+  const out = document.querySelector("#out");
+  out.value = "";
+
+  function updateLineNumbers() {
+    var lines = text_area.value.split("\n").length;
+    line_numbers.innerHTML = "";
+    for (var i = 1; i <= lines; i++) {
+      line_numbers.innerHTML += i + "<br>";
+    }
+  }
+  var line_numbers = document.querySelector(".line-numbers");
+  updateLineNumbers();
+
+  text_area.addEventListener("input", updateLineNumbers);
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    let res = compute(data.get("code") || "", ctx);
+    console.log(res); // NORDINE
+    out.value = res;
+  });
+  const issueLink = document.querySelector("#issueLink");
+  issueLink.onclick = (e) => {
+    e.preventDefault();
+    const a = document.createElement("a");
+    let params = new URLSearchParams();
+    const data = new FormData(form);
+    params.append("title", "Adana playground bug");
+
+    a.href = `https://github.com/nbittich/adana/issues/new?${params.toString()}`;
+    a.target = "_blank";
+    a.click();
+  };
+
+  const copyToClipboardBtn = document.querySelector("#copyToClipboard");
+  copyToClipboardBtn.onclick = function (e) {
+    e.preventDefault();
+    if (out.value) {
+      navigator.clipboard.writeText(out.value);
+
+      alert("Copied to clipboard");
+    } else {
+      alert("Nothing to copy");
+    }
+  };
+}
+
+run();
diff --git a/adana-playground/index.html b/adana-playground/index.html
index 989c1ad..c23aff4 100644
--- a/adana-playground/index.html
+++ b/adana-playground/index.html
@@ -7,110 +7,8 @@
   <title>Adana Playground</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
-  <style type="text/css">
-    * {
-      --bs-body-bg: black;
-    }
-
-    .btn {
-      --bs-btn-border-radius: 0;
-    }
-
-    .card {
-      border-radius: 0 !important;
-    }
-
-    .terminal {
-      resize: none;
-      border-radius: 0;
-      background-color: var(--bs-body-bg) !important;
-      color: lime;
-      outline: none !important;
-      caret-color: lime;
-      /* Color of the cursor */
-    }
-
-    .line-numbers {
-      padding: 5px;
-      color: slategrey;
-    }
-
-    textarea:focus {
-      user-select: none !important;
-      outline: none !important;
-      box-shadow: none !important;
-    }
-  </style>
-  <script type="module">
-    import init, {
-      compute_as_string as compute,
-    } from "./pkg/adana_script_wasm.js";
-
-    async function run() {
-      const form = document.querySelector("form");
-      form.classList.add("d-none");
-      await init();
-      const memory = new WebAssembly.Memory({
-        initial: 32, // 2mb
-        maximum: 512, // 32mb
-        shared: true,
-      });
-      const ctx = new Uint8Array(memory.buffer);
-      form.classList.remove("d-none");
-
-      const text_area = document.querySelector("#code");
-      text_area.value = "";
-      text_area.focus();
-
-      const out = document.querySelector("#out");
-      out.value = "";
-
-      function updateLineNumbers() {
-        var lines = text_area.value.split("\n").length;
-        line_numbers.innerHTML = "";
-        for (var i = 1; i <= lines; i++) {
-          line_numbers.innerHTML += i + "<br>";
-        }
-      }
-      var line_numbers = document.querySelector(".line-numbers");
-      updateLineNumbers();
-
-      text_area.addEventListener("input", updateLineNumbers);
-
-      form.addEventListener("submit", (e) => {
-        e.preventDefault();
-        const data = new FormData(e.target);
-        let res = compute(data.get("code") || "", ctx);
-        console.log(res); // NORDINE
-        out.value = res;
-      });
-      const issueLink = document.querySelector("#issueLink");
-      issueLink.onclick = (e) => {
-        e.preventDefault();
-        const a = document.createElement("a");
-        let params = new URLSearchParams();
-        const data = new FormData(form);
-        params.append("title", "Adana playground bug");
-
-        a.href = `https://github.com/nbittich/adana/issues/new?${params.toString()}`;
-        a.target = "_blank";
-        a.click();
-      };
-    }
-    const copyToClipboardBtn = document.querySelector("#copyToClipboard");
-    copyToClipboardBtn.onclick = function (e) {
-      e.preventDefault();
-      if (out.value) {
-        navigator.clipboard.writeText(out.value);
-
-        alert("Copied to clipboard");
-      } else {
-        alert("Nothing to copy");
-      }
-    };
-
-    run();
-  </script>
+  <link rel="stylesheet" href="/style.css" />
+  <script type="module" src="./app.js"></script>
 </head>
 
 <body>
diff --git a/adana-playground/style.css b/adana-playground/style.css
new file mode 100644
index 0000000..9805433
--- /dev/null
+++ b/adana-playground/style.css
@@ -0,0 +1,32 @@
+* {
+  --bs-body-bg: black;
+}
+
+.btn {
+  --bs-btn-border-radius: 0;
+}
+
+.card {
+  border-radius: 0 !important;
+}
+
+.terminal {
+  resize: none;
+  border-radius: 0;
+  background-color: var(--bs-body-bg) !important;
+  color: lime;
+  outline: none !important;
+  caret-color: lime;
+  /* Color of the cursor */
+}
+
+.line-numbers {
+  padding: 5px;
+  color: slategrey;
+}
+
+textarea:focus {
+  user-select: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}