diff options
| author | Rasmus <rasmus.luha@gmail.com> | 2023-04-02 00:30:04 +0300 |
|---|---|---|
| committer | Rasmus <rasmus.luha@gmail.com> | 2023-04-02 00:30:04 +0300 |
| commit | 9a4d6be0ca9cb86ef56acdbf8bcc1fe9f920a19c (patch) | |
| tree | d34ad511c060ccb745ae0b2c823ceb2c16e535c8 /rannak/mangud/partorg | |
| parent | ba837f70632519d58ae0f3f95bfad0dbb8051fc0 (diff) | |
plakat Done, all Games Done!!
Diffstat (limited to 'rannak/mangud/partorg')
19 files changed, 368 insertions, 675 deletions
diff --git a/rannak/mangud/partorg/plakat.bak/img/avatar.png b/rannak/mangud/partorg/plakat.bak/img/avatar.png Binary files differdeleted file mode 100644 index 485a70c..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/avatar.png +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/lenin.png b/rannak/mangud/partorg/plakat.bak/img/lenin.png Binary files differdeleted file mode 100644 index e36df3d..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/lenin.png +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/nazi.png b/rannak/mangud/partorg/plakat.bak/img/nazi.png Binary files differdeleted file mode 100644 index 87e616e..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/nazi.png +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur Binary files differdeleted file mode 100644 index fdd943c..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/redStar.png b/rannak/mangud/partorg/plakat.bak/img/redStar.png Binary files differdeleted file mode 100644 index b6eee79..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/redStar.png +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg Binary files differdeleted file mode 100644 index bc0a3a5..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png Binary files differdeleted file mode 100644 index d3e05fd..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg Binary files differdeleted file mode 100644 index d88d950..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg Binary files differdeleted file mode 100644 index 23f04ab..0000000 --- a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg +++ /dev/null diff --git a/rannak/mangud/partorg/plakat.bak/index.html b/rannak/mangud/partorg/plakat.bak/index.html deleted file mode 100644 index 4754c9b..0000000 --- a/rannak/mangud/partorg/plakat.bak/index.html +++ /dev/null @@ -1,125 +0,0 @@ -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Plakat</title> - <!-- Bootstrap - CSS only --> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> - - <link rel="stylesheet" href="style.css"> -</head> -<body> - <section class="wrapper"> - - <div id="toolbar"> - - <div class="intro"> - <h1>Kujunda Plakatit</h1> - <p>Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.</p> - <button class="moveOn" disabled>Liigu Edasi</button> - - <!-- Button trigger modal --> - <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> - Sissejuhatus - </button> - - <button id="clear">Puhasta</button> - </div> - - <div class="inputs"> - <form> - <p class="toolbarDiv"> - <label for="stroke">Värv</label> - <input id="stroke" name='stroke' type="color"> - </p> - - <p class="toolbarDiv"> - <label for="lineWidth">Joone Paksus</label> - <input id="lineWidth" name='lineWidth' type="number" value="5" maxlength="1"> - </p> - - <!-- - <button id="clear">Puhasta</button> - --> - </form> - </div> - - - - <!-- Image Pick--> - <h2 class="ValiTxt"> Vali Plakat </h2> - <div class="pickingSec"> - <img id="stalin" class="pickImg picked" alt="Jossup Saloninjo Plakat" src="img/stalin.jpg"/> - <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/> - <img id="testing" class="pickImg" alt="Veekogude Plakat" src="img/testImg.jpg"/> - </div> - - - <!-- Add-Ons Pick - <h2 class="ValiTxt"> Vali Lisasid </h2> - <div class="pickingSec"> - <img id="redStar" class="pickImg" alt="red star" src="img/redStar.png"/> - <img id="lenin" class="pickImg" alt="lenin" src="img/lenin.png"/> - <img id="nazi" class="pickImg" alt="Nazi Flag" src="img/nazi.png"/> - <img id="stalinAddOn" class="pickImg" alt="Stalin" src="img/stalinAddOn.png"/> - </div> - --> - - </div> - - - - - <div class="canvasWrap"> - <canvas id="drawing-board"></canvas> - </div> - - - </section> - - - - - <!-- Modal --> - <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - - <div class="modal-header"> - <div class="modalHeaderWrapper"> - <h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5> - </div> - <img class="avatar" alt="avatar" src="img/avatar.png"/> - </div> - - <div class="modal-body"> - - Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogudeaja kuldsest elust. - <br/> - Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950ndad, 1960ndad, 1970ndad ja 1980ndad aastad. - <br/> - <br/> - Palun uurige nende plakatite sisu ja vormi. - <br/> - Õppige, õppige, õppige! Kas tajute, millisesse kümnendisse iga plakat kuulub? - <br/> <br/> - <strong> - Mõelge plakatitele välja uus, kaasaega sobiv lööklause. Samuti kaunistage ja täiendage plakatit kaasaegsete kunsiliste detailidega. Ka huumor on lubatud! - </strong> - - </div> - - </div> - </div> - </div> - - - - - <script src="./main.js"></script> - - <!-- JavaScript Bundle with Popper --> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> -</body> -</html> diff --git a/rannak/mangud/partorg/plakat.bak/main.js b/rannak/mangud/partorg/plakat.bak/main.js deleted file mode 100644 index 11809cb..0000000 --- a/rannak/mangud/partorg/plakat.bak/main.js +++ /dev/null @@ -1,224 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let btn = document.querySelector('.modalButton'); - btn.click(); -}); - - -console.log("FAAAAK"); - -/* Inital Setup*/ - -const canvas = document.getElementById('drawing-board'); -const toolbar = document.getElementById('toolbar'); -const ctx = canvas.getContext('2d'); - -let canvasOffsetX = canvas.offsetLeft; -let canvasOffsetY = canvas.offsetTop; - -let CurImage = document.getElementById("stalin"); - -canvas.width = window.innerWidth - canvasOffsetX; -canvas.height = window.innerHeight - canvasOffsetY; - - - -function copyImageToCanvas(image, x, y) { - ctx.drawImage(image, 0, 0, canvas.width, canvas.height) -} - - - - -// Initial Drawring -setTimeout(() => { - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); -}, 300); - - - -window.onresize = () => { - canvasOffsetX = canvas.offsetLeft; - canvasOffsetY = canvas.offsetTop; - canvas.width = window.innerWidth - canvasOffsetX; - canvas.height = window.innerHeight - canvasOffsetY; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); -} - - - - -/* EventHandlers and stuff*/ - -let addOnHasBeenAdded = false; -let addOnActive = false; -let newAddOn; -let hasPainted = false; - -let isPainting = false; -let lineWidth = 5; -let startX; -let startY; - -const pildid = new Array(); -const addOns = new Array(); - -toolbar.addEventListener('click', e => { - - - //Plakatid - const stalinImg = document.getElementById("stalin"); - const veekogudImg = document.getElementById("veekogud"); - const testing = document.getElementById("testing"); - - pildid.push(stalinImg); - pildid.push(veekogudImg); - pildid.push(testing); - - - //Addons - - const naziImg = document.getElementById("nazi"); - const lenin = document.getElementById("lenin"); - const redStar = document.getElementById("redStar"); - const stalinAddOn = document.getElementById("stalinAddOn"); - - addOns.push(naziImg); - addOns.push(lenin); - addOns.push(redStar); - addOns.push(stalinAddOn); - - - - - if (e.target.id === "stalin" || e.target.id === "veekogud" || e.target.id === "testing") { - for (el in pildid) { - pildid[el].classList.remove("picked"); - } - let newPicked = document.getElementById(e.target.id); - newPicked.classList.add("picked"); - - // Draw New Pick - CurImage = newPicked; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); - moveOnDisable(); - } - - - else if (e.target.id === 'clear') { - ctx.clearRect(0, 0, canvas.width, canvas.height); - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); - moveOnDisable(); - } - - - else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') { - addOnActive = true; - document.body.style.cursor = "url('img/normalSelect.cur'), auto"; - - for (el in addOns) { - addOns[el].classList.remove("addOnPicked"); - } - - newAddOn = document.getElementById(e.target.id); - newAddOn.classList.add("addOnPicked"); - } - - -}); - - - -canvas.addEventListener('click', e => { - - if(addOnActive == true){ - addOnActive = false; - document.body.style.cursor = "auto"; - - for (el in addOns) { - addOns[el].classList.remove("addOnPicked"); - } - - let xCord = e.offsetX - (newAddOn.clientWidth / 2) - let yCord = e.offsetY - (newAddOn.clientHeight / 2) - ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight); - - - addOnHasBeenAdded = true; - if (hasPainted) - moveOnEnable(); - } -}); - - - - - - - - -/* Drawing stuff from here */ - -toolbar.addEventListener('change', e => { - if(e.target.id === 'stroke') { - ctx.strokeStyle = e.target.value; - } - - if(e.target.id === 'lineWidth') { - lineWidth = e.target.value; - } - -}); - - - -const draw = (e) => { - if(!isPainting) { - return; - } - - ctx.lineWidth = lineWidth; - ctx.lineCap = 'round'; - - ctx.lineTo(e.clientX - canvasOffsetX, e.clientY); - //ctx.lineTo(e.clientX - abiOffset, e.clientY); - ctx.stroke(); - - hasPainted = true; - if (addOnHasBeenAdded) - moveOnEnable(); -} - - - -canvas.addEventListener('mousedown', (e) => { - isPainting = true; - startX = e.clientX; - startY = e.clientY; -}); - - - -canvas.addEventListener('mouseup', e => { - isPainting = false; - ctx.stroke(); - ctx.beginPath(); -}); - - -canvas.addEventListener('mousemove', draw); - - - - -// Move On Stuff - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "../sonaragastik"; -} - -function moveOnDisable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = true; -} diff --git a/rannak/mangud/partorg/plakat.bak/style.css b/rannak/mangud/partorg/plakat.bak/style.css deleted file mode 100644 index 215c073..0000000 --- a/rannak/mangud/partorg/plakat.bak/style.css +++ /dev/null @@ -1,188 +0,0 @@ -body { - height: 100%; - overflow: hidden; - color: white; - background-color: #43464b; -} - -h1 { - color: #a1000e; - font-weight: bold; -} - - -/* Move on ja Sissejuhatus Button */ - -.avatar { - border-radius: 20px; - width: 100%; - max-width: 15rem; -} - - -.modalHeaderWrapper{ - text-align: center; - margin: 0; - width: 100%; -} - -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; -} - -/* Modal Stuff */ - - -.closeModalButton { - border-radius: 50px; -} - -.modalButton{ - background-color: rgba(0,136,169,1); - border: none; - border-radius: 50px; - cursor: pointer; - transition: all 0.3 ease 0; - font-size: 1.2rem; - text-align: center; - margin-left: 30px; -} - -.modalButton:hover{ - background-color: rgba(0,136,169,0.8); -} - - - -/* Main */ - -.wrapper { - height: 100%; - display: flex; -} - -/* Toolbar */ -.intro{ - text-align: center; - border-bottom: 2px solid gray; - padding: 7px; -} - - -#toolbar { - display: flex; - flex-direction: column; - align-items: center; - padding: 5px; - width: 20%; - min-width:350px; - background-color: #43464b; -} - -#clear{ - background-color: #1565c0; - border: none; - border-radius: 4px; - font-size:1.3rem; - color:white; - padding: 2px; -} - -#toolbar * {margin-bottom: 6px;} -#toolbar input {width: 4rem;} - -.toolbarDiv {width: 100%;} - -form { - display: flex; - align-items: center; -} - -label { - display: table-cell; - font-size: 1.2rem; -} - - - -/* Img Picker */ -.pickingSec { - height: 50%; - overflow: hidden; - overflow-y: scroll; -} - - -.valiTxt { - border-bottom: 4px solid gray; - padding-top: 10px; -} - - -.picked{ - border: 2px solid lime; -} - - -.addOnPicked{ - border: 2px solid aqua; -} - - - -.pickImg { - width: 50%; - height: auto; - padding: 10px; - margin-left: calc(25% - 5px); -} - - - -/* Canvas */ -canvas{ - display: block; - margin: 0 auto; -} - - - - - -/* Responsivness */ - -@media screen and (max-width: 1400px) { - .pickImg { - width: 30%; - height: auto; - padding: 7px; - margin-left: calc(7% - 21px); - } - -} - - -@media screen and (max-width: 900px) { - .pickImg { - width: 24%; - height: auto; - padding: 3px; - margin-left: calc(1% - 10px); - } - -} diff --git a/rannak/mangud/partorg/plakat/img/malevBlank.png b/rannak/mangud/partorg/plakat/img/malevBlank.png Binary files differnew file mode 100644 index 0000000..85c10f1 --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/malevBlank.png diff --git a/rannak/mangud/partorg/plakat/img/stalinBlank.png b/rannak/mangud/partorg/plakat/img/stalinBlank.png Binary files differnew file mode 100644 index 0000000..7efdc4e --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/stalinBlank.png diff --git a/rannak/mangud/partorg/plakat/img/veekogudBlank.png b/rannak/mangud/partorg/plakat/img/veekogudBlank.png Binary files differnew file mode 100644 index 0000000..85570b1 --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/veekogudBlank.png diff --git a/rannak/mangud/partorg/plakat/img/viisAastakBlank.png b/rannak/mangud/partorg/plakat/img/viisAastakBlank.png Binary files differnew file mode 100644 index 0000000..fc0215c --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/viisAastakBlank.png diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html index 85bb6bc..0ac5e90 100644 --- a/rannak/mangud/partorg/plakat/index.html +++ b/rannak/mangud/partorg/plakat/index.html @@ -14,10 +14,10 @@ <div class="container text-center text-white align-items-center pb-5"> <h1>Plakatid</h1> - <p>Leia iga plakati õige ajastu, ning muuda ka plakati teksti. - <br/> - Kui oled valinud õige ajastu ja muutunud plakati lause, muutub see roheliseks, - näitamaks, et sellega on kõik korras. + <p> + Leia iga plakati õige ajastu, ning muuda ka plakati teksti. + <br> + NB: Uut loosungit saad lisada pärast seda, kui oled valinud õige ajastu. </p> <div class="row"> @@ -102,31 +102,36 @@ <div class="tab-pane fade show active p-3 text-white" id="nav-60ndad" role="tabpanel" aria-labelledby="nav-60ndad-tab"> <div class="wrapper"> - <div class="plakatWrapper stalin"> - <span class="addedText">Testing Testing</span> - </div> - - <div class="innerWrapper"> + <div class="plakatWrapper stalin"></div> - <select> + <div id="stalin" class="inputWrapper"> + <select id="stalin" class="50"> <option disabled hidden selected>Vali</option> - <option value="1950ndad">1950. aastad</option> - <option value="1960ndad">1960. aastad</option> - <option value="1960ndad">1970. aastad</option> - <option value="1970ndad">1980. aastad</option> + <option value="50">1950ndad</option> + <option value="60">1960ndad</option> + <option value="70">1970ndad</option> + <option value="80">1980ndad</option> </select> + <strong><label for="stalin">Lisa Tekst</label></strong> - <input name="stalin" type="text" value=""/> - <button class="muuda">Muuda</button> + <input disabled name="stalin" type="text" value=""/> + <button disabled class="muuda">Lisa</button> <div> - <button class="ules">↑</button> - <button class="alla">↓</button> - <button class="vasak">←</button> - <button class="parem">→</button> + <button disabled class="ules">↑</button> + <button disabled class="alla">↓</button> + <button disabled class="vasak">←</button> + <button disabled class="parem">→</button> + <button disabled class="pluss">+</button> + <button disabled class="miinus">-</button> </div> + <label for="color">Värv:</label> + <input disabled size="1" type="color" id="color" value="#ffffff"/> + + <button disabled class="reset">Taasta</button> + </div> </div> @@ -137,30 +142,35 @@ <div class="tab-pane fade p-3 text-white" id="nav-70ndad" role="tabpanel" aria-labelledby="nav-70ndad-tab"> <div class="wrapper"> - <div class="plakatWrapper veekogud"> - <span class="addedText">Veekogud</span> - </div> + <div class="plakatWrapper veekogud"></div> - <div class="innerWrapper"> - <select> + <div id="veekogud" class="inputWrapper"> + <select id="veekogud" class="60"> <option disabled hidden selected>Vali</option> - <option value="1950ndad">1950ndad</option> - <option value="1960ndad">1960ndad</option> - <option value="1960ndad">1970ndad</option> - <option value="1970ndad">1980ndad</option> + <option value="50">1950ndad</option> + <option value="60">1960ndad</option> + <option value="70">1970ndad</option> + <option value="80">1980ndad</option> </select> <strong><label for="veekogud">Lisa Tekst</label></strong> - <input name="veekogud" type="text" value=""/> - <button class="muuda" >Muuda</button> + <input disabled name="veekogud" type="text" value=""/> + <button disabled class="muuda">Lisa</button> <div> - <button class="ules">↑</button> - <button class="alla">↓</button> - <button class="vasak">←</button> - <button class="parem">→</button> + <button disabled class="ules">↑</button> + <button disabled class="alla">↓</button> + <button disabled class="vasak">←</button> + <button disabled class="parem">→</button> + <button disabled class="pluss">+</button> + <button disabled class="miinus">-</button> </div> + <label for="color">Värv:</label> + <input disabled size="1" type="color" id="color" value="#ffffff"/> + + <button disabled class="reset">Taasta</button> + </div> </div> @@ -176,30 +186,34 @@ <div class="tab-pane fade p-3 text-white" id="nav-80ndad" role="tabpanel" aria-labelledby="nav-80ndad-tab"> <div class="wrapper"> - <div class="plakatWrapper malev pikkPlakat"> - <span class="addedText">Malev</span> - </div> + <div class="plakatWrapper malev pikkPlakat"></div> - <div class="innerWrapper"> - <select> + <div id="malev" class="inputWrapper"> + <select id="malev" class="70"> <option disabled hidden selected>Vali</option> - <option value="1950ndad">1950ndad</option> - <option value="1960ndad">1960ndad</option> - <option value="1960ndad">1970ndad</option> - <option value="1970ndad">1980ndad</option> + <option value="50">1950ndad</option> + <option value="60">1960ndad</option> + <option value="70">1970ndad</option> + <option value="80">1980ndad</option> </select> <strong><label for="malev">Lisa Tekst</label></strong> - <input name="malev" type="text" value=""/> - <button class="muuda">Muuda</button> + <input disabled name="malev" type="text" value=""/> + <button disabled class="muuda">Lisa</button> <div> - <button class="ules">↑</button> - <button class="alla">↓</button> - <button class="vasak">←</button> - <button class="parem">→</button> + <button disabled class="ules">↑</button> + <button disabled class="alla">↓</button> + <button disabled class="vasak">←</button> + <button disabled class="parem">→</button> + <button disabled class="pluss">+</button> + <button disabled class="miinus">-</button> </div> + <label for="color">Värv:</label> + <input disabled size="1" type="color" id="color" value="#ffffff"/> + + <button disabled class="reset">Taasta</button> </div> @@ -211,30 +225,34 @@ <div class="tab-pane fade p-3 text-white" id="nav-90ndad" role="tabpanel" aria-labelledby="nav-90ndad-tab"> <div class="wrapper"> - <div class="plakatWrapper viisAastak pikkPlakat"> - <span class="addedText">ViisAastak</span> - </div> + <div class="plakatWrapper viisAastak pikkPlakat"></div> - <div class="innerWrapper"> - <select> + <div id="viisAastak" class="inputWrapper"> + <select id="viisAastak" class="80"> <option disabled hidden selected>Vali</option> - <option value="1950ndad">1950ndad</option> - <option value="1960ndad">1960ndad</option> - <option value="1960ndad">1970ndad</option> - <option value="1970ndad">1980ndad</option> + <option value="50">1950ndad</option> + <option value="60">1960ndad</option> + <option value="70">1970ndad</option> + <option value="80">1980ndad</option> </select> <strong><label for="viisAastak">Lisa Tekst</label></strong> - <input name="viisAastak" type="text" value=""/> - <button class="muuda" >Muuda</button> + <input disabled name="viisAastak" type="text" value=""/> + <button disabled class="muuda">Lisa</button> <div> - <button class="ules">↑</button> - <button class="alla">↓</button> - <button class="vasak">←</button> - <button class="parem">→</button> + <button disabled class="ules">↑</button> + <button disabled class="alla">↓</button> + <button disabled class="vasak">←</button> + <button disabled class="parem">→</button> + <button disabled class="pluss">+</button> + <button disabled class="miinus">-</button> </div> + <label for="color">Värv:</label> + <input disabled size="1" type="color" id="color" value="#ffffff"/> + + <button disabled class="reset">Taasta</button> </div> diff --git a/rannak/mangud/partorg/plakat/script.js b/rannak/mangud/partorg/plakat/script.js index 4d4ee36..7ec4b7e 100644 --- a/rannak/mangud/partorg/plakat/script.js +++ b/rannak/mangud/partorg/plakat/script.js @@ -5,30 +5,220 @@ document.addEventListener('DOMContentLoaded', () => { +let ajastudCounter = 0 +let addedTexts = new Array(); + + +// New Text Adding +let newTextBtns = document.querySelectorAll(".muuda"); + +newTextBtns.forEach(btn => { + btn.addEventListener("click" , e => { + + + for (el of e.target.parentElement.parentElement.childNodes[1].childNodes) { + console.log(el); + if (el.classList != undefined && el.classList.contains("addedText")){ + el.classList.remove("addedText"); + console.log('dingdong'); + } + } + + + let inputText = e.target.parentElement.childNodes[5].value; + + let mySpan = document.createElement('span'); + mySpan.classList.add('addedText'); + mySpan.classList.add('oldAddedText'); + mySpan.innerHTML = inputText; + + + let parentEl= e.target.parentElement.parentElement.childNodes[1]; + parentEl.appendChild(mySpan); + + mySpan.style.top = "50%"; + mySpan.style.left = "35%"; + + e.target.parentElement.childNodes[5].value = ''; + + + if (!addedTexts.includes(parentEl.classList[1])) + addedTexts.push(parentEl.classList[1]); + + + + // Check If Done + if (addedTexts.length >= 4) + checkIfAllGood(); + + + }); +}) + + + + +// Start Text Edit + +let selectors = document.querySelectorAll("select"); +selectors.forEach(el => { + el.addEventListener("change", () => { + if(el.className == el.value) + enableEditing(el); + }); +}); + + + +function enableEditing(el){ + ajastudCounter += 1; + + el.style.backgroundColor = 'lime'; + el.style.border = 'none'; + el.style.borderRadius = '7px'; + el.disabled = true; + + + let imgDiv = el.parentElement.parentElement.childNodes[1]; + let blankImgLoc = `img/${el.id}Blank.png`; + + imgDiv.style.background = "url(" + blankImgLoc + ") no-repeat center"; + imgDiv.style.backgroundSize = "100% 100%"; + + let parent = el.parentElement.id; + + // Enable buttons + let btns = document.querySelectorAll(`#${parent} button`); + btns.forEach(btn => { + btn.disabled = false; + }); + + + // Enable inputs + let inputs = document.querySelectorAll(`#${parent} input`); + inputs.forEach(input => { + input.disabled = false; + }); + + +} + + + +// Reset Button +let resetBtns = document.querySelectorAll(".reset"); +resetBtns.forEach(btn => { + btn.addEventListener("click", () => { + + let imgDiv = btn.parentElement.parentElement.childNodes[1]; + imgDiv.innerHTML = ''; + + addedTexts = new Array(); + ajastudCounter = 0; + + + }); +}); + + + +// Color Changer + +let colorPickers = document.querySelectorAll("#color"); +colorPickers.forEach(el => { + + el.addEventListener("change", () => { + + for (text of el.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + let pickedColor = el.value; + text.style.color = pickedColor; + + + } + } + }); +}); + + + + + +// fontSize + +let fontIncs = document.querySelectorAll(".pluss"); +fontIncs.forEach(el => { + el.addEventListener("click", (e) => { + + for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + var font = window.getComputedStyle(text, null).getPropertyValue('font-size'); + var fontSize = parseFloat(font); + + text.style.fontSize = (fontSize + 1) + 'px'; + + + } + } + }); +}); + + + +let fontDecs = document.querySelectorAll(".miinus"); +fontDecs.forEach(el => { + el.addEventListener("click", (e) => { + + for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + var font = window.getComputedStyle(text, null).getPropertyValue('font-size'); + var fontSize = parseFloat(font); + + text.style.fontSize = (fontSize - 1) + 'px'; + + + } + } + }); +}); + + -// FROM HERE TODO -// Init Setup - to access later -let dingDong = document.querySelector(".addedText"); -dingDong.style.top = "50%"; -dingDong.style.left = "50%"; // Position -const ules = document.querySelectorAll(".ules"); -const alla = document.querySelectorAll(".alla"); +const ules = document.querySelectorAll(".ules"); +const alla = document.querySelectorAll(".alla"); const vasak = document.querySelectorAll(".vasak"); const parem = document.querySelectorAll(".parem"); + + ules.forEach(el => { el.addEventListener("click" , e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + let curTop = theText.style["top"]; curTop = curTop.substring(0, curTop.length-1) @@ -37,9 +227,20 @@ ules.forEach(el => { }); }) + + alla.forEach(el => { el.addEventListener("click" , e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + let curTop = theText.style["top"]; curTop = curTop.substring(0, curTop.length-1) @@ -48,70 +249,71 @@ alla.forEach(el => { }); }) + + vasak.forEach(el => { el.addEventListener("click", e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; - let curLeft = theText.style["left"]; - curLeft = curLeft.substring(0, curLeft.length-1) + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; - console.log("Vasak"); - console.log(theText.innerHTML); + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; - if (Number(curLeft) >= 5) - theText.style["left"] = Number(curLeft)-5+"%"; - }); -}) + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + -parem.forEach(el => { - el.addEventListener("click", e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; let curLeft = theText.style["left"]; curLeft = curLeft.substring(0, curLeft.length-1) if (Number(curLeft) >= 5) - theText.style["left"] = Number(curLeft)+5+"%"; + theText.style["left"] = Number(curLeft)-5+"%"; }); }) -// Muuda Text button -const muudaBtn = document.querySelector(".muuda"); +parem.forEach(el => { + el.addEventListener("click", e => { + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; -muudaBtn.addEventListener("click", e => { - console.log(e); -}); + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + let curLeft = theText.style["left"]; + curLeft = curLeft.substring(0, curLeft.length-1) + + // Get the width of text itself and add the "left". + let offWi = theText.offsetWidth; + let parentWi = theText.parentElement.clientWidth; + let textWi = (offWi/parentWi)*100; + if (Number(curLeft)+textWi <= 95) + theText.style["left"] = Number(curLeft)+5+"%"; + + + }); +}) function checkIfAllGood(){ - let rightDone = []; - - for (let j=0; j < lists.length; j++){ - const list = lists[j]; - if (list.className.includes("startBasket")) - continue; - else if (list.children.length == 1){ - if (list.id == list.children[0].id){ - if (!rightDone.includes(list.id)) - rightDone.push(list.id); - } - } - } // For loop end - - if (rightDone.length == 6) { - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = ""; - } + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; } diff --git a/rannak/mangud/partorg/plakat/styles.css b/rannak/mangud/partorg/plakat/styles.css index 67f8bbe..b2405f9 100644 --- a/rannak/mangud/partorg/plakat/styles.css +++ b/rannak/mangud/partorg/plakat/styles.css @@ -28,7 +28,9 @@ button:disabled{ cursor: not-allowed; } - +input[type=text] { + width: 100%; +} @@ -48,11 +50,6 @@ button:disabled{ - -.closeModalButton { - border-radius: 50px; -} - .modalButton{ display: inline-block; padding: 6px 12px; @@ -89,20 +86,27 @@ button:disabled{ justify-content: center; } -.plakatWrapper, .innerWrapper{ - width: 48%; -} -.innerWrapper{ - padding: 2rem; +.plakatWrapper{ + width: 60%; + overflow-wrap: break-word; + position: relative; + overflow: hidden; + clear: both; +} + +.inputWrapper{ + padding-left: 2rem; display: flex; flex-direction: column; - justify-content: center; + justify-content: right; align-items: center; } + + /* Input stuff*/ select{ @@ -112,7 +116,6 @@ select{ label{ padding: 1rem; - padding-top: 4rem; font-size: 1.2rem; } @@ -121,11 +124,11 @@ input { width: 75%; } -.innerWrapper button { +.inputWrapper button { margin-top: 1rem; } -.innerWrapper button { +.inputWrapper button { background-color: #596B6E; border: none; border-radius: 4px; @@ -135,9 +138,21 @@ input { } +.inputWrapper button:disabled { + cursor: not-allowed; + opacity: 0.5; +} +select:disabled{cursor: not-allowed} +input:disabled{ + cursor: not-allowed + opacity: 0.5; +} +.reset{ + background-color: red !important; +} @@ -145,8 +160,8 @@ input { .stalin { background: url("img/stalin.jpg") no-repeat center; - background-size: 100%; - font-size: 2rem; + background-size: 100% 100%; + font-size: 1rem; text-align: center; color: black; } @@ -154,8 +169,8 @@ input { .veekogud { background: url("img/veekogud.jpg") no-repeat center; - background-size: 100%; - font-size: 2rem; + background-size: 100% 100%; + font-size: 1rem; text-align: center; color: black; } @@ -164,7 +179,7 @@ input { .malev { background: url("img/malev.jpg") no-repeat center; background-size: 100% 100%; - font-size: 2rem; + font-size: 1rem; text-align: center; color: black; } @@ -173,7 +188,7 @@ input { .viisAastak { background: url("img/viisAastak.jpg") no-repeat center; background-size: 100% 100%; - font-size: 2rem; + font-size: 1rem; text-align: center; color: black; } @@ -182,12 +197,7 @@ input { height: 78vh; } -.plakatWrapper{ - position: relative; - overflow: hidden; - clear: both; -} -.addedText { +.addedText, .oldAddedText { position: absolute; } |
