Add file darg and drop, bump version to 0.4.0

- Version 0.4.0
- Display "Upuść plik..." when dragging file to app
- Verify file (check extension and whether can be read)

index.html

@@ -60,6 +60,7 @@
 				<div id="pattern"><svg></svg></div>
 				<div id="image"><svg></svg></div>
 			</div>
+			<div id="droparea"><div class="dropareatext">Upuść plik aby załadować</div></div>
 			<div id="play-container" class="container hidden">
 				<div id="playImage"></div>
 				<div class="legend-div">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "szkola-puzzle",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Puzzle dla p. Cwołek",
   "author": {
     "name": "krzysdz",

renderer.js

@@ -12,6 +12,7 @@ const {app} = remote;
 const {argv} = remote.process;
 
 var imgHolder = document.getElementById("image");
+var dropZone = document.getElementById("droparea");
 
 /**
  * Run when app is loaded
@@ -175,6 +176,61 @@ function loadFile([bg]){
 	imgHolder.style.backgroundImage = "url(file://" + bg + ")";
 }
 
+/**
+ * Show the copy icon when dragging over. Shows dropzone
+ * @param {DragEvent} e
+ */
+function fileDragOver(e){
+	e.stopPropagation();
+	e.preventDefault();
+	e.dataTransfer.dropEffect = "copy";
+	dropZone.style.display = "block";
+}
+document.getElementById("creator-container").addEventListener("dragenter", fileDragOver);
+dropZone.addEventListener("dragenter", fileDragOver);
+dropZone.addEventListener("dragover", fileDragOver);
+
+/**
+ * Hides (`display: none`) dropzone
+ * @param {DragEvent} e
+ */
+function fileDragLeave(e){
+	e.stopPropagation();
+	e.preventDefault();
+	dropZone.style.display = "none";
+}
+dropZone.addEventListener("dragleave", fileDragLeave);
+dropZone.addEventListener("dragend", fileDragLeave);
+
+/**
+ * Loads (first) dropped file
+ * @param {DragEvent} e event fired on file drop
+ */
+function dropHandler(e){
+	e.stopPropagation();
+	e.preventDefault();
+	var files = e.dataTransfer.files; // Array of all files
+	let anyFile = false;
+	for(let a = 0; a < files.length; a++){
+		if((files[a].path.toLowerCase().endsWith(".jpg") || files[a].path.toLowerCase().endsWith(".jpeg") || files[a].path.toLowerCase().endsWith(".png")) && fileExists(files[a].path)){
+			if(files.length > 1)
+				alert("Wybrano wiele plików. Załadowany zostanie pierwszy z nich");
+			files = files[a];
+			anyFile = true;
+			break;
+		}
+	}
+	if(!anyFile)
+		files = [];
+	if(files.length == 0){
+		alert("Upewnij się, że plik ma rozszerzenie .jpg, .jpeg lub .png");
+	} else {
+		loadFile([files.path]);
+	}
+	dropZone.style.display = "none";
+}
+dropZone.addEventListener("drop", dropHandler);
+
 /**
  * Change tab to one pointed by event
  * @param {MouseEvent} event received event

style.css

@@ -184,17 +184,32 @@ body {
 #appVer {
 	font-weight: 700;
 }
+#droparea {
+	position: absolute;
+	width: 100vw;
+	height: calc(100vh - var(--win32-title-bar-height) - var(--menu-tabs-height));
+	top: calc(var(--win32-title-bar-height) + var(--menu-tabs-height));
+	left: 0;
+	background-color: #d0f2f3;
+	opacity: 0.7;
+	display: none;
+}
+.dropareatext {
+	margin: auto;
+	width: fit-content;
+	color: blue;
+	position: relative;
+	top: calc((100vh - var(--win32-title-bar-height) - var(--menu-tabs-height) - 89px) / 2); /* Height is 89px (calculated by chromium) */
+	border: 3px dashed;
+    padding: 20px;
+	font-weight: 700;
+    font-size: 2em;
+}
 /* width */
 ::-webkit-scrollbar {
 	width: 4px;
 }
 
-/* Track */
-/*::-webkit-scrollbar-track {
-	box-shadow: inset 0 0 5px grey;
-	border-radius: 2px;
-}*/
-
 /* Handle */
 ::-webkit-scrollbar-thumb {
 	background: rgb(189, 189, 189);