mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-01-30 10:40:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #96 from realModusOperandi/hidpi

Browse Source 
Increase internal canvas resolution to 1200
This commit is contained in:
Andrew Guibert 2018-05-14 10:42:58 -05:00 committed by GitHub
commit 8f68ddf09e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/prebuild/src/app/entity/player.tooltip.ts
View File

@ -1,5 +1,6 @@
import { Shape, Text } from 'createjs-module';
import { Player } from './player';
import { GameComponent } from '../game/game.component';
export class PlayerTooltip {
public shape: Shape = new Shape();
@ -12,41 +13,41 @@ export class PlayerTooltip {
constructor(public player: Player) {
if (!this.player.color)
console.log('WARNING: Creating a tooltip with a player that is not properly initialized');
this.nameText = new Text(this.player.name, "14px Arial", "#fff");
this.nameText = new Text(this.player.name, "28px Arial", "#fff");
this.nameText.textAlign = 'center';
this.nameText.maxWidth = 100;
this.nameText.maxWidth = 200;
this.shape.graphics.beginFill(this.player.color)
.drawRoundRect(0,0, 115, 25, 10);
.drawRoundRect(0,0, 230, 50, 10);
}
public update() {
// positioning
if (this.lastY < this.player.y)
this.showAbove = true;
else if (this.lastY > this.player.y)
this.showAbove = false;
if (this.player.y < 50)
if (this.player.y < 100)
this.showAbove = false;
else if (this.player.y > (600 - 50))
else if (this.player.y > (GameComponent.BOARD_SIZE - 100))
this.showAbove = true;
this.lastY = this.player.y;
this.shape.x = this.player.x - 50;
this.shape.y = this.player.y + (this.showAbove ? -48 : 36);
this.nameText.x = this.player.x + 8;
this.nameText.y = this.player.y + (this.showAbove ? -45 : 39);
this.shape.x = this.player.x - 100;
this.shape.y = this.player.y + (this.showAbove ? -96 : 72);
this.nameText.x = this.player.x + 16;
this.nameText.y = this.player.y + (this.showAbove ? -90 : 78);
// prevent tooltip from going off screen
if (this.shape.x < 0)
this.shape.x = 0;
if ((this.shape.x + 115) > 600)
this.shape.x = (600 - 115);
if (this.nameText.x - 50 < 0)
this.nameText.x = 50;
if (this.nameText.x + 50 > 600)
this.nameText.x = (600 - 50);
if ((this.shape.x + 230) > GameComponent.BOARD_SIZE)
this.shape.x = (GameComponent.BOARD_SIZE - 230);
if (this.nameText.x - 100 < 0)
this.nameText.x = 100;
if (this.nameText.x + 100 > GameComponent.BOARD_SIZE)
this.nameText.x = (GameComponent.BOARD_SIZE - 100);
// start fading out after 15 ticks
if (this.player.status === 'Alive') {
if(this.lifetime > 0)
@ -58,12 +59,12 @@ export class PlayerTooltip {
this.alpha(0.9);
}
}
public visible(isVisible: boolean) {
this.shape.visible = isVisible;
this.nameText.visible = isVisible;
}
public alpha(newAlpha: number) {
if (newAlpha > 0.9)
newAlpha = 0.9;

42
frontend/prebuild/src/app/entity/player.ts
View File

@ -6,7 +6,7 @@ export class Player {
// For this reason, we need to pre-load an instance of the image (this copy never gets used)
static readonly PLAYER_BITMAP = new Bitmap('../../assets/images/bike_wide.png');
static readonly PLAYER_DEAD_BITMAP = new Bitmap('../../assets/images/status_dead.png');
public name: string;
public status: string;
public color: string;
@ -22,52 +22,54 @@ export class Player {
if (!this.tooltip)
this.tooltip = new PlayerTooltip(this);
if (!this.image) {
this.image = new Bitmap('../../assets/images/bike_wide.png');
this.image = new Bitmap('../../assets/images/bike_wide.png');
this.image.scaleX = 2.0;
this.image.scaleY = 2.0;
}
if (direction === 'UP') {
this.image.rotation = 0;
this.image.x = x - 5;
this.image.y = y - 5;
this.image.x = x - 10;
this.image.y = y - 10;
} else if (direction === 'RIGHT') {
this.image.rotation = 90;
this.image.x = x + 20;
this.image.y = y - 5;
this.image.x = x + 40;
this.image.y = y - 10;
} else if (direction === 'DOWN') {
this.image.rotation = 180;
this.image.x = x + 20;
this.image.y = y + 20;
this.image.x = x + 40;
this.image.y = y + 40;
} else {
this.image.rotation = 270;
this.image.x = x - 5;
this.image.y = y + 20;
this.image.x = x - 10;
this.image.y = y + 40;
}
this.tooltip.update();
}
public visible(isVisible: boolean) {
this.image.visible = isVisible;
this.tooltip.visible(isVisible);
this.image.visible = isVisible;
this.tooltip.visible(isVisible);
}
public setStatus(status: string) {
if (status === 'Dead' && this.status !== 'Dead') {
this.image = new Bitmap('../../assets/images/status_dead.png');
this.image.scaleX = 0.7;
this.image.scaleY = 0.7;
this.image.x = this.x - 10;
this.image.y = this.y - 10;
this.image.scaleX = 1.2;
this.image.scaleY = 1.2;
this.image.x = this.x - 20;
this.image.y = this.y - 20;
var bam = new Audio('../../assets/sound/bam.wav');
bam.load();
bam.play();
}
this.status = status;
}
public addTo(stage: Stage) {
if (this.tooltip) {
stage.addChild(this.tooltip.shape);
stage.addChild(this.tooltip.nameText);
stage.addChild(this.tooltip.nameText);
}
stage.addChild(this.image);
}

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

@ -11,7 +11,7 @@
<div id="game-container">
<div id="game-board">
<canvas width="600" height="600" id="gameCanvas"></canvas>
<canvas width="1200" height="1200" id="gameCanvas"></canvas>
</div>
</div>
<div id="players">

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

@ -17,8 +17,9 @@ import { Shape, Stage, Text } from 'createjs-module';
providers: [ GameService ],
})
export class GameComponent implements OnInit, OnDestroy {
static readonly BOX_SIZE = 5;
static readonly BOX_SIZE = 10;
static readonly OBSTACLE_COLOR = '#808080';
static readonly BOARD_SIZE = 1200;
roundId: string;
serverHost: string;
@ -99,7 +100,7 @@ export class GameComponent implements OnInit, OnDestroy {
}
}
if (json.playerlist) {
let oldPlayers: Map<string,Player> = new Map<string,Player>(this.players);
this.players.clear();
@ -107,7 +108,7 @@ export class GameComponent implements OnInit, OnDestroy {
// Don't add generic bot players (used to pad out the palyerlist)
if (playerInfo.id === "")
continue;
let newPlayer = oldPlayers.get(playerInfo.id);
if (!newPlayer) {
newPlayer = new Player();
@ -135,14 +136,14 @@ export class GameComponent implements OnInit, OnDestroy {
if (player.status === 'Alive') {
noneAlive = false;
playerEntity.update(player.x * GameComponent.BOX_SIZE, player.y * GameComponent.BOX_SIZE, player.direction);
// Stamp down player on trails canvas so it can be erased properly when obstacles roll over it
this.trailsContext.fillStyle = player.color;
this.trailsContext.fillRect(GameComponent.BOX_SIZE * player.x + player.width / 2 * GameComponent.BOX_SIZE - GameComponent.BOX_SIZE / 2,
GameComponent.BOX_SIZE * player.y + player.height / 2 * GameComponent.BOX_SIZE - GameComponent.BOX_SIZE / 2,
GameComponent.BOX_SIZE, GameComponent.BOX_SIZE);
this.trailsShape.graphics.clear().beginBitmapFill(this.trailsCanvas, 'no-repeat').drawRect(0, 0, 600, 600);
this.trailsShape.graphics.clear().beginBitmapFill(this.trailsCanvas, 'no-repeat').drawRect(0, 0, GameComponent.BOARD_SIZE, GameComponent.BOARD_SIZE);
} else if (!player.alive) {
// Ensure tooltip is hidden in case player dies before it fades out
playerEntity.tooltip.visible(false);
@ -172,7 +173,7 @@ export class GameComponent implements OnInit, OnDestroy {
});
});
}
ngOnInit() {
this.roundId = sessionStorage.getItem('roundId');
@ -204,8 +205,8 @@ export class GameComponent implements OnInit, OnDestroy {
this.trailsCanvas = <HTMLCanvasElement> document.createElement('canvas');
this.trailsContext = this.trailsCanvas.getContext('2d');
this.trailsCanvas.width = 600;
this.trailsCanvas.height = 600;
this.trailsCanvas.width = GameComponent.BOARD_SIZE;
this.trailsCanvas.height = GameComponent.BOARD_SIZE;
this.obstaclesShape = new Shape();
this.obstaclesShape.x = 0;

8
frontend/prebuild/src/app/login/login.component.scss
View File

@ -133,6 +133,10 @@ h2 {
color: white;
}
.slider {
width: 100%;
}
@media screen and (min-width: 550px) {
#login-container {
width: 500px;
@ -172,10 +176,6 @@ h2 {
top: 0px;
}
.slider {
width: 100%;
}
:host {
min-height: 100%;
}