summaryrefslogtreecommitdiff
path: root/rannak/mangud
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud')
-rw-r--r--rannak/mangud/index.html2
-rw-r--r--rannak/mangud/test/img/shirtImg.jpgbin323806 -> 0 bytes
-rw-r--r--rannak/mangud/uliopilane/tSark/img/picLink.txt1
-rw-r--r--rannak/mangud/uliopilane/tSark/img/shirtImg.jpgbin0 -> 26450 bytes
-rw-r--r--rannak/mangud/uliopilane/tSark/img/tshirt.svg (renamed from rannak/mangud/test/img/tshirt.svg)0
-rw-r--r--rannak/mangud/uliopilane/tSark/index.html (renamed from rannak/mangud/test/index.html)37
-rw-r--r--rannak/mangud/uliopilane/tSark/main.js (renamed from rannak/mangud/test/main.js)216
-rw-r--r--rannak/mangud/uliopilane/tSark/style.css (renamed from rannak/mangud/test/style.css)32
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
Binary files differ
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
Binary files differ
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 {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 04:09:59 +0000