Merge pull request #69 from thecodingmachine/improve_welcome_screen
Improving welcome screen
This commit is contained in:
commit
e666fe3fa1
@ -9,7 +9,7 @@
|
|||||||
"prod": "tsc && node ./dist/server.js",
|
"prod": "tsc && node ./dist/server.js",
|
||||||
"test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
|
"test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
|
||||||
"lint": "node_modules/.bin/eslint src/ . --ext .ts",
|
"lint": "node_modules/.bin/eslint src/ . --ext .ts",
|
||||||
"fix": "node_modules/.bin/eslint src/ . --ext .ts"
|
"fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
BIN
front/dist/resources/fonts/arcade.png
vendored
Normal file
BIN
front/dist/resources/fonts/arcade.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
83
front/dist/resources/fonts/arcade.xml
vendored
Normal file
83
front/dist/resources/fonts/arcade.xml
vendored
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<?xml version="1.0"?>
|
||||||
|
<font>
|
||||||
|
<info face="Cosmic Avenger" size="32" bold="0" italic="0" charset="" unicode="1" stretchH="100" smooth="0" aa="1" padding="2,2,2,2" spacing="1,1" outline="0"/>
|
||||||
|
<common lineHeight="32" base="32" scaleW="512" scaleH="512" pages="1" packed="0" alphaChnl="0" redChnl="4" greenChnl="4" blueChnl="4"/>
|
||||||
|
<pages>
|
||||||
|
<page id="0" file="arcade_0.png" />
|
||||||
|
</pages>
|
||||||
|
<chars count="73">
|
||||||
|
<char id="32" x="168" y="132" width="7" height="5" xoffset="-3" yoffset="29" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="33" x="25" y="0" width="20" height="36" xoffset="2" yoffset="-2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="38" x="396" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="40" x="495" y="33" width="16" height="32" xoffset="6" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="41" x="495" y="66" width="16" height="32" xoffset="6" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="43" x="178" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="45" x="130" y="132" width="28" height="8" xoffset="-2" yoffset="14" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="46" x="159" y="132" width="8" height="8" xoffset="10" yoffset="14" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="48" x="277" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="49" x="29" y="136" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="50" x="343" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="51" x="376" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="52" x="409" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="53" x="442" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="54" x="475" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="55" x="0" y="37" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="56" x="33" y="37" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="57" x="66" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="58" x="121" y="132" width="8" height="20" xoffset="10" yoffset="6" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="61" x="92" y="132" width="28" height="20" xoffset="-2" yoffset="6" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="63" x="0" y="0" width="24" height="36" xoffset="2" yoffset="-2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="65" x="165" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="66" x="198" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="67" x="231" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="68" x="264" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="69" x="297" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="70" x="330" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="71" x="363" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="72" x="396" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="73" x="50" y="136" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="74" x="425" y="99" width="28" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="75" x="0" y="70" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="76" x="33" y="70" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="77" x="66" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="78" x="99" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="79" x="132" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="80" x="310" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="81" x="198" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="82" x="231" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="83" x="264" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="84" x="454" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="85" x="297" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="86" x="330" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="87" x="363" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="88" x="396" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="89" x="429" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="90" x="462" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="97" x="0" y="103" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="98" x="33" y="103" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="99" x="66" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="100" x="99" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="101" x="132" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="102" x="165" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="103" x="198" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="104" x="231" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="105" x="71" y="132" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="106" x="0" y="136" width="28" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="107" x="264" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="108" x="297" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="109" x="330" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="110" x="363" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="111" x="46" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="112" x="79" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="113" x="165" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="114" x="112" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="115" x="145" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="116" x="483" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="117" x="211" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="118" x="244" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="119" x="99" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="120" x="132" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="121" x="429" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
<char id="122" x="462" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
|
||||||
|
</chars>
|
||||||
|
</font>
|
@ -24,6 +24,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server --open",
|
"start": "webpack-dev-server --open",
|
||||||
"build": "webpack",
|
"build": "webpack",
|
||||||
"lint": "node_modules/.bin/eslint src/ . --ext .ts"
|
"lint": "node_modules/.bin/eslint src/ . --ext .ts",
|
||||||
|
"fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
|
|
||||||
export class TextField extends Phaser.GameObjects.Text {
|
export class TextField extends Phaser.GameObjects.BitmapText {
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
|
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
|
||||||
super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
|
super(scene, x, y, 'main_font', text, 8);
|
||||||
this.scene.add.existing(this)
|
this.scene.add.existing(this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,25 +1,25 @@
|
|||||||
|
|
||||||
export class TextInput extends Phaser.GameObjects.Text {
|
export class TextInput extends Phaser.GameObjects.BitmapText {
|
||||||
private underLineLength = 10;
|
private underLineLength = 10;
|
||||||
private underLine: Phaser.GameObjects.Text;
|
private underLine: Phaser.GameObjects.Text;
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number) {
|
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) {
|
||||||
super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
|
super(scene, x, y, 'main_font', '', 32);
|
||||||
this.scene.add.existing(this);
|
this.scene.add.existing(this);
|
||||||
|
|
||||||
this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'})
|
this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
|
let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
|
||||||
let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
|
let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
|
||||||
this.scene.input.keyboard.on('keydown', (event: any) => {
|
this.scene.input.keyboard.on('keydown', (event: any) => {
|
||||||
if (event.keyCode === 8 && this.text.length > 0) {
|
if (event.keyCode === 8 && this.text.length > 0) {
|
||||||
this.deleteLetter();
|
this.deleteLetter();
|
||||||
} else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
|
} else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
|
||||||
this.addLetter(event.key);
|
this.addLetter(event.key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private deleteLetter() {
|
private deleteLetter() {
|
||||||
this.text = this.text.substr(0, this.text.length - 1);
|
this.text = this.text.substr(0, this.text.length - 1);
|
||||||
if (this.underLine.text.length > this.underLineLength) {
|
if (this.underLine.text.length > this.underLineLength) {
|
||||||
@ -40,4 +40,4 @@ export class TextInput extends Phaser.GameObjects.Text {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
|
import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
|
||||||
import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
|
import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
|
||||||
import {SpeechBubble} from "./SpeechBubble";
|
import {SpeechBubble} from "./SpeechBubble";
|
||||||
|
import BitmapText = Phaser.GameObjects.BitmapText;
|
||||||
|
|
||||||
export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
||||||
private bubble: SpeechBubble;
|
private bubble: SpeechBubble;
|
||||||
|
private playerName: BitmapText;
|
||||||
|
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) {
|
constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) {
|
||||||
super(scene, x, y, texture, frame);
|
super(scene, x, y, texture, frame);
|
||||||
|
|
||||||
|
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
|
||||||
|
this.playerName.setOrigin(0.5).setCenterAlign();
|
||||||
|
scene.add.existing(this.playerName);
|
||||||
|
|
||||||
this.scene.sys.updateList.add(this);
|
this.scene.sys.updateList.add(this);
|
||||||
this.scene.sys.displayList.add(this);
|
this.scene.sys.displayList.add(this);
|
||||||
//this.setScale(2);
|
//this.setScale(2);
|
||||||
@ -36,6 +42,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
|||||||
if(this.bubble) {
|
if(this.bubble) {
|
||||||
this.bubble.moveBubble(this.x, this.y);
|
this.bubble.moveBubble(this.x, this.y);
|
||||||
}
|
}
|
||||||
|
this.playerName.setPosition(this.x, this.y - 25);
|
||||||
}
|
}
|
||||||
|
|
||||||
stop(){
|
stop(){
|
||||||
@ -46,7 +53,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
|||||||
say(text: string) {
|
say(text: string) {
|
||||||
if (this.bubble) return;
|
if (this.bubble) return;
|
||||||
this.bubble = new SpeechBubble(this.scene, this, text)
|
this.bubble = new SpeechBubble(this.scene, this, text)
|
||||||
//todo make the buble destroy on player movement?
|
//todo make the bubble destroy on player movement?
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.bubble.destroy();
|
this.bubble.destroy();
|
||||||
this.bubble = null;
|
this.bubble = null;
|
||||||
|
@ -19,14 +19,16 @@ export class GameManager {
|
|||||||
status: number;
|
status: number;
|
||||||
private ConnexionInstance: Connexion;
|
private ConnexionInstance: Connexion;
|
||||||
private currentGameScene: GameScene;
|
private currentGameScene: GameScene;
|
||||||
|
private playerName: string;
|
||||||
SimplePeer : SimplePeerInterface;
|
SimplePeer : SimplePeerInterface;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.status = StatusGameManagerEnum.IN_PROGRESS;
|
this.status = StatusGameManagerEnum.IN_PROGRESS;
|
||||||
}
|
}
|
||||||
|
|
||||||
connect(email:string) {
|
connect(name:string) {
|
||||||
this.ConnexionInstance = new Connexion(email, this);
|
this.playerName = name;
|
||||||
|
this.ConnexionInstance = new Connexion(name, this);
|
||||||
return this.ConnexionInstance.createConnexion().then(() => {
|
return this.ConnexionInstance.createConnexion().then(() => {
|
||||||
this.SimplePeer = new SimplePeer(this.ConnexionInstance);
|
this.SimplePeer = new SimplePeer(this.ConnexionInstance);
|
||||||
});
|
});
|
||||||
@ -61,9 +63,13 @@ export class GameManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getPlayerName(): string {
|
||||||
|
return this.playerName;
|
||||||
|
}
|
||||||
|
|
||||||
pushPlayerPosition(event: HasMovedEvent) {
|
pushPlayerPosition(event: HasMovedEvent) {
|
||||||
this.ConnexionInstance.sharePosition(event.x, event.y, event.direction);
|
this.ConnexionInstance.sharePosition(event.x, event.y, event.direction);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const gameManager = new GameManager();
|
export const gameManager = new GameManager();
|
||||||
|
@ -61,11 +61,14 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
|||||||
'resources/characters/pipoya/Male 01-1.png',
|
'resources/characters/pipoya/Male 01-1.png',
|
||||||
{ frameWidth: 32, frameHeight: 32 }
|
{ frameWidth: 32, frameHeight: 32 }
|
||||||
);
|
);
|
||||||
|
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
|
||||||
|
|
||||||
cypressAsserter.preloadFinished();
|
cypressAsserter.preloadFinished();
|
||||||
}
|
}
|
||||||
|
|
||||||
//hook initialisation
|
//hook initialisation
|
||||||
init(){}
|
init() {
|
||||||
|
}
|
||||||
|
|
||||||
//hook create scene
|
//hook create scene
|
||||||
create(): void {
|
create(): void {
|
||||||
@ -162,6 +165,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
|||||||
this,
|
this,
|
||||||
this.startX,
|
this.startX,
|
||||||
this.startY,
|
this.startY,
|
||||||
|
this.GameManager.getPlayerName()
|
||||||
);
|
);
|
||||||
this.CurrentPlayer.initAnimation();
|
this.CurrentPlayer.initAnimation();
|
||||||
|
|
||||||
@ -254,6 +258,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
|||||||
this,
|
this,
|
||||||
MessageUserPosition.position.x,
|
MessageUserPosition.position.x,
|
||||||
MessageUserPosition.position.y,
|
MessageUserPosition.position.y,
|
||||||
|
'Foo'
|
||||||
);
|
);
|
||||||
player.initAnimation();
|
player.initAnimation();
|
||||||
this.MapPlayers.add(player);
|
this.MapPlayers.add(player);
|
||||||
|
@ -3,20 +3,23 @@ import {TextField} from "../Components/TextField";
|
|||||||
import {TextInput} from "../Components/TextInput";
|
import {TextInput} from "../Components/TextInput";
|
||||||
import {ClickButton} from "../Components/ClickButton";
|
import {ClickButton} from "../Components/ClickButton";
|
||||||
import {GameSceneName} from "../Game/GameScene";
|
import {GameSceneName} from "../Game/GameScene";
|
||||||
import {SimplePeer} from "../../WebRtc/SimplePeer";
|
import Image = Phaser.GameObjects.Image;
|
||||||
import {Connexion} from "../../Connexion";
|
|
||||||
|
|
||||||
//todo: put this constants in a dedicated file
|
//todo: put this constants in a dedicated file
|
||||||
export const LoginSceneName = "LoginScene";
|
export const LoginSceneName = "LoginScene";
|
||||||
enum LoginTextures {
|
enum LoginTextures {
|
||||||
playButton = "play_button",
|
//playButton = "play_button",
|
||||||
|
icon = "icon",
|
||||||
|
mainFont = "main_font"
|
||||||
}
|
}
|
||||||
|
|
||||||
export class LogincScene extends Phaser.Scene {
|
export class LogincScene extends Phaser.Scene {
|
||||||
private emailInput: TextInput;
|
private nameInput: TextInput;
|
||||||
private textField: TextField;
|
private textField: TextField;
|
||||||
private playButton: ClickButton;
|
private playButton: ClickButton;
|
||||||
private infoTextField: TextField;
|
private infoTextField: TextField;
|
||||||
|
private pressReturnField: TextField;
|
||||||
|
private logo: Image;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
@ -25,30 +28,51 @@ export class LogincScene extends Phaser.Scene {
|
|||||||
}
|
}
|
||||||
|
|
||||||
preload() {
|
preload() {
|
||||||
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
|
//this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
|
||||||
|
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
|
||||||
|
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
|
||||||
|
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
this.textField = new TextField(this, 10, 10, 'Enter your email:');
|
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
|
||||||
this.emailInput = new TextInput(this, 10, 50);
|
this.textField.setOrigin(0.5).setCenterAlign()
|
||||||
|
this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4);
|
||||||
|
|
||||||
let x = this.game.renderer.width / 2;
|
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
|
||||||
let y = this.game.renderer.height / 2;
|
this.pressReturnField.setOrigin(0.5).setCenterAlign()
|
||||||
this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
|
|
||||||
|
//let x = this.game.renderer.width / 2;
|
||||||
|
//let y = this.game.renderer.height / 2;
|
||||||
|
//this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
|
||||||
|
|
||||||
|
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
|
||||||
|
this.add.existing(this.logo);
|
||||||
|
|
||||||
|
let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
|
||||||
|
this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
|
||||||
|
|
||||||
|
this.input.keyboard.on('keyup-ENTER', () => {
|
||||||
|
let name = this.nameInput.getText();
|
||||||
|
if (name === '') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return this.login(name);
|
||||||
|
});
|
||||||
|
|
||||||
let infoText = "Commandes de base: \n - Z,Q,S,D (ou les flèches de direction) pour bouger\n - SHIFT pour accélerer";
|
|
||||||
this.infoTextField = new TextField(this, 10, 300, infoText);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
update(time: number, delta: number): void {
|
update(time: number, delta: number): void {
|
||||||
|
if (this.nameInput.getText() == '') {
|
||||||
|
this.pressReturnField.setVisible(false);
|
||||||
|
} else {
|
||||||
|
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async login() {
|
private async login(name: string) {
|
||||||
let email = this.emailInput.text;
|
gameManager.connect(name).then(() => {
|
||||||
if (!email) return;
|
|
||||||
gameManager.connect(email).then(() => {
|
|
||||||
this.scene.start(GameSceneName);
|
this.scene.start(GameSceneName);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,13 +6,13 @@ import {MessageUserPositionInterface} from "../../Connexion";
|
|||||||
import {playAnimation} from "../Player/Animation";
|
import {playAnimation} from "../Player/Animation";
|
||||||
|
|
||||||
export class NonPlayer extends PlayableCaracter {
|
export class NonPlayer extends PlayableCaracter {
|
||||||
|
|
||||||
isFleeing: boolean = false;
|
isFleeing: boolean = false;
|
||||||
fleeingDirection:any = null //todo create a vector class
|
fleeingDirection:any = null //todo create a vector class
|
||||||
|
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number) {
|
constructor(scene: Phaser.Scene, x: number, y: number, name: string) {
|
||||||
super(scene, x, y, Textures.Player, 1);
|
super(scene, x, y, Textures.Player, name, 1);
|
||||||
this.setSize(32, 32); //edit the hitbox to better match the caracter model
|
this.setSize(32, 32); //edit the hitbox to better match the character model
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -26,15 +26,15 @@ export class NonPlayer extends PlayableCaracter {
|
|||||||
if (this.isFleeing) return;
|
if (this.isFleeing) return;
|
||||||
this.say("Don't touch me!");
|
this.say("Don't touch me!");
|
||||||
this.isFleeing = true;
|
this.isFleeing = true;
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.say("Feww, I escaped.");
|
this.say("Feww, I escaped.");
|
||||||
this.isFleeing = false
|
this.isFleeing = false
|
||||||
this.fleeingDirection = null
|
this.fleeingDirection = null
|
||||||
}, 3000);
|
}, 3000);
|
||||||
|
|
||||||
let vectorX = this.x - player.x;
|
let vectorX = this.x - player.x;
|
||||||
let vectorY = this.y - player.y;
|
let vectorY = this.y - player.y;
|
||||||
this.fleeingDirection = {x: vectorX, y: vectorY}
|
this.fleeingDirection = {x: vectorX, y: vectorY}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -33,9 +33,10 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
|||||||
Scene: GameSceneInterface,
|
Scene: GameSceneInterface,
|
||||||
x: number,
|
x: number,
|
||||||
y: number,
|
y: number,
|
||||||
|
name: string,
|
||||||
PlayerValue: string = Textures.Player
|
PlayerValue: string = Textures.Player
|
||||||
) {
|
) {
|
||||||
super(Scene, x, y, PlayerValue, 1);
|
super(Scene, x, y, PlayerValue, name, 1);
|
||||||
|
|
||||||
//create input to move
|
//create input to move
|
||||||
this.userInputManager = new UserInputManager(Scene);
|
this.userInputManager = new UserInputManager(Scene);
|
||||||
|
Loading…
Reference in New Issue
Block a user