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 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 @@ + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + t-shirt outline + 2011-06-06T12:54:55 + a blank t-shirt outline + https://openclipart.org/detail/142771/t-shirt-outline-by-andy + + + Andy + + + + + blank + clothes + design + fashion + outline + shirt + t-shirt + template + + + + + + + + + + + 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 + + + + + + + +
    + + + + + + + Testing + + + + + + + +
    + +

    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

    + + + + + +
    + + +
    +

    Lisa Pilt

    + + +
    + + +
    +

    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