add share button

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}}{% else %}<a class="link" href='/visualizer?name={{state.name}}&game={{state.file}}'></a>{% endif %}</span>
+            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% else %}<a class="link" href='/visualizer?name={{state.name | safe }}&game=/games/{{state.file | safe}}'></a>{% endif %}</span>
         </label>
     </h2>
     <div class="content">

frontend/www/games.ts

@@ -6,7 +6,20 @@ const OPTIONS = document.getElementById("options");
 
 const game_location = LOCATION + "static/games/mod.ini";
 
+var game_name, game_file;
+
+document.getElementById("addbutton").onclick = function() {
+    const loc = window.location;
+    const query = `?game=${game_file}&name=${game_name}`;
+    navigator.clipboard.writeText(loc.origin+loc.pathname+encodeURI(query)).then(() => {
+        console.log("Success");
+    }, () => {
+        console.log("Failed");
+    });
+}
+
 async function on_load() {
+    console.log("ON LOAD");
     if (OPTIONS) {
         const r = await fetch(game_location);
         const response = await r.text();
@@ -16,7 +29,8 @@ async function on_load() {
         const urlVars = new URLSearchParams(window.location.search);
 
         if (urlVars.get("game") && urlVars.get("name")) {
-            handle("/games/"+urlVars.get("game"),urlVars.get("name"))
+            console.log(urlVars.get("game")+' '+urlVars.get("name"))
+            handle(urlVars.get("game"),urlVars.get("name"))
         } else if (options[0]) {
             const options_div = <HTMLDivElement> options[0];
             if (options_div.children[0]) {
@@ -25,10 +39,12 @@ async function on_load() {
         }
     }
 }
-
-window.addEventListener("load", on_load);
+window.addEventListener("load", on_load, false);
 
 export function handle(location, name: string) {
+    game_file = location;
+    game_name = name;
+
     set_loading(true);
 
     fetch(location)

frontend/www/index.ts

@@ -30,10 +30,6 @@ const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
 const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
 const SPEED = <HTMLInputElement> document.getElementById("speed");
 
-document.getElementById("addbutton").onclick = function() {
-    FILESELECTOR.click();
-}
-
 export function set_loading(loading: boolean) {
     if (loading) {
         if (!LOADER.classList.contains("loading")) {

frontend/www/static/res/style.css

@@ -195,47 +195,31 @@ p {
         position: absolute;
         top: 10px;
         right: 10px;
-    width: 40px;
-    height: 40px;
+        width: 0;
+        height: 0;
     }
     
-.button:before,
-.button:after {
+    .button::before {
         content: "";
-    position: absolute;
-    background-color: grey;
+        display: block;
+        float: left;
+        margin: 0 -20px 0 0;
+        font-family: 'fontawesome';
+        content: "\f1e1";
+        transform: translate(-1em, 0px);
+        color: antiquewhite;
+        font-size: 1.5em;
     }
     
-.button:hover:before,
-.button:hover:after {
-    background-color: white;
+    .button:hover::before {
+        color: #ff7f00;
     }
-
-.button:before {
-    top: 0;
-    left: 50%;
-    width: 6px;
-    height: 100%;
-    margin-left: -3px;
-}
-
-.button:after {
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 6px;
-    margin-top: -3px;
-}
-
-
     /* ----------------------------------------------
  * Generated by Animista on 2019-9-17 14:35:13
  * Licensed under FreeBSD License.
  * See http://animista.net/license for more info.
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */
-
-
     /**
  * ----------------------------------------
  * animation slide-top
@@ -263,8 +247,6 @@ p {
             transform: translate(-50%, -150%);
         }
     }
-
-
     /**
  * ----------------------------------------
  * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp