Kelder/planet-wars
26
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Misc #18 (#22)

Browse source 
* 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 2020-04-11 08:21:08 +02:00 committed by GitHub
parent 6b7fd4eff3
commit 33abe9515f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 347 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
backend/static/script/lobby.js
View file

@ -36,12 +36,9 @@ async function start_game() {
}; };
xhr.open("POST", "/lobby"); xhr.open("POST", "/lobby");
xhr.send(JSON.stringify(obj)); xhr.addEventListener("loadend", refresh_state);
setTimeout( xhr.send(JSON.stringify(obj));
() => refresh_state(),
200
);
} }
window.onload = () => refresh_state(); window.onload = () => refresh_state();

17
backend/static/style/state.css
View file

@ -50,3 +50,20 @@
content: "\f091"; content: "\f091";
transform: translate(-30px, 0px); 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;
}

2
backend/templates/state_partial.html.tera
View file

@ -4,7 +4,7 @@
<h2 class="handle"> <h2 class="handle">
<label for="handle_{{loop.index}}"> <label for="handle_{{loop.index}}">
<span>{{state.name}} ({% if state.state %}{{state.state.map}}{% else %}{{state.map}}{% endif %})</span> <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> </label>
</h2> </h2>
<div class="content"> <div class="content">

42
frontend/www/games.ts
View file

@ -4,29 +4,47 @@ import { ConfigIniParser } from 'config-ini-parser'
const OPTIONS = document.getElementById("options"); const OPTIONS = document.getElementById("options");
const game_location = LOCATION + "static/games/mod.ini"; const game_location = LOCATION + "static/games/mod.ini";
if (OPTIONS) { var game_name, game_file;
fetch(game_location)
.then((r) => r.text()) document.getElementById("addbutton").onclick = function() {
.then((response) => { 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); parse_ini(response);
}).catch(console.error); } else {
} else {
const options = document.getElementsByClassName("options"); const options = document.getElementsByClassName("options");
if (options[0]) { 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]; const options_div = <HTMLDivElement> options[0];
if (options_div.children[0]) { if (options_div.children[0]) {
setTimeout( options_div.children[0].dispatchEvent(new Event('click'));
() => options_div.children[0].dispatchEvent(new Event('click')), }
200,
);
} }
} }
} }
window.addEventListener("load", on_load, false);
export function handle(location, name: string) { export function handle(location, name: string) {
game_file = location;
game_name = name;
set_loading(true); set_loading(true);
fetch(location) fetch(location)

4
frontend/www/index.ts
View file

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

234
frontend/www/static/res/style.css
View file

@ -1,46 +1,46 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
background-color: #333; background-color: #333;
} }
p { p {
padding: 3px 0; padding: 3px 0;
} }
#wrapper { #wrapper {
max-height: 100%; max-height: 100%;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
} }
#main { #main {
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
} }
#name { #name {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
color: white; color: white;
} }
#meta { #meta {
padding: 10px 2%; padding: 10px 2%;
color: white; color: white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 96%; width: 96%;
} }
.options { .options {
background-color: black; background-color: black;
max-width: 300px; max-width: 300px;
width: 20%; width: 20%;
@ -49,46 +49,46 @@ p {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
} }
.option { .option {
color: white; color: white;
margin: 0 0 20px 0; margin: 0 0 20px 0;
padding: 10px; padding: 10px;
background-color: #333; background-color: #333;
} }
.option:last-child { .option:last-child {
margin: 0; margin: 0;
} }
.option:hover { .option:hover {
background-color: #777; background-color: #777;
} }
.lds-roller { .lds-roller {
display: none; display: none;
} }
.loading>.lds-roller { .loading>.lds-roller {
display: inline-block; display: inline-block;
} }
.lds-roller { .lds-roller {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.lds-roller div { .lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px; transform-origin: 40px 40px;
} }
.lds-roller div:after { .lds-roller div:after {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
@ -97,152 +97,136 @@ p {
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
margin: -4px 0 0 -4px; margin: -4px 0 0 -4px;
} }
.lds-roller div:nth-child(1) { .lds-roller div:nth-child(1) {
animation-delay: -0.036s; animation-delay: -0.036s;
} }
.lds-roller div:nth-child(1):after { .lds-roller div:nth-child(1):after {
top: 63px; top: 63px;
left: 63px; left: 63px;
} }
.lds-roller div:nth-child(2) { .lds-roller div:nth-child(2) {
animation-delay: -0.072s; animation-delay: -0.072s;
} }
.lds-roller div:nth-child(2):after { .lds-roller div:nth-child(2):after {
top: 68px; top: 68px;
left: 56px; left: 56px;
} }
.lds-roller div:nth-child(3) { .lds-roller div:nth-child(3) {
animation-delay: -0.108s; animation-delay: -0.108s;
} }
.lds-roller div:nth-child(3):after { .lds-roller div:nth-child(3):after {
top: 71px; top: 71px;
left: 48px; left: 48px;
} }
.lds-roller div:nth-child(4) { .lds-roller div:nth-child(4) {
animation-delay: -0.144s; animation-delay: -0.144s;
} }
.lds-roller div:nth-child(4):after { .lds-roller div:nth-child(4):after {
top: 72px; top: 72px;
left: 40px; left: 40px;
} }
.lds-roller div:nth-child(5) { .lds-roller div:nth-child(5) {
animation-delay: -0.18s; animation-delay: -0.18s;
} }
.lds-roller div:nth-child(5):after { .lds-roller div:nth-child(5):after {
top: 71px; top: 71px;
left: 32px; left: 32px;
} }
.lds-roller div:nth-child(6) { .lds-roller div:nth-child(6) {
animation-delay: -0.216s; animation-delay: -0.216s;
} }
.lds-roller div:nth-child(6):after { .lds-roller div:nth-child(6):after {
top: 68px; top: 68px;
left: 24px; left: 24px;
} }
.lds-roller div:nth-child(7) { .lds-roller div:nth-child(7) {
animation-delay: -0.252s; animation-delay: -0.252s;
} }
.lds-roller div:nth-child(7):after { .lds-roller div:nth-child(7):after {
top: 63px; top: 63px;
left: 17px; left: 17px;
} }
.lds-roller div:nth-child(8) { .lds-roller div:nth-child(8) {
animation-delay: -0.288s; animation-delay: -0.288s;
} }
.lds-roller div:nth-child(8):after { .lds-roller div:nth-child(8):after {
top: 56px; top: 56px;
left: 12px; left: 12px;
} }
@keyframes lds-roller { @keyframes lds-roller {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#speed { #speed {
width: 100px; width: 100px;
} }
#c { #c {
position: relative; position: relative;
background-color: black; background-color: black;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.button { .button {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 40px; width: 0;
height: 40px; height: 0;
} }
.button:before, .button::before {
.button:after {
content: ""; content: "";
position: absolute; display: block;
background-color: grey; 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::before {
.button:hover:after { color: #ff7f00;
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;
}
/* ----------------------------------------------
* Generated by Animista on 2019-9-17 14:35:13 * Generated by Animista on 2019-9-17 14:35:13
* Licensed under FreeBSD License. * Licensed under FreeBSD License.
* See http://animista.net/license for more info. * See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista * w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */ * ---------------------------------------------- */
/**
/**
* ---------------------------------------- * ----------------------------------------
* animation slide-top * animation slide-top
* ---------------------------------------- * ----------------------------------------
*/ */
@-webkit-keyframes slide-top { @-webkit-keyframes slide-top {
0% { 0% {
-webkit-transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
@ -251,9 +235,9 @@ p {
-webkit-transform: translate(-50%, -150%); -webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%); transform: translate(-50%, -150%);
} }
} }
@keyframes slide-top { @keyframes slide-top {
0% { 0% {
-webkit-transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
@ -262,22 +246,20 @@ p {
-webkit-transform: translate(-50%, -150%); -webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%); transform: translate(-50%, -150%);
} }
} }
/**
/**
* ---------------------------------------- * ----------------------------------------
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
* ---------------------------------------- * ----------------------------------------
*/ */
.slidecontainer { .slidecontainer {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
/* Width of the outside container */ /* Width of the outside container */
} }
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 15px; height: 15px;
@ -287,9 +269,9 @@ p {
opacity: 0.7; opacity: 0.7;
-webkit-transition: .2s; -webkit-transition: .2s;
transition: opacity .2s; transition: opacity .2s;
} }
.slider::-webkit-slider-thumb { .slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 25px; width: 25px;
@ -297,31 +279,31 @@ p {
border-radius: 50%; border-radius: 50%;
background: #ff7000; background: #ff7000;
cursor: pointer; cursor: pointer;
} }
.slider::-moz-range-thumb { .slider::-moz-range-thumb {
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
background: #ff7000; background: #ff7000;
cursor: pointer; cursor: pointer;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -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); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; border-radius: 10px;
background-color: #444; background-color: #444;
border-radius: 10px; border-radius: 10px;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
background-color: #444; background-color: #444;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: #F90; 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) 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)
} }