diff options
Diffstat (limited to 'rannak/kaart')
| -rw-r--r-- | rannak/kaart/css/kaart.css | 61 | ||||
| -rw-r--r-- | rannak/kaart/index.html | 29 | ||||
| -rw-r--r-- | rannak/kaart/js/kaart.js | 71 |
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">←</button> + <button class="movementBtn" id="right-button">→</button> + <button class="movementBtn" id="up-button">↑</button> + <button class="movementBtn" id="down-button">↓</button> + <button class="movementBtn" id="zoom-in-button">+</button> + <button class="movementBtn" id="zoom-out-button">−</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 |