The-Hunt/app/templates/game_bunny_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>Objective Locations:</h2>
{% if game.objectives %}
<div class="table">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Objective Name</th>
                <th scope="col">Latitude</th>
                <th scope="col">Longitude</th>
                <th scope="col">Found</th>
            </tr>
        </thead>
        <tbody>
            {% for objective in game.objectives %}
            <tr>
                <td>{{ objective.name }}</td>
                <td>{{ objective.latitude }}</td>
                <td>{{ objective.longitude }}</td>
                <td>{{ 'Yes' if objective in current_user.player_in(game).found_objectives else 'No' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

</div>
<div class="col-xs-12 col-md-3">
  {% include '_game_player_info.html' %}
</div>
</div>

{% if game.objectives %}
<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>
{% endif %}

{% endblock %}

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
    // Leaflet Map
    map = getMap()

    var string = '{{ current_user.player_in(game).encode_objectives() |safe }}'
    var objectives = JSON.parse(string)
    for (var i = 0; i < objectives.length; i++){
        addObjectiveMarker(map, objectives[i])
    }

    var self = JSON.parse('{{ json.dumps(current_user.last_location(game), cls=location_encoder)|safe }}')
    if (self){
        addPlayerMarker(map, self)
    }

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

</script>
{% endblock %}