diff --git a/backend/static/script/lobby.js b/backend/static/script/lobby.js
index 320fb64..0771ddf 100644
--- a/backend/static/script/lobby.js
+++ b/backend/static/script/lobby.js
@@ -36,12 +36,9 @@ async function start_game() {
};
xhr.open("POST", "/lobby");
- xhr.send(JSON.stringify(obj));
+ xhr.addEventListener("loadend", refresh_state);
- setTimeout(
- () => refresh_state(),
- 200
- );
+ xhr.send(JSON.stringify(obj));
}
-window.onload = () => refresh_state();
+window.onload = () => refresh_state();
\ No newline at end of file
diff --git a/backend/static/style/state.css b/backend/static/style/state.css
index 6ebaa2c..76ffc4d 100644
--- a/backend/static/style/state.css
+++ b/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;
}
\ No newline at end of file
diff --git a/backend/templates/state_partial.html.tera b/backend/templates/state_partial.html.tera
index fafdafc..02c62f5 100644
--- a/backend/templates/state_partial.html.tera
+++ b/backend/templates/state_partial.html.tera
@@ -4,7 +4,7 @@
diff --git a/frontend/www/games.ts b/frontend/www/games.ts
index f460fb9..ad5ae9b 100644
--- a/frontend/www/games.ts
+++ b/frontend/www/games.ts
@@ -4,29 +4,47 @@ import { ConfigIniParser } from 'config-ini-parser'
const OPTIONS = document.getElementById("options");
-
const game_location = LOCATION + "static/games/mod.ini";
-if (OPTIONS) {
- fetch(game_location)
- .then((r) => r.text())
- .then((response) => {
- parse_ini(response);
- }).catch(console.error);
-} else {
- const options = document.getElementsByClassName("options");
- if (options[0]) {
- const options_div = options[0];
- if (options_div.children[0]) {
- setTimeout(
- () => options_div.children[0].dispatchEvent(new Event('click')),
- 200,
- );
+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();
+ parse_ini(response);
+ } else {
+ const options = document.getElementsByClassName("options");
+ const urlVars = new URLSearchParams(window.location.search);
+
+ if (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 = options[0];
+ if (options_div.children[0]) {
+ options_div.children[0].dispatchEvent(new Event('click'));
+ }
}
}
}
+window.addEventListener("load", on_load, false);
export function handle(location, name: string) {
+ game_file = location;
+ game_name = name;
+
set_loading(true);
fetch(location)
diff --git a/frontend/www/index.ts b/frontend/www/index.ts
index af6578b..6d71601 100644
--- a/frontend/www/index.ts
+++ b/frontend/www/index.ts
@@ -30,10 +30,6 @@ const SLIDER = document.getElementById("turnSlider");
const FILESELECTOR = document.getElementById("fileselect");
const SPEED = document.getElementById("speed");
-document.getElementById("addbutton").onclick = function() {
- FILESELECTOR.click();
-}
-
export function set_loading(loading: boolean) {
if (loading) {
if (!LOADER.classList.contains("loading")) {
diff --git a/frontend/www/static/res/style.css b/frontend/www/static/res/style.css
index 42a6574..6ca71a0 100644
--- a/frontend/www/static/res/style.css
+++ b/frontend/www/static/res/style.css
@@ -1,327 +1,309 @@
-* {
- margin: 0;
- padding: 0;
-}
-
-body {
- background-color: #333;
-}
-
-p {
- padding: 3px 0;
-}
-
-#wrapper {
- max-height: 100%;
- min-height: 100%;
- width: 100%;
- height: 100%;
- display: flex;
-}
-
-#main {
- height: 100%;
- flex-grow: 1;
- position: relative;
-}
-
-#name {
- position: absolute;
- top: 10px;
- left: 10px;
- color: white;
-}
-
-#meta {
- padding: 10px 2%;
- color: white;
- position: absolute;
- bottom: 0;
- width: 96%;
-}
-
-.options {
- background-color: black;
- max-width: 300px;
- width: 20%;
- min-width: 150px;
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
-}
-
-.option {
- color: white;
- margin: 0 0 20px 0;
- padding: 10px;
- background-color: #333;
-}
-
-.option:last-child {
- margin: 0;
-}
-
-.option:hover {
- background-color: #777;
-}
-
-.lds-roller {
- display: none;
-}
-
-.loading>.lds-roller {
- display: inline-block;
-}
-
-.lds-roller {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 80px;
- height: 80px;
-}
-
-.lds-roller div {
- animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- transform-origin: 40px 40px;
-}
-
-.lds-roller div:after {
- content: " ";
- display: block;
- position: absolute;
- width: 7px;
- height: 7px;
- border-radius: 50%;
- background: #fff;
- margin: -4px 0 0 -4px;
-}
-
-.lds-roller div:nth-child(1) {
- animation-delay: -0.036s;
-}
-
-.lds-roller div:nth-child(1):after {
- top: 63px;
- left: 63px;
-}
-
-.lds-roller div:nth-child(2) {
- animation-delay: -0.072s;
-}
-
-.lds-roller div:nth-child(2):after {
- top: 68px;
- left: 56px;
-}
-
-.lds-roller div:nth-child(3) {
- animation-delay: -0.108s;
-}
-
-.lds-roller div:nth-child(3):after {
- top: 71px;
- left: 48px;
-}
-
-.lds-roller div:nth-child(4) {
- animation-delay: -0.144s;
-}
-
-.lds-roller div:nth-child(4):after {
- top: 72px;
- left: 40px;
-}
-
-.lds-roller div:nth-child(5) {
- animation-delay: -0.18s;
-}
-
-.lds-roller div:nth-child(5):after {
- top: 71px;
- left: 32px;
-}
-
-.lds-roller div:nth-child(6) {
- animation-delay: -0.216s;
-}
-
-.lds-roller div:nth-child(6):after {
- top: 68px;
- left: 24px;
-}
-
-.lds-roller div:nth-child(7) {
- animation-delay: -0.252s;
-}
-
-.lds-roller div:nth-child(7):after {
- top: 63px;
- left: 17px;
-}
-
-.lds-roller div:nth-child(8) {
- animation-delay: -0.288s;
-}
-
-.lds-roller div:nth-child(8):after {
- top: 56px;
- left: 12px;
-}
-
-@keyframes lds-roller {
- 0% {
- transform: rotate(0deg);
+ * {
+ margin: 0;
+ padding: 0;
}
- 100% {
- transform: rotate(360deg);
+
+ body {
+ background-color: #333;
}
-}
-
-#speed {
- width: 100px;
-}
-
-#c {
- position: relative;
- background-color: black;
- width: 100%;
- height: 100%;
-}
-
-.button {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 40px;
- height: 40px;
-}
-
-.button:before,
-.button:after {
- content: "";
- position: absolute;
- background-color: grey;
-}
-
-.button:hover:before,
-.button:hover:after {
- background-color: white;
-}
-
-.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;
-}
-
-
-/* ----------------------------------------------
+
+ p {
+ padding: 3px 0;
+ }
+
+ #wrapper {
+ max-height: 100%;
+ min-height: 100%;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ }
+
+ #main {
+ height: 100%;
+ flex-grow: 1;
+ position: relative;
+ }
+
+ #name {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: white;
+ }
+
+ #meta {
+ padding: 10px 2%;
+ color: white;
+ position: absolute;
+ bottom: 0;
+ width: 96%;
+ }
+
+ .options {
+ background-color: black;
+ max-width: 300px;
+ width: 20%;
+ min-width: 150px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ }
+
+ .option {
+ color: white;
+ margin: 0 0 20px 0;
+ padding: 10px;
+ background-color: #333;
+ }
+
+ .option:last-child {
+ margin: 0;
+ }
+
+ .option:hover {
+ background-color: #777;
+ }
+
+ .lds-roller {
+ display: none;
+ }
+
+ .loading>.lds-roller {
+ display: inline-block;
+ }
+
+ .lds-roller {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 80px;
+ height: 80px;
+ }
+
+ .lds-roller div {
+ animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ transform-origin: 40px 40px;
+ }
+
+ .lds-roller div:after {
+ content: " ";
+ display: block;
+ position: absolute;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #fff;
+ margin: -4px 0 0 -4px;
+ }
+
+ .lds-roller div:nth-child(1) {
+ animation-delay: -0.036s;
+ }
+
+ .lds-roller div:nth-child(1):after {
+ top: 63px;
+ left: 63px;
+ }
+
+ .lds-roller div:nth-child(2) {
+ animation-delay: -0.072s;
+ }
+
+ .lds-roller div:nth-child(2):after {
+ top: 68px;
+ left: 56px;
+ }
+
+ .lds-roller div:nth-child(3) {
+ animation-delay: -0.108s;
+ }
+
+ .lds-roller div:nth-child(3):after {
+ top: 71px;
+ left: 48px;
+ }
+
+ .lds-roller div:nth-child(4) {
+ animation-delay: -0.144s;
+ }
+
+ .lds-roller div:nth-child(4):after {
+ top: 72px;
+ left: 40px;
+ }
+
+ .lds-roller div:nth-child(5) {
+ animation-delay: -0.18s;
+ }
+
+ .lds-roller div:nth-child(5):after {
+ top: 71px;
+ left: 32px;
+ }
+
+ .lds-roller div:nth-child(6) {
+ animation-delay: -0.216s;
+ }
+
+ .lds-roller div:nth-child(6):after {
+ top: 68px;
+ left: 24px;
+ }
+
+ .lds-roller div:nth-child(7) {
+ animation-delay: -0.252s;
+ }
+
+ .lds-roller div:nth-child(7):after {
+ top: 63px;
+ left: 17px;
+ }
+
+ .lds-roller div:nth-child(8) {
+ animation-delay: -0.288s;
+ }
+
+ .lds-roller div:nth-child(8):after {
+ top: 56px;
+ left: 12px;
+ }
+
+ @keyframes lds-roller {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ #speed {
+ width: 100px;
+ }
+
+ #c {
+ position: relative;
+ background-color: black;
+ width: 100%;
+ height: 100%;
+ }
+
+ .button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 0;
+ height: 0;
+ }
+
+ .button::before {
+ content: "";
+ 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 {
+ color: #ff7f00;
+ }
+ /* ----------------------------------------------
* 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
* ----------------------------------------
*/
-
-@-webkit-keyframes slide-top {
- 0% {
- -webkit-transform: translate(-50%, 50%);
- transform: translate(-50%, 50%);
+
+ @-webkit-keyframes slide-top {
+ 0% {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+ }
+ 100% {
+ -webkit-transform: translate(-50%, -150%);
+ transform: translate(-50%, -150%);
+ }
}
- 100% {
- -webkit-transform: translate(-50%, -150%);
- transform: translate(-50%, -150%);
+
+ @keyframes slide-top {
+ 0% {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+ }
+ 100% {
+ -webkit-transform: translate(-50%, -150%);
+ transform: translate(-50%, -150%);
+ }
}
-}
-
-@keyframes slide-top {
- 0% {
- -webkit-transform: translate(-50%, 50%);
- transform: translate(-50%, 50%);
- }
- 100% {
- -webkit-transform: translate(-50%, -150%);
- transform: translate(-50%, -150%);
- }
-}
-
-
-/**
+ /**
* ----------------------------------------
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
* ----------------------------------------
*/
-
-.slidecontainer {
- margin-top: 10px;
- width: 100%;
- /* Width of the outside container */
-}
-
-.slider {
- -webkit-appearance: none;
- width: 100%;
- height: 15px;
- border-radius: 5px;
- background: #d3d3d3;
- outline: none;
- opacity: 0.7;
- -webkit-transition: .2s;
- transition: opacity .2s;
-}
-
-.slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 25px;
- height: 25px;
- border-radius: 50%;
- background: #ff7000;
- cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
- width: 25px;
- height: 25px;
- border-radius: 50%;
- background: #ff7000;
- cursor: pointer;
-}
-
-::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- border-radius: 10px;
- background-color: #444;
- border-radius: 10px;
-}
-
-::-webkit-scrollbar {
- width: 10px;
- background-color: #444;
-}
-
-::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background-color: #F90;
- background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
-}
\ No newline at end of file
+
+ .slidecontainer {
+ margin-top: 10px;
+ width: 100%;
+ /* Width of the outside container */
+ }
+
+ .slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 15px;
+ border-radius: 5px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+ }
+
+ .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #ff7000;
+ cursor: pointer;
+ }
+
+ .slider::-moz-range-thumb {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #ff7000;
+ cursor: pointer;
+ }
+
+ ::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: #444;
+ border-radius: 10px;
+ }
+
+ ::-webkit-scrollbar {
+ width: 10px;
+ background-color: #444;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #F90;
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
+ }
\ No newline at end of file