Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop

front/src/Components/CameraControls.svelte

@@ -10,12 +10,14 @@
     import layoutPresentationImg from "./images/layout-presentation.svg";
     import layoutChatImg from "./images/layout-chat.svg";
     import followImg from "./images/follow.svg";
+    import lockImg from "./images/lock.svg";
     import { LayoutMode } from "../WebRtc/LayoutManager";
     import { peerStore } from "../Stores/PeerStore";
     import { onDestroy } from "svelte";
     import { embedScreenLayout } from "../Stores/EmbedScreensStore";
     import { followRoleStore, followStateStore, followUsersStore } from "../Stores/FollowStore";
     import { gameManager } from "../Phaser/Game/GameManager";
+    import { currentPlayerGroupLockStateStore } from "../Stores/CurrentPlayerGroupStore";
 
     const gameScene = gameManager.getCurrentGameScene();
 
@@ -70,6 +72,10 @@
         }
     }
 
+    function lockClick() {
+        gameScene.connection?.emitLockGroup(!$currentPlayerGroupLockStateStore);
+    }
+
     let isSilent: boolean;
     const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
         isSilent = value;
@@ -95,6 +101,15 @@
         <img class="noselect" src={followImg} alt="" />
     </div>
 
+    <div
+        class="btn-lock nes-btn is-dark"
+        class:hide={$peerStore.size === 0 || isSilent}
+        class:disabled={$currentPlayerGroupLockStateStore}
+        on:click={lockClick}
+    >
+        <img class="noselect" src={lockImg} alt="" />
+    </div>
+
     <div
         class="btn-monitor nes-btn is-dark"
         on:click={screenSharingClick}
@@ -157,7 +172,7 @@
         transform: translateY(15px);
         transition-timing-function: ease-in-out;
         transition: all 0.3s;
-        margin: 0 4%;
+        margin: 0 2%;
 
         &.hide {
             transform: translateY(60px);
@@ -205,6 +220,14 @@
         }
     }
 
+    .btn-lock {
+        pointer-events: auto;
+
+        img {
+            filter: brightness(0) invert(1);
+        }
+    }
+
     @media (hover: none) {
         /**
         * If we cannot hover over elements, let's display camera button in full.

front/src/Components/images/lock.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 3 C 18.363281 3 13 8.363281 13 15 L 13 20 L 9 20 C 7.355469 20 6 21.355469 6 23 L 6 47 C 6 48.644531 7.355469 50 9 50 L 41 50 C 42.644531 50 44 48.644531 44 47 L 44 23 C 44 21.355469 42.644531 20 41 20 L 37 20 L 37 15 C 37 8.363281 31.636719 3 25 3 Z M 25 5 C 30.566406 5 35 9.433594 35 15 L 35 20 L 15 20 L 15 15 C 15 9.433594 19.433594 5 25 5 Z M 9 22 L 41 22 C 41.554688 22 42 22.445313 42 23 L 42 47 C 42 47.554688 41.554688 48 41 48 L 9 48 C 8.445313 48 8 47.554688 8 47 L 8 23 C 8 22.445313 8.445313 22 9 22 Z M 25 30 C 23.300781 30 22 31.300781 22 33 C 22 33.898438 22.398438 34.6875 23 35.1875 L 23 38 C 23 39.101563 23.898438 40 25 40 C 26.101563 40 27 39.101563 27 38 L 27 35.1875 C 27.601563 34.6875 28 33.898438 28 33 C 28 31.300781 26.699219 30 25 30 Z"/></svg>

front/src/Connexion/ConnexionModels.ts

@@ -44,6 +44,12 @@ export interface GroupCreatedUpdatedMessageInterface {
     position: PositionInterface;
     groupId: number;
     groupSize: number;
+    locked: boolean;
+}
+
+export interface GroupUsersUpdateMessageInterface {
+    groupId: number;
+    userIds: number[];
 }
 
 export interface WebRtcDisconnectMessageInterface {

front/src/Connexion/RoomConnection.ts

@@ -5,47 +5,35 @@ import type { UserSimplePeerInterface } from "../WebRtc/SimplePeer";
 import { ProtobufClientUtils } from "../Network/ProtobufClientUtils";
 import type {
     GroupCreatedUpdatedMessageInterface,
-    ItemEventMessageInterface,
+    GroupUsersUpdateMessageInterface,
     MessageUserJoined,
-    OnConnectInterface,
-    PlayerDetailsUpdatedMessageInterface,
     PlayGlobalMessageInterface,
     PositionInterface,
     RoomJoinedMessageInterface,
     ViewportInterface,
-    WebRtcDisconnectMessageInterface,
     WebRtcSignalReceivedMessageInterface,
 } from "./ConnexionModels";
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
 import { adminMessagesService } from "./AdminMessagesService";
 import { connectionManager } from "./ConnectionManager";
 import { get } from "svelte/store";
+import { followRoleStore, followUsersStore } from "../Stores/FollowStore";
 import { menuIconVisiblilityStore, menuVisiblilityStore, warningContainerStore } from "../Stores/MenuStore";
-import { followStateStore, followRoleStore, followUsersStore } from "../Stores/FollowStore";
 import { localUserStore } from "./LocalUserStore";
 import {
-    RefreshRoomMessage,
     ServerToClientMessage as ServerToClientMessageTsProto,
     TokenExpiredMessage,
     WorldConnexionMessage,
-    WorldFullMessage,
     ErrorMessage as ErrorMessageTsProto,
     UserMovedMessage as UserMovedMessageTsProto,
     GroupUpdateMessage as GroupUpdateMessageTsProto,
     GroupDeleteMessage as GroupDeleteMessageTsProto,
     UserJoinedMessage as UserJoinedMessageTsProto,
     UserLeftMessage as UserLeftMessageTsProto,
-    ItemEventMessage as ItemEventMessageTsProto,
     EmoteEventMessage as EmoteEventMessageTsProto,
-    VariableMessage as VariableMessageTsProto,
     PlayerDetailsUpdatedMessage as PlayerDetailsUpdatedMessageTsProto,
-    WorldFullWarningMessage,
     WebRtcDisconnectMessage as WebRtcDisconnectMessageTsProto,
-    PlayGlobalMessage as PlayGlobalMessageTsProto,
-    StopGlobalMessage as StopGlobalMessageTsProto,
     SendJitsiJwtMessage as SendJitsiJwtMessageTsProto,
-    SendUserMessage as SendUserMessageTsProto,
-    BanUserMessage as BanUserMessageTsProto,
     ClientToServerMessage as ClientToServerMessageTsProto,
     PositionMessage as PositionMessageTsProto,
     ViewportMessage as ViewportMessageTsProto,
@@ -55,8 +43,6 @@ import {
     CharacterLayerMessage,
 } from "../Messages/ts-proto-generated/messages";
 import { Subject } from "rxjs";
-import { OpenPopupEvent } from "../Api/Events/OpenPopupEvent";
-import { match } from "assert";
 import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore";
 import { gameManager } from "../Phaser/Game/GameManager";
 import { SelectCharacterScene, SelectCharacterSceneName } from "../Phaser/Login/SelectCharacterScene";
@@ -116,6 +102,9 @@ export class RoomConnection implements RoomConnection {
     private readonly _groupUpdateMessageStream = new Subject<GroupCreatedUpdatedMessageInterface>();
     public readonly groupUpdateMessageStream = this._groupUpdateMessageStream.asObservable();
 
+    private readonly _groupUsersUpdateMessageStream = new Subject<GroupUsersUpdateMessageInterface>();
+    public readonly groupUsersUpdateMessageStream = this._groupUsersUpdateMessageStream.asObservable();
+
     private readonly _groupDeleteMessageStream = new Subject<GroupDeleteMessageTsProto>();
     public readonly groupDeleteMessageStream = this._groupDeleteMessageStream.asObservable();
 
@@ -443,6 +432,10 @@ export class RoomConnection implements RoomConnection {
                     this._sendJitsiJwtMessageStream.next(message.sendJitsiJwtMessage);
                     break;
                 }
+                case "groupUsersUpdateMessage": {
+                    this._groupUsersUpdateMessageStream.next(message.groupUsersUpdateMessage);
+                    break;
+                }
                 case "sendUserMessage": {
                     adminMessagesService.onSendusermessage(message.sendUserMessage);
                     break;
@@ -675,6 +668,7 @@ export class RoomConnection implements RoomConnection {
             groupId: message.groupId,
             position: position,
             groupSize: message.groupSize,
+            locked: message.locked,
         };
     }
 
@@ -890,6 +884,19 @@ export class RoomConnection implements RoomConnection {
         this.socket.send(bytes);
     }
 
+    public emitLockGroup(lock: boolean = true): void {
+        const bytes = ClientToServerMessageTsProto.encode({
+            message: {
+                $case: "lockGroupPromptMessage",
+                lockGroupPromptMessage: {
+                    lock,
+                },
+            },
+        }).finish();
+
+        this.socket.send(bytes);
+    }
+
     public getAllTags(): string[] {
         return this.tags;
     }

front/src/Phaser/Game/GameScene.ts

@@ -76,6 +76,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
 import { contactPageStore } from "../../Stores/MenuStore";
 import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
 import { audioManagerFileStore } from "../../Stores/AudioManagerStore";
+import { currentPlayerGroupIdStore, currentPlayerGroupLockStateStore } from "../../Stores/CurrentPlayerGroupStore";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -178,6 +179,7 @@ export class GameScene extends DirtyScene {
     private volumeStoreUnsubscribers: Map<number, Unsubscriber> = new Map<number, Unsubscriber>();
     private localVolumeStoreUnsubscriber: Unsubscriber | undefined;
     private followUsersColorStoreUnsubscribe!: Unsubscriber;
+    private currentPlayerGroupIdStoreUnsubscribe!: Unsubscriber;
 
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
     MapUrlFile: string;
@@ -219,6 +221,7 @@ export class GameScene extends DirtyScene {
     private loader: Loader;
     private lastCameraEvent: WasCameraUpdatedEvent | undefined;
     private firstCameraUpdateSent: boolean = false;
+    private currentPlayerGroupId?: number;
     public readonly superLoad: SuperLoaderPlugin;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
@@ -724,6 +727,10 @@ export class GameScene extends DirtyScene {
             }
         });
 
+        this.currentPlayerGroupIdStoreUnsubscribe = currentPlayerGroupIdStore.subscribe((groupId) => {
+            this.currentPlayerGroupId = groupId;
+        });
+
         Promise.all([
             this.connectionAnswerPromiseDeferred.promise as Promise<unknown>,
             ...scriptPromises,
@@ -855,6 +862,11 @@ export class GameScene extends DirtyScene {
                     });
                 });
 
+                this.connection.groupUsersUpdateMessageStream.subscribe((message) => {
+                    // TODO: how else can we deduce our current group?
+                    currentPlayerGroupIdStore.set(message.groupId);
+                });
+
                 /**
                  * Triggered when we receive the JWT token to connect to Jitsi
                  */
@@ -985,7 +997,9 @@ export class GameScene extends DirtyScene {
         context.arc(48, 48, 48, 0, 2 * Math.PI, false);
         // context.lineWidth = 5;
         context.strokeStyle = "#ffffff";
+        context.fillStyle = "#ffffff44";
         context.stroke();
+        context.fill();
         this.circleTexture.refresh();
 
         //create red circle canvas use to create sprite
@@ -995,7 +1009,9 @@ export class GameScene extends DirtyScene {
         contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
         //context.lineWidth = 5;
         contextRed.strokeStyle = "#ff0000";
+        contextRed.fillStyle = "#ff000044";
         contextRed.stroke();
+        contextRed.fill();
         this.circleRedTexture.refresh();
     }
 
@@ -1884,12 +1900,15 @@ export class GameScene extends DirtyScene {
                 case "GroupCreatedUpdatedEvent":
                     this.doShareGroupPosition(event.event);
                     break;
-                case "DeleteGroupEvent":
-                    this.doDeleteGroup(event.groupId);
-                    break;
                 case "PlayerDetailsUpdated":
                     this.doUpdatePlayerDetails(event.details);
                     break;
+                case "DeleteGroupEvent": {
+                    this.doDeleteGroup(event.groupId);
+                    currentPlayerGroupIdStore.set(undefined);
+                    currentPlayerGroupLockStateStore.set(undefined);
+                    break;
+                }
                 default: {
                     const tmp: never = event;
                 }
@@ -2063,11 +2082,16 @@ export class GameScene extends DirtyScene {
             this,
             Math.round(groupPositionMessage.position.x),
             Math.round(groupPositionMessage.position.y),
-            groupPositionMessage.groupSize === MAX_PER_GROUP ? "circleSprite-red" : "circleSprite-white"
+            groupPositionMessage.groupSize === MAX_PER_GROUP || groupPositionMessage.locked
+                ? "circleSprite-red"
+                : "circleSprite-white"
         );
         sprite.setDisplayOrigin(48, 48);
         this.add.existing(sprite);
         this.groups.set(groupPositionMessage.groupId, sprite);
+        if (this.currentPlayerGroupId === groupPositionMessage.groupId) {
+            currentPlayerGroupLockStateStore.set(groupPositionMessage.locked);
+        }
         return sprite;
     }
 

front/src/Stores/CurrentPlayerGroupStore.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const currentPlayerGroupIdStore = writable<number | undefined>(undefined);
+export const currentPlayerGroupLockStateStore = writable<boolean | undefined>(undefined);