fullscreen hide mouse cursor

main.js

@@ -131,24 +131,18 @@ function createWindow()
   let windowOptions = {
     width: 800,
     height: 480,
+    fullscreen: true,
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
       enableRemoteModule: true,
       worldSafeExecuteJavaScript: true,
       preload: path.join(__dirname, 'preload.js')
     },
+    frame: false,
+    kiosk: true
   };
 
-  if (isRaspberryPi || (isDev && process.env.FULLSCREEN === 'true'))
-  {
-    windowOptions.fullscreen = true;
-  } else
-  {
-    // Center the window on macOS or in dev mode
-    windowOptions.center = true;
-  }
-
   mainWindow = new BrowserWindow(windowOptions);
 
   // Load the index.html from a url
@@ -158,6 +152,11 @@ function createWindow()
       : `file://${path.join(__dirname, './build/index.html')}`
   );
 
+  // Hide the cursor
+  mainWindow.webContents.on('dom-ready', () => {
+    mainWindow.webContents.insertCSS('* { cursor: none !important; }');
+  });
+
   // Open the DevTools in development mode
   if (isDev)
   {

src/App.css

@@ -28,7 +28,12 @@
     color: #333;
     text-align: center;
     text-transform: uppercase; /* Optional: if you want all caps text */
-
+    cursor: none !important;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    overflow: hidden;
   }
 
 .App {
@@ -800,3 +805,7 @@ button:active {
   background: rgba(198, 202, 224, 0.1);
   color: white;
 }
+
+* {
+  cursor: none !important;
+}

src/App.js

@@ -3,6 +3,17 @@ import VisualizationMode from './VisualizationMode';
 import EffectSelectScreen from './EffectSelectScreen';
 import './App.css';
 
+// Add this style to your existing CSS or create a new style block
+const styles = {
+  app: {
+    cursor: 'none', // Hide cursor at the React level
+    userSelect: 'none', // Prevent text selection
+    WebkitUserSelect: 'none', // For Safari
+    MozUserSelect: 'none', // For Firefox
+    msUserSelect: 'none', // For IE/Edge
+  }
+};
+
 const electron = window.electron;
 
 function App() {
@@ -238,7 +249,7 @@ function App() {
   }
 
   return (
-    <div className="App">
+    <div className="App" style={styles.app}>
       {currentScreen === 'visualization' ? (
         <VisualizationMode
           synths={synths}