do fix

hardbulls · Apr 11, 2024 · 795c888 · 795c888
1 parent 36e7a4f
commit 795c888
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/src/main.css b/src/main.css
@@ -5,6 +5,7 @@ html {
 body {
     margin: 0;
     width: 100%;
+    font-family: sans-serif;
 }
 
 #controls {
@@ -16,14 +17,30 @@ body {
     width: 100%;
 }
 
-#controls input {
+.file-input {
+    display: flex;
+    gap: 16px;
+    width: 100%;
     font-size: 2em;
+    height: 2em;
+}
+.file-input label {
+    width: 100%;
+    display: flex;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.file-input button {
+    width: 100%;
+    font-size: 1em;
 }
 
 #controls select {
     width: 100%;
     text-align: center;
     font-size: 2em;
+    height: 2em;
 }
 
 #controls select option {
@@ -39,7 +56,7 @@ body {
 #download {
     display: flex;
     justify-content: center;
-    height: 64px;
+    height: 4em;
     width: 100%;
 }
 

diff --git a/src/main.ts b/src/main.ts
@@ -273,20 +273,49 @@ type DrawOptions = {
 
 function uploadBackground(
   handleUpload: (file: File | Blob) => void,
-): HTMLInputElement {
-  const uploadField = document.createElement("input") as HTMLInputElement;
+): HTMLDivElement {
+  // Create a container div
+  const container = document.createElement("div") as HTMLDivElement;
+
+  container.classList.add("file-input");
+
+  // Create a label
+  const label = document.createElement("label");
+  label.innerText = "Upload Background";
 
+  // Create a button
+  const button = document.createElement("button");
+  button.innerText = "Choose File";
+
+  // Create an input field
+  const uploadField = document.createElement("input") as HTMLInputElement;
+  uploadField.style.display = "none";
+  uploadField.hidden = true;
   uploadField.type = "file";
 
+  // Function to trigger click event on the file input field
+  const triggerClick = () => {
+    uploadField.click();
+  };
+
+  // Add event listener to the button
+  button.addEventListener("click", triggerClick);
+
+  // Add event listener to the input field
   uploadField.addEventListener("change", () => {
     const file = uploadField.files?.[0];
-
     if (file) {
       handleUpload(file);
     }
   });
 
-  return uploadField;
+  // Append label, button, and input field to container
+  container.appendChild(label);
+  container.appendChild(button);
+  container.appendChild(uploadField);
+
+  // Return the container
+  return container;
 }
 
 (async () => {
@@ -314,9 +343,13 @@ function uploadBackground(
   const downloadButton = download(() => {
     const downloadLink = document.createElement("a");
 
+    downloadLink.style.display = "none";
     downloadLink.href = canvas.toDataURL();
     downloadLink.download = "ballpark-hard.png";
+
+    document.body.appendChild(downloadLink);
     downloadLink.click();
+    document.body.removeChild(downloadLink);
   });
 
   (document.querySelector("#controls") as HTMLDivElement).append(