Initial working Pravetz 82 keyboard (#3)

zayfod · Nov 25, 2023 · 9baa7cb · 9baa7cb
1 parent 057ab68
commit 9baa7cb
Show file tree

Hide file tree

Showing 8 changed files with 309 additions and 21 deletions.
diff --git a/css/apple2.css b/css/apple2.css
@@ -393,6 +393,10 @@ a.button:hover {
     width: 570px;
 }
 
+#keyboard.layout-pravetz82 .row {
+    width: 598px;
+}
+
 .apple2e #keyboard .row {
     width: 610px;
 }
@@ -401,6 +405,10 @@ a.button:hover {
     margin-left: 20px;
 }
 
+#keyboard.layout-pravetz82 .row0 {
+    margin-left: 10px;
+}
+
 #keyboard .row2 {
     margin-left: 10px;
 }
@@ -409,6 +417,10 @@ a.button:hover {
     margin-left: 10px;
 }
 
+#keyboard.layout-pravetz82 .row3 {
+    margin-left: 25px;
+}
+
 #keyboard .row4 {
     margin-left: 10px;
 }
@@ -514,11 +526,79 @@ a.button:hover {
     bottom: 15px;
 }
 
+#keyboard.layout-pravetz82 .key-RST {
+    border-left-color: #d00;
+    border-top-color: #d00;
+    border-right-color: #700;
+    border-bottom-color: #700;
+    background-color: #a00;
+}
+
+#keyboard.layout-pravetz82 .key-RST:active {
+    border-left-color: #800;
+    border-top-color: #800;
+    border-right-color: #000;
+    border-bottom-color: #000;
+    background-color: #500;
+}
+
+#keyboard.layout-pravetz82 .key-ОСВ, #keyboard .key-МК {
+    border-left-color: #aaa;
+    border-top-color: #aaa;
+    border-right-color: #444;
+    border-bottom-color: #444;
+    background-color: #777;
+}
+
+#keyboard.layout-pravetz82 .key-ОСВ:active, #keyboard .key-МК:active {
+    border-left-color: #777;
+    border-top-color: #777;
+    border-right-color: #000;
+    border-bottom-color: #000;
+    background-color: #333;
+}
+
+#keyboard.layout-pravetz82 .key-ЛАТ {
+    border-left-color: #ddd;
+    border-top-color: #ddd;
+    border-right-color: #888;
+    border-bottom-color: #888;
+    background-color: #bbb;
+}
+
+#keyboard.layout-pravetz82 .key-ЛАТ:active {
+    border-left-color: #888;
+    border-top-color: #888;
+    border-right-color: #222;
+    border-bottom-color: #222;
+    background-color: #999;
+}
+
+#keyboard.layout-pravetz82 .key-ЛАТ2 {
+    border-left-color: #dd0;
+    border-top-color: #dd0;
+    border-right-color: #880;
+    border-bottom-color: #880;
+    background-color: #aa0;
+}
+
+#keyboard.layout-pravetz82 .key-ЛАТ2:active {
+    border-left-color: #770;
+    border-top-color: #770;
+    border-right-color: #000;
+    border-bottom-color: #000;
+    background-color: #550;
+}
+
 #keyboard .key-nbsp {
     margin-left: 62px;
     width: 330px;
 }
 
+#keyboard.layout-pravetz82 .key-nbsp {
+    margin-left: 72px;
+}
+
 .apple2e #display {
     margin: 5px;
 }

diff --git a/js/components/Apple2.tsx b/js/components/Apple2.tsx
@@ -35,6 +35,7 @@ export interface Apple2Props {
     gl: boolean;
     rom: string;
     sectors: SupportedSectors;
+    keyboardLayout: string;
 }
 
 /**
@@ -47,7 +48,7 @@ export interface Apple2Props {
  * @returns
  */
 export const Apple2 = (props: Apple2Props) => {
-    const { e, enhanced, sectors } = props;
+    const { e, enhanced, sectors, keyboardLayout } = props;
     const screenRef = useRef<HTMLCanvasElement>(null);
     const [apple2, setApple2] = useState<Apple2Impl>();
     const [error, setError] = useState<unknown>();
@@ -161,7 +162,7 @@ export const Apple2 = (props: Apple2Props) => {
                 </Inset>
                 <ControlStrip apple2={apple2} e={e} toggleDebugger={toggleDebugger} />
                 <Inset>
-                    <Keyboard apple2={apple2} e={e} />
+                    <Keyboard apple2={apple2} layout={keyboardLayout} />
                 </Inset>
                 <ErrorModal error={error} setError={setError} />
             </div>

diff --git a/js/components/Keyboard.tsx b/js/components/Keyboard.tsx
@@ -96,7 +96,7 @@ export const Key = ({
  */
 export interface KeyboardProps {
     apple2: Apple2Impl | undefined;
-    e: boolean;
+    layout: string;
 }
 
 /**
@@ -107,10 +107,10 @@ export interface KeyboardProps {
  * @param apple2 Apple2 object
  * @returns Keyboard component
  */
-export const Keyboard = ({ apple2, e }: KeyboardProps) => {
+export const Keyboard = ({ apple2, layout }: KeyboardProps) => {
     const [pressed, setPressed] = useState<string[]>([]);
     const [active, setActive] = useState<string[]>(['LOCK']);
-    const keys = useMemo(() => keysAsTuples(e ? keys2e : keys2), [e]);
+    const keys = useMemo(() => keysAsTuples(layout==='apple2e' ? keys2e : keys2), [layout]);
 
     // Set global keystroke handler
     useEffect(() => {

diff --git a/js/components/util/systems.ts b/js/components/util/systems.ts
@@ -4,6 +4,7 @@ export interface SystemType {
     e: boolean;
     enhanced: boolean;
     sectors: 13 | 16;
+    keyboardLayout: string;
 }
 
 // Enhanced Apple //e
@@ -14,6 +15,7 @@ export const defaultSystem = {
     e: true,
     enhanced: true,
     sectors: 16,
+    keyboardLayout: 'apple2e',
 } as const;
 
 export const systemTypes: Record<string, Partial<SystemType>> = {
@@ -36,41 +38,49 @@ export const systemTypes: Record<string, Partial<SystemType>> = {
         rom: 'intbasic',
         characterRom: 'apple2_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     apple213: {
         rom: 'intbasic',
         characterRom: 'apple2_char',
         e: false,
         sectors: 13,
+        keyboardLayout: 'apple2',
     },
     original: {
         rom: 'original',
         characterRom: 'apple2_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     apple2jplus: {
         rom: 'apple2j',
         characterRom: 'apple2j_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     apple2pig: {
         rom: 'fpbasic',
         characterRom: 'pigfont_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     apple2lc:{
         rom: 'fpbasic',
         characterRom: 'apple2lc_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     apple2plus: {
         rom: 'fpbasic',
         characterRom: 'apple2_char',
         e: false,
+        keyboardLayout: 'apple2',
     },
     pravetz82: {
         rom: 'pravetz82',
         characterRom: 'pravetz82_char',
         e: false,
+        keyboardLayout: 'apple2',
     }
 } as const;
diff --git a/js/main2.ts b/js/main2.ts
@@ -19,40 +19,49 @@ const romVersion = prefs.readPref('computer_type2');
 let rom: string;
 let characterRom: string;
 let sectors: SupportedSectors = 16;
+let keyboardLayout: string;
 
 switch (romVersion) {
     case 'apple2':
         rom = 'intbasic';
         characterRom = 'apple2_char';
+        keyboardLayout = 'apple2';
         break;
     case 'apple213':
         rom = 'intbasic';
         characterRom = 'apple2_char';
         sectors = 13;
+        keyboardLayout = 'apple2';
         break;
     case 'original':
         rom = 'original';
         characterRom = 'apple2_char';
+        keyboardLayout = 'apple2';
         break;
     case 'apple2jplus':
         rom = 'apple2j';
         characterRom = 'apple2j_char';
+        keyboardLayout = 'apple2';
         break;
     case 'apple2pig':
         rom = 'fpbasic';
         characterRom = 'pigfont_char';
+        keyboardLayout = 'apple2';
         break;
     case 'apple2lc':
         rom = 'fpbasic';
         characterRom = 'apple2lc_char';
+        keyboardLayout = 'apple2';
         break;
     case 'pravetz82':
         rom = 'pravetz82';
         characterRom = 'pravetz82_char';
+        keyboardLayout = 'pravetz82';
         break;
     default:
         rom = 'fpbasic';
         characterRom = 'apple2_char';
+        keyboardLayout = 'apple2';
 }
 
 const options = {
@@ -91,5 +100,5 @@ apple2.ready.then(() => {
 
     cpu.addPageHandler(lc);
 
-    initUI(apple2, disk2, smartport, printer, false);
+    initUI(apple2, disk2, smartport, printer, false, keyboardLayout);
 }).catch(console.error);
diff --git a/js/main2e.ts b/js/main2e.ts
@@ -18,26 +18,31 @@ const romVersion = prefs.readPref('computer_type2e');
 let enhanced = false;
 let rom: string;
 let characterRom: string;
+let keyboardLayout: string;
 
 switch (romVersion) {
     case 'apple2e':
         rom = 'apple2e';
         characterRom = 'apple2e_char';
+        keyboardLayout = 'apple2e';
         break;
     case 'apple2rm':
         rom = 'apple2e';
         characterRom = 'rmfont_char';
         enhanced = true;
+        keyboardLayout = 'apple2e';
         break;
     case 'apple2ex':
         rom = 'apple2ex';
         characterRom = 'apple2enh_char';
         enhanced = true;
+        keyboardLayout = 'apple2e';
         break;
     default:
         rom = 'apple2enh';
         characterRom = 'apple2enh_char';
         enhanced = true;
+        keyboardLayout = 'apple2e';
 }
 
 const options = {
@@ -73,5 +78,5 @@ apple2.ready.then(() => {
     io.setSlot(6, disk2);
     io.setSlot(7, smartport);
 
-    initUI(apple2, disk2, smartport, printer, options.e);
+    initUI(apple2, disk2, smartport, printer, options.e, keyboardLayout);
 }).catch(console.error);
diff --git a/js/ui/apple2.ts b/js/ui/apple2.ts
@@ -851,7 +851,9 @@ function onLoaded(
     apple2: Apple2,
     disk2: DiskII,
     massStorage: MassStorage<BlockFormat>,
-    printer: Printer, e: boolean
+    printer: Printer,
+    e: boolean,
+    keyboardLayout: string
 ) {
     _apple2 = apple2;
     cpu = _apple2.getCPU();
@@ -881,7 +883,7 @@ function onLoaded(
 
     MicroModal.init();
 
-    keyboard = new KeyBoard(cpu, io, e);
+    keyboard = new KeyBoard(cpu, io, keyboardLayout);
     keyboard.create('#keyboard');
     keyboard.setFunction('F1', () => cpu.reset());
     keyboard.setFunction('F2', (event) => {
@@ -988,8 +990,10 @@ export function initUI(
     apple2: Apple2,
     disk2: DiskII,
     massStorage: MassStorage<BlockFormat>,
-    printer: Printer, e: boolean) {
+    printer: Printer,
+    e: boolean,
+    keyboardLayout: string) {
     window.addEventListener('load', () => {
-        onLoaded(apple2, disk2, massStorage, printer, e);
+        onLoaded(apple2, disk2, massStorage, printer, e, keyboardLayout);
     });
 }