Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

selectCharacterScene and customCharacterScene in svelte

Browse source
This commit is contained in:
GRL 2021-05-31 17:50:14 +02:00
parent 120a488121
commit 4923ce8b83
12 changed files with 249 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

14
front/src/Components/App.svelte
View file

@ -6,15 +6,27 @@
import MyCamera from "./MyCamera.svelte";
import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
import {Game} from "../Phaser/Game/Game";
import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
export let game: Game;
</script>
<div>
{#if $selectCharacterSceneVisibleStore}
<SelectCharacterScene game={ game }></SelectCharacterScene>
{/if}
{#if $customCharacterSceneVisibleStore}
<CustomCharacterScene game={ game }></CustomCharacterScene>
{/if}
{#if $selectCompanionSceneVisibleStore}
<SelectCompanionScene game={game}></SelectCompanionScene>
<SelectCompanionScene game={ game }></SelectCompanionScene>
{/if}
<!-- {#if $menuIconVisible}
<MenuIcon />

110
front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte Normal file
View file

@ -0,0 +1,110 @@
<script lang="typescript">
import { Game } from "../../Phaser/Game/Game";
import { CustomizeScene } from "../../Phaser/Login/CustomizeScene";
export let game: Game;
const customCharacterScene = game.scene.scenes.find((scene) => scene instanceof CustomizeScene);
let activeRow = customCharacterScene.activeRow;
function selectLeft() {
customCharacterScene.moveCursorHorizontally(-1);
}
function selectRight() {
customCharacterScene.moveCursorHorizontally(1);
}
function selectUp() {
customCharacterScene.moveCursorVertically(-1);
activeRow = customCharacterScene.activeRow;
}
function selectDown() {
customCharacterScene.moveCursorVertically(1);
activeRow = customCharacterScene.activeRow;
}
function previousScene() {
customCharacterScene.backToPreviousScene();
}
function finish() {
customCharacterScene.nextSceneToCamera();
}
</script>
<form class="customCharacterScene">
<section class="text-center">
<h2>Customize your WOKA</h2>
</section>
<section class="action action-move">
<button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
<button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
</section>
<section class="action">
{#if activeRow === 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
{/if}
{#if activeRow !== 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up.png" alt=""/></button>
{/if}
{#if activeRow === 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
{/if}
{#if activeRow !== 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
{/if}
</section>
</form>
<style lang="scss">
form.customCharacterScene {
font-family: "Press Start 2P";
pointer-events: auto;
color: #ebeeee;
}
.customCharacterScene button {
font-family: "Press Start 2P";
}
.customCharacterScene section {
margin: 10px;
}
.customCharacterScene section.action {
text-align: center;
margin-top: 55vh;
}
.customCharacterScene section h2 {
font-family: "Press Start 2P";
margin: 1px;
}
.customCharacterScene section.text-center{
text-align: center;
}
.customCharacterScene section button.customCharacterSceneButton{
position: absolute;
top: 33vh;
margin: 0;
}
.customCharacterScene section button.customCharacterSceneFormBack{
color: #292929;
}
.customCharacterScene button.customCharacterSceneButtonLeft{
left: 33vw;
}
.customCharacterScene button.customCharacterSceneButtonRight{
right: 33vw;
}
@media only screen and (max-width: 800px) {
.customCharacterScene button.customCharacterSceneButtonLeft{
left: 10vw;
}
.customCharacterScene button.customCharacterSceneButtonRight{
right: 10vw;
}
}
</style>

84
front/src/Components/selectCharacter/SelectCharacterScene.svelte Normal file
View file

@ -0,0 +1,84 @@
<script lang="typescript">
import { Game } from "../../Phaser/Game/Game";
import { SelectCharacterScene } from "../../Phaser/Login/SelectCharacterScene";
export let game: Game;
const selectCharacterScene = game.scene.scenes.find((scene) => scene instanceof SelectCharacterScene);
function selectLeft() {
selectCharacterScene.moveToLeft();
}
function selectRight() {
selectCharacterScene.moveToRight();
}
function cameraScene() {
selectCharacterScene.nextSceneToCameraScene();
}
function customizeScene() {
selectCharacterScene.nextSceneToCustomizeScene();
}
</script>
<form class="selectCharacterScene">
<section class="text-center">
<h2>Select your WOKA</h2>
<button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
<button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
</section>
<section class="action">
<button type="submit" class="selectCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ cameraScene }>Continue</button>
<button type="submit" class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn" on:click|preventDefault={ customizeScene }>Customize your WOKA</button>
</section>
</form>
<style lang="scss">
form.selectCharacterScene {
font-family: "Press Start 2P";
pointer-events: auto;
color: #ebeeee;
}
.selectCharacterScene button {
font-family: "Press Start 2P";
}
.selectCharacterScene section {
margin: 10px;
}
.selectCharacterScene section.action {
text-align: center;
margin-top: 55vh;
}
.selectCharacterScene section h2 {
font-family: "Press Start 2P";
margin: 1px;
}
.selectCharacterScene section.text-center{
text-align: center;
}
.selectCharacterScene section button.selectCharacterButton{
position: absolute;
top: 33vh;
margin: 0;
}
.selectCharacterScene button.selectCharacterButtonLeft{
left: 33vw;
}
.selectCharacterScene button.selectCharacterButtonRight{
right: 33vw;
}
@media only screen and (max-width: 800px) {
.selectCharacterScene button.selectCharacterButtonLeft{
left: 10vw;
}
.selectCharacterScene button.selectCharacterButtonRight{
right: 10vw;
}
}
</style>

63
front/src/Phaser/Login/CustomizeScene.ts
View file

@ -11,6 +11,8 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { MenuScene } from "../Menu/MenuScene";
import { SelectCharacterSceneName } from "./SelectCharacterScene";
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
export const CustomizeSceneName = "CustomizeScene";
@ -22,7 +24,7 @@ export class CustomizeScene extends AbstractCharacterScene {
private selectedLayers: number[] = [0];
private containersRow: Container[][] = [];
private activeRow:number = 0;
public activeRow:number = 0;
private layers: BodyResourceDescriptionInterface[][] = [];
private customizeSceneElement!: Phaser.GameObjects.DOMElement;
@ -51,35 +53,9 @@ export class CustomizeScene extends AbstractCharacterScene {
}
create() {
this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
this.centerXDomElement(this.customizeSceneElement, 350);
MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
customCharacterSceneVisibleStore.set(true);
this.customizeSceneElement.addListener('click');
this.customizeSceneElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
this.moveCursorHorizontally(-1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
this.moveCursorHorizontally(1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
this.moveCursorVertically(1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
this.moveCursorVertically(-1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
if(this.activeRow > 0){
this.moveCursorVertically(-1);
}else{
this.backToPreviousScene();
}
}else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
if(this.activeRow < 5){
this.moveCursorVertically(1);
}else{
this.nextSceneToCamera();
}
}
});
this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
@ -116,7 +92,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.onResize();
}
private moveCursorHorizontally(index: number): void {
public moveCursorHorizontally(index: number): void {
this.selectedLayers[this.activeRow] += index;
if (this.selectedLayers[this.activeRow] < 0) {
this.selectedLayers[this.activeRow] = 0
@ -128,27 +104,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.saveInLocalStorage();
}
private moveCursorVertically(index:number): void {
if(index === -1 && this.activeRow === 5){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
}
if(index === 1 && this.activeRow === 4){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
button.innerText = 'Finish';
}
if(index === -1 && this.activeRow === 1){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
button.innerText = `Return`;
}
if(index === 1 && this.activeRow === 0){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
}
public moveCursorVertically(index:number): void {
this.activeRow += index;
if (this.activeRow < 0) {
@ -269,8 +225,6 @@ export class CustomizeScene extends AbstractCharacterScene {
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
this.centerXDomElement(this.customizeSceneElement, 350);
}
private nextSceneToCamera(){
@ -290,10 +244,13 @@ export class CustomizeScene extends AbstractCharacterScene {
this.scene.sleep(CustomizeSceneName);
this.scene.remove(SelectCharacterSceneName);
gameManager.tryResumingGame(this, EnableCameraSceneName);
customCharacterSceneVisibleStore.set(false);
}
private backToPreviousScene(){
this.scene.sleep(CustomizeSceneName);
this.scene.run(SelectCharacterSceneName);
customCharacterSceneVisibleStore.set(false);
selectCharacterSceneVisibleStore.set(true);
}
}

24
front/src/Phaser/Login/SelectCharacterMobileScene.ts
View file

@ -7,46 +7,46 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
this.selectedRectangle.destroy();
}
protected defineSetupPlayer(numero: number){
protected defineSetupPlayer(num: number){
const deltaX = 30;
const deltaY = 2;
let [playerX, playerY] = this.getCharacterPosition();
let playerVisible = true;
let playerScale = 1.5;
let playserOpactity = 1;
let playerOpacity = 1;
if( this.currentSelectUser !== numero ){
if( this.currentSelectUser !== num ){
playerVisible = false;
}
if( numero === (this.currentSelectUser + 1) ){
if( num === (this.currentSelectUser + 1) ){
playerY -= deltaY;
playerX += deltaX;
playerScale = 0.8;
playserOpactity = 0.6;
playerOpacity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser + 2) ){
if( num === (this.currentSelectUser + 2) ){
playerY -= deltaY;
playerX += (deltaX * 2);
playerScale = 0.8;
playserOpactity = 0.6;
playerOpacity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser - 1) ){
if( num === (this.currentSelectUser - 1) ){
playerY -= deltaY;
playerX -= deltaX;
playerScale = 0.8;
playserOpactity = 0.6;
playerOpacity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser - 2) ){
if( num === (this.currentSelectUser - 2) ){
playerY -= deltaY;
playerX -= (deltaX * 2);
playerScale = 0.8;
playserOpactity = 0.6;
playerOpacity = 0.6;
playerVisible = true;
}
return {playerX, playerY, playerScale, playserOpactity, playerVisible}
return {playerX, playerY, playerScale, playerOpacity, playerVisible}
}
/**

43
front/src/Phaser/Login/SelectCharacterScene.ts
View file

@ -11,6 +11,8 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import {MenuScene} from "../Menu/MenuScene";
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
//todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene";
@ -49,24 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
}
create() {
this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
this.centerXDomElement(this.selectCharacterSceneElement, 300);
MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
this.selectCharacterSceneElement.addListener('click');
this.selectCharacterSceneElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
this.moveToLeft();
}else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
this.moveToRight();
}else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
this.nextSceneToCameraScene();
}else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
this.nextSceneToCustomizeScene();
}
});
selectCharacterSceneVisibleStore.set(true);
if (touchScreenManager.supportTouchScreen) {
new PinchManager(this);
@ -109,6 +94,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
gameManager.tryResumingGame(this, EnableCameraSceneName);
this.scene.remove(SelectCharacterSceneName);
selectCharacterSceneVisibleStore.set(false);
}
protected nextSceneToCustomizeScene(): void {
@ -117,6 +103,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
}
this.scene.sleep(SelectCharacterSceneName);
this.scene.run(CustomizeSceneName);
selectCharacterSceneVisibleStore.set(false);
}
createCurrentPlayer(): void {
@ -186,35 +173,35 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.moveUser();
}
protected defineSetupPlayer(numero: number){
protected defineSetupPlayer(num: number){
const deltaX = 32;
const deltaY = 32;
let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
const playerVisible = true;
const playerScale = 1;
const playserOpactity = 1;
const playerOpacity = 1;
// if selected
if( numero === this.currentSelectUser ){
if( num === this.currentSelectUser ){
this.selectedRectangle.setX(playerX);
this.selectedRectangle.setY(playerY);
}
return {playerX, playerY, playerScale, playserOpactity, playerVisible}
return {playerX, playerY, playerScale, playerOpacity, playerVisible}
}
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
player.setBounce(0.2);
player.setCollideWorldBounds(false);
player.setVisible( playerVisible );
player.setScale(playerScale, playerScale);
player.setAlpha(playserOpactity);
player.setAlpha(playerOpacity);
player.setX(playerX);
player.setY(playerY);
}
@ -243,7 +230,5 @@ export class SelectCharacterScene extends AbstractCharacterScene {
public onResize(): void {
//move position of user
this.moveUser();
this.centerXDomElement(this.selectCharacterSceneElement, 300);
}
}

3
front/src/Stores/CustomCharacterStore.ts Normal file
View file

@ -0,0 +1,3 @@
import { derived, writable, Writable } from "svelte/store";
export const customCharacterSceneVisibleStore = writable(false);

3
front/src/Stores/SelectCharacterStore.ts Normal file
View file

@ -0,0 +1,3 @@
import { derived, writable, Writable } from "svelte/store";
export const selectCharacterSceneVisibleStore = writable(false);