traque/static/vieilleux.html
2022-09-14 10:52:29 +02:00

64 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque | Client vieilleux</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<!-- SOCKET.IO INCLUDE -->
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#map { height: 500px; }
</style>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<div id="map"></div><br/>
<input id="name"/><button id="setName">Set team name</button><br/>
<input type="number" id="color" min="-1" value="0"/><button id="setColor">Set color</button><br/>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////
// SETUP MAP
setup_map();
//////////////////////////////////////////////////////////////////////////////
// UPDATE MAP
setup_socket_not_admin();
setup_socket_common();
//////////////////////////////////////////////////////////////////////////////
// SETTINGS -- NAME AND COLOR
document.querySelector('#setName').addEventListener('click', function(){
const input = document.querySelector('#name');
socket.emit("setName", {"name": input.value});
});
document.querySelector('#setColor').addEventListener('click', function(){
const input = document.querySelector('#color');
socket.emit("changeColor", {"color": input.value});
});
//////////////////////////////////////////////////////////////////////////////
// GEOLOCALISATION
setup_geoLoc();
</script>
</body>
</html>