Hinnad mäng for Arimees + fonts

1 files changed, 537 insertions, 0 deletions

diff --git a/rannak/mangud/uliopilane/tSark/main.js.bak b/rannak/mangud/uliopilane/tSark/main.js.bak
new file mode 100644
index 0000000..2685ad4
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/main.js.bak
@@ -0,0 +1,537 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+/*Muutused Stuff*/
+
+// Särgi color
+
+let colorFill = document.querySelector("#colorFiller");
+let colorStroke = document.querySelector("#colorStroke");
+
+colorFill.addEventListener("input", () => {
+    let color = colorFill.value;
+    document.querySelector("#sark").style.fill = color;
+
+    if (!stuffDone.includes("sarkColor"))
+        stuffDone.push("sarkColor");
+})
+
+colorStroke.addEventListener("input", () => {
+    let color = colorStroke.value;
+    document.querySelector("#sark").style.stroke = color;
+
+    if (!stuffDone.includes("sarkColor"))
+        stuffDone.push("sarkColor");
+})
+
+
+// Img upload
+
+const image_input = document.querySelector("#image_input");
+let uploadedImg = "";
+
+image_input.addEventListener("change", () => {
+    const reader = new FileReader();
+    reader.readAsDataURL(image_input.files[0])
+    reader.addEventListener("load", () => {
+        uploadedImg = reader.result;
+        document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})`
+    });
+
+    if (!stuffDone.includes("newImg"))
+        stuffDone.push("newImg");
+})
+
+
+/* Teksti Teema */
+
+// Uus Tekst
+
+function nextText() {
+    document.querySelector("#sargiText").value = "";
+
+    let curText = document.querySelector(".sarkTekst")
+    let newText = curText.cloneNode(true);
+    curText.classList.remove("sarkTekst")
+
+    //Reset Stuff
+    let angle=0;
+    let sarkFontSize = 20;
+    
+    let gi6 = document.querySelector("g")
+    newText.classList.add("sarkTekst")
+    newText.innerHTML = "Uus Tekst";
+    gi6.appendChild(newText);
+}
+
+
+
+// Input
+
+function chgTxt() {
+
+    let tekstVali = document.querySelector("#sargiText");
+    tekstVali.addEventListener("keyup", () => {
+        let sarkTekst = document.querySelector(".sarkTekst");
+        sarkTekst.innerHTML = tekstVali.value;
+
+        if (!stuffDone.includes("txt"))
+            stuffDone.push("txt");
+    });
+}
+
+chgTxt()
+
+
+/*
+function getInputValue() {
+    // Selecting the input element and get its value 
+
+    //Btn
+    let inputVal = document.getElementById("sargiText").value;
+    //Txt
+    let sarkTekst = document.querySelector(".sarkTekst");
+    sarkTekst.innerHTML = inputVal;
+
+    if (!stuffDone.includes("newTxt"))
+        stuffDone.push("newTxt");
+}
+
+function enterSubmit(){
+    document.getElementById('sargiText')
+    .addEventListener('keyup', event => {
+            if (event.code === 'Enter')
+            {
+                event.preventDefault();
+                getInputValue();
+            }
+        });
+}
+enterSubmit()
+*/
+
+
+// Color
+
+let colorText = document.querySelector("#colorText");
+colorText.addEventListener("input", () => {
+    let color = colorText.value;
+    document.querySelector(".sarkTekst").style.fill = color;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+})
+
+// Position
+const ules = document.querySelector(".ules");
+const alla = document.querySelector(".alla");
+const vasak = document.querySelector(".vasak");
+const parem = document.querySelector(".parem");
+
+ules.addEventListener("click" , () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpY.baseVal[0].value-=10;
+    
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+alla.addEventListener("click" , () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpY.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+vasak.addEventListener("click", () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpX.baseVal[0].value-=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+parem.addEventListener("click", () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpX.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+// Vertical Pos
+const vasakule = document.querySelector(".vertVasak");
+const paremale = document.querySelector(".vertParem");
+let angle=0;
+
+vasakule.addEventListener("click" , () => {
+    let testing = document.querySelector(".sarkTekst");
+
+    angle -=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+paremale.addEventListener("click" , () => {
+    let testing = document.querySelector(".sarkTekst");
+
+    angle +=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+
+// FontZise
+
+const plus = document.querySelector(".plus");
+const minus = document.querySelector(".minus");
+let sarkFontSize = 20;
+
+plus.addEventListener("click" , () => {
+    let sarkForText = document.querySelector(".sarkTekst");
+
+    sarkFontSize +=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+minus.addEventListener("click" , () => {
+    let sarkForText = document.querySelector(".sarkTekst");
+
+    sarkFontSize-=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+
+
+// https://stackoverflow.com/questions/54076532/how-to-test-if-a-point-is-inside-an-svg-closed-path
+
+
+// Funcs to check whether draggable el inside Svg path
+
+function oMousePos(elmt, evt) {
+  let ClientRect = elmt.getBoundingClientRect();
+  return {
+    //object
+    x: Math.round(evt.clientX - ClientRect.left),
+    y: Math.round(evt.clientY - ClientRect.top)
+  };
+}
+
+function draggablePoints(m) {
+  //top left
+  draggable.p0s[0][0] = m.x - draggable.delta.x - 1;
+  draggable.p0s[0][1] = m.y - draggable.delta.y - 1;
+  //top right
+  draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1;
+  draggable.p0s[1][1] = m.y - draggable.delta.y + 1;
+  //bottom right
+  draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1;
+  draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1;
+  //bottom left
+  draggable.p0s[3][0] = m.x - draggable.delta.x + 1;
+  draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1;
+}
+
+
+m = {},// the mouse position
+thePath = document.querySelector("path"),
+
+/* Rezisable Image Stuff */
+draggable = document.querySelector(".item");
+
+draggable.addEventListener("mousedown", mousedown);
+
+// NEw stuff
+draggable.w = draggable.getBoundingClientRect().width;
+draggable.h = draggable.getBoundingClientRect().height;
+draggable.p0s = [[], [], [], []];//one array for every corner
+draggable.delta = {};// distance between the click point and the left upper corner
+
+
+
+function mousedown(e) {
+  window.addEventListener("mousemove", mousemove);
+  window.addEventListener("mouseup", mouseup);
+
+  // NEw stuff
+  draggable.delta = oMousePos(draggable, e);
+  //
+
+
+  let prevX = e.clientX;
+  let prevY = e.clientY;
+
+  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);
+
+          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";
+
+          prevX = e.clientX;
+          prevY = e.clientY;
+
+          mouseup()
+      }
+      */
+
+      let counter = 0;// how many corners are in path
+      //m = oMousePos(drag_parent, e);
+      m = oMousePos(thePath, e);
+      draggablePoints(m);
+      draggable.style.left = draggable.p0s[0][0] + 1 + "px";
+      draggable.style.top = draggable.p0s[0][1] + 1 + "px";
+
+      draggable.p0s.map(p => {
+          if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "sark") {
+              counter++;
+          }
+          console.log(counter, document.elementFromPoint(p[0], p[1]).id == "sark");
+      });
+
+      if (counter == 4){
+          console.log("moving");
+          let newX = prevX - e.clientX;
+          let newY = prevY - e.clientY;
+
+          const rect = draggable.getBoundingClientRect();
+
+          draggable.style.left = rect.left - newX + "px";
+          draggable.style.top = rect.top - newY + "px";
+
+          prevX = e.clientX;
+          prevY = e.clientY;
+      }
+
+      else {
+          console.log("Out of Bounds!");
+          //console.log(counter);
+          // Set it to init pos; from downtown
+          // it.style.left = brr.left + 200;
+          console.log(draggable.p0s);
+      }
+
+    }
+  }
+
+  function mouseup() {
+    window.removeEventListener("mousemove", mousemove);
+    window.removeEventListener("mouseup", mouseup);
+    //D = false;
+  }
+
+}
+
+
+
+
+// Resizing Pic
+
+
+let isResizing = false;
+const resizers = document.querySelectorAll(".resizer");
+let currentResizer;
+
+for (let resizer of resizers) {
+  resizer.addEventListener("mousedown", mousedown);
+
+  function mousedown(e) {
+    currentResizer = e.target;
+    isResizing = true;
+
+    let prevX = e.clientX;
+    let prevY = e.clientY;
+
+    window.addEventListener("mousemove", mousemove);
+    window.addEventListener("mouseup", mouseup);
+
+    function mousemove(e) {
+
+      const rect = draggable.getBoundingClientRect();
+
+      if (currentResizer.classList.contains("se")) {
+        draggable.style.width = rect.width - (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height - (prevY - e.clientY) + "px";
+      }
+        
+      else if (currentResizer.classList.contains("sw")) {
+        draggable.style.width = rect.width + (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height - (prevY - e.clientY) + "px";
+        draggable.style.left = rect.left - (prevX - e.clientX) + "px";
+      }
+
+      else if (currentResizer.classList.contains("ne")) {
+        draggable.style.width = rect.width - (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height + (prevY - e.clientY) + "px";
+        draggable.style.top = rect.top - (prevY - e.clientY) + "px";
+      }
+
+      else {
+        draggable.style.width = rect.width + (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height + (prevY - e.clientY) + "px";
+        draggable.style.top = rect.top - (prevY - e.clientY) + "px";
+        draggable.style.left = rect.left - (prevX - e.clientX) + "px";
+      }
+
+      prevX = e.clientX;
+      prevY = e.clientY;
+    }
+
+    function mouseup() {
+      window.removeEventListener("mousemove", mousemove);
+      window.removeEventListener("mouseup", mouseup);
+      isResizing = false;
+    }
+
+  } // Resizing mousedown end
+
+}
+
+// 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;
+
+
+
+
+
+
+
+/* Ending stuff + Reset */
+
+
+// Move on Button
+function message(msg, color){
+    messageBox = document.querySelector(".messageBox");
+    messageBox.innerHTML = msg;
+    messageBox.style.color = color;
+}
+
+
+let stuffDone = new Array();
+
+const chkBtn = document.querySelector(".checkMoveOn");
+
+chkBtn.addEventListener("click", (e) => {
+
+    if (stuffDone.length >= 3){
+        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543");
+        moveOnEnable();
+    }
+    else
+        message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
+});
+
+function moveOnEnable(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    btn.onclick = () => location.href = "../utlused";
+
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = 0;
+        elinjo.style.width = 0;
+    }
+
+}
+
+// 6
+
+
+
+// Reset Everything
+
+const nulliBtn = document.querySelector(".nulliBtn");
+nulliBtn.addEventListener("click", () => {
+
+    stuffDone = new Array();
+
+    //SarkColor
+    document.querySelector("#sark").style.fill = "white";
+
+    document.querySelector("#sark").style.stroke = "black";
+
+
+
+    // Tekstid
+    document.querySelector("#sargiText").value = "";
+
+    curText = document.querySelector(".sarkTekst");
+    newText = curText.cloneNode(true);
+    curText.classList.remove("sarkTekst");
+
+    let koikTekstid = document.querySelectorAll(".doneTekst");
+
+    for (let i = 0; i < koikTekstid.length; i++) {
+        koikTekstid[i].innerHTML = "";
+    }
+
+    //Reset Stuff
+    angle=0;
+    sarkFontSize = 20;
+    
+    let brro = document.querySelector("g")
+    newText.classList.add("sarkTekst")
+    newText.innerHTML = "Tekst";
+
+    brro.appendChild(newText);
+    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;
+
+
+    // Moving IMg Corners
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = "7px";
+        elinjo.style.width = "7px";
+    }
+
+})