forked from muyrety/Smarter
71 lines
3.8 KiB
Django/Jinja
71 lines
3.8 KiB
Django/Jinja
{% extends "base.j2" %}
|
|
|
|
{% block title %} Join game {% endblock %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
{% endblock %}
|
|
|
|
{% block after_bootstrap_js %}
|
|
<script type="module" src="{{ url_for('static', filename='js/show.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="container text-center">
|
|
<div id="deleteGameModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-info-subtle text-success border-success-subtle">
|
|
<div class="modal-header border-success-subtle">
|
|
<h5 class="modal-title">Are you sure?</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete the game? This action is irreversible.</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-evenly border-success-subtle">
|
|
<button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-outline-danger" id="deleteGame" data-bs-dismiss="modal">Delete game</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="d-none col-md-5 mt-2 alert bg-info-subtle text-success border-success-subtle alert-dismissible" id="reconnectAlert">
|
|
You lost your connection but have now been reconnected. Info shown might be out of date. Please refresh the page for the newest data.
|
|
<button id="reconnectAlertDismiss" type="button" class="btn-close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="d-none col-md-5 mt-3 alert bg-info-subtle text-success border-success-subtle alert-dismissible" id="errorAlert">
|
|
<p id="errorMessage"></p>
|
|
<button id="errorAlertDismiss" type="button" class="btn-close"></button>
|
|
</div>
|
|
</div>
|
|
<h2 class="mt-2 text-primary-emphasis">Share the ID or the QR code with others to let them join</h2>
|
|
<div class="row text-center justify-content-evenly">
|
|
<div class="col-auto mt-3">
|
|
<p class="text-primary-emphasis"> Game ID: <span id="gameID">{{ id }}</span></p>
|
|
<div class="mt-3 d-flex justify-content-center" id="qrCode">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mt-3">
|
|
<ul class="list-group" id="playerList">
|
|
<li class="list-group-item list-group-item-info text-success border-success-subtle"><strong>Players in game</strong></li>
|
|
<li class="list-group-item list-group-item-info text-success border-success-subtle">{{ g.user["username"] }} (you)</li>
|
|
{% for player in players %}
|
|
<li class="list-group-item list-group-item-info text-success border-success-subtle"> {{ player }} </li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-evenly mt-2">
|
|
<div class="col-md-3 m-2 text-center">
|
|
<button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteGameModal">Delete game</button>
|
|
</div>
|
|
<div class="col-md-3 m-2 text-center">
|
|
<button class="btn btn-outline-primary" id="startGame">Start game</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|