add link button in lobby

backend/static/style/state.css

@@ -49,4 +49,21 @@
     font-family: 'fontawesome';
     content: "\f091";
     transform: translate(-30px, 0px);
+}
+
+.link::before {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 16px;
+    float: left;
+    margin: 0 -20px 0 0;
+    font-family: 'fontawesome';
+    content: "\f14c";
+    transform: translate(-20px, 0px);
+    color: antiquewhite;
+}
+
+.link:hover::before {
+    color: #ff7f00;
 }

backend/templates/state_partial.html.tera

@@ -4,7 +4,7 @@
     <h2 class="handle">
         <label for="handle_{{loop.index}}">
             <span>{{state.name}} ({% if state.state %}{{state.state.map}}{% else %}{{state.map}}{% endif %})</span>
-            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% endif %}</span>
+            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% else %}<a class="link" href='/visualizer?name={{state.name}}&game={{state.file}}'></a>{% endif %}</span>
         </label>
     </h2>
     <div class="content">

frontend/www/games.ts

@@ -16,7 +16,7 @@ async function on_load() {
         const urlVars = new URLSearchParams(window.location.search);
 
         if (urlVars.get("game") && urlVars.get("name")) {
-            handle(urlVars.get("game"),urlVars.get("name"))
+            handle("/games/"+urlVars.get("game"),urlVars.get("name"))
         } else if (options[0]) {
             const options_div = <HTMLDivElement> options[0];
             if (options_div.children[0]) {