noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
22aed7d1cc
workadventure/website/dist/choose-map.html

157 lines
6.6 KiB
HTML
Raw Normal View History

add second page
2020-06-03 00:31:42 +02:00
<!doctype html>
<html class="no-js" lang="">
<head>
<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">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<h1 class="text-center pixel-title">CHOOSE YOUR MAP&nbsp;!</h1>
<div class="row no-gutters justify-content-center">
add second page
2020-06-03 00:31:42 +02:00
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;!</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;!</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;?</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;;)</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;?</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
add new page (choose map)
2020-06-03 00:59:41 +02:00
<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&nbsp;!</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&nbsp;!</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">
Fixing typo
2020-06-03 09:22:51 +02:00
<p>NO IDEA, or just want to ROAM THE STREETS&nbsp;? Enter the street map and choose your own path&nbsp;!</p>
add second page
2020-06-03 00:31:42 +02:00
</div>
</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">
add maps and improve link copy
2020-06-03 01:28:19 +02:00
<button class="copy-btn" onclick="copyToClipboard()">COPY MAP URL<small> TO CLIPBOARD</small></button>
add second page
2020-06-03 00:31:42 +02:00
</div>
<div class="col-sm-4 text-center text-sm-left">
<span id="new-url">to share it !</span>
add maps and improve link copy
2020-06-03 01:28:19 +02:00
<span id="url-copied"><img src="static/images/check.png">Link copied !</span>
add second page
2020-06-03 00:31:42 +02:00
</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>&gt;&gt;</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';
add maps and improve link copy
2020-06-03 01:28:19 +02:00
setTimeout(function(){
document.getElementById('new-url').style.display = 'inline';
document.getElementById('url-copied').style.display = 'none';
}, 2000);
add second page
2020-06-03 00:31:42 +02:00
}
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>
Reference in New Issue Copy Permalink