From a23f08d5c33da938c758728bda20c79a57c76ab9 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sat, 7 Jan 2023 20:15:49 +0200 Subject: Tsark, rolliValik, Map update --- rannak/kaart/css/kaart.css | 61 +++++++++++++++++++++++++++++++++------ rannak/kaart/index.html | 29 ++++++++++++------- rannak/kaart/js/kaart.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 20 deletions(-) (limited to 'rannak/kaart') 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 @@ -
-
-
+
+

Kaardimäng

Leia esimesed kümme riiki, kes tunnustasid De Facto Eesti iseseisvust -
(testiks leia Eesti, Holland ja Portugal)

+
(Praegu testiks leia Eesti, Holland ja Portugal)

-
+
+ + + + + + + + -
-
+ +
- + --> +
@@ -1004,6 +1010,7 @@ +
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 -- cgit v1.2.3