Tsark, rolliValik, Map update

author: Rasmus Luha <rasmus.luha@gmail.com> 2023-01-07 20:15:49 +0200
committer: Rasmus Luha <rasmus.luha@gmail.com> 2023-01-07 20:15:49 +0200
commit: a23f08d5c33da938c758728bda20c79a57c76ab9 (patch)
tree: 06d6da58518327e3cd78591af4af39bad6e52b29 /rannak
parent: 2963d358fecd49fd9b140c4df1fea7de04cb5757 (diff)
16 files changed, 215 insertions, 51 deletions
diff --git a/rannak/endPage/main.js b/rannak/endPage/main.js
index b38f354..1f4a3c5 100644
--- a/rannak/endPage/main.js
+++ b/rannak/endPage/main.js
@@ -1,8 +1,7 @@
 let rollSpan = document.querySelector("span"); ;
 
-if (rollSpan.roll !=undefined){
+if (localStorage.roll != undefined){
     rollSpan.innerHTML = localStorage.roll;
-    console.log(localStorage.roll);
     delete localStorage.roll;
 }
 
diff --git a/rannak/kaart/css/kaart.css b/rannak/kaart/css/kaart.css
index 60bb1f9..1329303 100644
--- a/rannak/kaart/css/kaart.css
+++ b/rannak/kaart/css/kaart.css
@@ -1,20 +1,35 @@
-svg path{
-    fill: #00394f;
-    stroke: #eee !important; 
-    stroke-width: .25 !important;
+body {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
 }
 
-svg path:hover {
-    fill: #006284;
-    transition: 0.6s !important;
-    cursor: pointer !important;
-    
+/* Upper Container Stuff*/
+.upperContainer{
+    text-align: center;
 }
 
+
+.upperContainer .movementBtn{
+    background-color: #687494;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
+}
+
+
+
+
+/* Move On Stuff*/
+
 .moveOn{
     display: inline-block;
     border: none;
     padding: 6px 12px;
+    margin-left: 50px;
     margin-botton: 0;
     font-size: 1rem;
     font-weight: normal;
@@ -29,3 +44,31 @@ button:disabled{
     opacity: 0.5;
 }
 
+
+
+/* Kaart Stuff */
+
+
+.svgContainer {
+    overflow: hidden;
+    border: 2px solid #E3D4AD;
+    border-radius: 10px;
+    margin: 1.5%;
+    background-color: #434854;
+}
+
+ /* #00394f, #006284 */
+
+svg {transition: transform 0.1s linear 0.1s;}
+svg path{
+    fill: #767F94;
+    stroke: #eee !important; 
+    stroke-width: .25 !important;
+}
+
+svg path:hover {
+    fill: #A9B5D4;
+    transition: 0.6s !important;
+    cursor: pointer !important;
+    
+}
diff --git a/rannak/kaart/index.html b/rannak/kaart/index.html
index 9160fd4..bba5c51 100644
--- a/rannak/kaart/index.html
+++ b/rannak/kaart/index.html
@@ -12,24 +12,30 @@
 
 <body class="bg-dark">
 
-    <div class="container">
-        <div class="row align-items-center">
-            <div class="col-8 text-center text-white">
+    <div class="upperContainer text-white">
+            <div>
                 <h1>Kaardimäng</h1>
                 <p>Leia esimesed kümme riiki, kes tunnustasid De Facto Eesti iseseisvust
-                <br>(testiks leia Eesti, Holland ja Portugal)</p>
+                <br>(Praegu testiks leia Eesti, Holland ja Portugal)</p>
             </div>
 
-            <div class="col-4">
+            <div>
+
+              <button class="movementBtn" id="left-button">&larr;</button>
+              <button class="movementBtn" id="right-button">&rarr;</button>
+              <button class="movementBtn" id="up-button">&uarr;</button>
+              <button class="movementBtn" id="down-button">&darr;</button>
+              <button class="movementBtn" id="zoom-in-button">&plus;</button>
+              <button class="movementBtn" id="zoom-out-button">&minus;</button>
+
               <button class="moveOn" disabled>Liigu Edasi</button>
-            </div>
-        </div>
+
+          </div>
     </div>
 
 
-    <?xml version="1.0"?>
     <!--
-      *************Map created by Simplemaps.com********************		
+    *************Map created by Simplemaps.com********************		
     *************Attribution is highly appreciated!***************
     *************http://simplemaps.com****************************
 
@@ -54,8 +60,8 @@
     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
-
-  -->
+    -->
+  <div class="svgContainer">
     <svg baseprofile="tiny" stroke-linecap="round" stroke-linejoin="round" version="1.2" viewbox="0 0 2000 857" xmlns="http://www.w3.org/2000/svg">
           <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan">
         </path>
@@ -1004,6 +1010,7 @@
          <circle cx="1798.2" cy="719.3" id="2">
         </circle>
         </svg>
+    </div>
 
     <!-- javascript -->
     <script src="js/kaart.js"></script>
diff --git a/rannak/kaart/js/kaart.js b/rannak/kaart/js/kaart.js
index 4bb0afe..f0921b5 100644
--- a/rannak/kaart/js/kaart.js
+++ b/rannak/kaart/js/kaart.js
@@ -1,3 +1,74 @@
+// ******************** Zoom Stuff **************************** //
+
+const svg = document.querySelector("svg");
+
+const getTransformParameters = (element) => {
+  const transform = element.style.transform;
+  let scale = 1, x = 0, y = 0;
+
+  if (transform.includes("scale"))
+    scale = parseFloat(transform.slice(transform.indexOf("scale") + 6));
+  if (transform.includes("translateX"))
+    x = parseInt(transform.slice(transform.indexOf("translateX") + 11));
+  if (transform.includes("translateY"))
+    y = parseInt(transform.slice(transform.indexOf("translateY") + 11));
+
+  return { scale, x, y };
+};
+
+
+const getTransformString = (scale, x, y) =>
+  "scale(" + scale + ") " + "translateX(" + x + "%) translateY(" + y + "%)";
+
+
+// Pan and Zoom funcs
+
+const pan = (direction) => {
+  const { scale, x, y } = getTransformParameters(svg);
+  let dx = 0, dy = 0;
+
+  switch (direction) {
+    case "left":
+      dx = 3;
+      break;
+    case "right":
+      dx = -3;
+      break;
+    case "up":
+      dy = 3;
+      break;
+    case "down":
+      dy = -3;
+      break;
+  }
+
+  svg.style.transform = getTransformString(scale, x + dx, y + dy);
+};
+
+
+const zoom = (direction) => {
+  const { scale, x, y } = getTransformParameters(svg);
+  let dScale = 0.1;
+  if (direction == "out") dScale *= -1;
+  if (scale == 0.1 && direction == "out") dScale = 0;
+  svg.style.transform = getTransformString(scale + dScale, x, y);
+};
+
+
+// Event Listeners
+
+document.getElementById("left-button").onclick = () => pan("left");
+document.getElementById("right-button").onclick = () => pan("right");
+document.getElementById("up-button").onclick = () => pan("up");
+document.getElementById("down-button").onclick = () => pan("down");
+
+document.getElementById("zoom-in-button").onclick = () => zoom("in");
+document.getElementById("zoom-out-button").onclick = () => zoom("out");
+
+
+
+// ******************** Other Stuff **************************** //
+
 const riigid = document.querySelectorAll("svg path")
 
 // Praegu Eesti, Portugal, Holland
diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html
index f2aabe8..095c110 100644
--- a/rannak/mangud/partorg/sonaragastik/index.html
+++ b/rannak/mangud/partorg/sonaragastik/index.html
@@ -26,7 +26,6 @@
         <div class="text-center inputBox">
           <button type="button" class="subBtn subDisabled" onclick="proovi();">Proovi</button>
           <div class="messageBox">
-            siia tekib info
           </div>
 
         </div>
diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js
index c08aef8..33626b1 100644
--- a/rannak/mangud/partorg/sonaragastik/script.js
+++ b/rannak/mangud/partorg/sonaragastik/script.js
@@ -119,7 +119,7 @@ function proovi(){
 function moveOnEnable(){
     const btn = document.querySelector(".moveOn");
     btn.disabled = false;
-    localStorage.setItem('roll', "Partogi");
+    localStorage.setItem('roll', "Partorgi");
     btn.onclick = () => location.href = "../../../endPage";
 
     // submit btn
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 1de96dd..9fcbef6 100644
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -7,7 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
 
-  <body>
+  <body class="text-white">
 
     <div class="containeraa">
 
@@ -22,7 +22,7 @@
 
 
     <!-- Modal -->
-    <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
 
@@ -112,16 +112,16 @@
               <button id="nextTekstBtn" onclick="nextText();">Veel üks Tekst</button>
 
               <div class="textAddWrapper">
-                <span class="ules">&uarr;</span>
-                <span class="alla">&darr;</span>
-                <span class="vasak">&larr;</span>
-                <span class="parem">&rarr;</span>
+                <button class="ules">&uarr;</button>
+                <button class="alla">&darr;</button>
+                <button class="vasak">&larr;</button>
+                <button class="parem">&rarr;</button>
 
-                <span class="vertVasak">&cularr;</span>
-                <span class="vertParem">&curarr;</span>
+                <button class="vertVasak">&cularr;</button>
+                <button class="vertParem">&curarr;</button>
 
-                <span class="plus">+</span>
-                <span class="minus">-</span>
+                <button class="plus">&plus;</button>
+                <button class="minus">&minus;</button>
 
                 <input id="colorText" type="color" value="#000000"/>
 
@@ -129,7 +129,7 @@
 
             </div>  <!-- TextPos End -->
 
-            <div class="nulliBtn">
+            <div>
               <label for="nulliBtn">Nulli Särk:</label>
               <button class="nulliBtn">Nulli särk</button>
             </div>
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index 485c189..ddbd533 100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -375,7 +375,7 @@ const chkBtn = document.querySelector(".checkMoveOn");
 chkBtn.addEventListener("click", (e) => {
 
     if (stuffDone.length >= 3){
-        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "green");
+        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543");
         moveOnEnable();
     }
     else
@@ -386,6 +386,13 @@ function moveOnEnable(){
     const btn = document.querySelector(".moveOn");
     btn.disabled = false;
     btn.onclick = () => location.href = "../utlused";
+
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = 0;
+        elinjo.style.width = 0;
+    }
+
 }
 
 // 6
@@ -437,4 +444,12 @@ nulliBtn.addEventListener("click", () => {
     it.style.left = brr.left + 200;
     //it.style.top = brr.top + 300;
 
+
+    // Moving IMg Corners
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = "7px";
+        elinjo.style.width = "7px";
+    }
+
 })
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css
index 6d1f5fb..ff8a478 100644
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -1,5 +1,5 @@
 body{
-    background-color: #fffcc9 !important;
+    background-color: #FADFCA !important;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -18,7 +18,7 @@ body{
     width: 50%;
     height: 100vh;
     text-align: center;
-    background-color: #B3B07B;
+    background-color: #544B44;
 }
 
 
@@ -61,6 +61,9 @@ button:disabled{
 
 
 /* Modal Stuff */
+.modal{
+    color: black !important;
+}
 
 .closeModalButton {
   border-radius: 50px;
@@ -69,6 +72,7 @@ button:disabled{
 .modalButton{
     padding: 5px !important;
     margin-left: 30px !important;
+    margin-top: 3px !important;
     background-color: rgba(0,136,169,1) !important;
     border: none !important;
     border-radius: 50px !important;
@@ -113,6 +117,17 @@ svg {
 
 /*Muutuste osa*/
 
+.muutused button {
+    background-color: #596B6E;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
+    font-size: 0.9rem;
+}
+
 .muutused {
     margin-top: 10px;
     border-top: 2px solid gray;
@@ -141,7 +156,17 @@ svg {
 }
 
 .nulliBtn {
-    font-size: 1.2rem;
+    background-color: red !important;
+}
+
+.textAddWrapper button {
+    background-color: #596B6E;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
 }
 
 
diff --git a/rannak/rolliValik/index.html b/rannak/rolliValik/index.html
index 9118aae..95d6b41 100644
--- a/rannak/rolliValik/index.html
+++ b/rannak/rolliValik/index.html
@@ -22,10 +22,10 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/opilane.jpg" class="card-img-top" alt="...">
+            <img src="pildid/uliopilane.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Üliõpilane</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis expedita nihil quam possimus quidem iure rerum eius ut, et ducimus tempora, temporibus officia modi. Quas!</p>
+              <h5 class="card-title"><strong>Üliõpilane</strong></h5>
+              <p class="card-text">Olen Virumaa poiss – täpsemalt Lääne-Viru maakonnast Rakke alevikust. See on üks selline keskmise suurusega raudteeasula, mille suur osa elanikest töötab kohalikus lubjatehases. </p>
               <a href="../mangud/uliopilane/ajatelg" class="btn btn-lg btn-dark">Vali!</a>
             </div>
           </div>
@@ -33,10 +33,11 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/partorg.jpg" class="card-img-top" alt="...">
+            <img src="pildid/partorg.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Partorg</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia debitis dignissimos esse odio quaerat. Neque suscipit asperiores repellendus, quo fugit nam amet vero reprehenderit obcaecati.</p>
+              <h5 class="card-title"><strong>Partorg</strong></h5>
+              <br/>
+              <p class="card-text">Olen sündinud Nõukogude Liidus 1933. aastal ning Suure Isamaasõja keerises sattusin 11- aastasena koos vanematega oma esiisade maale, Eesti NSVsse.</p>
               <a href="../mangud/partorg/kuulsused" class="btn btn-lg btn-dark">Vali!</a>
             </div>
           </div>
@@ -44,10 +45,13 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/direktor.jpg" class="card-img-top" alt="...">
+            <img src="pildid/direktor.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Direktor</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatem fugit minima eum labore. Amet, nobis? Cupiditate inventore quo voluptatem soluta! Sapiente excepturi deleniti assumenda!</p>
+              <h5 class="card-title"><strong>Direktor</strong></h5>
+              <p class="card-text">
+                <br/>
+                Olen sündinud väga segastel aegadel 7. novembril 1948. aastal Põltsamaa lähedal Umbusi külas. Vanemad olid kooliõpetajad Põltsamaal, vanavanemad aga talupidajad.
+              </p>
               <!--<a href="#" class="btn btn-lg btn-dark">Vali!</a> -->
             </div>
           </div>
@@ -55,10 +59,11 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/perenaine.jpg" class="card-img-top" alt="...">
+            <img src="pildid/perenaine.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Perenaine</h5>
-              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim alias officia tempore, veritatis provident consectetur voluptatem ea labore. Maxime porro vero omnis perspiciatis accusantium sint!</p>
+              <h5 class="card-title"><strong>Perenaine</strong></h5>
+              <br/>
+              <p class="card-text">Olen tüüpiline tänapäeva naine – päeval tööl, õhtul kodus. Abielus, kaks last. Igapäevaelu nõuab päris suuri oskusi, et ära elada.</p>
               <!--<a href="#" class="btn btn-lg btn-dark">Vali!</a> -->
             </div>
           </div>
diff --git a/rannak/rolliValik/pildid/arimees.jpg b/rannak/rolliValik/pildid/arimees.jpg
deleted file mode 100644
index 3cb21cf..0000000
--- a/rannak/rolliValik/pildid/arimees.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/direktor.jpg b/rannak/rolliValik/pildid/direktor.jpg
deleted file mode 100644
index 74f2cf5..0000000
--- a/rannak/rolliValik/pildid/direktor.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/kaitseliitlane.jpg b/rannak/rolliValik/pildid/kaitseliitlane.jpg
deleted file mode 100644
index 37ae271..0000000
--- a/rannak/rolliValik/pildid/kaitseliitlane.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/opilane.jpg b/rannak/rolliValik/pildid/opilane.jpg
deleted file mode 100644
index 7e42755..0000000
--- a/rannak/rolliValik/pildid/opilane.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/partorg.jpg b/rannak/rolliValik/pildid/partorg.jpg
deleted file mode 100644
index 2df392c..0000000
--- a/rannak/rolliValik/pildid/partorg.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/perenaine.jpg b/rannak/rolliValik/pildid/perenaine.jpg
deleted file mode 100644
index 94c5b54..0000000
--- a/rannak/rolliValik/pildid/perenaine.jpg
+++ /dev/null
author	Rasmus Luha <rasmus.luha@gmail.com>	2023-01-07 20:15:49 +0200
committer	Rasmus Luha <rasmus.luha@gmail.com>	2023-01-07 20:15:49 +0200
commit	a23f08d5c33da938c758728bda20c79a57c76ab9 (patch)
tree	06d6da58518327e3cd78591af4af39bad6e52b29 /rannak
parent	2963d358fecd49fd9b140c4df1fea7de04cb5757 (diff)