<!doctype html> <html class="no-js" lang=""> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-10196481-11'); </script> <link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png"> <link rel="manifest" href="static/images/favicons/manifest.json"> <meta name="msapplication-TileColor" content="#000000"> <meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png"> <meta name="theme-color" content="#000000"> <meta charset="utf-8"> <title>Choose map - WorkAdventu.re</title> <link rel="stylesheet" href="main.css"> <script src="bundle.js"></script> </head> <body class="choose-map"> <div class="container-fluid container-lg section pt-5"> <h1 class="text-center pixel-title">CHOOSE YOUR MAP !</h1> <div class="row"> <div class="col text-center"> <p>Pick a map that suits your mood! If you don't find what you need, you can always <a href="create-map.html">CREATE YOUR OWN map</a>.</p> </div> </div> <div class="row no-gutters justify-content-center"> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/skapa-map/map.json" id="map_1"> <img src="static/images/maps/creative.png"> <p>Need some inspiration? Enter our CREATIVE SPACE !</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/pub-map/map.json" id="map_2"> <img src="static/images/maps/pub.png"> <p>Too late for working ? Just GO TO THE PUB !</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/office-map/map.json" id="map_3"> <img src="static/images/maps/office.png"> <p>Want to try a SIMPLE OFFICE map ?</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/classroom-map/map.json" id="map_4"> <img src="static/images/maps/school.png"> <p>Send your kids BACK TO SCHOOL... and rest a bit ;)</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/tower-map/map.json" id="map_5"> <img src="static/images/maps/dungeon.png"> <p>Dungeons & Dragons Nostalgia ?</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="npeguin.github.io/fantasy-map/map.json" id="map_6"> <img src="static/images/maps/fantasy.png"> <p>Explore a fantasy world !</p> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="map-item" data-url="api.workadventu.re/map/files/Floor0/floor0.json" id="map_7"> <img src="static/images/maps/tcm.png"> <p>Need a bigger Office? Visit us !</p> </div> </div> </div> <div class="row"> <div class="col text-center"> <div class="map-item" data-url="npeguin.github.io/corridor-map/map.json" id="map_8"> <img src="static/images/maps/street.png"> <p>NO IDEA, or just want to ROAM THE STREETS ? Enter the street map and choose your own path !</p> </div> </div> </div> <div class="row"> <div class="col text-center"> <p>Could not find what you need? No worries, you can always <a href="create-map.html">CREATE YOUR OWN map</a>.</p> </div> </div> </div> <div class="container-fluid container-lg section text-center" id="map-link-container" style="display: none;"> <h1 class="mb-3">YOUR MAP URL IS</h1> <p id="wa-link" class="mb-5"></p> <div class="row align-items-center justify-content-center"> <div class="col-sm-8 text-right mb-4 pb-sm-0"> <button class="copy-btn" onclick="copyToClipboard()">COPY MAP URL<small> TO CLIPBOARD</small></button> </div> <div class="col-sm-4 text-center text-sm-left"> <span id="new-url">to share it !</span> <span id="url-copied"><img src="static/images/check.png">Link copied !</span> </div> </div> <div class="row start-area justify-content-center mt-5"> <div class="col-12 col-sm-1 d-none d-sm-block"> <img src="static/images/female-character.gif"> </div> <div class="col-12 col-sm-4 mb-3 mb-sm-0"> <button id="start-btn" onclick="play()">START <span>>></span></button> </div> <div class="col-12 col-sm-1"> <img src="static/images/male-character.gif"> </div> </div> </div> <script> var rand = ''; var characters = 'abcdefghijklmnopqrstuvwxyz'; var charactersLength = characters.length; for ( var i = 0; i < 9; i++ ) { rand += characters.charAt(Math.floor(Math.random() * charactersLength)); } var id = rand.slice(0,3) + '-' + rand.slice(3,6) + '-' + rand.slice(6); var mapLink = document.getElementById('wa-link'); var mapLinkContainer = document.getElementById('map-link-container'); function setSelectedMap(element){ var items = document.querySelectorAll(".map-item"); [].forEach.call(items, function(el) { el.classList.remove("active"); }); element.classList.add("active"); mapLink.innerText = window.location.protocol + "//play."+window.location.host + "/_/" + id + "/" + element.dataset.url; mapLinkContainer.style.display = 'block'; document.getElementById('new-url').style.display = 'inline'; document.getElementById('url-copied').style.display = 'none'; mapLinkContainer.scrollIntoView({ block: "start", inline: "nearest", behavior: "smooth" }) } function copyToClipboard() { var aux = document.createElement("input"); aux.setAttribute("value", mapLink.innerHTML); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux); document.getElementById('new-url').style.display = 'none'; document.getElementById('url-copied').style.display = 'inline'; setTimeout(function(){ document.getElementById('new-url').style.display = 'inline'; document.getElementById('url-copied').style.display = 'none'; }, 2000); } function play(){ window.location.assign(mapLink.innerText); } (function() { document.addEventListener('click', function (event) { // If the clicked element doesn't have the right selector, bail var mapItem = event.target.closest('.map-item'); if (mapItem === null) { return; } // Don't follow the link event.preventDefault(); setSelectedMap(mapItem); }, false); })(); </script> </body> </html>