initial commit

src/components/ModemIntro.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { playLine1Sequence, markConnected } from '../lib/sound';
+type DialState = 'idle' | 'dialing';
+export default function ModemIntro() {
+  const [state, setState] = useState<DialState>('idle');
+  function selectLine(line: 1 | 2) {
+    if (line === 2) { markConnected(); window.location.href = '/bbs/'; return; }
+    setState('dialing');
+    playLine1Sequence(() => { markConnected(); window.location.href = '/bbs/'; });
+  }
+  return (
+    <div className="ansi-text welcome-modem" role="region" aria-label="Modem connect intro">
+      <pre style={{ textAlign: 'center' }}>{`+------------------------------------------+
+|  28k8   [MODEM]   ATDT +49-821-2191-038  |
++------------------------------------------+`}</pre>
+      {state === 'idle' && (
+        <pre style={{ textAlign: 'center' }}><a href="#" onClick={(e) => { e.preventDefault(); selectLine(1); }}>{`> Line 1: +49-821-2191-038 [VFC V34] 28800 <`}</a>{'\n\n'}<a href="#" onClick={(e) => { e.preventDefault(); selectLine(2); }}>{`> Line 2: +49-821-2191-036 [X75]     64000 <`}</a></pre>
+      )}
+      {state === 'dialing' && <p style={{ textAlign: 'center' }}>Dialing... please wait.</p>}
+    </div>
+  );
+}