Merge pull request #154 from realModusOperandi/frontend-cleanup

Frontend cleanup
This commit is contained in:
Liam Westby 2018-10-17 09:20:21 -05:00 committed by GitHub
commit a33dc9f824
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 5034 additions and 8047 deletions

View File

@ -28,8 +28,8 @@ war {
}
node {
version = '9.5.0'
npmVersion = '5.6.0'
version = '10.12.0'
npmVersion = '6.4.1'
download = true
workDir = file("${rootDir}/frontend/prebuild/node")
nodeModulesDir = file("${rootDir}/frontend/prebuild")

File diff suppressed because it is too large Load Diff

View File

@ -13,15 +13,15 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.2",
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/forms": "^6.0.2",
"@angular/http": "^6.0.2",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"angular-in-memory-web-api": "^0.6.0",
"autoprefixer": "^7.2.6",
@ -29,33 +29,34 @@
"core-js": "^2.5.6",
"createjs-module": "^0.8.3",
"ng-event-source": "^1.0.10",
"node-sass": "^4.9.0",
"npm": "^5.10.0",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"node": "^10.11.0",
"node-sass": "^4.9.3",
"npm": "^6.3.0",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.6.1",
"@angular/cli": "^6.0.1",
"@angular/compiler-cli": "^6.0.2",
"@angular/language-service": "^6.0.2",
"@types/jasmine": "^2.8.7",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.110",
"@angular-devkit/build-angular": "^0.8.0",
"@angular/cli": "~6.2.3",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.4",
"codelyzer": "^4.3.0",
"jasmine-core": "~2.8.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.2",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.2",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.9.1",
"typescript": ">=2.7.2 <2.8.0"
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
}
}

View File

@ -139,13 +139,13 @@ export class GameComponent implements OnInit, OnDestroy {
this.obstaclesShape.y = 0;
this.stage.addChild(this.obstaclesShape);
// Create a red border around the game board
let BORDER_WIDTH = 3;
const BORDER_WIDTH = 3;
this.addBorder(0, 0, Constants.BOARD_SIZE, BORDER_WIDTH); // top
this.addBorder(0, Constants.BOARD_SIZE-BORDER_WIDTH, Constants.BOARD_SIZE, BORDER_WIDTH); // bottom
this.addBorder(0, Constants.BOARD_SIZE - BORDER_WIDTH, Constants.BOARD_SIZE, BORDER_WIDTH); // bottom
this.addBorder(0, 0, BORDER_WIDTH, Constants.BOARD_SIZE); // left
this.addBorder(Constants.BOARD_SIZE-BORDER_WIDTH, 0, BORDER_WIDTH, Constants.BOARD_SIZE); // right
this.addBorder(Constants.BOARD_SIZE - BORDER_WIDTH, 0, BORDER_WIDTH, Constants.BOARD_SIZE); // right
this.stage.update();
@ -325,7 +325,7 @@ export class GameComponent implements OnInit, OnDestroy {
player.tooltip.visible(true);
if (player.status.toLocaleLowerCase() === 'winner') {
const winnerCard = new Card(400, "winner!", player.name, true, player.color);
const winnerCard = new Card(400, 'winner!', player.name, true, player.color);
const card = winnerCard.displayObject;
card.x = (Constants.BOARD_SIZE / 2) - (winnerCard.width / 2);
card.y = (Constants.BOARD_SIZE / 2) - (winnerCard.height / 2);
@ -441,7 +441,7 @@ export class GameComponent implements OnInit, OnDestroy {
this.waitCard.bodyString = 'GO!';
this.waitCard.hide(500);
} else if (t >= seconds) {
this.ngZone.run((t) => {
this.ngZone.run(() => {
this.waitingSub.unsubscribe();
});
}
@ -467,7 +467,7 @@ export class GameComponent implements OnInit, OnDestroy {
if (!this.waitCard) {
const width = 400;
const margin = 50;
this.waitCard = new Card(width, "waiting for players", `${seconds}`, true);
this.waitCard = new Card(width, 'waiting for players', `${seconds}`, true);
const card = this.waitCard.displayObject;
card.x = (Constants.BOARD_SIZE / 2) - (this.waitCard.width / 2);
card.y = (Constants.BOARD_SIZE / 2) - (this.waitCard.height / 2);
@ -493,19 +493,19 @@ export class GameComponent implements OnInit, OnDestroy {
this.connectionInterrupted();
}
}
connectionInterrupted() {
alert('Connection to game-service interrrupted. Re-directing to login page.');
this.ngZone.run(() => {
this.router.navigate(['/login']);
});
}
addBorder(x, y, w, h) {
let shape: Shape = new Shape();
shape.shadow = new Shadow(Obstacle.COLOR, 0, 0, 20);
shape.graphics.beginFill(Obstacle.COLOR).rect(x,y,w,h);
this.stage.addChild(shape);
let shape: Shape = new Shape();
shape.shadow = new Shadow(Obstacle.COLOR, 0, 0, 20);
shape.graphics.beginFill(Obstacle.COLOR).rect(x, y, w, h);
this.stage.addChild(shape);
}
}

View File

@ -19,7 +19,6 @@ export class GameService {
socketService.url = `${environment.API_URL_GAME_WS}/${this.roundId}`;
this.messages = <Subject<Object>>socketService.socket
.pipe(map((response: MessageEvent): any => {
//console.log(`Game service handling message: ${response.data}`);
return JSON.parse(response.data);
}));
}

View File

@ -59,7 +59,7 @@ export class PlayerComponent implements OnInit {
filename = Constants.PURPLE_FILENAME;
break;
default:
console.warn("Player color did not match available images. Defaulting to green.");
console.warn('Player color did not match available images. Defaulting to green.');
filename = Constants.GREEN_FILENAME;
break;
}

View File

@ -12,7 +12,6 @@ export class PlayersService {
this.messages = <Subject<Object>>socketService.socket
.pipe(map((response: MessageEvent): any => {
// console.log(`Players service handling message: ${response.data}`);
return JSON.parse(response.data);
}));
}

View File

@ -34,13 +34,14 @@ export class LoginComponent implements OnInit, OnDestroy {
party: string;
queuePosition: number;
player = new Player();
isFullDevice: boolean = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
isQuickPlayAllowed: boolean = this.isFullDevice;
isSingleParty: boolean = false;
isSsoCheckComplete: boolean = false;
isGoogleConfigured: boolean = false;
isGithubConfigured: boolean = false;
isTwitterConfigured: boolean = false;
isSingleParty = false;
isSsoCheckComplete = false;
isGoogleConfigured = false;
isGithubConfigured = false;
isTwitterConfigured = false;
constructor(
private router: Router,

View File

@ -1,11 +1,19 @@
import { Container, DisplayObject, Shape, Tween, Ease, Text, ColorFilter } from "createjs-module";
import { Container, DisplayObject, Shape, Tween, Ease, Text, ColorFilter } from 'createjs-module';
export class Card {
private static readonly ACCENT_WIDTH = 10;
private static readonly MARGIN = 20;
private static readonly DURATION = 500;
private static readonly HEADER_TEXT_FONT = 'small-caps 36px -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
private static readonly HEADER_TEXT_FONT = 'small-caps 36px '
+ '-apple-system,'
+ 'system-ui,'
+ 'BlinkMacSystemFont,'
+ '"Segoe UI",'
+ 'Roboto,'
+ '"Helvetica Neue",'
+ 'Arial,'
+ 'sans-serif';
private static readonly HEADER_TEXT_COLOR = 'rgba(255, 255, 255, 1)';
private static readonly BODY_TEXT_FONT = '64px "Avenir-Black", "Arial Black", "Roboto Black", sans-serif';
@ -99,7 +107,7 @@ export class Card {
this.headerText.color = Card.HEADER_TEXT_COLOR;
this.headerText.x = -(this.headerText.getBounds().width);
this.headerText.y = Card.MARGIN;
this.headerText.alpha = 0
this.headerText.alpha = 0;
this.headerText.mask = this.mask;
if (this.center) {
@ -112,7 +120,7 @@ export class Card {
this.bodyText.x = -(this.bodyText.getBounds().width);
this.bodyText.y = this.headerText.y + this.headerText.getBounds().height;
this.bodyText.alpha = 0
this.bodyText.alpha = 0;
this.bodyText.mask = this.mask;
this.accentCommand = this.accent.graphics.beginFill(color).rect(0, 0, Card.ACCENT_WIDTH, 0).command;

View File

@ -104,7 +104,7 @@
"variable-declaration": "nospace"
}
],
"typeof-compare": true,
"typeof-compare": false,
"unified-signatures": true,
"variable-name": false,
"whitespace": [