Hires LEDs

js/cards/disk2.ts

@@ -749,7 +749,7 @@ export default class DiskII implements Card<State> {
         for (const d of DRIVE_NUMBERS) {
             const idx = d - 1;
             this.drives[idx] = setDriveState(state.drives[idx]);
-            const { name, side, dirty } = state.drives[idx];
+            const { name, side, dirty,  } = state.drives[idx];
             this.callbacks.label(d, name, side);
             this.callbacks.driveLight(d, this.on);
             this.callbacks.dirty(d, dirty);

js/components/BlockDisk.tsx

@@ -5,31 +5,30 @@ import SmartPort from '../cards/smartport';
 import { BlockFileModal } from './BlockFileModal';
 import { ErrorModal } from './ErrorModal';
 
-import styles from './css/DiskII.module.css';
+import styles from './css/BlockDisk.module.css';
 
 /**
- * Storage structure for Disk II state returned via callbacks.
+ * Storage structure for drive state returned via callbacks.
  */
-export interface DiskIIData {
+export interface BlockDiskData {
     number: 1 | 2;
     on: boolean;
     name?: string;
 }
 
 /**
- * Interface for Disk II component.
+ * Interface for BlockDisk.
  */
-export interface BlockDiskProps extends DiskIIData {
+export interface BlockDiskProps extends BlockDiskData {
     smartPort: SmartPort | undefined;
 }
 
 /**
- * Disk II component
+ * BlockDisk component
  *
  * Includes drive light, disk name and side, and UI for loading disks.
- * Handles initial loading of disks specified in the hash.
  *
- * @param disk2 Disk2 object
+ * @param smartPort SmartPort object
  * @param number Drive 1 or 2
  * @param on Active state
  * @param name Disk name identifier

js/components/DiskII.tsx

@@ -28,7 +28,6 @@ export interface DiskIIProps extends DiskIIData {
  * Disk II component
  *
  * Includes drive light, disk name and side, and UI for loading disks.
- * Handles initial loading of disks specified in the hash.
  *
  * @param disk2 Disk2 object
  * @param number Drive 1 or 2

js/components/Drives.tsx

@@ -28,10 +28,15 @@ export interface DrivesProps {
 
 /**
  * Drive interface component. Presents the interface to load disks.
- * Provides the callback to the Disk2 object to update the DiskII
- * components.
+ * Provides the callback to the Disk2 and SmartPort objects to update
+ * the DiskII and BlockDisk components.
+ * Handles initial loading of disks specified in the hash.
  *
+ * @cpu CPU object
  * @param io Apple I/O object
+ * @param sectors 13 or 16 sector rom mode
+ * @enhanced Whether to create a SmartPort ROM device
+ * @ready Signal disk availability
  * @returns Drives component
  */
 export const Drives = ({ cpu, io, sectors, enhanced, ready }: DrivesProps) => {

js/components/css/BlockDisk.module.css

@@ -0,0 +1,38 @@
+.disk {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+}
+
+.diskLight {
+    margin: 5px;
+    background-image: url(../../../css/green-off-16.png);
+    background-size: 16px 16px;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.diskLight.on {
+    background-image: url(../../../css/green-on-16.png);
+}
+
+.diskLabel {
+    color: #000;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-right: 0.5em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-grow: 1;
+}
+
+@media only screen and (min-resolution: 1.25dppx) {
+    .diskLight {
+        background-image: url(../../../css/green-off-32.png);
+    }
+    .diskLight.on {
+        background-image: url(../../../css/green-on-32.png);
+    }
+}

js/components/css/DiskII.module.css

@@ -7,6 +7,7 @@
 .diskLight {
     margin: 5px;
     background-image: url(../../../css/red-off-16.png);
+    background-size: 16px 16px;
     flex-shrink: 0;
     width: 16px;
     height: 16px;
@@ -26,3 +27,12 @@
     white-space: nowrap;
     flex-grow: 1;
 }
+
+@media only screen and (min-resolution: 1.25dppx) {
+    .diskLight {
+        background-image: url(../../../css/red-off-32.png);
+    }
+    .diskLight.on {
+        background-image: url(../../../css/red-on-32.png);
+    }
+}