forked from muyrety/Smarter
75 lines
3.9 KiB
Django/Jinja
75 lines
3.9 KiB
Django/Jinja
{% extends "base.j2" %}
|
|
|
|
{% block title %} In 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>
|
|
{% endblock %}
|
|
|
|
{% block after_bootstrap_js %}
|
|
<script src="{{ url_for('static', filename='js/play.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="container text-center">
|
|
<div id="gameDeletedModal" 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">Game deleted</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This game has been deleted by the owner</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center border-success-subtle">
|
|
<button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="d-none col-md-5 mt-1 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 mt-3 justify-content-between">
|
|
<h1 class="col-md-4 text-primary-emphasis"> {{ name }} <span id="currentQuestionNr">{{ curr_question }}</span>/{{ total }} </h1>
|
|
<div class="col-md-4">
|
|
<button id="leaveGame" class="btn btn-outline-danger">Leave game</button>
|
|
</div>
|
|
</div>
|
|
<hr class="border-primary">
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="d-none col-md-5 mt-1 alert bg-info-subtle text-success border-success-subtle alert-dismissible" id="unansweredAlert">
|
|
You have failed to answer the question in time.
|
|
<button id="unansweredAlertDismiss" type="button" class="btn-close"></button>
|
|
</div>
|
|
</div>
|
|
|
|
{% if answering and not has_answered %}
|
|
<h2 id="gameInProgress" class="text-primary-emphasis"> Game is in progress, please wait for the next question. </h2>
|
|
{% endif %}
|
|
<h2 class="{{ 'd-none' if not has_answered }} text-primary-emphasis" id="answered"> Your answer was recorded, please wait for the next question. </h2>
|
|
<h2 class="{{ 'd-none' if answering }} text-primary-emphasis" id="nextQuestionH"> Next question:
|
|
<span id="nextQuestion">{{ question if not answering }}</span>
|
|
</h2>
|
|
<h2 class="d-none text-primary-emphasis" id="currentQuestionH"> Question:
|
|
<span id="currentQuestion"></span>
|
|
</h2>
|
|
<div class="d-none row justify-content-around" id="upperRow">
|
|
<button disabled class="col-lg-4 col-md-5 col-sm-6 col-12 mx-2 my-3 btn btn-success rounded-0" id="answer0"></button>
|
|
<button disabled class="col-lg-4 col-md-5 col-sm-6 col-12 mx-2 my-3 btn btn-danger rounded-0" id="answer1"></button>
|
|
</div>
|
|
<div class="d-none row justify-content-around" id="lowerRow">
|
|
<button disabled class="col-lg-4 col-md-5 col-sm-6 col-12 mx-2 my-3 btn btn-secondary rounded-0" id="answer2"></button>
|
|
<button disabled class="col-lg-4 col-md-5 col-sm-6 col-12 mx-2 my-3 btn btn-primary rounded-0" id="answer3"></button>
|
|
</div>
|
|
<button id="waitingButton" class="btn btn-outline-primary mt-2" disabled>
|
|
<span class="spinner-border spinner-border-sm"></span>
|
|
<span role="status">Waiting for owner...</span>
|
|
</button>
|
|
</div>
|
|
{% endblock %}
|