plakat Done, all Games Done!!

7 files changed, 368 insertions, 138 deletions

diff --git a/rannak/mangud/partorg/plakat/img/malevBlank.png b/rannak/mangud/partorg/plakat/img/malevBlank.png
new 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
new 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
new 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
new 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">&uarr;</button>
-                    <button class="alla">&darr;</button>
-                    <button class="vasak">&larr;</button>
-                    <button class="parem">&rarr;</button>
+                    <button disabled class="ules">&uarr;</button>
+                    <button disabled class="alla">&darr;</button>
+                    <button disabled class="vasak">&larr;</button>
+                    <button disabled class="parem">&rarr;</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">&uarr;</button>
-                    <button class="alla">&darr;</button>
-                    <button class="vasak">&larr;</button>
-                    <button class="parem">&rarr;</button>
+                    <button disabled class="ules">&uarr;</button>
+                    <button disabled class="alla">&darr;</button>
+                    <button disabled class="vasak">&larr;</button>
+                    <button disabled class="parem">&rarr;</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">&uarr;</button>
-                    <button class="alla">&darr;</button>
-                    <button class="vasak">&larr;</button>
-                    <button class="parem">&rarr;</button>
+                    <button disabled class="ules">&uarr;</button>
+                    <button disabled class="alla">&darr;</button>
+                    <button disabled class="vasak">&larr;</button>
+                    <button disabled class="parem">&rarr;</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">&uarr;</button>
-                    <button class="alla">&darr;</button>
-                    <button class="vasak">&larr;</button>
-                    <button class="parem">&rarr;</button>
+                    <button disabled class="ules">&uarr;</button>
+                    <button disabled class="alla">&darr;</button>
+                    <button disabled class="vasak">&larr;</button>
+                    <button disabled class="parem">&rarr;</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;
 }