_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Correction of button customize WOKA scene issue

Browse Source
This commit is contained in:
GRL 2021-06-22 11:48:08 +02:00
parent 3d1c2dc05a
commit 3e29ed4376
3 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
View File

@ -1,11 +1,11 @@
<script lang="typescript"> <script lang="typescript">
import { Game } from "../../Phaser/Game/Game"; import { Game } from "../../Phaser/Game/Game";
import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene"; import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
import {activeRowStore} from "../../Stores/CustomCharacterStore";
export let game: Game; export let game: Game;
const customCharacterScene = game.scene.getScene(CustomizeSceneName); const customCharacterScene = game.scene.getScene(CustomizeSceneName);
let activeRow = customCharacterScene.activeRow;
function selectLeft() { function selectLeft() {
customCharacterScene.moveCursorHorizontally(-1); customCharacterScene.moveCursorHorizontally(-1);
@ -17,12 +17,10 @@
function selectUp() { function selectUp() {
customCharacterScene.moveCursorVertically(-1); customCharacterScene.moveCursorVertically(-1);
activeRow = customCharacterScene.activeRow;
} }
function selectDown() { function selectDown() {
customCharacterScene.moveCursorVertically(1); customCharacterScene.moveCursorVertically(1);
activeRow = customCharacterScene.activeRow;
} }
function previousScene() { function previousScene() {
@ -44,16 +42,16 @@
<button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button> <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
</section> </section>
<section class="action"> <section class="action">
{#if activeRow === 0} {#if $activeRowStore === 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button> <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
{/if} {/if}
{#if activeRow !== 0} {#if $activeRowStore !== 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button> <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
{/if} {/if}
{#if activeRow === 5} {#if $activeRowStore === 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button> <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
{/if} {/if}
{#if activeRow !== 5} {#if $activeRowStore !== 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button> <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
{/if} {/if}
</section> </section>

32
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -9,10 +9,11 @@ import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { SelectCharacterSceneName } from "./SelectCharacterScene"; import { SelectCharacterSceneName } from "./SelectCharacterScene";
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore"; import {activeRowStore, customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
import {waScaleManager} from "../Services/WaScaleManager"; import {waScaleManager} from "../Services/WaScaleManager";
import {isMobile} from "../../Enum/EnvironmentVariable"; import {isMobile} from "../../Enum/EnvironmentVariable";
import {CustomizedCharacter} from "../Entity/CustomizedCharacter"; import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
import {get} from "svelte/store";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
@ -21,7 +22,6 @@ export class CustomizeScene extends AbstractCharacterScene {
private selectedLayers: number[] = [0]; private selectedLayers: number[] = [0];
private containersRow: CustomizedCharacter[][] = []; private containersRow: CustomizedCharacter[][] = [];
public activeRow:number = 0;
private layers: BodyResourceDescriptionInterface[][] = []; private layers: BodyResourceDescriptionInterface[][] = [];
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
@ -95,7 +95,7 @@ export class CustomizeScene extends AbstractCharacterScene {
const customCursorPosition = localUserStore.getCustomCursorPosition(); const customCursorPosition = localUserStore.getCustomCursorPosition();
if (customCursorPosition) { if (customCursorPosition) {
this.activeRow = customCursorPosition.activeRow; activeRowStore.set(customCursorPosition.activeRow);
this.selectedLayers = customCursorPosition.selectedLayers; this.selectedLayers = customCursorPosition.selectedLayers;
this.moveLayers(); this.moveLayers();
this.updateSelectedLayer(); this.updateSelectedLayer();
@ -113,11 +113,11 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
private doMoveCursorHorizontally(index: number): void { private doMoveCursorHorizontally(index: number): void {
this.selectedLayers[this.activeRow] += index; this.selectedLayers[get(activeRowStore)] += index;
if (this.selectedLayers[this.activeRow] < 0) { if (this.selectedLayers[get(activeRowStore)] < 0) {
this.selectedLayers[this.activeRow] = 0 this.selectedLayers[get(activeRowStore)] = 0
} else if(this.selectedLayers[this.activeRow] > this.layers[this.activeRow].length - 1) { } else if(this.selectedLayers[get(activeRowStore)] > this.layers[get(activeRowStore)].length - 1) {
this.selectedLayers[this.activeRow] = this.layers[this.activeRow].length - 1 this.selectedLayers[get(activeRowStore)] = this.layers[get(activeRowStore)].length - 1
} }
this.moveLayers(); this.moveLayers();
this.updateSelectedLayer(); this.updateSelectedLayer();
@ -126,18 +126,18 @@ export class CustomizeScene extends AbstractCharacterScene {
private doMoveCursorVertically(index:number): void { private doMoveCursorVertically(index:number): void {
this.activeRow += index; activeRowStore.set(get(activeRowStore) + index);
if (this.activeRow < 0) { if (get(activeRowStore) < 0) {
this.activeRow = 0 activeRowStore.set(0);
} else if (this.activeRow > this.layers.length - 1) { } else if (get(activeRowStore) > this.layers.length - 1) {
this.activeRow = this.layers.length - 1 activeRowStore.set(this.layers.length - 1);
} }
this.moveLayers(); this.moveLayers();
this.saveInLocalStorage(); this.saveInLocalStorage();
} }
private saveInLocalStorage() { private saveInLocalStorage() {
localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers); localUserStore.setCustomCursorPosition(get(activeRowStore), this.selectedLayers);
} }
/** /**
@ -207,9 +207,9 @@ export class CustomizeScene extends AbstractCharacterScene {
selectedX = 0; selectedX = 0;
} }
this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40; this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
this.containersRow[i][j].y = screenCenterY + (i - this.activeRow) * 40; this.containersRow[i][j].y = screenCenterY + (i - get(activeRowStore)) * 40;
const alpha1 = Math.abs(selectedX - j)*47*2/screenWidth; const alpha1 = Math.abs(selectedX - j)*47*2/screenWidth;
const alpha2 = Math.abs(this.activeRow - i)*49*2/screenHeight; const alpha2 = Math.abs(get(activeRowStore) - i)*49*2/screenHeight;
this.containersRow[i][j].setAlpha((1 -alpha1)*(1 - alpha2)); this.containersRow[i][j].setAlpha((1 -alpha1)*(1 - alpha2));
} }

2
front/src/Stores/CustomCharacterStore.ts
View File

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