From de2f32c6678b9d8a324d71e497496cf7a3522a84 Mon Sep 17 00:00:00 2001
From: ajuvercr <arthur.vercruysse@outlook.com>
Date: Tue, 31 Mar 2020 11:48:35 +0200
Subject: [PATCH] only refresh lobby when asked for

---
 backend/static/script/lobby.js    |  5 ---
 backend/static/style/refresh.svg  | 53 +++++++++++++++++++++++++++++++
 backend/static/style/style.css    | 31 ++++++++++++++++--
 backend/templates/lobby.html.tera |  6 ++--
 4 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 backend/static/style/refresh.svg

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 @@
+<?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>
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 %}
     <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 class="creator">
             <h1>Start new game</h1>
@@ -30,6 +33,5 @@
             </div>
         </div>
     </div>
-
     <script src="script/lobby.js"></script>
 {% endblock %}