mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-03-07 11:26:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove last direct uses of jquery

Browse Source
This commit is contained in:
Liam Westby 2018-04-17 14:44:35 -05:00
parent 2a2e3256e0
commit 362d107bb6
3 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/prebuild/src/app/game/game.component.html
View File

@ -1,14 +1,14 @@
<div id="titlebar" class="navbar">
<h1>Liberty Bikes</h1>
<div id="game-code-display" class="d-none">
<h2>code: <span id="game-code"></span></h2>
<div id="game-code-display" *ngIf="showPartyId">
<h2>code: <span id="game-code">{{partyId}}</span></h2>
</div>
</div>
<div id="loader-overlay" class="loader-overlay d-none" data-ng-hide="vm.hideLoader">
<div class="spin-loader" data-ng-class="{'shrink': vm.shrinkOnHide, 'expand': !vm.shrinkOnHide}"></div>
<div id="loader-overlay" class="loader-overlay" *ngIf="showLoader">
<div class="spin-loader"></div>
</div>
<div id="game-container">
<div id="game-board">
<canvas width="600" height="600" id="gameCanvas"></canvas>

35
frontend/prebuild/src/app/game/game.component.ts
View File

@ -1,5 +1,3 @@
import * as $ from 'jquery';
import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { GameService } from './game.service';
@ -16,6 +14,11 @@ export class GameComponent implements OnInit {
serverHost: string;
serverPort: string;
partyId: string;
showPartyId = false;
showLoader = false;
output: HTMLElement;
idDisplay: HTMLElement;
@ -64,10 +67,8 @@ export class GameComponent implements OnInit {
if (sessionStorage.getItem('isSpectator') === 'true') {
console.log('is a spectator... showing game id');
// Set the Round ID and make visible
$('#game-code').html(sessionStorage.getItem('partyId'));
const gameId = $('#game-code-display');
gameId.removeClass('d-none');
gameId.addClass('d-inline-block');
this.partyId = sessionStorage.getItem('partyId');
this.showPartyId = true;
this.gameService.send({'spectatorjoined': true});
} else {
this.gameService.send({'playerjoined': sessionStorage.getItem('userId'), 'hasGameBoard' : 'true'});
@ -105,7 +106,7 @@ export class GameComponent implements OnInit {
requeue() {
this.gameService.send({ message: 'GAME_REQUEUE' });
}
moveUp() {
this.gameService.send({ direction: 'UP' });
}
@ -134,9 +135,9 @@ export class GameComponent implements OnInit {
this.context.fillRect(GameComponent.BOX_SIZE * player.trailPosX2, GameComponent.BOX_SIZE * player.trailPosY2,
GameComponent.BOX_SIZE, GameComponent.BOX_SIZE);
this.context.fillStyle = '#e8e5e5';
this.context.fillRect(GameComponent.BOX_SIZE * player.x + player.width / 4 * GameComponent.BOX_SIZE,
this.context.fillRect(GameComponent.BOX_SIZE * player.x + player.width / 4 * GameComponent.BOX_SIZE,
GameComponent.BOX_SIZE * player.y + player.height / 4 * GameComponent.BOX_SIZE,
GameComponent.BOX_SIZE * (player.width / 2), GameComponent.BOX_SIZE * (player.height / 2));
GameComponent.BOX_SIZE * (player.width / 2), GameComponent.BOX_SIZE * (player.height / 2));
}
drawObstacle(obstacle) {
@ -155,13 +156,6 @@ export class GameComponent implements OnInit {
GameComponent.BOX_SIZE * obstacle.width, GameComponent.BOX_SIZE * obstacle.height);
}
writeToScreen(message: string) {
const pre = document.createElement('p');
pre.style.wordWrap = 'break-word';
pre.innerHTML = message;
this.output.appendChild(pre);
}
getStatus(status) {
if (status === 'Connected') {
return '<span class=\'badge badge-pill badge-primary\'>Connected</span>';
@ -176,12 +170,11 @@ export class GameComponent implements OnInit {
return '<span class=\'badge badge-pill badge-secondary\'>Disconnected</span>';
}
}
startingCountdown(seconds) {
const loader = $('#loader-overlay');
loader.removeClass('d-none');
setTimeout(function() {
loader.addClass('d-none');
this.showLoader = true;
setTimeout(() => {
this.showLoader = false;
}, (1000 * seconds));
}

6
frontend/prebuild/src/app/login/login.component.ts
View File

@ -5,8 +5,6 @@ import { HttpClient } from '@angular/common/http';
import { trigger, animate, style, transition, group, query, stagger, state } from '@angular/animations';
import { environment } from './../../environments/environment';
import { PaneType } from '../slider/slider.component';
import * as $ from 'jquery';
import { Player } from '../game/player/player';
@Component({
@ -29,8 +27,8 @@ export class LoginComponent implements OnInit {
ngOnInit() {
this.meta.removeTag('viewport');
let viewWidth = $(window).width();
let viewHeight = $(window).height();
let viewWidth = window.innerWidth;
let viewHeight = window.innerHeight;
this.meta.addTag({name: 'viewport', content: `width=${viewWidth}, height=${viewHeight}, initial-scale=1.0`}, true);