{% extends 'player_base.html' %} {% block head %} {{ super() }} <link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" /> <script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script> <script src="{{ url_for('static', filename='assets/leaflet/utils.js') }}"></script> {% endblock %} {% block player_app_content %} <div class="row"> <div class="col-xs-0 col-md-1"></div> <div class="col-xs-12 col-md-7"> <h2>Bunnies</h2> <div class="table"> <table class="table"> <thead> <tr> <th scope="col">Player Name</th> <th scope="col">Times Caught</th> <th scope="col">Last location</th> <th scope="col"></th> </tr> </thead> <tbody> {% set player = current_user.player_in(game) %} {% for bunny in game.bunnies() %} <tr> <td>{{ bunny.user.name }}</td> <td><span style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span> / <span style="color:red;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'denied') |list|length}}</span> / <span style="color:gray;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'none') |list|length}}</span> </td> <td>{% with location = bunny.last_location() %} {% if location %}{{ moment(location.timestamp).fromNow()}}: {% endif %} {{ location }} {% endwith %}</td> <td> <a href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=bunny.user.name) }}"> <button class="btn btn-success btn-sm">Catch</button> </a> </td> </tr> {% endfor %} </tbody> </table> <span style="font-size: smaller;"> (<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span style="color:gray;">Not reviewed</span>) </span> </div> </div> <div class="col-xs-12 col-md-3"> {% include '_game_player_info.html' %} </div> </div> <div class="row"> <div class="col-xs-1 col-md-1"></div> <div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div> <div class="col-xs-1 col-md-1"></div> </div> {% endblock %} {% block scripts %} {{ super() }} {{ moment.include_moment() }} <script type="text/javascript", crossorigin="anonymous"> // Leaflet Map var map = L.map( 'map', { center: [52.2, 5.3], minZoom: 6, maxZoom: 19, bounds: [[50.5, 3.25], [54, 7.6]], zoom: 8 }); L.control.scale().addTo(map); L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', { attribution: 'Kaartgegevens © <a href="https://kadaster.nl">Kadaster</a>' }).addTo( map ); var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}') for (var i = 0; i < bunnies.length; i++){ addPlayerMarker(map, bunnies[i]) } var self = JSON.parse('{{ json.dumps(current_user.last_location(game), cls=location_encoder)|safe }}') if (self){ addPlayerMarker(map, self) } </script> {% endblock %}