actual restructure, previuos commit premature

author: Rasmus Luha <rasmus.luha@gmail.com> 2022-11-05 23:13:57 +0200
committer: Rasmus Luha <rasmus.luha@gmail.com> 2022-11-05 23:13:57 +0200
commit: 1c973624785b77e97791be8c917c4c13b7418be0 (patch)
tree: d591c0bc571c03de69a128fd895cab22326c8a08 /rannak/mangud
parent: f2318deacde703df99fce50800b58f7e6e759e8b (diff)
14 files changed, 758 insertions, 0 deletions
diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html
new file mode 100644
index 0000000..9944db7
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/index.html
@@ -0,0 +1,179 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=, initial-scale=1.0">
+    <title>Kuusused</title>
+    <link rel="stylesheet" href="styles.css">
+    <!-- Bootstrap - CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+</head>
+
+<body class="bg-dark text-white">
+
+    <div class="container text-center text-white align-items-center pb-5">
+        <h1 class="pb-1 pt-2">Kuulsused</h1>
+        <p>Vii kokku inimese nimi ja nägu.</p>
+
+		<div class="row">
+	  	  <div>
+            <button class="moveOn" disabled>Liigu Edasi</button>
+	  	  </div>
+
+		</div>
+
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+          Sissejuhatus
+        </button>
+
+
+    </div>
+
+
+    <!-- Modal -->
+    <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+
+          <div class="modal-header">
+            <h5 class="modal-title" id="myModalLabel">Sissejuhatav info Kuulsuste Mängule</h5>
+            <button type="button" class="closeModalButton" data-bs-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+
+          <div class="modal-body">
+            Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
+            Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est,
+            sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
+            nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
+            <br/>
+            Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
+            Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est,
+            sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
+            nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
+            <br/>
+            odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
+            arcu non odio euismod lacinia at quis risus sed vulputate odio. nullam non nisi est,
+            sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
+            nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+
+	<!-- Esimene rida -->
+	<div class="lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/pats.jpg" alt="Konstantin Päts img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="pats" class="list"></div>
+		</div>
+
+		<div class="list col startBasket text-center">
+	  	  <div id="pats" class="list-item" draggable="true">Konstantin Päts</div>
+	  	  <div id="karis" class="list-item" draggable="true">Alar Karis</div>
+	  	  <div id="meri" class="list-item" draggable="true">Lennart Meri</div>
+	  	  <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div>
+	  	  <div id="ilves" class="list-item" draggable="true">Toomas Hendrik Ilves</div>
+	  	  <div id="kaljulaid" class="list-item" draggable="true">Kersti Kaljulaid</div>
+	  	  <div id="queen" class="list-item" draggable="true">Elizabth II</div>
+	  	  <div id="galileo" class="list-item" draggable="true">Galileo Galilei</div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/karis.jpg" alt="Alar Karis img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="karis" class="list"></div>
+		</div>
+
+	  </div>
+	</div>
+
+	<!-- Teine rida -->
+
+	<div class="lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/ruutel.jpg" alt="Arnold Rüütel img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="ruutel" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/galileo.jpg" alt="Galileo img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="galileo" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/queen.jpg" alt="Queen img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="queen" class="list"></div>
+		</div>
+			
+		  </div>
+		</div>
+
+	<!-- Kolmas Rida -->
+
+	<div class="lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/kaljulaid.jpg" alt="Kersti Kaljulaid img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="kaljulaid" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/ilves.jpg" alt="Toomas Hendrik Ilves img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="ilves" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/meri.jpg" alt="Lennart Meri img">
+          <p>
+            "Siia Lühikene info sellekohta Kes oli ja Mida tegi.
+            natuke placeholder teksti veel ja nii ja naa ja see ka."
+          </p>
+		  <div id="meri" class="list"></div>
+		</div>
+
+	  </div>
+	</div>
+    
+    <script src="script.js"></script>    
+
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg b/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg
new file mode 100644
index 0000000..311780c
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg b/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg
new file mode 100644
index 0000000..026be4a
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg b/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg
new file mode 100644
index 0000000..2b1a230
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/karis.jpg b/rannak/mangud/partorg/kuulsused/pildid/karis.jpg
new file mode 100644
index 0000000..ebaf172
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/karis.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/meri.jpg b/rannak/mangud/partorg/kuulsused/pildid/meri.jpg
new file mode 100644
index 0000000..978f915
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/meri.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/pats.jpg b/rannak/mangud/partorg/kuulsused/pildid/pats.jpg
new file mode 100644
index 0000000..07b4fff
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/pats.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/queen.jpg b/rannak/mangud/partorg/kuulsused/pildid/queen.jpg
new file mode 100644
index 0000000..bc0aea5
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/queen.jpg
diff --git a/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg b/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg
new file mode 100644
index 0000000..5cf9c07
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg
diff --git a/rannak/mangud/partorg/kuulsused/script.js b/rannak/mangud/partorg/kuulsused/script.js
new file mode 100644
index 0000000..13b9d1d
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/script.js
@@ -0,0 +1,71 @@
+const list_items = document.querySelectorAll(".list-item");
+const lists = document.querySelectorAll(".list");
+
+let draggedItem = null;
+
+for (let i=0; i < list_items.length; i++){
+	const item = list_items[i];
+
+	/* Event Listeners */
+	item.addEventListener("dragstart", e => {
+		draggedItem = item;
+		setTimeout(() => (item.style.display = "none"), 0);
+	});
+
+	item.addEventListener("dragend", e => {
+		setTimeout(() => {
+			draggedItem.style.display = "block";
+			draggedItem = null}, 0);
+		checkIfAllGood();
+	});
+
+	for (let j=0; j < lists.length; j++){
+		const list = lists[j];
+
+		/* Event Listeners */
+
+		list.addEventListener("dragenter",e => (e.preventDefault()));
+
+		list.addEventListener("dragover",e => {
+			e.preventDefault();
+			list.style.backgroundColor = "rgba(0,0,0,0.5)";
+		});
+
+
+		list.addEventListener("dragleave",e => {
+			list.style.backgroundColor = "rgba(0,0,0,0.3)";
+		});
+
+
+		list.addEventListener("drop",e => { 
+			if (list.children.length == 0 || list.className.includes("startBasket"))
+				list.append(draggedItem);
+			list.style.backgroundColor = "rgba(0,0,0,0.5)";
+		})
+	}
+
+}
+
+function checkIfAllGood(){
+	let rightDone = [];
+
+	for (let j=0; j < lists.length; j++){
+		const list = lists[j];
+		if (list.className.includes("startBasket"))
+			continue;
+		else if (list.children.length == 1){
+			if (list.id == list.children[0].id){
+				if (!rightDone.includes(list.id))
+					rightDone.push(list.id);
+				console.log(rightDone.length);
+				console.log(rightDone);
+			}
+		}
+	}  // For loop end
+
+	if (rightDone.length == 8) {
+        const btn = document.querySelector(".moveOn");
+        btn.disabled = false;
+        btn.onclick = () => location.href = "";
+	}
+}
diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css
new file mode 100644
index 0000000..857c4c8
--- /dev/null
+++ b/rannak/mangud/partorg/kuulsused/styles.css
@@ -0,0 +1,91 @@
+* {
+	box-sizing: border-box !important;
+}
+
+.moveOn{
+    display: inline-block;
+    border: none;
+    padding: 6px 12px;
+    margin-botton: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #4BB543;
+    color: white;
+}
+
+button:disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.row {
+    margin: 0 5% !important;
+}
+
+img {
+	max-width: 15rem !important;
+	height: auto !important;
+	padding: .3rem;
+}
+
+  
+.lists .list .list-item {
+	background-color: #b2beb5 !important;
+	color: #21201E;
+	margin: 0.5rem 0;
+	height: 2.5rem;
+	border-radius: 8px !important;
+    cursor: pointer;
+}
+
+.lists .list {
+	background-color: rgba(0, 0, 0, 0.3);
+	min-height: 2.5rem;
+	margin: .5rem;
+	border-radius: 8px !important;
+}
+
+.startBasket {
+	height: 100% !important;
+	min-height: 2rem;
+}
+
+
+/* Modal Stuff */
+
+/*
+.modalButton {
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 6px;
+    color: #fff;
+    margin: 3%;
+}
+*/
+
+.closeModalButton {
+  border-radius: 50px;
+}
+
+.modalButton{
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 6px;
+    padding: 9px 25px;
+    background-color: rgba(0,136,169,1) !important;
+    border: none !important;
+    border-radius: 50px !important;
+    cursor: pointer !important;
+    transition: all 0.3 ease 0 !important;
+    margin: 3% !important;
+    font-size: 1.2rem !important;
+}
+
+.modalButton:hover{
+    background-color: rgba(0,136,169,0.8) !important;
+}
diff --git a/rannak/mangud/uliopilane/utlused/css/utlused.css b/rannak/mangud/uliopilane/utlused/css/utlused.css
new file mode 100644
index 0000000..e7c5277
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/css/utlused.css
@@ -0,0 +1,128 @@
+/* Mäng ise */
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Montserrat', sans-serif;
+  background-color: #eee;
+  color: #111;
+  touch-action: none;
+}
+
+.moveOn{
+    display: inline-block;
+    border: none;
+    padding: 6px 12px;
+    margin-botton: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #4BB543;
+    color: white;
+}
+
+button:disabled{
+    opacity: 0.5;
+}
+
+/* later added stuff here */ 
+
+.wrapper {
+  outline: 1px solid gold;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.empty {
+  width: 7rem;
+  height: 7rem;
+}
+
+.drag {
+  position: absolute;
+  width: 7rem;
+  height: 7rem;
+  z-index: 1;
+}
+
+.active {
+  background-color: grey !important;
+}
+
+.done {
+  background-color: green !important;
+}
+
+/* end of later added stuff */
+
+
+.draggable-elements {
+  display: flex;
+  justify-content: center;
+  margin: 2rem;
+}
+.draggable {
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  margin: 0rem 1rem;
+  cursor: move;
+  transition: opacity 0.2s;
+}
+
+.droppable {
+  height: 10rem;
+  width: 25rem;
+  margin: 1rem auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  font-size: 8rem;
+  font-weight: bold;
+  background-color: #fff;
+  border: 3px dashed #111;
+  transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
+}
+.droppable span {
+  font-size: 1.25rem;
+  pointer-events: none; /* The element is never the target of pointer events */
+}
+
+/* Drag and Drop Related Styling */
+
+.droppable.droppable-hover {
+  /* background-color: #bee3f0; */
+  border-width: 5px;
+  transform: scale(1.1);
+}
+.droppable.dropped {
+  border-style: solid;
+  color: #fff;
+}
+.droppable.dropped span {
+  font-weight: bolder;
+  margin-top: 0.5rem;
+}
+.droppable.dropped i {
+  pointer-events: none;
+}
+.draggable.dragged {
+  user-select: none;
+  cursor: default;
+}
+.draggable.dragged:hover {
+  opacity: 0.1;
+}
diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html
new file mode 100644
index 0000000..510c62d
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kuulsad Ütlused</title>
+  <link rel="stylesheet" href="css/utlused.css">
+
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type=text/css href="utlused.css">
+    <!-- Bootstrap - CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+</head>
+<body class="bg-dark">
+  <div class="wrapper container draggable-elements align-items-center">
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #ff6384;" id="valk">Heinz Valk</div>
+      </div>
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #36a2eb;" id="savisaar"> Edgar Savisaar </div>
+      </div>
+
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #ffce56;" id="leemet"> Jüri Leesment </div>
+      </div>
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #69359c;" id="runnel"> Hando Runnel </div>
+      </div>
+
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #377f44;" id="interrinne"> Interrinde toeatjad </div>
+      </div>
+
+      <div class="empty ">
+        <div class="drag draggable" draggable="true" style="color: #141414;" id="lauristin"> Marju Lauristin </div>
+      </div>
+
+
+	  <div class="row">
+		<div>
+              <button class="moveOn" disabled>Liigu Edasi</button>
+		</div>
+      </div> <!-- Row End -->
+
+	  
+	  
+  </div>  
+
+  <div class="container">
+
+    <div class="row">
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="leemet"><span>"Eestlane olen ja eestlaseks jään"</span></div>
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="valk"><span>"Ükskord me võidame niikuinii" (Eestimaa Laul 11.09.1988)</span></div>
+    </div>			  
+			  
+    <div class="row">		  
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="savisaar"><span>"Toompead rünnatakse! Ma kordan - Toompead rünnatakse!"</span></div>
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="runnel"><span>"Maa tuleb täita lastega" (ans. Justamendi laul 1987)</span></div>
+    </div>
+
+    <div class="row">
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="interrinne"><span>"Арнольд Рюйтель, выходи один!" 15.05.1990"</span></div>
+      <div class="droppable col-12 col-sm-6 empty" data-draggable-id="lauristin"><span>"Mõistusega. Lauluga. Südamega. Just nii me olemegi kõige tugevamad"</span></div>
+    </div>
+
+  </div> 
+
+
+  </div>  
+
+  <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js
new file mode 100644
index 0000000..4262d41
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/js/main.js
@@ -0,0 +1,209 @@
+// Detecting part
+const isMobile = function(){
+    const match = window.matchMedia('(pointer:coarse)');
+    return (match && match.matches)
+}
+console.log(`${isMobile() ? 'mobile' : 'not mobile'}`);
+
+// Global Variables for Mobile
+let originalX = 0;
+let originalY = 0;
+let counter = 0;
+let itemAppend = null;
+
+if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') {
+
+    const draggableElements = document.querySelectorAll(".draggable");
+    const droppableElements = document.querySelectorAll(".droppable");
+    
+    draggableElements.forEach(elem => {
+	elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data
+	// elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged
+	// elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete
+    });
+    
+    droppableElements.forEach(elem => {
+	elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target
+	elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone
+	elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target
+	elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target
+    });
+    
+    // Drag and Drop Functions //
+    
+    //Events fired on the drag target
+    function dragStart(event) {
+	event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value
+    }
+    
+    //Events fired on the drop target
+    function dragEnter(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.target.classList.add("droppable-hover");
+	}
+    }
+    
+    function dragOver(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.preventDefault(); // Prevent default to allow drop
+	}
+    }
+    
+    function dragLeave(event) {
+	if(!event.target.classList.contains("dropped")) {
+	    event.target.classList.remove("droppable-hover");
+	}
+    }
+    
+    
+    function drop(event) {
+
+	event.preventDefault(); // This is in order to prevent the browser default handling of the data
+	event.target.classList.remove("droppable-hover");
+	const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method
+	const droppableElementData = event.target.getAttribute("data-draggable-id");
+	const isCorrectMatching = draggableElementData === droppableElementData;
+
+	if(isCorrectMatching) {
+	    const draggableElement = document.getElementById(draggableElementData);
+	    event.target.classList.add("dropped");
+	    // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: 
+	    event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color;
+	    draggableElement.classList.add("dragged");
+	    draggableElement.setAttribute("draggable", "false");
+	    event.target.insertAdjacentHTML("afterbegin", `<i class="fas fa-${draggableElementData}"></i>`);
+	    
+	    counter++;
+		console.log("counter:", counter)
+	    if (counter == 6){
+            const btn = document.querySelector(".moveOn");
+            btn.disabled = false;
+            btn.onclick = () => location.href = "../../rolliValik";
+	    }
+	} // If isCorrectMatchingEnd
+  }  // Drop Func End
+
+}  // If Desktop End
+
+
+//If mobile
+
+else{
+
+	const empty = Array.from(document.querySelectorAll('.empty'));
+	const drags = document.querySelectorAll('.drag');
+
+	drags.forEach(drag => {
+		drag.addEventListener('pointerdown', pointerDown);
+		drag.addEventListener('pointermove', pointerMove);
+		drag.addEventListener('pointerup', pointerUp);
+	})
+	
+	
+	// Function when start touch
+	function pointerDown(e){
+		e.preventDefault();
+
+		let remVal = parseInt(getComputedStyle(document.documentElement).fontSize);
+		originalTop  =	e.target.getBoundingClientRect().top - 2*remVal;
+		originalLeft =	e.target.getBoundingClientRect().left - remVal;
+	}
+	
+	
+	// Function while movin
+	function pointerMove(e){
+		e.preventDefault();
+
+		//Scrolling Part
+		if (window.innerHeight - e.screenY < 600){
+			window.scrollBy({ 
+				top: 100, // could be negative value
+				behavior: 'smooth' 
+			});
+		}
+		
+		else if (e.clientY < 200){
+			window.scrollBy({ 
+				top: -100, // could be negative value
+				behavior: 'smooth' 
+			});
+		}
+
+		nimi = e.target;
+		if (!nimi.classList.contains('done')){
+			
+			nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`;
+			nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`;
+			
+			empty.map(item => {
+				if (
+					nimi.getBoundingClientRect().top    + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom &&
+						nimi.getBoundingClientRect().right  - nimi.offsetWidth / 2 > item.getBoundingClientRect().left &&
+						nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top &&
+						nimi.getBoundingClientRect().left   + nimi.offsetWidth / 2 < item.getBoundingClientRect().right
+				) {
+					item.classList.add('active');
+					itemAppend = item;
+				}
+				else {
+					item.classList.remove('active');
+				}
+			}); //empty.map loop end
+		} 
+		
+		// if currentDrag has class done
+		else{
+			console.log("has class done")
+		}
+		
+	}
+	
+	
+	// Function if touch is stopped
+	function pointerUp(e){
+		e.preventDefault();
+
+		if (itemAppend != null){
+			
+			if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) {
+				this.classList.add('done')
+				this.parentElement.classList.add('done')
+				itemAppend.classList.add('done');
+				itemAppend.classList.remove('active');
+				
+				this.style.top = `${originalTop}px`;
+				this.style.left = `${originalLeft}px`;
+				//this.innerHTML="";
+				
+				counter++;
+				console.log("counter:", counter)
+				if (counter == 6){
+                    const btn = document.querySelector(".moveOn");
+                    btn.disabled = false;
+                    btn.onclick = () => location.href = "../../rolliValik";
+				}
+				
+			}
+			else {
+				
+				this.style.top = `${originalTop}px`;
+				this.style.left = `${originalLeft}px`;
+				this.parentElement.appendChild(this);
+				itemAppend.classList.remove('active');
+			}
+		}
+		else {
+			this.style.top = `${originalTop}px`;
+			this.style.left = `${originalLeft}px`;
+			console.log("FakAp");
+		}  // PointerUp Func End
+
+		window.scroll({ 
+			top: 0,
+			left: 0, 
+			behavior: 'smooth' 
+		});
+	}
+
+
+} // If mobile End
author	Rasmus Luha <rasmus.luha@gmail.com>	2022-11-05 23:13:57 +0200
committer	Rasmus Luha <rasmus.luha@gmail.com>	2022-11-05 23:13:57 +0200
commit	1c973624785b77e97791be8c917c4c13b7418be0 (patch)
tree	d591c0bc571c03de69a128fd895cab22326c8a08 /rannak/mangud
parent	f2318deacde703df99fce50800b58f7e6e759e8b (diff)