selectCompanionScene work with svelte

front/dist/resources/html/CustomCharacterScene.html

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

front/dist/resources/html/EnableCameraScene.html

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

front/dist/resources/html/SelectCompanionScene.html

@@ -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>

front/dist/resources/html/gameMenu.html

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

front/dist/resources/html/gameMenuIcon.html

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

front/dist/resources/html/gameQualityMenu.html

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

front/dist/resources/html/gameReport.html

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

front/dist/resources/html/gameShare.html

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

front/dist/resources/html/helpCameraSettings.html

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

front/dist/resources/html/loginScene.html

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

front/dist/resources/html/selectCharacterScene.html

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

front/dist/resources/html/warningContainer.html

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

front/src/Components/App.svelte

@@ -4,14 +4,22 @@
     import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.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>
 
 <div>
-    {#if $gameOverlayVisibilityStore}
+    {#if $selectCompanionSceneVisibleStore}
+        <SelectCompanionScene game={game}></SelectCompanionScene>
+    {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+    {#if $gameOverlayVisibilityStore}
         <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}

front/src/Phaser/Game/GameScene.ts

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

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -10,17 +10,15 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
+import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-const selectCompanionSceneKey = 'selectCompanionScene';
-
 export class SelectCompanionScene extends ResizableScene {
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface> = [];
 
-    private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
     private currentCompanion = 0;
 
     constructor() {
@@ -30,8 +28,6 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     preload() {
-        this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
-
         getAllCompanionResources(this.load).forEach(model => {
             this.companionModels.push(model);
         });
@@ -42,30 +38,14 @@ export class SelectCompanionScene extends ResizableScene {
 
     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) {
             new PinchManager(this);
         }
 
         // 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-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);
         gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
 
-        this._nextScene();
+        this.closeScene();
     }
 
-    private _nextScene(){
+    public closeScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCompanionSceneName);
+        selectCompanionSceneVisibleStore.set(false);
     }
 
     private createCurrentCompanion(): void {
@@ -128,8 +109,6 @@ export class SelectCompanionScene extends ResizableScene {
 
     public onResize(): void {
         this.moveCompanion();
-
-        this.centerXDomElement(this.selectCompanionSceneElement, 300);
     }
 
     private updateSelectedCompanion(): void {
@@ -147,15 +126,7 @@ export class SelectCompanionScene extends ResizableScene {
         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)){
             return;
         }
@@ -163,38 +134,46 @@ export class SelectCompanionScene extends ResizableScene {
         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 deltaY = 2;
         let [companionX, companionY] = this.getCompanionPosition();
         let companionVisible = true;
         let companionScale = 1.5;
         let companionOpactity = 1;
-        if( this.currentCompanion !== numero ){
+        if( this.currentCompanion !== num ){
             companionVisible = false;
         }
-        if( numero === (this.currentCompanion + 1) ){
+        if( num === (this.currentCompanion + 1) ){
             companionY -= deltaY;
             companionX += deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion + 2) ){
+        if( num === (this.currentCompanion + 2) ){
             companionY -= deltaY;
             companionX += (deltaX * 2);
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 1) ){
+        if( num === (this.currentCompanion - 1) ){
             companionY -= deltaY;
             companionX -= deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 2) ){
+        if( num === (this.currentCompanion - 2) ){
             companionY -= deltaY;
             companionX -= (deltaX * 2);
             companionScale = 0.8;

front/src/WebRtc/SimplePeer.ts

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

front/src/index.ts

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

front/style/fonts.scss

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