Review comments and hide some use cases for mobile devices

This commit is contained in:
Andrew Guibert 2018-05-03 15:10:05 -05:00
parent 116ae99bf6
commit 155ecc6c52
2 changed files with 13 additions and 14 deletions

View File

@ -18,8 +18,8 @@
<div class="form-item">
<button type="button" (click)="loginGoogle()">Sign in with Google</button>
</div>
<h2 class="section-header">or</h2>
<div class="form-item">
<h2 *ngIf="isFullDevice" class="section-header">or</h2>
<div *ngIf="isFullDevice" class="form-item">
<button type="button" (click)="hostRound()">Host Round</button>
</div>
</div>
@ -54,11 +54,11 @@
</div>
</div>
<div class="form-group">
<div class="form-item">
<div *ngIf="isFullDevice" class="form-item">
<button type="button" (click)="quickJoin()">Play Now</button>
</div>
<h2 class="section-header" style="margin-bottom: 0">or</h2>
<h2 *ngIf="isFullDevice" class="section-header" style="margin-bottom: 0">or</h2>
<div class="form-item">
<label>Party Code</label>
<input type="text" id="roundid" name="roundid" [(ngModel)]="party" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
@ -67,7 +67,7 @@
<button type="button" (click)="joinParty()">Join Party</button>
</div>
</div>
<div class="form-group">
<div *ngIf="isFullDevice" class="form-group">
<div class="form-item">
<button type="button" (click)="hostRound()">Host Party</button>
</div>
@ -77,8 +77,9 @@
<div queuePane>
<div class="form-group">
<div class="form-item">
<h2>The party is full! Hang out a bit and you will automatically join the next round</h2>
<h2>The current round for party {{party}} is full! Hang out a bit and you will automatically join the next round.</h2>
<hr/>
<!-- TODO: Display the queue number more prominently -->
<h2>You are number {{queuePosition}} in queue</h2>
<hr/>
<button type="button" (click)="cancelQueue()">Leave Queue</button>

View File

@ -1,4 +1,4 @@
import { Component, OnInit, NgZone, HostBinding, Injectable, Output } from '@angular/core';
import { Component, OnInit, NgZone, HostBinding, Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -18,9 +18,10 @@ export class LoginComponent implements OnInit {
pane: PaneType = sessionStorage.getItem('username') === null ? 'left' : 'right';
username: string;
party: string;
@Output() queuePosition: number;
queuePosition: number;
player = new Player('PLAYER NAME HERE', 'none', '#FFFFFF');
queueCallback: EventSource;
isFullDevice: boolean = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
constructor(
private router: Router,
@ -81,12 +82,9 @@ export class LoginComponent implements OnInit {
let ngZone = this.ngZone;
let router = this.router;
roundID = roundID.toUpperCase().replace(/[^A-Z]/g, '');
let gameBoard = true;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// give a controller-only view on mobile devices
gameBoard = false;
}
console.log(`Is this a mobile device? ${!gameBoard}`);
// give a controller-only view on mobile devices
let gameBoard = this.isFullDevice;
console.log(`Is this a mobile device? ${!this.isFullDevice}`);
// TODO: Validate form input in a more elegant way than alert()
if (roundID.length !== 4) {