only refresh lobby when asked for

This commit is contained in:
ajuvercr 2020-03-31 11:48:35 +02:00
parent 0dc4d6f662
commit de2f32c667
4 changed files with 86 additions and 9 deletions

View file

@ -45,8 +45,3 @@ async function start_game() {
} }
window.onload = () => refresh_state(); window.onload = () => refresh_state();
setInterval(
() => refresh_state(),
1000
);

View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.867 477.867" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve">
<g>
<g>
<path d="M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479
c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933
c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207
c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4
C426.667,7.641,419.026,0,409.6,0z"/>
</g>
</g>
<g>
<g>
<path d="M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696
c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606
c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4
c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068
c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -14,13 +14,40 @@ body {
height: 100%; height: 100%;
} }
.refresh {
position: absolute;
top: 5px;
right: 25px;
width: 40px;
height: 40px;
background-color: #ff7f00;
mask-image: url("refresh.svg");
-webkit-mask-image: url("refresh.svg");
animation: spin 2s linear infinite;
animation-play-state: paused;
}
.refresh:hover {
cursor: pointer;
animation-play-state: running;
}
@keyframes spin {
100% {transform: rotate(1turn); }
}
.lobby_wrapper {
position: relative;;
}
.lobby { .lobby {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
align-self: flex-start; align-self: flex-start;
overflow-y: scroll; overflow-y: scroll;
height: 100%;; height: 100%;
} }
.input_container { .input_container {

View file

@ -2,7 +2,10 @@
{% block content %} {% block content %}
<div class="main"> <div class="main">
<div id="lobby" class="lobby"> <div class="lobby_wrapper">
<div class="refresh" onclick="refresh_state()"></div>
<div id="lobby" class="lobby">
</div>
</div> </div>
<div class="creator"> <div class="creator">
<h1>Start new game</h1> <h1>Start new game</h1>
@ -30,6 +33,5 @@
</div> </div>
</div> </div>
</div> </div>
<script src="script/lobby.js"></script> <script src="script/lobby.js"></script>
{% endblock %} {% endblock %}