* make lobby game post refresh page better * frontend side of handling specific games * add link button in lobby * add share button
This commit is contained in:
ajuvercr
GitHub
parent
6b7fd4eff3
commit
33abe9515f
6 changed files with 347 additions and 337 deletions
|
|
@ -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();
|
||||
|
|
@ -50,3 +50,20 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -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 | safe }}&game=/games/{{state.file | safe}}'></a>{% endif %}</span>
|
||||
</label>
|
||||
</h2>
|
||||
<div class="content">
|
||||
|
|
|
|||
|
|
@ -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 = <HTMLDivElement> 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 = <HTMLDivElement> 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)
|
||||
|
|
|
|||
|
|
@ -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")) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
p {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
#c {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#wrapper {
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#main {
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button:before,
|
||||
.button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: grey;
|
||||
}
|
||||
#name {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button:hover:before,
|
||||
.button:hover:after {
|
||||
background-color: white;
|
||||
}
|
||||
#meta {
|
||||
padding: 10px 2%;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.button:before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
.options {
|
||||
background-color: black;
|
||||
max-width: 300px;
|
||||
width: 20%;
|
||||
min-width: 150px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.button:after {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.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%);
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
.slidecontainer {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
/* Width of the outside container */
|
||||
}
|
||||
.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-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::-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;
|
||||
}
|
||||
.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-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 {
|
||||
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)
|
||||
}
|
||||
::-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)
|
||||
}
|
||||
Loading…
Reference in a new issue