Compare commits
4 commits
develop
...
update-arc
Author | SHA1 | Date | |
---|---|---|---|
7bb534c398 | |||
20ba628ed8 | |||
146245f193 | |||
22e36dc20e |
72
front/src/Phaser/Components/EllipseTexture.ts
Normal file
72
front/src/Phaser/Components/EllipseTexture.ts
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
import Sprite = Phaser.GameObjects.Sprite;
|
||||||
|
import {Scene} from "phaser";
|
||||||
|
import Texture = Phaser.Textures.Texture;
|
||||||
|
|
||||||
|
export const CIRCLE_ELLIPSE_WHITE = 'ellipseSprite-white';
|
||||||
|
export const CIRCLE_ELLIPSE_RED = 'ellipseSprite-red';
|
||||||
|
export const LINE_WIDTH = 2;
|
||||||
|
export const RADIUS_X = 45;
|
||||||
|
export const RADIUS_Y = 28;
|
||||||
|
export const START_ANGLE = 0;
|
||||||
|
export const END_ANGLE = 2 * Math.PI;
|
||||||
|
export const STROKE_STYLE_WHITE = '#ffffff';
|
||||||
|
export const STROKE_STYLE_RED = '#ff0000';
|
||||||
|
|
||||||
|
export class EllipseTexture extends Sprite {
|
||||||
|
|
||||||
|
constructor(scene: Scene, x: number, y: number, public groupSize: number) {
|
||||||
|
super(
|
||||||
|
scene,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
groupSize === 4 ? CIRCLE_ELLIPSE_RED : CIRCLE_ELLIPSE_WHITE
|
||||||
|
);
|
||||||
|
|
||||||
|
this.setDisplayOrigin(RADIUS_X, RADIUS_Y);
|
||||||
|
scene.add.existing(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public update(x: number, y: number, groupSize: number) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.groupSize = groupSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static createEllipseCanvas(scene: Scene) {
|
||||||
|
// Let's generate the circle for the group delimiter
|
||||||
|
let circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_WHITE);
|
||||||
|
if (circleElement) {
|
||||||
|
scene.textures.remove(CIRCLE_ELLIPSE_WHITE);
|
||||||
|
}
|
||||||
|
|
||||||
|
circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_RED);
|
||||||
|
if (circleElement) {
|
||||||
|
scene.textures.remove(CIRCLE_ELLIPSE_RED);
|
||||||
|
}
|
||||||
|
|
||||||
|
//create white circle canvas use to create sprite
|
||||||
|
const circleTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_WHITE, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH);
|
||||||
|
const context = circleTexture.context;
|
||||||
|
context.lineWidth = LINE_WIDTH;
|
||||||
|
context.strokeStyle = STROKE_STYLE_WHITE;
|
||||||
|
context.fillStyle = STROKE_STYLE_WHITE+'2F';
|
||||||
|
context.beginPath();
|
||||||
|
context.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI);
|
||||||
|
context.fill();
|
||||||
|
context.stroke();
|
||||||
|
circleTexture.refresh();
|
||||||
|
|
||||||
|
//create red circle canvas use to create sprite
|
||||||
|
const circleRedTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_RED, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH);
|
||||||
|
const contextRed = circleRedTexture.context;
|
||||||
|
contextRed.lineWidth = 2;
|
||||||
|
contextRed.strokeStyle = STROKE_STYLE_RED;
|
||||||
|
contextRed.fillStyle = STROKE_STYLE_RED+'2F';
|
||||||
|
contextRed.beginPath();
|
||||||
|
contextRed.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI);
|
||||||
|
contextRed.fill();
|
||||||
|
contextRed.stroke();
|
||||||
|
circleRedTexture.refresh();
|
||||||
|
}
|
||||||
|
}
|
|
@ -54,6 +54,7 @@ import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMes
|
||||||
import {ResizableScene} from "../Login/ResizableScene";
|
import {ResizableScene} from "../Login/ResizableScene";
|
||||||
import {Room} from "../../Connexion/Room";
|
import {Room} from "../../Connexion/Room";
|
||||||
import {jitsiFactory} from "../../WebRtc/JitsiFactory";
|
import {jitsiFactory} from "../../WebRtc/JitsiFactory";
|
||||||
|
import {EllipseTexture} from "../Components/EllipseTexture";
|
||||||
|
|
||||||
export interface GameSceneInitInterface {
|
export interface GameSceneInitInterface {
|
||||||
initPosition: PointInterface|null
|
initPosition: PointInterface|null
|
||||||
|
@ -99,7 +100,7 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||||
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
|
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
|
||||||
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
|
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
|
||||||
mapFile!: ITiledMap;
|
mapFile!: ITiledMap;
|
||||||
groups: Map<number, Sprite>;
|
groups: Map<number, EllipseTexture>;
|
||||||
startX!: number;
|
startX!: number;
|
||||||
startY!: number;
|
startY!: number;
|
||||||
circleTexture!: CanvasTexture;
|
circleTexture!: CanvasTexture;
|
||||||
|
@ -156,7 +157,7 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||||
|
|
||||||
this.GameManager = gameManager;
|
this.GameManager = gameManager;
|
||||||
this.Terrains = [];
|
this.Terrains = [];
|
||||||
this.groups = new Map<number, Sprite>();
|
this.groups = new Map<number, EllipseTexture>();
|
||||||
this.instance = room.getInstance();
|
this.instance = room.getInstance();
|
||||||
|
|
||||||
this.MapKey = MapUrlFile;
|
this.MapKey = MapUrlFile;
|
||||||
|
@ -401,36 +402,8 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||||
//initialise camera
|
//initialise camera
|
||||||
this.initCamera();
|
this.initCamera();
|
||||||
|
|
||||||
// Let's generate the circle for the group delimiter
|
//create canvas ellipse
|
||||||
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
|
EllipseTexture.createEllipseCanvas(this);
|
||||||
if (circleElement) {
|
|
||||||
this.textures.remove('circleSprite-white');
|
|
||||||
}
|
|
||||||
|
|
||||||
circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
|
|
||||||
if (circleElement) {
|
|
||||||
this.textures.remove('circleSprite-red');
|
|
||||||
}
|
|
||||||
|
|
||||||
//create white circle canvas use to create sprite
|
|
||||||
this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
|
|
||||||
const context = this.circleTexture.context;
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
|
||||||
// context.lineWidth = 5;
|
|
||||||
context.strokeStyle = '#ffffff';
|
|
||||||
context.stroke();
|
|
||||||
this.circleTexture.refresh();
|
|
||||||
|
|
||||||
//create red circle canvas use to create sprite
|
|
||||||
this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
|
|
||||||
const contextRed = this.circleRedTexture.context;
|
|
||||||
contextRed.beginPath();
|
|
||||||
contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
|
||||||
// context.lineWidth = 5;
|
|
||||||
contextRed.strokeStyle = '#ff0000';
|
|
||||||
contextRed.stroke();
|
|
||||||
this.circleRedTexture.refresh();
|
|
||||||
|
|
||||||
// Let's pause the scene if the connection is not established yet
|
// Let's pause the scene if the connection is not established yet
|
||||||
if (this.connection === undefined) {
|
if (this.connection === undefined) {
|
||||||
|
@ -1132,21 +1105,37 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||||
}
|
}
|
||||||
|
|
||||||
private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
|
private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
|
||||||
//delete previous group
|
let ellipse = this.groups.get(groupPositionMessage.groupId);
|
||||||
this.doDeleteGroup(groupPositionMessage.groupId);
|
if(!ellipse) {
|
||||||
|
ellipse = new EllipseTexture(
|
||||||
// TODO: circle radius should not be hard stored
|
this,
|
||||||
//create new group
|
Math.round(groupPositionMessage.position.x),
|
||||||
const sprite = new Sprite(
|
Math.round(groupPositionMessage.position.y),
|
||||||
this,
|
groupPositionMessage.groupSize
|
||||||
Math.round(groupPositionMessage.position.x),
|
);
|
||||||
Math.round(groupPositionMessage.position.y),
|
}else {
|
||||||
groupPositionMessage.groupSize === 4 ? 'circleSprite-red' : 'circleSprite-white'
|
if (
|
||||||
);
|
(groupPositionMessage.groupSize > 3 && ellipse.groupSize > 3)
|
||||||
sprite.setDisplayOrigin(48, 48);
|
|| (groupPositionMessage.groupSize < 4 && ellipse.groupSize < 4)
|
||||||
this.add.existing(sprite);
|
) {
|
||||||
this.groups.set(groupPositionMessage.groupId, sprite);
|
ellipse.update(
|
||||||
return sprite;
|
Math.round(groupPositionMessage.position.x),
|
||||||
|
Math.round(groupPositionMessage.position.y),
|
||||||
|
groupPositionMessage.groupSize
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
//delete previous group
|
||||||
|
this.doDeleteGroup(groupPositionMessage.groupId);
|
||||||
|
ellipse = new EllipseTexture(
|
||||||
|
this,
|
||||||
|
Math.round(groupPositionMessage.position.x),
|
||||||
|
Math.round(groupPositionMessage.position.y),
|
||||||
|
groupPositionMessage.groupSize
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.groups.set(groupPositionMessage.groupId, ellipse);
|
||||||
|
return ellipse;
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteGroup(groupId: number): void {
|
deleteGroup(groupId: number): void {
|
||||||
|
|
Loading…
Reference in a new issue