andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Disable join when there are no servers

Browse source
This commit is contained in:
schmelczerandras 2020-10-30 20:47:55 +01:00
parent 45b6588701
commit 1c4b7a3483
2 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/scripts/join-form-handler.ts
View file

@ -11,11 +11,14 @@ export type PlayerDecision = {
const pollInterval = 8000; const pollInterval = 8000;
export class JoinFormHandler { export class JoinFormHandler {
private joinButton: HTMLButtonElement;
private waitingForDecision: Promise<PlayerDecision>; private waitingForDecision: Promise<PlayerDecision>;
private resolvePlayerDecision!: (d: PlayerDecision) => void; private resolvePlayerDecision!: (d: PlayerDecision) => void;
private pollServersTimer: any; private pollServersTimer: any;
constructor(form: HTMLFormElement, private readonly container: HTMLElement) { constructor(form: HTMLFormElement, private readonly container: HTMLElement) {
this.joinButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
this.joinButton.disabled = true;
this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r)); this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r));
new FormData(form); new FormData(form);
@ -80,15 +83,23 @@ export class JoinFormHandler {
const server = new ServerChooserOption( const server = new ServerChooserOption(
content, content,
url, url,
(r) => (this.servers = this.servers.filter((s) => s !== r)), this.removeServer.bind(this),
this.servers.length === 0, this.servers.length === 0,
); );
this.servers.push(server); this.servers.push(server);
this.joinButton.disabled = false;
this.container.appendChild(server.element); this.container.appendChild(server.element);
} }
}); });
} }
private removeServer(server: ServerChooserOption) {
this.servers = this.servers.filter((s) => s !== server);
if (this.servers.length) {
this.joinButton.disabled = true;
}
}
public async getPlayerDecision(): Promise<PlayerDecision> { public async getPlayerDecision(): Promise<PlayerDecision> {
return this.waitingForDecision; return this.waitingForDecision;
} }

9
frontend/src/styles/button.scss
View file

@ -15,12 +15,17 @@ button {
transition: transform $animation-time, padding-bottom $animation-time, transition: transform $animation-time, padding-bottom $animation-time,
margin-bottom $animation-time; margin-bottom $animation-time;
&:hover, &:not(:disabled):hover,
&:focus { &:not(:disabled):focus {
outline: none; outline: none;
color: $accent; color: $accent;
transform: translateY(-$ascend); transform: translateY(-$ascend);
padding-bottom: $ascend; padding-bottom: $ascend;
margin-bottom: 0; margin-bottom: 0;
} }
&:disabled {
color: #777;
cursor: not-allowed;
}
} }