implement reset button and simplify html

2 files changed, 35 insertions, 16 deletions

diff --git a/cyberschuessel/schuessel.py b/cyberschuessel/schuessel.py
index 00c5670..8651d10 100644
--- a/cyberschuessel/schuessel.py
+++ b/cyberschuessel/schuessel.py
@@ -17,7 +17,11 @@ class Schuessel:
 
         self.counter = itertools.count()
         self.clients = {}
-        self.active_id = None
+
+    def reset(self):
+        self.phase = 0
+        self.words = []
+        self.drawn = []
 
     def schuessel_state(self):
         return {
@@ -94,7 +98,6 @@ class Schuessel:
                 data = json.loads(msg.data)
 
                 if data['action'] == 'draw':
-
                     last_word = data.get('last_word', '')
                     new_word = self.draw(last_word)
 
@@ -120,6 +123,13 @@ class Schuessel:
                     self.add(new_word)
                     log.info(f'words in schuessel {self.words}')
                     await self.broadcast({'action': 'add'})
+
+                elif data['action'] == 'reset':
+                    self.reset()
+                    reset_msg = {'action': 'init'}
+                    reset_msg.update(self.schuessel_state())
+                    await self.broadcast(reset_msg)
+
                 else:
                     assert (0 == 1)
             elif msg.type == aiohttp.WSMsgType.ERROR:
diff --git a/cyberschuessel/templates/index.html b/cyberschuessel/templates/index.html
index 99927ba..8839f07 100644
--- a/cyberschuessel/templates/index.html
+++ b/cyberschuessel/templates/index.html
@@ -68,6 +68,7 @@
         strings.drawn_prefix = {'en': 'Words already guessed:', 'de': 'Wörter bereits erraten:'};
         strings.drawn_word_prefix = {'en': 'Current word:', 'de': 'Aktuelles Wort:'};
         strings.draw_button = {'en': 'Draw word', 'de': 'Wort ziehen'};
+        strings.reset_button = {'en': 'Reset', 'de': 'Neu'};
         strings.add_button = {'en': 'Add word', 'de': 'Wort hinzufügen:'};
         strings.add_word = {'en': 'Anything', 'de': 'Irgendwas'};
 
@@ -84,6 +85,9 @@
 
         // init visual strings
         {
+          let reset_button = document.getElementById("reset_button");
+          reset_button.value = strings.reset_button[userLang];
+
           let add_word = document.getElementById('add_word');
           add_word.placeholder = strings.add_word[userLang];
 
@@ -114,9 +118,9 @@
           set_words_drawn(words_drawn + diff);
         }
 
-        hide_add_div = function() {
-          let add_div = document.getElementById('add_div');
-          add_div.innerHTML = '';
+        reset_drawn_word = function() {
+          document.getElementById('drawn_word').innerText = "";
+          last_word = "";
         }
 
         set_phase = function(val) {
@@ -124,8 +128,12 @@
           let words_drawn_text = document.getElementById('schuessel_phase');
           words_drawn_text.innerText =  strings.phase_prefix[userLang] + " " + phase;
 
+          let add_div = document.getElementById('add_div');
           if (phase != 0) {
-            hide_add_div();
+            add_div.style.display = 'none';
+          } else {
+            add_div.style.display = 'block';
+            reset_drawn_word();
           }
 
         }
@@ -150,8 +158,7 @@
             // the next 'draw' msg.
             // And the'draw' msg is always received after a 'drawn' event
             // because websockets are streams
-            document.getElementById('drawn_word').innerText = "";
-            last_word = "";
+            reset_drawn_word();
             break;
 
           case 'draw':
@@ -187,6 +194,13 @@
           conn.send(JSON.stringify(data));
           return false;
         }
+
+        document.getElementById("reset_button").onclick = function() {
+          let data = {};
+          data.action = 'reset';
+          conn.send(JSON.stringify(data));
+          return false;
+        }
       });
     </script>
   </head>
@@ -194,8 +208,8 @@
   <body>
     <!-- <h3 id="schuessel_id"></h3> -->
     <div class="content">
-    <section role="main"> 
-        <h3 id="schuessel_phase"></h3>
+        <input id="reset_button" type="button"/>
+        <h3 id="schuessel_phase" style="display:inline-block" ></h3>
         <h3 id="word_count"></h3>
         <h3 id="drawn_count"></h3>
         <div id="add_div">
@@ -206,13 +220,8 @@
             <input id="add_button" type="submit"/>
           </form>
         </div>
-        <div id="draw_div">
         <h3 id="drawn_word"></h3>
-        <form id="draw_form">
-          <input id="draw_button" type="button"/>
-        </form>
-        </div>
-    </section>
+        <input id="draw_button" type="button"/>
     </div>
 
     <footer>