selectCompanionScene work with svelte

This commit is contained in:
GRL 2021-05-31 12:06:11 +02:00
parent 471ff2bb01
commit b8873d1277
18 changed files with 42 additions and 214 deletions

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#customizeScene { #customizeScene {
background: #0000; background: #0000;
/*border: 1px solid #ebeeee;*/ /*border: 1px solid #ebeeee;*/

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#enableCameraScene { #enableCameraScene {
background: #000000; background: #000000;
/*border: 1px solid #ebeeee;*/ /*border: 1px solid #ebeeee;*/

View File

@ -1,134 +0,0 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#selectCompanionScene {
background: #0000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
max-height: 40vh;
max-width: 300px;
width: 40vw;
overflow: hidden;
}
#selectCompanionScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#selectCompanionScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#selectCompanionScene section {
margin: 10px;
}
#selectCompanionScene section.action {
text-align: center;
margin: 0;
margin-top: 20vh;
}
#selectCompanionScene button {
margin: 10px 4px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
width: 100px;
}
#selectCompanionScene button#selectCompanionSceneFormCancel {
background-color: #aca6a600;
color: #292929;
}
#selectCompanionScene section h6,
#selectCompanionScene section h5{
margin: 1px;
}
#selectCompanionScene section.text-center{
text-align: center;
}
#selectCompanionScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#selectCompanionScene section a:hover{
font-weight: 700;
}
#selectCompanionScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#selectCompanionScene section p.err{
color: red;
text-align: center;
}
#selectCompanionScene section p.info{
display: none;
text-align: center;
}
#selectCompanionScene section input#selectCompanionSceneLink{
background-color: #a1a3a3;
}
#selectCompanionScene section img{
width: 160px;
margin: 20px 0;
}
#selectCompanionScene section button.selectCharacterButton{
position: absolute;
top: 20vh;
margin: 0;
width: 25px;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
left: 1vw;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
right: 1vw;
}
#selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
font-size: 14px;
width: auto;
margin-top: -2px;
background-color: #ffd700;
color: black;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#selectCompanionScene{
overflow-y: scroll;
}
}
</style>
<form id="selectCompanionScene" hidden>
<section class="text-center">
<h5>Select your WOKA</h5>
<button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
<button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
</section>
<section class="action">
<a href="#" id="selectCompanionSceneFormBack">No companion</a>
<button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
</section>
</form>

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameMenu main{ #gameMenu main{
margin-top: 15px; margin-top: 15px;
} }

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#menuIcon button { #menuIcon button {
background-color: black; background-color: black;
color: white; color: white;

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameQuality { #gameQuality {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameReport { #gameReport {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameShare { #gameShare {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#helpCameraSettings { #helpCameraSettings {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#loginScene { #loginScene {
background: #000000; background: #000000;
/*border: 1px solid #ebeeee;*/ /*border: 1px solid #ebeeee;*/

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#selectCharacterScene { #selectCharacterScene {
background: #0000; background: #0000;
/*border: 1px solid #ebeeee;*/ /*border: 1px solid #ebeeee;*/

View File

@ -1,7 +1,4 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#warningMain { #warningMain {
border-radius: 5px; border-radius: 5px;
height: 100px; height: 100px;

View File

@ -4,14 +4,22 @@
import {gameOverlayVisibilityStore} from "../Stores/MediaStore"; import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
import CameraControls from "./CameraControls.svelte"; import CameraControls from "./CameraControls.svelte";
import MyCamera from "./MyCamera.svelte"; import MyCamera from "./MyCamera.svelte";
import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
import {Game} from "../Phaser/Game/Game";
export let game: Game;
</script> </script>
<div> <div>
{#if $gameOverlayVisibilityStore} {#if $selectCompanionSceneVisibleStore}
<SelectCompanionScene game={game}></SelectCompanionScene>
{/if}
<!-- {#if $menuIconVisible} <!-- {#if $menuIconVisible}
<MenuIcon /> <MenuIcon />
{/if} --> {/if} -->
{#if $gameOverlayVisibilityStore}
<MyCamera></MyCamera> <MyCamera></MyCamera>
<CameraControls></CameraControls> <CameraControls></CameraControls>
{/if} {/if}

View File

@ -966,6 +966,8 @@ ${escapedMessage}
this.pinchManager?.destroy(); this.pinchManager?.destroy();
this.emoteManager.destroy(); this.emoteManager.destroy();
mediaManager.hideGameOverlay();
for(const iframeEvents of this.iframeSubscriptionList){ for(const iframeEvents of this.iframeSubscriptionList){
iframeEvents.unsubscribe(); iframeEvents.unsubscribe();
} }

View File

@ -10,17 +10,15 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
export const SelectCompanionSceneName = "SelectCompanionScene"; export const SelectCompanionSceneName = "SelectCompanionScene";
const selectCompanionSceneKey = 'selectCompanionScene';
export class SelectCompanionScene extends ResizableScene { export class SelectCompanionScene extends ResizableScene {
private selectedCompanion!: Phaser.Physics.Arcade.Sprite; private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>(); private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private companionModels: Array<CompanionResourceDescriptionInterface> = []; private companionModels: Array<CompanionResourceDescriptionInterface> = [];
private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
private currentCompanion = 0; private currentCompanion = 0;
constructor() { constructor() {
@ -30,8 +28,6 @@ export class SelectCompanionScene extends ResizableScene {
} }
preload() { preload() {
this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
getAllCompanionResources(this.load).forEach(model => { getAllCompanionResources(this.load).forEach(model => {
this.companionModels.push(model); this.companionModels.push(model);
}); });
@ -42,30 +38,14 @@ export class SelectCompanionScene extends ResizableScene {
create() { create() {
this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey); selectCompanionSceneVisibleStore.set(true);
this.centerXDomElement(this.selectCompanionSceneElement, 300);
MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
this.selectCompanionSceneElement.addListener('click');
this.selectCompanionSceneElement.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 === 'selectCompanionSceneFormSubmit') {
this.nextScene();
}else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
this._nextScene();
}
});
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
new PinchManager(this); new PinchManager(this);
} }
// input events // input events
this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this)); this.input.keyboard.on('keyup-ENTER', this.selectCompanion.bind(this));
this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this)); this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this)); this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
@ -89,18 +69,19 @@ export class SelectCompanionScene extends ResizableScene {
} }
private nextScene(): void { public selectCompanion(): void {
localUserStore.setCompanion(this.companionModels[this.currentCompanion].name); localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
gameManager.setCompanion(this.companionModels[this.currentCompanion].name); gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
this._nextScene(); this.closeScene();
} }
private _nextScene(){ public closeScene(){
// next scene // next scene
this.scene.stop(SelectCompanionSceneName); this.scene.stop(SelectCompanionSceneName);
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(this, EnableCameraSceneName);
this.scene.remove(SelectCompanionSceneName); this.scene.remove(SelectCompanionSceneName);
selectCompanionSceneVisibleStore.set(false);
} }
private createCurrentCompanion(): void { private createCurrentCompanion(): void {
@ -128,8 +109,6 @@ export class SelectCompanionScene extends ResizableScene {
public onResize(): void { public onResize(): void {
this.moveCompanion(); this.moveCompanion();
this.centerXDomElement(this.selectCompanionSceneElement, 300);
} }
private updateSelectedCompanion(): void { private updateSelectedCompanion(): void {
@ -147,15 +126,7 @@ export class SelectCompanionScene extends ResizableScene {
this.updateSelectedCompanion(); this.updateSelectedCompanion();
} }
private moveToLeft(){ public moveToRight(){
if(this.currentCompanion === 0){
return;
}
this.currentCompanion -= 1;
this.moveCompanion();
}
private moveToRight(){
if(this.currentCompanion === (this.companions.length - 1)){ if(this.currentCompanion === (this.companions.length - 1)){
return; return;
} }
@ -163,38 +134,46 @@ export class SelectCompanionScene extends ResizableScene {
this.moveCompanion(); this.moveCompanion();
} }
private defineSetupCompanion(numero: number){ public moveToLeft(){
if(this.currentCompanion === 0){
return;
}
this.currentCompanion -= 1;
this.moveCompanion();
}
private defineSetupCompanion(num: number){
const deltaX = 30; const deltaX = 30;
const deltaY = 2; const deltaY = 2;
let [companionX, companionY] = this.getCompanionPosition(); let [companionX, companionY] = this.getCompanionPosition();
let companionVisible = true; let companionVisible = true;
let companionScale = 1.5; let companionScale = 1.5;
let companionOpactity = 1; let companionOpactity = 1;
if( this.currentCompanion !== numero ){ if( this.currentCompanion !== num ){
companionVisible = false; companionVisible = false;
} }
if( numero === (this.currentCompanion + 1) ){ if( num === (this.currentCompanion + 1) ){
companionY -= deltaY; companionY -= deltaY;
companionX += deltaX; companionX += deltaX;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( numero === (this.currentCompanion + 2) ){ if( num === (this.currentCompanion + 2) ){
companionY -= deltaY; companionY -= deltaY;
companionX += (deltaX * 2); companionX += (deltaX * 2);
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( numero === (this.currentCompanion - 1) ){ if( num === (this.currentCompanion - 1) ){
companionY -= deltaY; companionY -= deltaY;
companionX -= deltaX; companionX -= deltaX;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( numero === (this.currentCompanion - 2) ){ if( num === (this.currentCompanion - 2) ){
companionY -= deltaY; companionY -= deltaY;
companionX -= (deltaX * 2); companionX -= (deltaX * 2);
companionScale = 0.8; companionScale = 0.8;

View File

@ -263,7 +263,7 @@ export class SimplePeer {
const userIndex = this.Users.findIndex(user => user.userId === userId); const userIndex = this.Users.findIndex(user => user.userId === userId);
if(userIndex < 0){ if(userIndex < 0){
throw 'Couln\'t delete user'; throw 'Couldn\'t delete user';
} else { } else {
this.Users.splice(userIndex, 1); this.Users.splice(userIndex, 1);
} }

View File

@ -152,7 +152,9 @@ iframeListener.init();
const app = new App({ const app = new App({
target: HtmlUtils.getElementByIdOrFail('svelte-overlay'), target: HtmlUtils.getElementByIdOrFail('svelte-overlay'),
props: { }, props: {
game: game
},
}) })
export default app export default app

View File

@ -1 +1,5 @@
@import "~@fontsource/press-start-2p/index.css"; @import "~@fontsource/press-start-2p/index.css";
*{
font-family: PixelFont-7,monospace;
}