tSark game donw

author: Rasmus Luha <rasmus.luha@gmail.com> 2022-12-12 02:22:36 +0200
committer: Rasmus Luha <rasmus.luha@gmail.com> 2022-12-12 02:22:36 +0200
commit: ee0da175151b4d48d4ef27f7acd8d3f9def25986 (patch)
tree: 3c573f047033b14220f58940d02204de55cd3889
parent: a4894308d09fb826ea6323060be25f22a24ff9a4 (diff)
8 files changed, 235 insertions, 53 deletions
diff --git a/rannak/mangud/index.html b/rannak/mangud/index.html
index 50f8d0e..c7d08a9 100644
--- a/rannak/mangud/index.html
+++ b/rannak/mangud/index.html
@@ -35,8 +35,8 @@
       <h3>Üliõpilane</h3>
 	  <ol>
 		<li><a href="uliopilane/ajatelg">Ajatelg</a></li>
+		<li><a href="uliopilane/tSark">T-Särk</a>
 		<li><a href="uliopilane/utlused">Ütlused</a>
-		<li></li>
         </li>
 	  </ol>
 	</div>
diff --git a/rannak/mangud/test/img/shirtImg.jpg b/rannak/mangud/test/img/shirtImg.jpg
deleted file mode 100644
index b469eee..0000000
--- a/rannak/mangud/test/img/shirtImg.jpg
+++ /dev/null
diff --git a/rannak/mangud/uliopilane/tSark/img/picLink.txt b/rannak/mangud/uliopilane/tSark/img/picLink.txt
new file mode 100644
index 0000000..091d2df
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/img/picLink.txt
@@ -0,0 +1 @@
+https://www.freepik.com/premium-vector/stylized-simple-outline-map-estonia-icon-blue-sketch-map-estonia-vector-illustration_18650569.html
diff --git a/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
new file mode 100644
index 0000000..93f10de
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
diff --git a/rannak/mangud/test/img/tshirt.svg b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
index 19a7205..19a7205 100644
--- a/rannak/mangud/test/img/tshirt.svg
+++ b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
diff --git a/rannak/mangud/test/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 11a25a0..382c382 100644
--- a/rannak/mangud/test/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -1,8 +1,8 @@
-<html>
+<html lang"ee">
   <head>
     <title>Särgi Kujundus</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link href="style.css" rel="stylesheet"/>
-
      <!-- 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
       -->
@@ -17,7 +17,7 @@
       <svg viewBox="0 0 512 512">
         <g transform="translate(0,448)">
           <path id="sark" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
-          <text id="sarkTekst" x="200" y="-200" transform="rotate(0)" >Testing</text>
+          <text class="sarkTekst doneTekst" x="200" y="-200" transform="rotate(0)" >Tekst</text>
         </g>
       </svg>
 
@@ -31,12 +31,15 @@
 	      <p>
             Kujunda enda T-särk. Edasi liikumiseks peab olema
             kasutatud kõik kujundamise võimalused. Kui arvad, et särk on valmis,
-            siis kontorlli nupuga "Särk Valmis".
+            siis kontorlli nupuga, kas särk on valmis".
           </p>
 
           <div>
-            <button class="checkMoveOn">Särk Valmis</button>
+            <button class="checkMoveOn">Kontrolli, kas särk valmis</button>
             <button class="moveOn" disabled>Liigu Edasi</button>
+
+            <div class="messageBox">
+            </div>
           </div>
 
           <div class="muutused">
@@ -63,7 +66,10 @@
 
               <label for="sargiText">Vali tekst:</label>
               <input id="sargiText" type="text" placeholder="Sinu tekst siia"/>
+              <!-- 
               <button id="tekstBtn" onclick="getInputValue();">Muuda Teksti</button>
+              -->
+              <button id="nextTekstBtn" onclick="nextText();">Veel üks Tekst</button>
 
               <div class="textAddWrapper">
                 <span class="ules">&uarr;</span>
@@ -81,24 +87,25 @@
 
               </div>
 
+            </div>  <!-- TextPos End -->
+
+            <div class="nulliBtn">
+              <label for="nulliBtn">Nulli Särk:</label>
+              <button class="nulliBtn">Nulli särk</button>
             </div>
             
-
           </div>
 
-          
       </div>
 
-
       <!-- Resizable Img -->
+          <div class="item">
+            <div class="resizer ne"></div>
+            <div class="resizer nw"></div>
+            <div class="resizer se"></div>
+            <div class="resizer sw"></div>
+          </div>
 
-      <div class="item">
-        <div class="resizer ne"></div>
-        <div class="resizer nw"></div>
-        <div class="resizer se"></div>
-        <div class="resizer sw"></div>
-      </div>
-        
     </div>
 
     
diff --git a/rannak/mangud/test/main.js b/rannak/mangud/uliopilane/tSark/main.js
index 7d16bb4..98786f2 100644
--- a/rannak/mangud/test/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -42,11 +42,52 @@ image_input.addEventListener("change", () => {
 
 /* 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;
-    let sarkTekst = document.querySelector("#sarkTekst");
+    //Txt
+    let sarkTekst = document.querySelector(".sarkTekst");
     sarkTekst.innerHTML = inputVal;
 
     if (!stuffDone.includes("newTxt"))
@@ -64,6 +105,7 @@ function enterSubmit(){
         });
 }
 enterSubmit()
+*/
 
 
 // Color
@@ -71,10 +113,10 @@ enterSubmit()
 let colorText = document.querySelector("#colorText");
 colorText.addEventListener("input", () => {
     let color = colorText.value;
-    document.querySelector("#sarkTekst").style.fill = color;
+    document.querySelector(".sarkTekst").style.fill = color;
 
-    if (!stuffDone.includes("txtColor"))
-        stuffDone.push("txtColor");
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
 })
 
 // Position
@@ -83,58 +125,70 @@ const alla = document.querySelector(".alla");
 const vasak = document.querySelector(".vasak");
 const parem = document.querySelector(".parem");
 
-let tmpX = document.querySelector("#sarkTekst").x;
-let tmpY = document.querySelector("#sarkTekst").y;
-
 ules.addEventListener("click" , () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
     tmpY.baseVal[0].value-=10;
     
-    if (!stuffDone.includes("txtPos"))
-        stuffDone.push("txtPos");
+    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("txtPos"))
-        stuffDone.push("txtPos");
+    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("txtPos"))
-        stuffDone.push("txtPos");
+    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("txtPos"))
-        stuffDone.push("txtPos");
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
 });
 
 
 // Vertical Pos
 const vasakule = document.querySelector(".vertVasak");
 const paremale = document.querySelector(".vertParem");
-let testing = document.querySelector("#sarkTekst");
-
 let angle=0;
+
 vasakule.addEventListener("click" , () => {
-    angle +=5
+    let testing = document.querySelector(".sarkTekst");
+
+    angle -=5
     testing.setAttribute("transform", "rotate("+angle+")");
 
-    if (!stuffDone.includes("txtPos"))
-        stuffDone.push("txtPos");
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
 });
 
 paremale.addEventListener("click" , () => {
-    angle -=5
+    let testing = document.querySelector(".sarkTekst");
+
+    angle +=5
     testing.setAttribute("transform", "rotate("+angle+")");
 
-    if (!stuffDone.includes("txtPos"))
-        stuffDone.push("txtPos");
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
 });
 
 
@@ -143,30 +197,34 @@ paremale.addEventListener("click" , () => {
 
 const plus = document.querySelector(".plus");
 const minus = document.querySelector(".minus");
-let sarkForText = document.querySelector("#sarkTekst");
 let sarkFontSize = 20;
 
 plus.addEventListener("click" , () => {
+    let sarkForText = document.querySelector(".sarkTekst");
+
     sarkFontSize +=2;
     sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
 
-    if (!stuffDone.includes("tekstFont"))
-        stuffDone.push("tekstFont");
+    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("tekstFont"))
-        stuffDone.push("tekstFont");
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
 });
 
 
+
+
 /* Rezisable Image Stuff */
 
 const el = document.querySelector(".item");
-
 let isResizing = false;
 
 el.addEventListener("mousedown", mousedown);
@@ -180,6 +238,31 @@ 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);
+
+          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()
+      }
+
+      else {
+
       let newX = prevX - e.clientX;
       let newY = prevY - e.clientY;
 
@@ -190,6 +273,8 @@ function mousedown(e) {
 
       prevX = e.clientX;
       prevY = e.clientY;
+          
+      }
     }
   }
 
@@ -197,6 +282,7 @@ function mousedown(e) {
     window.removeEventListener("mousemove", mousemove);
     window.removeEventListener("mouseup", mouseup);
   }
+
 }
 
 
@@ -218,6 +304,7 @@ for (let resizer of resizers) {
     window.addEventListener("mouseup", mouseup);
 
     function mousemove(e) {
+
       const rect = el.getBoundingClientRect();
 
       if (currentResizer.classList.contains("se")) {
@@ -258,18 +345,34 @@ 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;
+
 
 
 /* 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", () => {
-    if (stuffDone.length == 6)
+chkBtn.addEventListener("click", (e) => {
+
+    if (stuffDone.length >= 3){
+        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "green");
         moveOnEnable();
-    console.log(stuffDone.length);
+    }
+    else
+        message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
 });
 
 function moveOnEnable(){
@@ -279,3 +382,52 @@ function moveOnEnable(){
 }
 
 // 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;
+
+})
diff --git a/rannak/mangud/test/style.css b/rannak/mangud/uliopilane/tSark/style.css
index 822f048..0bac36a 100644
--- a/rannak/mangud/test/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -44,6 +44,14 @@ button:disabled{
     color: white;
 }
 
+.checkMoveOn{
+    margin: 0 25px;
+}
+
+.messageBox {
+    padding-top: 7px;
+}
+
 
 
 /* Svg stuff*/
@@ -59,7 +67,7 @@ svg {
     stroke-width: 5px;
 }
 
-#sarkTekst {
+.sarkTekst {
     fontSize: 20px;
     fill: black;
     transform-box: fill-box;
@@ -67,6 +75,11 @@ svg {
 }
 
 
+.doneTekst{
+    transform-box: fill-box;
+    transform-origin: center;
+}
+
 
 /*Muutuste osa*/
 
@@ -81,7 +94,7 @@ svg {
     margin-top: 5px;
 }
 
-.textPos {
+.textPos, .nulliBtn{
     margin-top: 10px;
 }
 
@@ -97,19 +110,28 @@ svg {
     cursor: pointer;
 }
 
+.nulliBtn {
+    font-size: 1.2rem;
+}
+
 
 
 /* Img item stuff */
 
 .item {
-    height: 300px;
-    width: 300px;
+    height: 20%;
+    width: 20%;
     position: absolute;
     background-image: url("img/shirtImg.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
-    top: 60%;
+    top: 50vh;
+    /*
+    top: 50%;
     right: 50%;
+    top: calc(50% - 300px);
+    right: calc(50% - 300px);
+    */
 }
 
 .resizer {
author	Rasmus Luha <rasmus.luha@gmail.com>	2022-12-12 02:22:36 +0200
committer	Rasmus Luha <rasmus.luha@gmail.com>	2022-12-12 02:22:36 +0200
commit	ee0da175151b4d48d4ef27f7acd8d3f9def25986 (patch)
tree	3c573f047033b14220f58940d02204de55cd3889
parent	a4894308d09fb826ea6323060be25f22a24ff9a4 (diff)