From 9253d706e28e3fbe2a9f34959ae3ca4016bb30a9 Mon Sep 17 00:00:00 2001
From: afterlifepro <96529802+Afterlifepro@users.noreply.github.com>
Date: Fri, 24 Jan 2025 15:19:40 +0000
Subject: [PATCH] Improve styles

---
 src/layouts/Base.astro |   1 -
 src/pages/index.astro  | 194 +++++++++++++++++++++++++++++++----------
 2 files changed, 149 insertions(+), 46 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 391beb8..998dcaa 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -37,7 +37,6 @@ const { title } = Astro.props;
           padding: 0;
           box-sizing: border-box;
           appearance: none;
-          color-scheme: dark;
         }
 
         img,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 24ae43c..37cf1cb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,35 +5,7 @@ import Base from "../layouts/Base.astro";
 <Base title="Dong Web">
   <script>
     import { createDong, download, readDong } from "../dong-io";
-
-    declare global {
-      interface Uint8Array {
-        toBase64(): string;
-      }
-    }
-
-    const blobBytes = async (blob: Blob) => {
-      if ("bytes" in blob) return blob.bytes();
-      return new Response(blob).arrayBuffer().then((buffer) => {
-        const uint = new Uint8Array(buffer);
-        return uint;
-      });
-    };
-
-    const uint8array64 = (arru8: Uint8Array) => {
-      if ("toBase64" in arru8) return arru8.toBase64();
-
-      function _arrayBufferToBase64(bytes: Uint8Array) {
-        var binary = "";
-        var len = bytes.byteLength;
-        for (var i = 0; i < len; i++) {
-          binary += String.fromCharCode(bytes[i]);
-        }
-        return btoa(binary);
-      }
-      return _arrayBufferToBase64(arru8);
-    };
-
+    
     class CreateDong extends HTMLElement {
       connectedCallback() {
         // create input
@@ -41,10 +13,15 @@ import Base from "../layouts/Base.astro";
 
         const imageLabel = document.createElement("label");
         const audioLabel = document.createElement("label");
+
+        const imageFileName = document.createElement("span");
+        const audioFileName = document.createElement("span");
+
         const imageSelect = document.createElement("input");
         const audioSelect = document.createElement("input");
 
         const filename = document.createElement("input");
+        const fileLabel = document.createElement("label");
         const createButton = document.createElement("button");
 
         const errormsg = document.createElement("div");
@@ -62,15 +39,24 @@ import Base from "../layouts/Base.astro";
         audioLabel.innerText = "Audio";
         audioLabel.htmlFor = audioSelect.id;
 
+        filename.id = "filename";
+
+        fileLabel.innerText = "Name: ";
+        fileLabel.htmlFor = filename.id;
+
         createButton.type = "submit";
         createButton.textContent = "Create";
 
         imageLabel.appendChild(imageSelect);
         audioLabel.appendChild(audioSelect);
 
+        imageLabel.appendChild(imageFileName);
+        audioLabel.appendChild(audioFileName);
+        fileLabel.appendChild(filename);
+
         form.appendChild(imageLabel);
         form.appendChild(audioLabel);
-        form.appendChild(filename);
+        form.appendChild(fileLabel);
         form.appendChild(createButton);
         form.appendChild(errormsg);
 
@@ -80,6 +66,8 @@ import Base from "../layouts/Base.astro";
         createButton.addEventListener("click", async (e) => {
           // don't refresh
           e.preventDefault();
+          errormsg.innerText = "";
+
           // quit early if no files
           if (
             !imageSelect.files ||
@@ -91,6 +79,11 @@ import Base from "../layouts/Base.astro";
             return;
           }
 
+          if (filename.value === "") {
+            errormsg.innerText = "Filename cannot be empty";
+            return;
+          }
+
           // get files
           const image = imageSelect.files[0];
           const audio = audioSelect.files[0];
@@ -102,13 +95,27 @@ import Base from "../layouts/Base.astro";
             return;
           }
 
-          const dongFile = new File([res], `${filename.value}.dong`, {
-            type: "application/prs.vielle.dong",
-          });
+          const dongFile = new File(
+            [res],
+            `${filename.value === "" ? "dong" : filename.value}.dong`,
+            {
+              type: "application/prs.vielle.dong",
+            }
+          );
 
           // download the dong file
           download(dongFile);
         });
+
+        imageSelect.addEventListener("change", (e) => {
+          if (!imageSelect.files || imageSelect.files.length === 0) return;
+          imageFileName.innerText = imageSelect.files[0].name;
+        });
+
+        audioSelect.addEventListener("change", (e) => {
+          if (!audioSelect.files || audioSelect.files.length === 0) return;
+          audioFileName.innerText = audioSelect.files[0].name;
+        });
       }
     }
 
@@ -116,8 +123,8 @@ import Base from "../layouts/Base.astro";
       connectedCallback() {
         // create input
         const form = document.createElement("form");
+        const dongLabel = document.createElement("label");
         const dongSelect = document.createElement("input");
-        const loadButton = document.createElement("button");
         // image
         const errormsg = document.createElement("div");
         const image = document.createElement("img");
@@ -128,22 +135,25 @@ import Base from "../layouts/Base.astro";
 
         dongSelect.type = "file";
         dongSelect.accept = ".dong";
-        loadButton.type = "submit";
-        loadButton.textContent = "Load";
-        image.width = 256;
-        image.height = 256;
+        dongSelect.id = "dong-select";
+
+        dongLabel.innerText = "Upload .dong";
+        dongLabel.htmlFor = dongSelect.id;
 
-        form.appendChild(dongSelect);
-        form.appendChild(loadButton);
+        dongLabel.appendChild(dongSelect);
+
+        form.appendChild(dongLabel);
 
         this.appendChild(form);
         this.appendChild(image);
         this.appendChild(errormsg);
 
         // functionality
-        loadButton.addEventListener("click", async (e) => {
+        dongSelect.addEventListener("change", async (e) => {
           // don't refresh
           e.preventDefault();
+          errormsg.innerText = "";
+
           // quit early if no files
           if (!dongSelect.files || dongSelect.files.length === 0)
             return (errormsg.innerText = "No files selected");
@@ -171,20 +181,114 @@ import Base from "../layouts/Base.astro";
   </script>
 
   <style slot="head" is:inline>
+    :root {
+      --accent: #f80085;
+    }
+    * {
+      color: white;
+    }
+
     button {
-      background-color: #f80085;
+      background-color: var(--accent);
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+      gap: 1rem;
+      min-height: 100vh;
+      background-color: hsl(270, 50%, 10%);
+      max-width: 60ch;
+      margin: auto;
+      padding: 1rem;
+      margin-block-end: 5rem;
     }
 
-    label {
-      background-color: #f80085;
+    label:has(input[type="file"]),
+    button {
+      background-color: var(--accent);
+      border: none;
+      padding: 0.5rem;
+      padding-inline: 1rem;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-      & > input[type="file"] {
+      &:is(label) > input[type="file"] {
         display: none;
       }
     }
+
+    :is(div, span):empty {
+      display: none;
+    }
+
+    img:not([src]) {
+      display: none;
+    }
+
+    img {
+      max-width: 100%;
+    }
+
+    .logo,
+    .logo img {
+      width: 100%;
+    }
+    hr {
+      width: 100%;
+    }
+
+    label:has(input:not([type])) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    input:not([type]) {
+      border: 0.2rem solid white;
+      background-color: transparent;
+      width: 100%;
+    }
+
+    label:has(input[type="file"]):has(span) {
+      height: 3lh;
+      gap: 0.5rem;
+    }
+
+    create-dong form {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 1rem;
+    }
+
+    load-dong {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    create-dong span {
+      width: 100%;
+      height: 1lh;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   </style>
 
   <!-- logo -->
+  <div class="logo">
+    <img src="/logo.svg" alt="logo" />
+  </div>
+
+  <hr />
 
   <!-- creation -->
   <create-dong></create-dong>
-- 
2.51.2