Fixed screen splitting bug.

Adib23704 · Dec 6, 2023 · d8d9e87 · d8d9e87
1 parent d3a1c15
commit d8d9e87
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,13 +1,8 @@
-svg,
 video {
   position: absolute;
   pointer-events: none;
 }
 
-svg {
-  z-index: 2;
-}
-
 body {
   overflow: hidden;
 }
diff --git a/index.html b/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Multi-Window Camera</title>
-  <script type="module" src="./scripts/main.js"></script>
-  <link rel="stylesheet" href="./css/style.css" />
+  <link rel="stylesheet" href="./css/style.css">
 </head>
 
 <body>
-  <video src=""></video>
   <div id="app">
     <button class="restart">Restart</button>
+    <video src=""></video>
   </div>
+  <script type="module" src="./scripts/main.js"></script>
 </body>
 
 </html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -1,24 +1,23 @@
 const restart = document.querySelector('.restart');
 const video = document.querySelector('video');
 const timers = [];
+const screenId = `scID_${generateScreenID()}`;
 
 function screenList() {
   return Object.entries(window.localStorage)
     .filter(([key]) => key.startsWith('scID_'))
     .map(([key, value]) => [key, JSON.parse(value)]);
 }
 
-function uniqueScreenID() {
+function generateScreenID() {
   const existingScreens = Object.keys(window.localStorage)
     .filter((key) => key.startsWith('scID_'))
     .map((key) => parseInt(key.replace('scID_', '')))
     .sort((a, b) => a - b);
   return existingScreens.at(-1) + 1 || 1;
 }
 
-const screenId = `scID_${uniqueScreenID()}`;
-
-function screenPositions() {
+function screenPosition() {
   const windowDetails = {
     screenX: window.screenX,
     screenY: window.screenY,
@@ -37,11 +36,7 @@ function restartCam() {
   setTimeout(() => window.location.reload(), Math.random() * 1000);
 }
 
-function resetCam() {
-  localStorage.removeItem(screenId);
-}
-
-function removeCam() {
+function removeScreen() {
   const screens = screenList();
   for (const [key, screen] of screens) {
     if (Date.now() - screen.updated > 1000) {
@@ -50,15 +45,29 @@ function removeCam() {
   }
 }
 
+function camSplitter() {
+  video?.setAttribute('style', `transform: translate(-${window.screenX}px, -${window.screenY}px)`);
+  const screens = screenList();
+  screens.map(([key, screen], i) => {
+    const x = screen.screenX + screen.width / 2;
+    const y = screen.screenY + screen.height / 2;
+    return [key, { ...screen, x, y }];
+  });
+}
+
 function main() {
-  timers.push(setInterval(screenPositions, 10));
-  timers.push(setInterval(removeCam, 100));
+  initialize();
+  timers.push(setInterval(screenPosition, 10));
+  timers.push(setInterval(removeScreen, 100));
+  timers.push(setInterval(camSplitter, 10));
 }
 
 restart?.addEventListener('click', restartCam);
-window.addEventListener('beforeunload', resetCam);
+window.addEventListener('beforeunload', () => {
+  localStorage.removeItem(screenId);
+});
 
-function CameraInit() {
+function initialize() {
   navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
     if (!video) return;
     video.width = window.screen.availWidth;
@@ -68,5 +77,4 @@ function CameraInit() {
   });
 }
 
-main();
-CameraInit();
+main();