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

Merge pull request #84 from aguibert/player-bike-icons

Browse Source 
Plug in bike icons to game board
This commit is contained in:
Andrew Guibert 2018-05-09 10:56:17 -05:00 committed by GitHub
commit 403751c8c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,22 +21,25 @@ export class PlayerTooltip {
public update() {
// positioning
if (this.lastY > this.player.shape.y)
if (this.lastY > this.player.y)
this.showAbove = true;
else if (this.lastY < this.player.shape.y)
else if (this.lastY < this.player.y)
this.showAbove = false;
this.lastY = this.player.shape.y;
this.shape.x = this.player.shape.x - 50;
this.shape.y = this.player.shape.y + (this.showAbove ? 20 : -35);
this.nameText.x = this.player.shape.x + 8;
this.nameText.y = this.player.shape.y + (this.showAbove ? 23 : -32);
this.lastY = this.player.y;
this.shape.x = this.player.x - 50;
this.shape.y = this.player.y + (this.showAbove ? 30 : -45);
this.nameText.x = this.player.x + 8;
this.nameText.y = this.player.y + (this.showAbove ? 33 : -42);
// start fading out after 15 ticks
if(this.lifetime > 0)
this.lifetime--;
if (this.lifetime < 15) {
this.shape.alpha = (this.lifetime / 10);
this.nameText.alpha = (this.lifetime / 10);
if (this.player.status === 'Alive') {
if(this.lifetime > 0)
this.lifetime--;
if (this.lifetime < 15) {
this.alpha(this.lifetime / 10);
}
} else {
this.alpha(1);
}
}
@ -44,4 +47,9 @@ export class PlayerTooltip {
this.shape.visible = isVisible;
this.nameText.visible = isVisible;
}
public alpha(newAlpha: number) {
this.shape.alpha = newAlpha;
this.nameText.alpha = newAlpha;
}
}

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

@ -1,32 +1,67 @@
import { Shape } from 'createjs-module';
import { Shape, Bitmap, Stage } from 'createjs-module';
import { PlayerTooltip } from './player.tooltip';
export class Player {
static BOX_SIZE: number = 5;
// According to EaselJS, "When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before the Bitmap will be displayed."
// 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');
public name: string;
public status: string;
public color: string;
public shape: Shape = new Shape();
public x: number;
public y: number;
public image: Bitmap;
public tooltip: PlayerTooltip;
public draw(width: number, height: number) {
public update(x: number, y: number, direction: string) {
//console.log(`[Player-${this.name}] x=${x} y=${y} direction=${direction}`);
this.x = x;
this.y = y;
if (!this.tooltip)
this.tooltip = new PlayerTooltip(this);
this.shape.graphics.beginFill(this.color)
.rect(0, 0, width * Player.BOX_SIZE, height * Player.BOX_SIZE);
this.shape.graphics.beginFill('#e8e5e5')
.rect(width / 4 * Player.BOX_SIZE, height / 4 * Player.BOX_SIZE,
Player.BOX_SIZE * (width / 2), Player.BOX_SIZE * (height / 2));
}
public update(x, y) {
this.shape.x = x;
this.shape.y = y;
if (!this.image) {
this.image = new Bitmap('../../assets/images/bike_wide.png');
}
this.visible(true);
if (direction === 'UP') {
this.image.rotation = 0;
this.image.x = x - 5;
this.image.y = y - 5;
} else if (direction === 'RIGHT') {
this.image.rotation = 90;
this.image.x = x + 20;
this.image.y = y - 5;
} else if (direction === 'DOWN') {
this.image.rotation = 180;
this.image.x = x + 20;
this.image.y = y + 20;
} else {
this.image.rotation = 270;
this.image.x = x - 5;
this.image.y = y + 20;
}
this.tooltip.update();
}
public visible(isVisible: boolean) {
this.shape.visible = isVisible;
this.image.visible = isVisible;
this.tooltip.visible(isVisible);
}
public addTo(stage: Stage) {
if (this.tooltip) {
stage.addChild(this.tooltip.shape);
stage.addChild(this.tooltip.nameText);
}
stage.addChild(this.image);
}
public removeFrom(stage: Stage) {
if (this.tooltip) {
stage.removeChild(this.tooltip.shape);
stage.removeChild(this.tooltip.nameText);
}
stage.removeChild(this.image);
}
}

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

@ -35,7 +35,7 @@ export class GameComponent implements OnInit, OnDestroy {
context: CanvasRenderingContext2D;
stage: Stage;
players: Player[];
players: Map<string,Player> = new Map<string,Player>();
obstacles: Obstacle[];
trailsShape: Shape;
trailsCanvas: HTMLCanvasElement;
@ -101,75 +101,55 @@ export class GameComponent implements OnInit, OnDestroy {
}
if (json.playerlist) {
if (this.players != null) {
this.players.forEach(player => {
this.stage.removeChild(player.shape);
this.stage.removeChild(player.tooltip.shape);
this.stage.removeChild(player.tooltip.nameText);
});
}
this.players = new Array<Player>();
for (let playerInfo of json.playerlist) {
const newPlayer = new Player();
newPlayer.name = playerInfo.name;
newPlayer.color = playerInfo.color;
newPlayer.status = playerInfo.status;
for (let playerInfo of json.playerlist) {
let newPlayer = this.players.get(playerInfo.id);
if (!newPlayer) {
newPlayer = new Player();
newPlayer.name = playerInfo.name;
newPlayer.color = playerInfo.color;
newPlayer.status = playerInfo.status;
this.players.set(playerInfo.id, newPlayer);
}
if (playerInfo.status !== 'Dead')
newPlayer.update(playerInfo.x * GameComponent.BOX_SIZE, playerInfo.y * GameComponent.BOX_SIZE, playerInfo.direction);
newPlayer.draw(playerInfo.width, playerInfo.height);
newPlayer.update(playerInfo.x * GameComponent.BOX_SIZE, playerInfo.y * GameComponent.BOX_SIZE);
// Don't show bot players which have no position initially
if (playerInfo.id === "") {
newPlayer.visible(false);
// Don't show bot players which have no position initially
if (playerInfo.id === "") {
newPlayer.visible(false);
}
newPlayer.addTo(this.stage);
}
if (newPlayer.status !== 'Dead') {
this.stage.addChild(newPlayer.shape);
this.stage.addChild(newPlayer.tooltip.shape);
this.stage.addChild(newPlayer.tooltip.nameText);
}
this.players.push(newPlayer);
}
}
if (json.players) {
let noneAlive: boolean = true;
json.players.forEach((player, i) => {
const playerEntity = this.players[i];
if (player.alive) {
const shape = playerEntity.shape;
if (!shape.visible) {
playerEntity.visible(true);
}
playerEntity.update(player.x * GameComponent.BOX_SIZE, player.y * GameComponent.BOX_SIZE);
const playerEntity = this.players.get(player.id);
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);
} else if (!player.alive && playerEntity.status === 'Alive') {
// 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(player.x * GameComponent.BOX_SIZE, player.y * GameComponent.BOX_SIZE, player.width * GameComponent.BOX_SIZE, player.height * GameComponent.BOX_SIZE);
this.trailsContext.fillStyle = '#e8e5e5';
this.trailsContext.fillRect(
player.x * GameComponent.BOX_SIZE + player.width / 4 * GameComponent.BOX_SIZE,
player.y * GameComponent.BOX_SIZE + player.height / 4 * GameComponent.BOX_SIZE,
GameComponent.BOX_SIZE * (player.width / 2), GameComponent.BOX_SIZE * (player.height / 2));
// Hide from stage
this.stage.removeChild(playerEntity.shape);
// Update trails shape on main canvas
this.trailsShape.graphics.clear().beginBitmapFill(this.trailsCanvas, 'no-repeat').drawRect(0, 0, 600, 600);
} else if (!player.alive) {
// Ensure tooltip is hidden in case player dies before it fades out
playerEntity.tooltip.visible(false);
playerEntity.tooltip.alpha(1);
}
playerEntity.status = player.status;
});
if (noneAlive) {
this.players.forEach((player: Player, id: string) => {
player.tooltip.alpha(1);
player.tooltip.visible(true);
});
}
}
if (json.countdown) {

BIN
frontend/prebuild/src/assets/images/bike_wide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

6
game-service/src/main/java/org/libertybikes/game/core/Player.java
View File

@ -10,7 +10,7 @@ import java.util.Queue;
import javax.json.bind.annotation.JsonbPropertyOrder;
import javax.json.bind.annotation.JsonbTransient;
@JsonbPropertyOrder({ "id", "name", "color", "status", "alive", "x", "y", "width", "height", "oldX", "oldY", "trailPosX", "trailPosY", "trailPosX2", "trailPosY2" })
@JsonbPropertyOrder({ "id", "name", "color", "status", "alive", "x", "y", "width", "height", "oldX", "oldY", "trailPosX", "trailPosY", "trailPosX2", "trailPosY2", "direction" })
public class Player {
public static enum STATUS {
@ -83,6 +83,10 @@ public class Player {
trailPosY = trailPosY2 = y + 1;
}
public DIRECTION getDirection() {
return desiredNextDirection != null ? desiredNextDirection : direction;
}
public void setDirection(DIRECTION newDirection) {
if (newDirection == direction)
return;

13
game-service/src/test/java/org/libertybikes/game/core/JsonDataTest.java
View File

@ -6,7 +6,6 @@ package org.libertybikes.game.core;
import static org.junit.Assert.assertEquals;
import static org.junit.Assert.assertTrue;
import java.util.HashSet;
import java.util.LinkedHashSet;
import java.util.Set;
@ -70,7 +69,7 @@ public class JsonDataTest {
assertEquals("{\"movingObstacles\":[],\"obstacles\":[" + obstacleJson + "],\"players\":[]}", jsonb.toJson(board));
// @JsonbPropertyOrder({ "id", "name", "color", "status", "isAlive", "x", "y", "width", "height", "oldX", "oldY", "trailPosX", "trailPosY", "trailPosX2", "trailPosY2" })
String bobJson = "{\"id\":\"1234\",\"name\":\"Bob\",\"color\":\"#DF740C\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":9,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":9,\"trailPosX\":10,\"trailPosY\":10,\"trailPosX2\":10,\"trailPosY2\":10}";
String bobJson = "{\"id\":\"1234\",\"name\":\"Bob\",\"color\":\"#DF740C\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":9,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":9,\"trailPosX\":10,\"trailPosY\":10,\"trailPosX2\":10,\"trailPosY2\":10,\"direction\":\"RIGHT\"}";
board.addPlayer("1234", "Bob");
assertEquals("{\"movingObstacles\":[],\"obstacles\":[" + obstacleJson + "],\"players\":[" + bobJson + "]}",
jsonb.toJson(board));
@ -102,15 +101,15 @@ public class JsonDataTest {
Set<Player> players = new LinkedHashSet<>();
players.add(new Player("123", "Bob", (short) 0, 9, 9));
PlayerList list = new OutboundMessage.PlayerList(players);
String bob = "{\"id\":\"123\",\"name\":\"Bob\",\"color\":\"#DF740C\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":9,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":9,\"trailPosX\":10,\"trailPosY\":10,\"trailPosX2\":10,\"trailPosY2\":10}";
String bot1 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#FF0000\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1}";
String bot2 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#6FC3DF\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1}";
String bot3 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#FFE64D\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1}";
String bob = "{\"id\":\"123\",\"name\":\"Bob\",\"color\":\"#DF740C\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":9,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":9,\"trailPosX\":10,\"trailPosY\":10,\"trailPosX2\":10,\"trailPosY2\":10,\"direction\":\"RIGHT\"}";
String bot1 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#FF0000\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1,\"direction\":\"DOWN\"}";
String bot2 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#6FC3DF\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1,\"direction\":\"UP\"}";
String bot3 = "{\"id\":\"\",\"name\":\"Bot Player\",\"color\":\"#FFE64D\",\"status\":\"Connected\",\"alive\":true,\"x\":0,\"y\":0,\"width\":3,\"height\":3,\"oldX\":0,\"oldY\":0,\"trailPosX\":1,\"trailPosY\":1,\"trailPosX2\":1,\"trailPosY2\":1,\"direction\":\"LEFT\"}";
System.out.println("@AGG " + jsonb.toJson(list));
assertEquals("{\"playerlist\":[" + bob + "," + bot1 + "," + bot2 + "," + bot3 + "]}",
jsonb.toJson(list));
String chuck = "{\"id\":\"456\",\"name\":\"Chuck\",\"color\":\"#6FC3DF\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":110,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":110,\"trailPosX\":10,\"trailPosY\":111,\"trailPosX2\":10,\"trailPosY2\":111}";
String chuck = "{\"id\":\"456\",\"name\":\"Chuck\",\"color\":\"#6FC3DF\",\"status\":\"Connected\",\"alive\":true,\"x\":9,\"y\":110,\"width\":3,\"height\":3,\"oldX\":9,\"oldY\":110,\"trailPosX\":10,\"trailPosY\":111,\"trailPosX2\":10,\"trailPosY2\":111,\"direction\":\"UP\"}";
players.add(new Player("456", "Chuck", (short) 2, 9, 110));
list = new OutboundMessage.PlayerList(players);
assertEquals("{\"playerlist\":[" + bob + "," + bot1 + "," + chuck + "," + bot3 + "]}",