feat: simplify angular host/player mvp controls
This commit is contained in:
@@ -11,6 +11,14 @@ interface SessionDetail {
|
||||
session: { code: string; status: string; current_round: number };
|
||||
round_question: { id: number; prompt: string; answers: Array<{ text: string }> } | null;
|
||||
players: Array<{ id: number; nickname: string; score: number }>;
|
||||
phase_view_model?: {
|
||||
player?: {
|
||||
can_join?: boolean;
|
||||
can_submit_lie?: boolean;
|
||||
can_submit_guess?: boolean;
|
||||
can_view_final_result?: boolean;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
type ConnectionState = 'online' | 'reconnecting' | 'offline';
|
||||
@@ -49,9 +57,9 @@ function resolveLocalStorage(): Storage | undefined {
|
||||
|
||||
<div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
|
||||
<label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
|
||||
<label>{{ copy('player.nickname') }} <input [(ngModel)]="nickname" /></label>
|
||||
<label *ngIf="showJoinControls">{{ copy('player.nickname') }} <input [(ngModel)]="nickname" /></label>
|
||||
<button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
|
||||
<button (click)="joinSession()" [disabled]="loading">{{ copy('player.join') }}</button>
|
||||
<button *ngIf="showJoinControls" (click)="joinSession()" [disabled]="loading">{{ copy('player.join') }}</button>
|
||||
</div>
|
||||
|
||||
<p *ngIf="connectionState === 'reconnecting'" class="error">
|
||||
@@ -71,26 +79,30 @@ function resolveLocalStorage(): Storage | undefined {
|
||||
<p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }}</p>
|
||||
<p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
|
||||
|
||||
<label>{{ copy('player.lie_label') }} <input [(ngModel)]="lieText" [disabled]="loading || session.session.status !== 'lie'" /></label>
|
||||
<button (click)="submitLie()" [disabled]="loading || session.session.status !== 'lie'">{{ copy('player.submit_lie') }}</button>
|
||||
<button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">{{ copy('player.retry_lie_submit') }}</button>
|
||||
<ng-container *ngIf="showLieControls">
|
||||
<label>{{ copy('player.lie_label') }} <input [(ngModel)]="lieText" [disabled]="loading" /></label>
|
||||
<button (click)="submitLie()" [disabled]="loading">{{ copy('player.submit_lie') }}</button>
|
||||
<button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">{{ copy('player.retry_lie_submit') }}</button>
|
||||
</ng-container>
|
||||
|
||||
<div class="answers" *ngIf="session.round_question?.answers?.length">
|
||||
<button
|
||||
type="button"
|
||||
*ngFor="let answer of session.round_question?.answers"
|
||||
(click)="selectedGuess = answer.text"
|
||||
[class.active]="selectedGuess === answer.text"
|
||||
[disabled]="loading || session.session.status !== 'guess'"
|
||||
>
|
||||
{{ answer.text }}
|
||||
</button>
|
||||
</div>
|
||||
<ng-container *ngIf="showGuessControls">
|
||||
<div class="answers" *ngIf="session.round_question?.answers?.length">
|
||||
<button
|
||||
type="button"
|
||||
*ngFor="let answer of session.round_question?.answers"
|
||||
(click)="selectedGuess = answer.text"
|
||||
[class.active]="selectedGuess === answer.text"
|
||||
[disabled]="loading"
|
||||
>
|
||||
{{ answer.text }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">{{ copy('player.submit_guess') }}</button>
|
||||
<button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">{{ copy('player.retry_guess_submit') }}</button>
|
||||
<button (click)="submitGuess()" [disabled]="loading || !selectedGuess">{{ copy('player.submit_guess') }}</button>
|
||||
<button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">{{ copy('player.retry_guess_submit') }}</button>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="session.session.status === 'finished' && finalLeaderboard.length">
|
||||
<div *ngIf="showFinalLeaderboard && finalLeaderboard.length">
|
||||
<h3>{{ copy('player.final_leaderboard') }}</h3>
|
||||
<ol>
|
||||
<li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
|
||||
@@ -300,6 +312,25 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
get showJoinControls(): boolean {
|
||||
if (!this.session) {
|
||||
return true;
|
||||
}
|
||||
return Boolean(this.session?.phase_view_model?.player?.can_join && !this.playerId && !this.sessionToken);
|
||||
}
|
||||
|
||||
get showLieControls(): boolean {
|
||||
return Boolean(this.session?.phase_view_model?.player?.can_submit_lie);
|
||||
}
|
||||
|
||||
get showGuessControls(): boolean {
|
||||
return Boolean(this.session?.phase_view_model?.player?.can_submit_guess);
|
||||
}
|
||||
|
||||
get showFinalLeaderboard(): boolean {
|
||||
return Boolean(this.session?.phase_view_model?.player?.can_view_final_result);
|
||||
}
|
||||
|
||||
get loadingMessage(): string {
|
||||
switch (this.loadingTransition) {
|
||||
case 'join':
|
||||
|
||||
Reference in New Issue
Block a user