Code:
html:
<template name="teams">
<head>
<title> CastleWars </title>
<link rel="icon" href="https://img00.deviantart.net/4b4c/i/2014/272/6/1/3d_fantasy_castle_stock_parts__28_palace_kingdom_by_madetobeunique-d80t3bo.png">
</head>
<body>
<!-- musica de fundo -->
{{showChat}}
<!-- Barra Topo -->
<div class="top">
<!--slidebar -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
{{#if currentUser}} <a href="{{pathFor 'play'}}">Jogar</a>
<a href="{{pathFor 'userstatus'}}">Dados</a>{{/if}}
<a href="{{pathFor 'main'}}">Início</a>
</div>
<!-- Use any element to open the sidenav --><span onclick="openNav()"><img class= "img1" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png"width="50px" height="50px"/></span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="login">
{{> loginButtons align="right"}}
</div>
</div>
<!-- Corpo -->
<div class="center" id="center">
<!-- Galeria -->
<div class="teams">
<center>
<h1>Equipas</h1>
</center><br>
<img class= "imgline" src="https://www.freeiconspng.com/uploads/line-png-32.png"width="100%" height="100px"/>
</div>
<div class= "logos">
<center>
<img class= "logo1" src="https://vignette.wikia.nocookie.net/gems-of-war/images/a/a3/Banner_Pridelands.png/revision/latest?cb=20180227112123"alt="White Village" width="15%" height="20%"/>
<img class= "logo2" src="https://vignette.wikia.nocookie.net/gems-of-war/images/1/19/Banner_Whitehelm.png/revision/latest?cb=20180226222906"alt="Forestvile" width="15%" height="20%"/>
<br><br><br>
{{#each redteam}} <label class="textoazul"> Membros: {{membros}} | Pontos: {{pontos}} </label> <input type="text" value={{pontos}} name="rget"> {{/each}}
{{#each yellowteam}} <label class="textoazul"> Membros: {{membros}} | Pontos: {{pontos}} </label> <input type="text" value={{pontos}} name="yget">{{/each}}
</center>
</div>
<br><br><br><input type="button" class= "buttonmap" value="Verificar território"><br><br><br>
{{#if showmap}}
<center>
<h1>Mapa das Conquistas</h1>
</center><br><br>
<img class= "imgline" src="https://www.freeiconspng.com/uploads/line-png-32.png"width="100%" height="100px"/>
{{calcmap}}
<form class="red" id="redmap"><h1></h1></form>
<div class="map">
<center><img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg"alt="Forestvile" width="600px" height="500px"/></center>
</div>
<form class="yellow" id="yellowmap"><h1></h1></form>
<br><br><br><br><br><br>
{{/if}}
</div>
<br><br><br>
</body>
</template>
js:
Template.teams.helpers({
redteam: function () {
return Collections.find({ nome: "Forestville"});
},
yellowteam: function () {
return Collections.find({ nome: "White Vilage"});
},
showmap: function () {
return Session.get('showmap')
},
})
Template.teams.events({
'click .buttonmap': function(event) {
Session.set('showmap', true )
event.preventDefault();
var red = document.getElementById("redmap");
var yellow = document.getElementById("yellowmap");
var yget = event.target.yget.value;
var rget = event.target.rget.value;
console.log(yget)
var totalr = (600*200) / 100
var totaly = (600*100) / 200
console.log("jdhajdfhjdshfjhsfjshfjdsfhjshfhdjf")
console.log(totalr)
red.style.width = totalr;
yellow.style.width = totaly;
},
});