From ee0da175151b4d48d4ef27f7acd8d3f9def25986 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Mon, 12 Dec 2022 02:22:36 +0200 Subject: tSark game donw --- rannak/mangud/index.html | 2 +- rannak/mangud/test/img/shirtImg.jpg | Bin 323806 -> 0 bytes rannak/mangud/test/img/tshirt.svg | 131 ------- rannak/mangud/test/index.html | 110 ------ rannak/mangud/test/main.js | 281 --------------- rannak/mangud/test/style.css | 146 -------- rannak/mangud/uliopilane/tSark/img/picLink.txt | 1 + rannak/mangud/uliopilane/tSark/img/shirtImg.jpg | Bin 0 -> 26450 bytes rannak/mangud/uliopilane/tSark/img/tshirt.svg | 131 +++++++ rannak/mangud/uliopilane/tSark/index.html | 117 +++++++ rannak/mangud/uliopilane/tSark/main.js | 433 ++++++++++++++++++++++++ rannak/mangud/uliopilane/tSark/style.css | 168 +++++++++ 12 files changed, 851 insertions(+), 669 deletions(-) delete mode 100644 rannak/mangud/test/img/shirtImg.jpg delete mode 100644 rannak/mangud/test/img/tshirt.svg delete mode 100644 rannak/mangud/test/index.html delete mode 100644 rannak/mangud/test/main.js delete mode 100644 rannak/mangud/test/style.css create mode 100644 rannak/mangud/uliopilane/tSark/img/picLink.txt create mode 100644 rannak/mangud/uliopilane/tSark/img/shirtImg.jpg create mode 100644 rannak/mangud/uliopilane/tSark/img/tshirt.svg create mode 100644 rannak/mangud/uliopilane/tSark/index.html create mode 100644 rannak/mangud/uliopilane/tSark/main.js create mode 100644 rannak/mangud/uliopilane/tSark/style.css (limited to 'rannak/mangud') 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 @@

Üliõpilane

diff --git a/rannak/mangud/test/img/shirtImg.jpg b/rannak/mangud/test/img/shirtImg.jpg deleted file mode 100644 index b469eee..0000000 Binary files a/rannak/mangud/test/img/shirtImg.jpg and /dev/null differ diff --git a/rannak/mangud/test/img/tshirt.svg b/rannak/mangud/test/img/tshirt.svg deleted file mode 100644 index 19a7205..0000000 --- a/rannak/mangud/test/img/tshirt.svg +++ /dev/null @@ -1,131 +0,0 @@ - - - diff --git a/rannak/mangud/test/index.html b/rannak/mangud/test/index.html deleted file mode 100644 index 11a25a0..0000000 --- a/rannak/mangud/test/index.html +++ /dev/null @@ -1,110 +0,0 @@ - - - Särgi Kujundus - - - - - - - -

- - - - - - - - - -

- -

T-särgi Kujundamine

- 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". -

- -

- - -

- -

Vali Värv

- Särgi värv: - - - Särgi äär: - -

- - -

Lisa Pilt

- Vali Pilt: - -

- - -

Tekst

- - Vali tekst: - - - -

- ↑ - ↓ - ← - → - - ↶ - ↷ - - + - - - - - -

- -

- - -

- - - - -

- -

- - - - - - diff --git a/rannak/mangud/test/main.js b/rannak/mangud/test/main.js deleted file mode 100644 index 7d16bb4..0000000 --- a/rannak/mangud/test/main.js +++ /dev/null @@ -1,281 +0,0 @@ -/*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 */ - -// Input -function getInputValue() { - // Selecting the input element and get its value - let inputVal = document.getElementById("sargiText").value; - 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("txtColor")) - stuffDone.push("txtColor"); -}) - -// Position -const ules = document.querySelector(".ules"); -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" , () => { - tmpY.baseVal[0].value-=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -alla.addEventListener("click" , () => { - tmpY.baseVal[0].value+=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -vasak.addEventListener("click", () => { - tmpX.baseVal[0].value-=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -parem.addEventListener("click", () => { - tmpX.baseVal[0].value+=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - - -// 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 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -paremale.addEventListener("click" , () => { - angle -=5 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - - - -// FontZise - -const plus = document.querySelector(".plus"); -const minus = document.querySelector(".minus"); -let sarkForText = document.querySelector("#sarkTekst"); -let sarkFontSize = 20; - -plus.addEventListener("click" , () => { - sarkFontSize +=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("tekstFont")) - stuffDone.push("tekstFont"); -}); - -minus.addEventListener("click" , () => { - sarkFontSize-=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("tekstFont")) - stuffDone.push("tekstFont"); -}); - - -/* Rezisable Image Stuff */ - -const el = document.querySelector(".item"); - -let isResizing = false; - -el.addEventListener("mousedown", mousedown); - -function mousedown(e) { - window.addEventListener("mousemove", mousemove); - window.addEventListener("mouseup", mouseup); - - let prevX = e.clientX; - let prevY = e.clientY; - - function mousemove(e) { - if (!isResizing) { - 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; - } - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - } -} - - - -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 = 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; - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - isResizing = false; - } - - } // Resizing mousedown end - -} - - - -/* Move on Button*/ - -let stuffDone = new Array(); - -const chkBtn = document.querySelector(".checkMoveOn"); - -chkBtn.addEventListener("click", () => { - if (stuffDone.length == 6) - moveOnEnable(); - console.log(stuffDone.length); -}); - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = ""; -} - -// 6 diff --git a/rannak/mangud/test/style.css b/rannak/mangud/test/style.css deleted file mode 100644 index 822f048..0000000 --- a/rannak/mangud/test/style.css +++ /dev/null @@ -1,146 +0,0 @@ -body{ - background-color: #E3D4AD; - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.containeraa { - width: 100%; - height: 100vh; - display: flex; - justify-content: center; - align-items:center; -} - -.side { - border-left: 2px solid gray; - width: 50%; - height: 100vh; - text-align: center; - background-color: #D3BC8D; -} - - - -/* Move on Button */ - -button:disabled{ - opacity: 0.5; - cursor: not-allowed; -} - -.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; -} - - - -/* Svg stuff*/ - -svg { - width: 100% !important; - height: 100% !important; -} - -#sark { - fill: white; - stroke: black; - stroke-width: 5px; -} - -#sarkTekst { - fontSize: 20px; - fill: black; - transform-box: fill-box; - transform-origin: center; -} - - - -/*Muutuste osa*/ - -.muutused { - margin-top: 10px; - border-top: 2px solid gray; - width: 100%; - text-align: center; -} - -.fileUpload { - margin-top: 5px; -} - -.textPos { - margin-top: 10px; -} - -.textAddWrapper{ - margin: 10px; -} - -.textAddWrapper *{ - font-size: 2rem; - margin: 2px; - border: 2px solid black; - background-color: gray; - cursor: pointer; -} - - - -/* Img item stuff */ - -.item { - height: 300px; - width: 300px; - position: absolute; - background-image: url("img/shirtImg.jpg"); - background-repeat: no-repeat; - background-size: 100%; - top: 60%; - right: 50%; -} - -.resizer { - height: 7px; - width: 7px; - position: absolute; - border-radius: 3px; - background: #000; - z-index: 2; -} - -.resizer.ne { - top: -1px; - right: -1px; - cursor: ne-resize; -} - -.resizer.nw { - top: -1px; - left: -1px; - cursor: nw-resize; -} - -.resizer.se { - bottom: -1px; - right: -1px; - cursor: se-resize; -} - -.resizer.sw { - bottom: -1px; - left: -1px; - cursor: sw-resize; -} 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 Binary files /dev/null and b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg differ diff --git a/rannak/mangud/uliopilane/tSark/img/tshirt.svg b/rannak/mangud/uliopilane/tSark/img/tshirt.svg new file mode 100644 index 0000000..19a7205 --- /dev/null +++ b/rannak/mangud/uliopilane/tSark/img/tshirt.svg @@ -0,0 +1,131 @@ + + + diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html new file mode 100644 index 0000000..382c382 --- /dev/null +++ b/rannak/mangud/uliopilane/tSark/index.html @@ -0,0 +1,117 @@ + + + Särgi Kujundus + + + + + + + +

+ + + + + + + + + +

+ +

T-särgi Kujundamine

+ 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, kas särk on valmis". +

+ +

+ + + +

+ +

Vali Värv

+ Särgi värv: + + + Särgi äär: + +

+ + +

Lisa Pilt

+ Vali Pilt: + +

+ + +

Tekst

+ + Vali tekst: + + + + +

+ ↑ + ↓ + ← + → + + ↶ + ↷ + + + + - + + + +

+ +

+ Nulli Särk: + +

+ +

+ + +

+ +

+ + + + + + diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js new file mode 100644 index 0000000..98786f2 --- /dev/null +++ b/rannak/mangud/uliopilane/tSark/main.js @@ -0,0 +1,433 @@ +/*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"); +}); + + + + +/* Rezisable Image Stuff */ + +const el = document.querySelector(".item"); +let isResizing = false; + +el.addEventListener("mousedown", mousedown); + +function mousedown(e) { + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", mouseup); + + 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() + } + + else { + + 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; + + } + } + } + + function mouseup() { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mouseup); + } + +} + + + +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 = 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; + } + + 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; + + + +/* 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)", "green"); + moveOnEnable(); + } + else + message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red"); +}); + +function moveOnEnable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; +} + +// 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/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css new file mode 100644 index 0000000..0bac36a --- /dev/null +++ b/rannak/mangud/uliopilane/tSark/style.css @@ -0,0 +1,168 @@ +body{ + background-color: #E3D4AD; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.containeraa { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items:center; +} + +.side { + border-left: 2px solid gray; + width: 50%; + height: 100vh; + text-align: center; + background-color: #D3BC8D; +} + + + +/* Move on Button */ + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + +.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; +} + +.checkMoveOn{ + margin: 0 25px; +} + +.messageBox { + padding-top: 7px; +} + + + +/* Svg stuff*/ + +svg { + width: 100% !important; + height: 100% !important; +} + +#sark { + fill: white; + stroke: black; + stroke-width: 5px; +} + +.sarkTekst { + fontSize: 20px; + fill: black; + transform-box: fill-box; + transform-origin: center; +} + + +.doneTekst{ + transform-box: fill-box; + transform-origin: center; +} + + +/*Muutuste osa*/ + +.muutused { + margin-top: 10px; + border-top: 2px solid gray; + width: 100%; + text-align: center; +} + +.fileUpload { + margin-top: 5px; +} + +.textPos, .nulliBtn{ + margin-top: 10px; +} + +.textAddWrapper{ + margin: 10px; +} + +.textAddWrapper *{ + font-size: 2rem; + margin: 2px; + border: 2px solid black; + background-color: gray; + cursor: pointer; +} + +.nulliBtn { + font-size: 1.2rem; +} + + + +/* Img item stuff */ + +.item { + height: 20%; + width: 20%; + position: absolute; + background-image: url("img/shirtImg.jpg"); + background-repeat: no-repeat; + background-size: 100%; + top: 50vh; + /* + top: 50%; + right: 50%; + top: calc(50% - 300px); + right: calc(50% - 300px); + */ +} + +.resizer { + height: 7px; + width: 7px; + position: absolute; + border-radius: 3px; + background: #000; + z-index: 2; +} + +.resizer.ne { + top: -1px; + right: -1px; + cursor: ne-resize; +} + +.resizer.nw { + top: -1px; + left: -1px; + cursor: nw-resize; +} + +.resizer.se { + bottom: -1px; + right: -1px; + cursor: se-resize; +} + +.resizer.sw { + bottom: -1px; + left: -1px; + cursor: sw-resize; +} -- cgit v1.2.3