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

update nes.css style

Browse Source
This commit is contained in:
_Bastler 2021-04-29 08:48:06 +02:00
parent bd40c8fe5e
commit b60e73d0f1
6 changed files with 58 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/dist/index.tmpl.html vendored
View File

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

8
front/dist/resources/style/style.css vendored
View File

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

77
front/src/Phaser/Login/SelectCharacterMobileScene.ts
View File

@ -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
];
}
}

65
front/src/Phaser/Login/SelectCharacterScene.ts
View File

@ -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 deltaY = 32;
const deltaX = isMobile() ? 30 : 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
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
let playerVisible = true;
let playerScale = 1;
let playserOpactity = 1;
const playerVisible = true;
const playerScale = 1;
const playserOpactity = 1;
if (!isMobile()) {
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
// if selected
if( numero === this.currentSelectUser ){
this.selectedRectangle.setX(playerX);
this.selectedRectangle.setY(playerY);
// if selected
if( numero === this.currentSelectUser ){
this.selectedRectangle.setX(playerX);
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)
];
}

1
front/src/WebRtc/LayoutManager.ts
View File

@ -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') {

5
front/src/index.ts
View File

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