~changed state handling

src/templates/frontend/frontend.jinja

@@ -8,6 +8,18 @@
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
     <script>
 
+        var states = {"intro": null, "player_select": null, "final_screen": null, "oponents": null, "overview": null};
+        for(var state in states){
+             states[state]= document.getElementById(state);
+        }
+
+        function show_state(state){
+            for(var el in state_elements){
+                el.style.display = "none";
+            }
+            states[state].style.display = "block";
+        }
+
         var socket = io.connect("ws://localhost:5000");
 
         socket.on("round", function(data){
@@ -62,30 +74,8 @@
             document.getElementById("fails_right").innerHTML = fails_right;
 
             state = data["state"];
-            if(state == "intro_screen"){
-                document.getElementById("intro").style.display = "block";
-                document.getElementById("player_select").style.display = "none";
-                document.getElementById("final_screen").style.display = "none";
-                document.getElementById("oponents").style.display = "none"
-            }
-            if(state == "player_select"){
-                document.getElementById("intro").style.display = "none";
-                document.getElementById("final_screen").style.display = "none";
-                document.getElementById("player_select").style.display = "block";
-                document.getElementById("oponents").style.display = "none"
-            }
-            if(state == "final_screen"){
-                document.getElementById("intro").style.display = "none";
-                document.getElementById("player_select").style.display = "none";
-                document.getElementById("final_screen").style.display = "block"
-                document.getElementById("oponents").style.display = "none"
-            }
-            if(state == "oponents"){
-                document.getElementById("intro").style.display = "none";
-                document.getElementById("player_select").style.display = "none";
-                document.getElementById("final_screen").style.display = "none";
-                document.getElementById("oponents").style.display = "block"
-            }
+
+            show_state(state);
 
 
         });
@@ -282,9 +272,9 @@
     <div class="container-fluid" id="final_screen">
         <div class="row">
             <div class="col-12 text-center">
-                <h1 class="ccc-blue">Auf Wiedersehen</h1>
-                <div class="ccc-green xxl mb-3">Chaos-Familien-Duell</div>
-                <img src="../static/chaos_west_text.jpg" width="900">
+                <img src="../static/lnp.jpg" width="900">
+                <br><br><br><br>
+                <div class="ccc-green xxl mb-3">Viel Spaß beim Podcast!</div>
             </div>  
         </div>
     </div>