working prototype of a drag and drop

src/css/style.css

@@ -236,6 +236,22 @@ input[type="file"] {
     height: 5.65rem;
 }
 
+#drop-area {
+    position: fixed;
+    width: 90%;
+    height: 90%;
+    left: 5%;
+    top: 5%;
+    background-color: rgba(38, 189, 38, 0.5);
+    border: 0.3rem dashed rgba(38, 189, 38, 0.85);
+    border-radius: 1rem;
+    z-index: 9999;
+}
+
+#drop-area.highlight {
+    border-color: rgb(61, 228, 61);
+}
+
 .hint {
     display: block;
     font-style: italic;

src/index.html

@@ -149,5 +149,7 @@
 
 </div> <!-- end content -->
 
+<div id="drop-area"></div>
+
 </body>
 </html>

src/js/LoadSaveFile.js

@@ -37,6 +37,7 @@ const ECB_STREAM_CIPHER = new aesjs.ModeOfOperation.ecb(AES_KEY); // create a ne
 // eslint-disable-next-line no-unused-vars
 function LoadSaveFile(input, time) {
 
+    console.log(input);
     const inputFileList = input.files;
     // console.info("Input length: " + input.files.length)
     // Cease further processing if user canceled the file input dialog
@@ -206,4 +207,8 @@ document.getElementById("save-area-file").addEventListener("change", (event) =>
 });
 document.getElementById("save-area-file").addEventListener("click", (mouseEvent) => {
     mouseEvent.target.value = "";
-});
+});
+
+export {
+    LoadSaveFile
+};

src/js/page-functions.js

@@ -2,6 +2,10 @@ import {
     benchmarkTimes
 } from "./HKCheckCompletion.js";
 
+import {
+    LoadSaveFile
+} from "./LoadSaveFile.js";
+
 // ---------------- Load image files (necessary for Webpack) ----------------- //
 
 import HEALTH_MASK_IMAGE from "../img/health-mask.png";
@@ -1078,6 +1082,51 @@ document.getElementById("save-location-input").addEventListener("mouseout", () =
 document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
 document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);
 
+/* Drag and drop functions */
+
+let dropArea = document.getElementById("drop-area");
+
+/* Prevent default browser functions from firing */
+["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
+    dropArea.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+/* Make the user know that they hover over the right drag and drop area */
+["dragenter", "dragover"].forEach(eventName => {
+    dropArea.addEventListener(eventName, highlight, false);
+});
+
+["dragleave", "drop"].forEach(eventName => {
+    dropArea.addEventListener(eventName, unhighlight, false);
+});
+
+function highlight(e) {
+    dropArea.classList.add("highlight");
+}
+
+function unhighlight(e) {
+    dropArea.classList.remove("highlight");
+}
+
+/* What to do with the file(s) */
+dropArea.addEventListener("drop", handleDrop, false);
+
+function handleDrop(e) {
+  let dt = e.dataTransfer;
+  let files = dt.files;
+
+  console.log(e);
+  console.log(dt);
+  console.log(files);
+
+  LoadSaveFile(dt, new Date());
+}
+
 /* ------------------------- Exports ------------------------------- */
 
 export {