feat: support touch keyb

stid · Jan 29, 2024 · 0f4e5d1 · 0f4e5d1
1 parent c641e97
commit 0f4e5d1
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 44 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,7 +5,7 @@ import { CONFIG } from '../config';
 import { APP_VERSION } from '../version';
 import { WORKER_MESSAGES } from '../apple1/TSTypes';
 import Actions from './Actions';
-import { useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ErrorBoundary from './Error';
 
 const Title = () => <h3>Apple 1 :: JS Emulator - by =stid= v{APP_VERSION}</h3>;
@@ -19,41 +19,82 @@ const App = ({ worker }: Props): JSX.Element => {
     const [supportBS, setSupportBS] = useState<boolean>(CONFIG.CRT_SUPPORT_BS);
     const [showDebug, setShowDebug] = useState<boolean>(false);
 
+    const hiddenInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            worker.postMessage({ data: e.key, type: WORKER_MESSAGES.KEY_DOWN });
+            e.preventDefault();
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        const hiddenInput = hiddenInputRef.current;
+        if (hiddenInput) {
+            hiddenInput.addEventListener('keydown', handleKeyDown);
+        }
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            if (hiddenInput) {
+                hiddenInput.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }, [worker]);
+
+    const focusHiddenInput = () => {
+        const hiddenInput = hiddenInputRef.current;
+        if (hiddenInput) {
+            hiddenInput.style.opacity = '0';
+            hiddenInput.focus();
+        }
+    };
+
     return (
         <ErrorBoundary>
-            <div className="flex">
-                <LayoutRow>
-                    <Title />
-                    <CRTWorker worker={worker} />
-                    <div className="p-0 mt-1">
-                        <Actions
-                            supportBS={supportBS}
-                            onReset={(e) => {
-                                e.preventDefault();
-                                worker.postMessage({ data: 'Tab', type: WORKER_MESSAGES.KEY_DOWN });
-                            }}
-                            onBS={(e) => {
-                                e.preventDefault();
-                                worker.postMessage({ data: !supportBS, type: WORKER_MESSAGES.SET_CRT_BS_SUPPORT_FLAG });
-                                setSupportBS(!supportBS);
-                            }}
-                            showDebug={showDebug}
-                            onShowDebug={(e) => {
-                                e.preventDefault();
-                                setShowDebug(!showDebug);
-                            }}
-                        />
-                    </div>
-                </LayoutRow>
-                <LayoutRow>
-                    <Info />
-                </LayoutRow>
-            </div>
-            {showDebug && (
+            <div onClick={focusHiddenInput}>
                 <div className="flex">
-                    <Debugger worker={worker} />
+                    <LayoutRow>
+                        <Title />
+                        <CRTWorker worker={worker} />
+                        <div className="p-0 mt-1">
+                            <Actions
+                                supportBS={supportBS}
+                                onReset={(e) => {
+                                    e.preventDefault();
+                                    worker.postMessage({ data: 'Tab', type: WORKER_MESSAGES.KEY_DOWN });
+                                }}
+                                onBS={(e) => {
+                                    e.preventDefault();
+                                    worker.postMessage({
+                                        data: !supportBS,
+                                        type: WORKER_MESSAGES.SET_CRT_BS_SUPPORT_FLAG,
+                                    });
+                                    setSupportBS(!supportBS);
+                                }}
+                                showDebug={showDebug}
+                                onShowDebug={(e) => {
+                                    e.preventDefault();
+                                    setShowDebug(!showDebug);
+                                }}
+                            />
+                        </div>
+                    </LayoutRow>
+                    <LayoutRow>
+                        <Info />
+                    </LayoutRow>
                 </div>
-            )}
+                {showDebug && (
+                    <div className="flex">
+                        <Debugger worker={worker} />
+                    </div>
+                )}
+
+                <input
+                    type="text"
+                    ref={hiddenInputRef}
+                    style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
+                />
+            </div>
         </ErrorBoundary>
     );
 };

diff --git a/src/index-web.tsx b/src/index-web.tsx
@@ -1,22 +1,13 @@
 import App from './components/App';
-import { WORKER_MESSAGES } from './apple1/TSTypes';
 import { createRoot } from 'react-dom/client';
 import { onCLS, onFID, onLCP } from 'web-vitals';
 
-const createAppleWorker = () => {
-    const appleWorker = new Worker(new URL('./apple1/Apple.worker.ts', import.meta.url), { type: 'module' });
-
-    window.addEventListener('keydown', (e: KeyboardEvent) => {
-        appleWorker.postMessage({ data: e.key, type: WORKER_MESSAGES.KEY_DOWN });
-        e.preventDefault();
-    });
-
-    return appleWorker;
+const createAppleWorker = (): Worker => {
+    return new Worker(new URL('./apple1/Apple.worker.ts', import.meta.url), { type: 'module' });
 };
 
 const renderApp = (worker: Worker) => {
     const container = document.getElementById('app');
-
     if (container) {
         const root = createRoot(container);
         root.render(<App worker={worker} />);

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export const APP_VERSION = '2.1.3';
+export const APP_VERSION = '2.2.0';