cleanup

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.