cleanup

back/src/Model/GameRoom.ts

@@ -551,8 +551,6 @@ export class GameRoom {
     }
 
     public emitLockGroupMessage(user: User, lockGroupMessage: LockGroupMessage) {
-        console.log("D2 GAME ROOM EMIT LOCK GROUP MESSAGE");
-        console.log(lockGroupMessage.getGroupid());
         this.positionNotifier.emitLockGroupEvent(user, lockGroupMessage);
     }
 

back/src/Model/PositionNotifier.ts

@@ -143,8 +143,6 @@ export class PositionNotifier {
     public emitLockGroupEvent(user: User, lockGroupMessage: LockGroupMessage) {
         const zoneDesc = this.getZoneDescriptorFromCoordinates(user.getPosition().x, user.getPosition().y);
         const zone = this.getZone(zoneDesc.i, zoneDesc.j);
-        console.log("D3 emit from ZONE");
-        console.log(lockGroupMessage.getGroupid());
         zone.emitLockGroupEvent(lockGroupMessage);
     }
 

back/src/Model/Zone.ts

@@ -112,7 +112,6 @@ export class Zone {
     }
 
     public emitLockGroupEvent(lockGroupMessage: LockGroupMessage) {
-        console.log("D4 ZONE ON LOCK GROUP CALLBACK");
         for (const listener of this.listeners) {
             this.onLockGroup(lockGroupMessage, listener);
         }

back/src/RoomManager.ts

@@ -155,8 +155,6 @@ const roomManager: IRoomManagerServer = {
                                 user,
                                 setPlayerDetailsMessage as SetPlayerDetailsMessage
                             );
-                        } else if (message.hasLockgroupmessage()) {
-                            console.log("===== GOT LOCK GROUP MESSAGE FROM CLIENT =====");
                         } else {
                             throw new Error("Unhandled message type");
                         }

back/src/Services/SocketManager.ts

@@ -70,7 +70,6 @@ function emitZoneMessage(subMessage: SubToPusherMessage, socket: ZoneSocket): vo
     // TODO: should we batch those every 100ms?
     const batchMessage = new BatchToPusherMessage();
     batchMessage.addPayload(subMessage);
-
     socket.write(batchMessage);
 }
 
@@ -277,8 +276,9 @@ export class SocketManager {
                 },
                 MINIMUM_DISTANCE,
                 GROUP_RADIUS,
-                (thing: Movable, fromZone: Zone | null, listener: ZoneSocket) =>
+                (thing: Movable, fromZone: Zone | null, listener: ZoneSocket) => {
-                    this.onZoneEnter(thing, fromZone, listener),
+                    this.onZoneEnter(thing, fromZone, listener);
+                },
                 (thing: Movable, position: PositionInterface, listener: ZoneSocket) =>
                     this.onClientMove(thing, position, listener),
                 (thing: Movable, newZone: Zone | null, listener: ZoneSocket) =>
@@ -393,17 +393,12 @@ export class SocketManager {
     private onLockGroup(lockGroupMessage: LockGroupMessage, client: ZoneSocket) {
         const subMessage = new SubToPusherMessage();
         subMessage.setLockgroupmessage(lockGroupMessage);
-        console.log("D5 SOCKET MANAGER ON LOCK GROUP");
-        console.log(lockGroupMessage.getGroupid());
-        console.log(lockGroupMessage.getLock());
-
         emitZoneMessage(subMessage, client);
     }
 
     private onPlayerDetailsUpdated(playerDetailsUpdatedMessage: PlayerDetailsUpdatedMessage, client: ZoneSocket) {
         const subMessage = new SubToPusherMessage();
         subMessage.setPlayerdetailsupdatedmessage(playerDetailsUpdatedMessage);
-
         emitZoneMessage(subMessage, client);
     }
 
@@ -433,7 +428,6 @@ export class SocketManager {
 
         const subMessage = new SubToPusherMessage();
         subMessage.setGroupleftzonemessage(groupDeleteMessage);
-
         emitZoneMessage(subMessage, client);
         //user.emitInBatch(subMessage);
     }
@@ -445,7 +439,6 @@ export class SocketManager {
 
         const subMessage = new SubToPusherMessage();
         subMessage.setUserleftzonemessage(userLeftMessage);
-
         emitZoneMessage(subMessage, client);
     }
 
@@ -667,6 +660,7 @@ export class SocketManager {
                 const groupUpdateMessage = new GroupUpdateZoneMessage();
                 groupUpdateMessage.setGroupid(thing.getId());
                 groupUpdateMessage.setPosition(ProtobufUtils.toPointMessage(thing.getPosition()));
+                groupUpdateMessage.setLocked(thing.isLocked());
 
                 const subMessage = new SubToPusherMessage();
                 subMessage.setGroupupdatezonemessage(groupUpdateMessage);
@@ -905,7 +899,6 @@ export class SocketManager {
     }
 
     handleLockGroupMessage(room: GameRoom, user: User, message: LockGroupMessage) {
-        console.log("D1 HANDLE LOCK GROUP MESSAGE");
         const group = user.group;
         if (!group) {
             return;

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 { currentPlayerGroupIdStore, currentPlayerGroupLockStateStore } from "../Stores/CurrentPlayerGroupStore";
 
     const gameScene = gameManager.getCurrentGameScene();
 
@@ -70,6 +72,15 @@
         }
     }
 
+    function lockClick() {
+        console.log($currentPlayerGroupIdStore);
+        console.log($currentPlayerGroupLockStateStore);
+        if ($currentPlayerGroupIdStore === undefined) {
+            return;
+        }
+        gameScene.connection?.emitLockGroup($currentPlayerGroupIdStore, !$currentPlayerGroupLockStateStore);
+    }
+
     let isSilent: boolean;
     const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
         isSilent = value;
@@ -95,6 +106,15 @@
         <img class="noselect" src={followImg} alt="" />
     </div>
 
+    <div
+        class="btn-lock"
+        class:hide={($peerStore.size === 0 && $currentPlayerGroupLockStateStore === undefined) || isSilent}
+        class:disabled={$currentPlayerGroupLockStateStore}
+        on:click={lockClick}
+    >
+        <img class="noselect" src={lockImg} alt="" />
+    </div>
+
     <div
         class="btn-monitor"
         on:click={screenSharingClick}
@@ -162,7 +182,7 @@
         transform: translateY(15px);
         transition-timing-function: ease-in-out;
         transition: all 0.3s;
-        margin: 0 4%;
+        margin: 0 2%;
 
         &.hide {
             transform: translateY(60px);
@@ -211,6 +231,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/Components/images/lock.svg:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

front/src/Connexion/ConnexionModels.ts

@@ -50,7 +50,7 @@ export interface GroupCreatedUpdatedMessageInterface {
 
 export interface LockGroupMessageInterface {
     groupId: number;
-    locked: boolean;
+    lock: boolean;
 }
 
 export interface GroupUsersUpdateMessageInterface {

front/src/Phaser/Game/GameScene.ts

@@ -77,6 +77,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;
@@ -153,7 +154,6 @@ export class GameScene extends DirtyScene {
     mapFile!: ITiledMap;
     animatedTiles!: AnimatedTiles;
     groups: Map<number, Sprite>;
-    currentPlayerGroupId?: number;
     circleTexture!: CanvasTexture;
     circleRedTexture!: CanvasTexture;
     pendingEvents = new Queue<
@@ -185,6 +185,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;
@@ -226,6 +227,7 @@ export class GameScene extends DirtyScene {
     private loader: Loader;
     private lastCameraEvent: WasCameraUpdatedEvent | undefined;
     private firstCameraUpdateSent: boolean = false;
+    private currentPlayerGroupId?: number;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
@@ -233,7 +235,6 @@ export class GameScene extends DirtyScene {
         });
         this.Terrains = [];
         this.groups = new Map<number, Sprite>();
-        this.currentPlayerGroupId = undefined;
         this.instance = room.getInstance();
 
         this.MapUrlFile = MapUrlFile;
@@ -717,6 +718,10 @@ export class GameScene extends DirtyScene {
             }
         });
 
+        this.currentPlayerGroupIdStoreUnsubscribe = currentPlayerGroupIdStore.subscribe((groupId) => {
+            this.currentPlayerGroupId = groupId;
+        });
+
         Promise.all([this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises])
             .then(() => {
                 this.scene.wake();
@@ -727,20 +732,6 @@ export class GameScene extends DirtyScene {
                     e
                 )
             );
-
-        this.input.keyboard.on("keydown-L", (event: Event) => {
-            if (this.currentPlayerGroupId !== undefined) {
-                console.log("group locked");
-                this.connection?.emitLockGroup(this.currentPlayerGroupId, true);
-            }
-        });
-
-        this.input.keyboard.on("keydown-U", (event: Event) => {
-            if (this.currentPlayerGroupId !== undefined) {
-                console.log("group unlocked");
-                this.connection?.emitLockGroup(this.currentPlayerGroupId, false);
-            }
-        });
     }
 
     /**
@@ -855,9 +846,8 @@ export class GameScene extends DirtyScene {
                 });
 
                 this.connection.groupUsersUpdateMessageStream.subscribe((message) => {
-                    this.currentPlayerGroupId = message.groupId;
+                    // TODO: how else can we deduce our current group?
-                    console.log("GOT GROUP USERS UPDATE MESSAGE");
+                    currentPlayerGroupIdStore.set(message.groupId);
-                    console.log(message);
                 });
 
                 /**
@@ -1849,9 +1839,8 @@ ${escapedMessage}
                     break;
                 case "DeleteGroupEvent": {
                     this.doDeleteGroup(event.groupId);
-                    if (this.currentPlayerGroupId === event.groupId) {
+                    currentPlayerGroupIdStore.set(undefined);
-                        this.currentPlayerGroupId = undefined;
+                    currentPlayerGroupLockStateStore.set(undefined);
-                    }
                     break;
                 }
                 case "LockGroupEvent": {
@@ -2033,6 +2022,9 @@ ${escapedMessage}
         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;
     }
 
@@ -2064,6 +2056,7 @@ ${escapedMessage}
         if (!group) {
             return;
         }
+        currentPlayerGroupLockStateStore.set(event.lock);
         group.setTexture(event.lock ? "circleSprite-red" : "circleSprite-white");
     }
 

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);

messages/protos/messages.proto

@@ -324,7 +324,6 @@ message ServerToClientMessage {
     FollowConfirmationMessage followConfirmationMessage = 22;
     FollowAbortMessage followAbortMessage = 23;
     GroupUsersUpdateMessage groupUsersUpdateMessage = 24;
-    LockGroupMessage lockGroupMessage = 25;
   }
 }
 

pusher/src/Model/Zone.ts

@@ -155,7 +155,6 @@ export class GroupDescriptor {
         groupUpdateMessage.setGroupsize(this.groupSize);
         groupUpdateMessage.setPosition(this.position);
         groupUpdateMessage.setLocked(this.locked);
-
         return groupUpdateMessage;
     }
 }