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/kaart
parent: 2963d358fecd49fd9b140c4df1fea7de04cb5757 (diff)
3 files changed, 141 insertions, 20 deletions
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
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/kaart
parent	2963d358fecd49fd9b140c4df1fea7de04cb5757 (diff)