Adjust React imports for TypeScript compatibility

web/src/App.tsx

@@ -1,66 +1,65 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import ChessBoard from './components/ChessBoard';
-import GameControls from './components/GameControls';
-import GameInfo from './components/GameInfo';
-
-const App: React.FC = () => {
-  // Theme state kept but not exposed in UI
-  const [boardTheme] = useState<'brown' | 'grey'>('brown');
-  
-  // Add useEffect to log when the component mounts
-  React.useEffect(() => {
-    console.log('Chess UI App mounted - Version 1.0');
-    
-    // Force a refresh of styles
-    const style = document.createElement('style');
-    style.textContent = `
-      .chess-board {
-        width: 800px !important;
-        max-width: 100% !important;
-      }
-      .chess-piece {
-        width: 85% !important;
-        height: 85% !important;
-      }
-      .rank-label, .file-label {
-        font-size: 0.9rem !important;
-      }
-      .rank-label {
-        left: 8px !important;
-        top: 8px !important;
-      }
-      .file-label {
-        right: 8px !important;
-        bottom: 8px !important;
-      }
-    `;
-    document.head.appendChild(style);
-    
-    return () => {
-      document.head.removeChild(style);
-    };
-  }, []);
-  
-  return (
-    <div className="min-h-screen bg-gradio-bg text-gradio-text py-8">
-      <div className="container mx-auto px-4">
-        
-        <div className="flex flex-col lg:flex-row gap-8 game-layout">
-          <div className="flex-1 flex flex-col items-center">
-            <ChessBoard theme={boardTheme} />
-          </div>
-          
-          <div className="w-full lg:w-96 flex flex-col">
-            <GameInfo boardTheme={boardTheme} onThemeChange={() => {}} />
-            <div className="mt-6">
-              <GameControls />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
+import React, { useState, useEffect } from 'react';
+import ChessBoard from './components/ChessBoard';
+import GameControls from './components/GameControls';
+import GameInfo from './components/GameInfo';
+
+const App: React.FC = () => {
+  // Theme state kept but not exposed in UI
+  const [boardTheme] = useState<'brown' | 'grey'>('brown');
+  
+  // Add useEffect to log when the component mounts
+  React.useEffect(() => {
+    console.log('Chess UI App mounted - Version 1.0');
+    
+    // Force a refresh of styles
+    const style = document.createElement('style');
+    style.textContent = `
+      .chess-board {
+        width: 800px !important;
+        max-width: 100% !important;
+      }
+      .chess-piece {
+        width: 85% !important;
+        height: 85% !important;
+      }
+      .rank-label, .file-label {
+        font-size: 0.9rem !important;
+      }
+      .rank-label {
+        left: 8px !important;
+        top: 8px !important;
+      }
+      .file-label {
+        right: 8px !important;
+        bottom: 8px !important;
+      }
+    `;
+    document.head.appendChild(style);
+    
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+  
+  return (
+    <div className="min-h-screen bg-gradio-bg text-gradio-text py-8">
+      <div className="container mx-auto px-4">
+        
+        <div className="flex flex-col lg:flex-row gap-8 game-layout">
+          <div className="flex-1 flex flex-col items-center">
+            <ChessBoard theme={boardTheme} />
+          </div>
+          
+          <div className="w-full lg:w-96 flex flex-col">
+            <GameInfo boardTheme={boardTheme} onThemeChange={() => {}} />
+            <div className="mt-6">
+              <GameControls />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default App;

web/src/main.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
 );