From 33abe9515f24a39a064051c3572cbb7df0771bd8 Mon Sep 17 00:00:00 2001 From: ajuvercr Date: Sat, 11 Apr 2020 08:21:08 +0200 Subject: [PATCH] Misc #18 (#22) * make lobby game post refresh page better * frontend side of handling specific games * add link button in lobby * add share button --- backend/static/script/lobby.js | 9 +- backend/static/style/state.css | 17 + backend/templates/state_partial.html.tera | 2 +- frontend/www/games.ts | 50 +- frontend/www/index.ts | 4 - frontend/www/static/res/style.css | 602 +++++++++++----------- 6 files changed, 347 insertions(+), 337 deletions(-) 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