The-Hunt/app/templates/game_hunter_dashboard.html

{% 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(offset=hunter_delay) %}
                        {% if location %}{{ moment(location.timestamp).fromNow()}}
                        {% else %}
                        {{ location }}
                        {% endif %}
                {% 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() }}
<script type="text/javascript", crossorigin="anonymous">
    // Leaflet Map
    map = getMap()

    var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies(), offset=hunter_delay), 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, greenPlayerIcon)
    }

    map.fitBounds(
        bunnies.map(o => [o.latitude, o.longitude]).concat([self].map(p => [p.latitude, p.longitude]))
    );

</script>
{% endblock %}