From a4894308d09fb826ea6323060be25f22a24ff9a4 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sun, 13 Nov 2022 20:38:22 +0200 Subject: sargiKujundus as Test --- rannak/mangud/partorg/sonaragastik/index.html | 32 +-- rannak/mangud/partorg/sonaragastik/script.js | 5 +- rannak/mangud/test/img/shirtImg.jpg | Bin 0 -> 323806 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/ajatelg/index.html | 17 +- rannak/mangud/uliopilane/utlused/js/main.js | 2 +- 9 files changed, 696 insertions(+), 28 deletions(-) create mode 100644 rannak/mangud/test/img/shirtImg.jpg create mode 100644 rannak/mangud/test/img/tshirt.svg create mode 100644 rannak/mangud/test/index.html create mode 100644 rannak/mangud/test/main.js create mode 100644 rannak/mangud/test/style.css (limited to 'rannak/mangud') diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html index fc37a4b..6bb6797 100644 --- a/rannak/mangud/partorg/sonaragastik/index.html +++ b/rannak/mangud/partorg/sonaragastik/index.html @@ -64,7 +64,7 @@

- MAANTEEMUHK. Väikeauto, ametliku nimega Zaporožets. ( või ZAZ 965) + MAANTEEMUHK. Väikeauto, ametliku nimega Zaporožets. ( või ZAZ 965)

@@ -87,7 +87,7 @@

- RUBLA. Nõukogude Liidu valuuta. 1991. aastaks sisuliselt maksejõuetu raha. + RUBLA. Nõukogude Liidu valuuta. 1991. aastaks sisuliselt maksejõuetu raha.

@@ -110,7 +110,7 @@ - P + P @@ -128,7 +128,7 @@ - L + L @@ -146,7 +146,7 @@ R - A + A R @@ -164,7 +164,7 @@ N E K - A + A U P @@ -182,7 +182,7 @@ S D - N + N B @@ -200,7 +200,7 @@ I - I + I L @@ -218,7 +218,7 @@ D S K - M + M A @@ -236,7 +236,7 @@ U H K - A + A @@ -254,7 +254,7 @@ - J + J @@ -272,7 +272,7 @@ - A + A @@ -290,7 +290,7 @@ S O O - N + N @@ -308,7 +308,7 @@ I T - D + D @@ -326,7 +326,7 @@ - U + U @@ -344,7 +344,7 @@ - S + S diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js index ab5ebe4..af16488 100644 --- a/rannak/mangud/partorg/sonaragastik/script.js +++ b/rannak/mangud/partorg/sonaragastik/script.js @@ -34,7 +34,7 @@ function message(msg, color){ // Main stuff -const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajadnus", +const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajandus", "rubla", "letialuneKaup", "talongid", "maantee", "piiritsoon", "defitsiit"] let õiged = new Array(); @@ -65,12 +65,13 @@ function proovi(){ hetkeKlass = ruut.classList[0]; } + console.log(hetkeKlass); document.querySelector(".V"+hetkeKlass).classList.add("done"); if (!õiged.includes(hetkeKlass)) { õiged.push(hetkeKlass); õigedCounter++; - console.log("DicoDisco GoodGood") + console.log(õigedCounter); } if (õigedCounter >= 11) moveOnEnable(); diff --git a/rannak/mangud/test/img/shirtImg.jpg b/rannak/mangud/test/img/shirtImg.jpg new file mode 100644 index 0000000..b469eee Binary files /dev/null and b/rannak/mangud/test/img/shirtImg.jpg differ diff --git a/rannak/mangud/test/img/tshirt.svg b/rannak/mangud/test/img/tshirt.svg new file mode 100644 index 0000000..19a7205 --- /dev/null +++ b/rannak/mangud/test/img/tshirt.svg @@ -0,0 +1,131 @@ + + + diff --git a/rannak/mangud/test/index.html b/rannak/mangud/test/index.html new file mode 100644 index 0000000..11a25a0 --- /dev/null +++ b/rannak/mangud/test/index.html @@ -0,0 +1,110 @@ + + + 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 new file mode 100644 index 0000000..7d16bb4 --- /dev/null +++ b/rannak/mangud/test/main.js @@ -0,0 +1,281 @@ +/*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 new file mode 100644 index 0000000..822f048 --- /dev/null +++ b/rannak/mangud/test/style.css @@ -0,0 +1,146 @@ +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/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html index 2dd308e..156d28d 100644 --- a/rannak/mangud/uliopilane/ajatelg/index.html +++ b/rannak/mangud/uliopilane/ajatelg/index.html @@ -30,23 +30,22 @@

Fosforiidi Sõda

- -

- 9. Tartu levimuusikapäevad -

(esmakordselt kõlas “Ei ole üksi ükski maa)”

- -

Sinine, must ja valge lipp esimest korda Pika Hermanni tornis

Tartu muinsuskaitsepäevad

ENSV Keeleseadus, eesti keel riigikeeleks

Hirvepargi meeleavaldus

Ülemnõukogu otsus Eesti riiklikust iseseisvusest

Balti kett Tallinnast Vilniuseni

Augustiputš

Sinine, must ja valge lipp esimest korda Pika Hermanni tornis

Tartu muinsuskaitsepäevad

Fosforiidi Sõda

Interrinne ründab Toompead

Eesti Kongress

Laulev revolutsioon, öölaulupeod

+ 9. Tartu levimuusikapäevad +

(esmakordselt kõlas “Ei ole üksi ükski maa)”

diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js index 4262d41..4a14230 100644 --- a/rannak/mangud/uliopilane/utlused/js/main.js +++ b/rannak/mangud/uliopilane/utlused/js/main.js @@ -180,7 +180,7 @@ else{ if (counter == 6){ const btn = document.querySelector(".moveOn"); btn.disabled = false; - btn.onclick = () => location.href = "../../rolliValik"; + btn.onclick = () => location.href = "#"; } } -- cgit v1.2.3