diff --git a/backend/static/script/lobby.js b/backend/static/script/lobby.js index ee173da..320fb64 100644 --- a/backend/static/script/lobby.js +++ b/backend/static/script/lobby.js @@ -45,8 +45,3 @@ async function start_game() { } window.onload = () => refresh_state(); - -setInterval( - () => refresh_state(), - 1000 -); diff --git a/backend/static/style/refresh.svg b/backend/static/style/refresh.svg new file mode 100644 index 0000000..d095322 --- /dev/null +++ b/backend/static/style/refresh.svg @@ -0,0 +1,53 @@ + + + diff --git a/backend/static/style/style.css b/backend/static/style/style.css index 42d782f..e011c6b 100644 --- a/backend/static/style/style.css +++ b/backend/static/style/style.css @@ -14,13 +14,40 @@ body { 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 { flex-grow: 1; display: flex; - flex-direction: column; + flex-wrap: wrap; align-self: flex-start; overflow-y: scroll; - height: 100%;; + height: 100%; } .input_container { diff --git a/backend/templates/lobby.html.tera b/backend/templates/lobby.html.tera index 851cb9a..e1b4886 100644 --- a/backend/templates/lobby.html.tera +++ b/backend/templates/lobby.html.tera @@ -2,7 +2,10 @@ {% block content %}