update nes.css style

front/dist/index.tmpl.html

@@ -44,7 +44,7 @@
                     <div id="chat-mode" class="chat-mode three-col" style="display: none;">
                     </div>
                     <div id="activeCam" class="activeCam">
-                        <div id="div-myCamVideo" class="video-container">
+                        <div id="div-myCamVideo" class="video-container nes-container is-rounded is-dark">
                             <video id="myCamVideo" autoplay muted></video>
                         </div>
                     </div>

front/dist/resources/style/style.css

@@ -35,7 +35,6 @@ body .message-info.warning{
 .video-container{
     position: relative;
     transition: all 0.2s ease;
-    background-color: #00000099;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 .video-container i{
@@ -130,21 +129,19 @@ body .message-info.warning{
 }
 
 .video-container#div-myCamVideo{
-    border: none;
+    padding: 12px 12px !important;
 }
 
 #div-myCamVideo {
     position: absolute;
     right: 15px;
     bottom: 30px;
-    border-radius: 15px 15px 15px 15px;
 }
 
 video#myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
-    border-radius: 15px 15px 15px 15px;
     /*width: 200px;*/
     /*height: 113px;*/
 }
@@ -544,7 +541,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-    border-radius: 15px 15px 15px 15px;
+    padding: 12px 12px !important;
 }
 
 .sidebar > div:hover {
@@ -557,7 +554,6 @@ input[type=range]:focus::-ms-fill-upper {
     justify-content: center;
     flex-direction: column;
     overflow: hidden;
-    border-radius: 15px;
 }
 
 .chat-mode {

front/src/Phaser/Login/SelectCharacterMobileScene.ts

@@ -1,77 +0,0 @@
-import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
-import Image = Phaser.GameObjects.Image;
-import Rectangle = Phaser.GameObjects.Rectangle;
-import {EnableCameraSceneName} from "./EnableCameraScene";
-import {CustomizeSceneName} from "./CustomizeScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
-import {addLoader} from "../Components/Loader";
-import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {AbstractCharacterScene} from "./AbstractCharacterScene";
-import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import {PinchManager} from "../UserInput/PinchManager";
-import {MenuScene} from "../Menu/MenuScene";
-import { SelectCharacterScene, SelectCharacterSceneName } from "./SelectCharacterScene";
-
-export class SelectCharacterMobileScene extends SelectCharacterScene {
-
-    create(){
-        super.create();
-        this.selectedRectangle.destroy();
-    }
-    
-    protected defineSetupPlayer(numero: number){
-        const deltaX = 30;
-        const deltaY = 2;
-        let [playerX, playerY] = this.getCharacterPosition();
-        let playerVisible = true;
-        let playerScale = 1.5;
-        let playserOpactity = 1;
-
-        if( this.currentSelectUser !== numero ){
-            playerVisible = false;
-        }
-        if( numero === (this.currentSelectUser + 1) ){
-            playerY -= deltaY;
-            playerX += deltaX;
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        if( numero === (this.currentSelectUser + 2) ){
-            playerY -= deltaY;
-            playerX += (deltaX * 2);
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        if( numero === (this.currentSelectUser - 1) ){
-            playerY -= deltaY;
-            playerX -= deltaX;
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        if( numero === (this.currentSelectUser - 2) ){
-            playerY -= deltaY;
-            playerX -= (deltaX * 2);
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
-    }
-
-        /**
-     * Returns pixel position by on column and row number
-     */
-         protected getCharacterPosition(): [number, number] {
-            return [
-                this.game.renderer.width / 2,
-                this.game.renderer.height / 3
-            ];
-        }
-
-}

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -1,3 +1,4 @@
+import {isMobile} from "../../Enum/EnvironmentVariable";
 import {gameManager} from "../Game/GameManager";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
@@ -12,7 +13,6 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
-import { SelectCharacterMobileScene } from "./SelectCharacterMobileScene";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -98,6 +98,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.input.keyboard.on('keydown-DOWN', () => {
             this.moveToDown();
         });
+
+        if (isMobile()) {
+            this.selectedRectangle.destroy();
+        }
     }
 
     protected nextSceneToCameraScene(): void {
@@ -189,21 +193,56 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     protected defineSetupPlayer(numero: number){
-        const deltaX = 32;
+        const deltaX = isMobile() ? 30 : 32;
-        const deltaY = 32;
+        const deltaY = isMobile() ? 2 : 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
+        let playerVisible = true;
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+        let playerScale = 1;
+        let playserOpactity = 1;
 
-        const playerVisible = true;
+        if (!isMobile()) {
-        const playerScale = 1;
+            playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
-        const playserOpactity = 1;
+            playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
 
-        // if selected
+            // if selected
-        if( numero === this.currentSelectUser ){
+            if( numero === this.currentSelectUser ){
-            this.selectedRectangle.setX(playerX);
+                this.selectedRectangle.setX(playerX);
-            this.selectedRectangle.setY(playerY);
+                this.selectedRectangle.setY(playerY);
+            }
+        } else {
+            playerScale = 1.5;
+            if( this.currentSelectUser !== numero ){
+                playerVisible = false;
+            }
+            if( numero === (this.currentSelectUser + 1) ){
+                playerY -= deltaY;
+                playerX += deltaX;
+                playerScale = 0.8;
+                playserOpactity = 0.6;
+                playerVisible = true;
+            }
+            if( numero === (this.currentSelectUser + 2) ){
+                playerY -= deltaY;
+                playerX += (deltaX * 2);
+                playerScale = 0.8;
+                playserOpactity = 0.6;
+                playerVisible = true;
+            }
+            if( numero === (this.currentSelectUser - 1) ){
+                playerY -= deltaY;
+                playerX -= deltaX;
+                playerScale = 0.8;
+                playserOpactity = 0.6;
+                playerVisible = true;
+            }
+            if( numero === (this.currentSelectUser - 2) ){
+                playerY -= deltaY;
+                playerX -= (deltaX * 2);
+                playerScale = 0.8;
+                playserOpactity = 0.6;
+                playerVisible = true;
+            }
         }
 
         return {playerX, playerY, playerScale, playserOpactity, playerVisible}
@@ -227,7 +266,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     protected getCharacterPosition(): [number, number] {
         return [
             this.game.renderer.width / 2,
-            this.game.renderer.height / 2.5
+            this.game.renderer.height / (isMobile() ? 3 : 2.5)
         ];
     }
 

front/src/WebRtc/LayoutManager.ts

@@ -57,6 +57,7 @@ class LayoutManager {
         div.innerHTML = html;
         div.id = "user-"+userId;
         div.className = "media-container"
+        div.classList.add("nes-container", "is-rounded", "is-dark");
         div.onclick = () => {
             const parentId = div.parentElement?.id;
             if (parentId === 'sidebar' || parentId === 'chat-mode') {

front/src/index.ts

@@ -2,7 +2,7 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../dist/resources/style/index.scss";
 
-import {DEBUG_MODE, isMobile, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@@ -17,7 +17,6 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
-import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -76,7 +75,7 @@ const config: GameConfig = {
     parent: "game",
     scene: [EntryScene, 
         LoginScene,
-        isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
+        SelectCharacterScene,
         SelectCompanionScene, 
         EnableCameraScene, 
         ReconnectingScene,