#40 touchscreen swithcing added

Author: htdguide

main/index.css

@@ -6,10 +6,15 @@ html, body, #root {
   padding: 0;
   width: 100%;
   height: 100%;
-  background-color: black;          /* Outside the monitor: black */
-  overflow: hidden !important;      /* Disable all scrolling */
-  touch-action: none !important;    /* Disable touch scrolling */
-  overscroll-behavior: none !important; /* Prevent scroll chaining */
+  background-color: black;                /* Outside the monitor: black */
+  overflow: hidden !important;            /* Disable scrolling */
+  touch-action: none !important;          /* Disable touch gestures */
+  overscroll-behavior: none !important;   /* Prevent scroll chaining */
+  -webkit-user-select: none !important;   /* Disable text selection in WebKit */
+  -moz-user-select: none !important;      /* Disable text selection in Firefox */
+  -ms-user-select: none !important;       /* Disable text selection in IE10+ */
+  user-select: none !important;           /* Standard property */
+  -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight flash */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
@@ -30,10 +35,18 @@ body > iframe {
   overflow: hidden !important;
   touch-action: none !important;
   overscroll-behavior: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
 }
 
-/* Block any remaining overscroll on all elements */
+/* Apply to all elements, to be sure no child can be selected */
 * {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
   touch-action: none !important;
   overscroll-behavior: none !important;
 }

main/main.jsx

@@ -7,19 +7,22 @@ import BIOS from '../src/BIOS/BIOS';
 
 const Main = () => {
   useEffect(() => {
-    // Prevent wheel-based scrolling
-    const preventScroll = (e) => {
+    // Prevent all scrolling
+    const preventDefault = (e) => {
       e.preventDefault();
     };
 
-    // Add listeners for both mouse wheel and touch moves
-    document.addEventListener('wheel', preventScroll, { passive: false });
-    document.addEventListener('touchmove', preventScroll, { passive: false });
+    // Block wheel, touchmove, text selection start, and context menu (long-press)
+    document.addEventListener('wheel', preventDefault, { passive: false });
+    document.addEventListener('touchmove', preventDefault, { passive: false });
+    document.addEventListener('selectstart', preventDefault);
+    document.addEventListener('contextmenu', preventDefault);
 
-    // Clean up on unmount
     return () => {
-      document.removeEventListener('wheel', preventScroll);
-      document.removeEventListener('touchmove', preventScroll);
+      document.removeEventListener('wheel', preventDefault);
+      document.removeEventListener('touchmove', preventDefault);
+      document.removeEventListener('selectstart', preventDefault);
+      document.removeEventListener('contextmenu', preventDefault);
     };
   }, []);