store last drawn word in the browsers local storage to support reconnects

Before this change last_word was only a javascript variable resetted
on a reload. This means if a player's connection dropped during their
turn and they reconnect their browser doesn't no that they
actually have already drawn a word and thus will not count it as guessed.

Now the last drawn word is stored in the browser's local storage and is
persistent during reloads.
This fixes the reconnect during once turn but allows a wrong situation:
Player A draws stores the word and it connection drops.
Player B draws some other words.
Player A reconnects missing the events and draws a actuall new card but
they restored their stored previously drawn word send it to the server and
it will be counted as guessed.

Fix this by storing an event count for the schuessel and only restore
last_word if no actions occurred during the reconnect.

2 files changed, 28 insertions, 11 deletions

diff --git a/cyberschuessel/schuessel.py b/cyberschuessel/schuessel.py
index 8ce3715..3b05b23 100644
--- a/cyberschuessel/schuessel.py
+++ b/cyberschuessel/schuessel.py
@@ -37,7 +37,8 @@ class Schuessel:
         # first draw -> start game
         if self.phase == 0:
             self.phase = 1
-        elif last_word:
+        # we ignore invalid last_words
+        elif last_word and last_word in self.words:
             self.drawn.append(last_word)
             del (self.words[self.words.index(last_word)])
 
@@ -126,7 +127,7 @@ class Schuessel:
 
                 elif data['action'] == 'reset':
                     self.reset()
-                    reset_msg = {'action': 'init'}
+                    reset_msg = {'action': 'reset'}
                     reset_msg.update(self.schuessel_state())
                     await self.broadcast(reset_msg)
 
diff --git a/cyberschuessel/templates/index.html b/cyberschuessel/templates/index.html
index 8839f07..eeaa1d9 100644
--- a/cyberschuessel/templates/index.html
+++ b/cyberschuessel/templates/index.html
@@ -78,7 +78,6 @@
         let phase = 0;
         let words_in_schuessel = 0;
         let words_drawn = 0;
-        let last_word = ""
 
         let wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://') + window.location.host;
         let conn = new WebSocket(wsUri);
@@ -118,9 +117,19 @@
           set_words_drawn(words_drawn + diff);
         }
 
+        set_drawn_word = function(word) {
+          let drawn_word = document.getElementById('drawn_word')
+          if (word == '') {
+            drawn_word.innerText = "";
+          } else {
+            drawn_word.innerText = strings.drawn_word_prefix[userLang] + " " + word;
+          }
+
+          localStorage.setItem('last_word', word);
+       }
+
         reset_drawn_word = function() {
-          document.getElementById('drawn_word').innerText = "";
-          last_word = "";
+          set_drawn_word('');
         }
 
         set_phase = function(val) {
@@ -131,18 +140,27 @@
           let add_div = document.getElementById('add_div');
           if (phase != 0) {
             add_div.style.display = 'none';
+            set_drawn_word(localStorage.getItem('last_word') || '');
           } else {
             add_div.style.display = 'block';
             reset_drawn_word();
           }
-
         }
 
         conn.onmessage = function(e) {
           let data = JSON.parse(e.data);
           switch (data.action) {
+          case 'reset':
+            localStorage.setItem('last_word', '');
+            // fall through
+
           case 'init':
-            set_words_in_schuessel(data.words);
+            if (data.phase == 0) {
+              set_words_in_schuessel(data.words);
+            } else {
+              // we are playing some one must have a word in hand
+              set_words_in_schuessel(data.words - 1);
+            }
             set_words_drawn(data.drawn);
             set_phase(data.phase);
             break;
@@ -162,9 +180,7 @@
             break;
 
           case 'draw':
-            let drawn_word = document.getElementById('drawn_word');
-            drawn_word.innerText = strings.drawn_word_prefix[userLang] + " " + data.drawn_word;
-            last_word = data.drawn_word;
+            set_drawn_word(data.drawn_word);
             break;
 
           case 'add':
@@ -190,7 +206,7 @@
         document.getElementById("draw_button").onclick = function() {
           let data = {};
           data.action = 'draw';
-          data.last_word = last_word;
+          data.last_word = localStorage.getItem('last_word');
           conn.send(JSON.stringify(data));
           return false;
         }