Hinnad mäng for Arimees + fonts

1 files changed, 136 insertions, 63 deletions

diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index ddbd533..cc7ef3a 100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -65,6 +65,15 @@ function nextText() {
     let gi6 = document.querySelector("g")
     newText.classList.add("sarkTekst")
     newText.innerHTML = "Uus Tekst";
+
+    // Move a little, so that new txt isnt exatly on top of old.
+    let newYVal = newText.y.baseVal[0].value;
+    if (newYVal < -150)
+        newText.y.baseVal[0].value += 50;
+    else
+        newText.y.baseVal[0].value -= 50;
+    //console.log(newText.y.baseVal[0].value);
+
     gi6.appendChild(newText);
 }
 
@@ -229,10 +238,18 @@ minus.addEventListener("click" , () => {
 
 
 
+
+
+
+
+
+
+
+
+
 /* Rezisable Image Stuff */
 
 const el = document.querySelector(".item");
-let isResizing = false;
 
 el.addEventListener("mousedown", mousedown);
 
@@ -246,42 +263,57 @@ function mousedown(e) {
   function mousemove(e) {
     if (!isResizing) {
 
-      let item = document.querySelector(".item");
-      item.style.pointerEvents = "none";
-      let posers = document.elementFromPoint(e.x, e.y).id;
-      item.style.pointerEvents = "";
 
-      if (posers != "sark"){
-          console.log(posers);
+        const rect = el.getBoundingClientRect();
+
+        let item = document.querySelector(".item");
+        item.style.pointerEvents = "none";
+        //let posers = document.elementFromPoint(e.x, e.y).id;
+
+        // New Stuff
+        let posers = document.elementFromPoint(rect.left, rect.top).id;
+        let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+        let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+        let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+        // /// /////
+
+        console.log(posers, posers2, posers3, posers4);
+
+
+        item.style.pointerEvents = "";
 
-          let newX = prevX - e.clientX;
-          let newY = prevY - e.clientY;
 
-          const rect = el.getBoundingClientRect();
 
-          el.style.left = rect.left - newX + "px";
-          el.style.top = rect.top - newY + "px";
+        if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){
 
-          prevX = e.clientX;
-          prevY = e.clientY;
+            let newX = prevX - e.clientX;
+            let newY = prevY - e.clientY;
 
-          mouseup()
-      }
+            // Pic back to Center
+            let brr = document.querySelector("#sark").getBoundingClientRect();
+            el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+            el.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+            //el.style.top  = brr.bottom - 2*(rect.bottom - rect.top) + "px";
 
-      else {
 
-      let newX = prevX - e.clientX;
-      let newY = prevY - e.clientY;
+            prevX = e.clientX;
+            prevY = e.clientY;
+            mouseup()
+        }
 
-      const rect = el.getBoundingClientRect();
+        else {
 
-      el.style.left = rect.left - newX + "px";
-      el.style.top = rect.top - newY + "px";
+            let newX = prevX - e.clientX;
+            let newY = prevY - e.clientY;
 
-      prevX = e.clientX;
-      prevY = e.clientY;
-          
-      }
+            const rect = el.getBoundingClientRect();
+
+            el.style.left = rect.left - newX + "px";
+            el.style.top = rect.top - newY + "px";
+
+            prevX = e.clientX;
+            prevY = e.clientY;
+        }
     }
   }
 
@@ -294,8 +326,11 @@ function mousedown(e) {
 
 
 
+
 const resizers = document.querySelectorAll(".resizer");
 let currentResizer;
+let isResizing = false;
+
 
 for (let resizer of resizers) {
   resizer.addEventListener("mousedown", mousedown);
@@ -312,35 +347,69 @@ for (let resizer of resizers) {
 
     function mousemove(e) {
 
-      const rect = el.getBoundingClientRect();
-
-      if (currentResizer.classList.contains("se")) {
-        el.style.width = rect.width - (prevX - e.clientX) + "px";
-        el.style.height = rect.height - (prevY - e.clientY) + "px";
-      }
-        
-      else if (currentResizer.classList.contains("sw")) {
-        el.style.width = rect.width + (prevX - e.clientX) + "px";
-        el.style.height = rect.height - (prevY - e.clientY) + "px";
-        el.style.left = rect.left - (prevX - e.clientX) + "px";
-      }
-
-      else if (currentResizer.classList.contains("ne")) {
-        el.style.width = rect.width - (prevX - e.clientX) + "px";
-        el.style.height = rect.height + (prevY - e.clientY) + "px";
-        el.style.top = rect.top - (prevY - e.clientY) + "px";
-      }
-
-      else {
-        el.style.width = rect.width + (prevX - e.clientX) + "px";
-        el.style.height = rect.height + (prevY - e.clientY) + "px";
-        el.style.top = rect.top - (prevY - e.clientY) + "px";
-        el.style.left = rect.left - (prevX - e.clientX) + "px";
-      }
-
-      prevX = e.clientX;
-      prevY = e.clientY;
-    }
+        const rect = el.getBoundingClientRect();
+
+
+
+        let item = document.querySelector(".item");
+        item.style.pointerEvents = "none";
+        let posers = document.elementFromPoint(rect.left, rect.top).id;
+        let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+        let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+        let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+        item.style.pointerEvents = "";
+
+
+
+        if ( !(posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark")){
+
+            
+            if (currentResizer.classList.contains("se")) {
+                el.style.width = rect.width - (prevX - e.clientX) + "px";
+                el.style.height = rect.height - (prevY - e.clientY) + "px";
+            }
+            
+            else if (currentResizer.classList.contains("sw")) {
+                el.style.width = rect.width + (prevX - e.clientX) + "px";
+                el.style.height = rect.height - (prevY - e.clientY) + "px";
+                el.style.left = rect.left - (prevX - e.clientX) + "px";
+            }
+
+            else if (currentResizer.classList.contains("ne")) {
+                el.style.width = rect.width - (prevX - e.clientX) + "px";
+                el.style.height = rect.height + (prevY - e.clientY) + "px";
+                el.style.top = rect.top - (prevY - e.clientY) + "px";
+            }
+
+            else {
+                el.style.width = rect.width + (prevX - e.clientX) + "px";
+                el.style.height = rect.height + (prevY - e.clientY) + "px";
+                el.style.top = rect.top - (prevY - e.clientY) + "px";
+                el.style.left = rect.left - (prevX - e.clientX) + "px";
+            }
+
+        }
+
+        // If resizing out of boundaries
+        else{
+
+            if (currentResizer.classList.contains("se") || currentResizer.classList.contains("sw")) {
+                el.style.width = rect.width - 15 + "px";
+                el.style.height = rect.height - 15 + "px";
+                mouseup();
+            }
+            
+            if (currentResizer.classList.contains("ne") || currentResizer.classList.contains("nw")) {
+                el.style.width = rect.width - 15 + "px";
+                el.style.height = rect.height - 15 + "px";
+                mouseup();
+            }
+
+        }
+            prevX = e.clientX;
+            prevY = e.clientY;
+
+    } // Function mousemove end
 
     function mouseup() {
       window.removeEventListener("mousemove", mousemove);
@@ -354,9 +423,11 @@ for (let resizer of resizers) {
 
 // Seting up resize Pic Pos
 let brr = document.querySelector("#sark").getBoundingClientRect();
-let it = document.querySelector(".item");
-it.style.left = brr.left + 200;
-//it.style.top = brr.top + 300;
+let it = document.querySelector(".item").getBoundingClientRect();
+let Boop = document.querySelector(".item");
+//it.style.left = brr.left + 200;
+Boop.style.left = brr.left + (brr.right - brr.left)/2 - (it.right - it.left)/2 + "px";
+Boop.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 + "px";
 
 
 
@@ -438,11 +509,13 @@ nulliBtn.addEventListener("click", () => {
     document.querySelector(".sarkTekst").style.fill = "black";
 
 
-    // Seting up resize Pic Pos
-    let brr = document.querySelector("#sark").getBoundingClientRect();
-    let it = document.querySelector(".item");
-    it.style.left = brr.left + 200;
-    //it.style.top = brr.top + 300;
+
+    // Pic back to Center
+    let brr =  document.querySelector("#sark").getBoundingClientRect();
+    let rect = document.querySelector(".item").getBoundingClientRect();
+    el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+    el.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+
 
 
     // Moving IMg Corners