Only show notable releases by default.

It's overwhelming to have 43 releases to scroll through, show the most notable 16. Fixes #171
mihaip · Jun 4, 2023 · 2af38be · 2af38be
1 parent a99e9cf
commit 2af38be
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 14 deletions.
diff --git a/src/Browser.css b/src/Browser.css
@@ -154,3 +154,39 @@
         visibility: visible;
     }
 }
+
+.Notable-Toggle-Container {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.Notable-Toggle {
+    font-family: "Helvetica", "Arial", sans-serif;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 13px;
+    background: #282c3499;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.Notable-Toggle button {
+    margin-left: 0.5em;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: #fff;
+    cursor: pointer;
+}
+
+.Notable-Toggle-Label,
+.Notable-Toggle .count {
+    color: #ccc;
+}
+
+.Notable-Toggle .selected .name {
+    text-decoration: underline;
+}
diff --git a/src/Browser.tsx b/src/Browser.tsx
@@ -2,7 +2,10 @@ import {
     type SystemDiskDef,
     type PlaceholderDiskDef,
     DISKS_BY_YEAR,
+    NOTABLE_DISKS_BY_YEAR,
     isPlaceholderDiskDef,
+    NOTABLE_DISKS,
+    ALL_DISKS,
 } from "./disks";
 import {type MachineDef} from "./machines";
 import {ScreenFrame} from "./ScreenFrame";
@@ -21,6 +24,8 @@ export type BrowserProps = {
 };
 
 export function Browser({onRun}: BrowserProps) {
+    const [notableOnly, setNotableOnly] = useState(true);
+    const disksByYear = notableOnly ? NOTABLE_DISKS_BY_YEAR : DISKS_BY_YEAR;
     return (
         <div className="Browser">
             <header>
@@ -29,16 +34,22 @@ export function Browser({onRun}: BrowserProps) {
                 </div>
             </header>
             <Description />
-            {Array.from(Object.entries(DISKS_BY_YEAR), ([year, disks]) => (
-                <div className="Year" key={year}>
-                    <h2>{year}</h2>
-                    <div className="Disks">
-                        {disks.map((disk, i) => (
-                            <Disk disk={disk} onRun={onRun} key={i} />
-                        ))}
+            <div className="Disks-Container">
+                <NotableToggle
+                    notableOnly={notableOnly}
+                    setNotableOnly={setNotableOnly}
+                />
+                {Array.from(Object.entries(disksByYear), ([year, disks]) => (
+                    <div className="Year" key={year}>
+                        <h2>{year}</h2>
+                        <div className="Disks">
+                            {disks.map((disk, i) => (
+                                <Disk disk={disk} onRun={onRun} key={i} />
+                            ))}
+                        </div>
                     </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </div>
     );
 }
@@ -78,6 +89,34 @@ function Description() {
     );
 }
 
+function NotableToggle({
+    notableOnly,
+    setNotableOnly,
+}: {
+    notableOnly: boolean;
+    setNotableOnly: (v: boolean) => void;
+}) {
+    return (
+        <div className="Notable-Toggle-Container">
+            <div className="Notable-Toggle">
+                <span className="Notable-Toggle-Label">Releases:</span>
+                <button
+                    onClick={() => setNotableOnly(true)}
+                    className={notableOnly ? "selected" : ""}>
+                    <span className="name">Notable</span>{" "}
+                    <span className="count">({NOTABLE_DISKS.length})</span>
+                </button>
+                <button
+                    onClick={() => setNotableOnly(false)}
+                    className={notableOnly ? "" : "selected"}>
+                    <span className="name">All</span>{" "}
+                    <span className="count">({ALL_DISKS.length})</span>
+                </button>
+            </div>
+        </div>
+    );
+}
+
 type DiskProps = {
     disk: SystemDiskDef | PlaceholderDiskDef;
     onRun: (def: BrowserRunDef, inNewWindow?: boolean) => void;
@@ -154,8 +193,7 @@ function DiskContents({disk, onRun, setBezelStyle}: DiskContentsProps) {
                                 disk.machines[e.target.selectedIndex];
                             setMachine(machine);
                             setBezelStyle(machine.bezelStyle);
-                        }}
-                    >
+                        }}>
                         {disk.machines.map((machine, i) => (
                             <option value={machine.name} key={i}>
                                 {machine.name}
@@ -213,8 +251,7 @@ function DiskContents({disk, onRun, setBezelStyle}: DiskContentsProps) {
                 <Button
                     appearance={buttonAppearance}
                     className="CustomizeButton"
-                    onClick={() => setCustomizing(!customizing)}
-                >
+                    onClick={() => setCustomizing(!customizing)}>
                     {customizing ? "Cancel" : "Customize…"}
                 </Button>
                 <Button appearance={buttonAppearance} onClick={run}>

diff --git a/src/disks.ts b/src/disks.ts
@@ -37,6 +37,7 @@ export type SystemDiskDef = EmulatorDiskDef & {
     delayAdditionalDiskMount?: boolean;
     hasPlatinumAppearance?: boolean;
     isUnstable?: boolean;
+    notable?: boolean;
 };
 
 export type PlaceholderDiskDef = {
@@ -66,6 +67,7 @@ const SYSTEM_1_0: SystemDiskDef = {
     // after the system is booted, it appears to work.
     delayAdditionalDiskMount: true,
     generatedSpec: () => import("./Data/System 1.0.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_1_1: SystemDiskDef = {
@@ -88,6 +90,7 @@ const SYSTEM_2_0: SystemDiskDef = {
     machines: [MAC_128K],
     mfsOnly: true,
     generatedSpec: () => import("./Data/System 2.0.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_2_1: SystemDiskDef = {
@@ -99,6 +102,7 @@ const SYSTEM_2_1: SystemDiskDef = {
     // The Mac 128K is supported, but HFS is not loaded in that case.
     machines: [MAC_512KE, MAC_128K],
     generatedSpec: () => import("./Data/System 2.1.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_3_0: SystemDiskDef = {
@@ -109,6 +113,7 @@ const SYSTEM_3_0: SystemDiskDef = {
     prefetchChunks: [0, 1, 2],
     machines: [MAC_PLUS, MAC_512KE],
     generatedSpec: () => import("./Data/System 3.0.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_3_1: PlaceholderDiskDef = {
@@ -168,6 +173,7 @@ const SYSTEM_5_0: SystemDiskDef = {
     prefetchChunks: [0, 1, 2],
     machines: [MAC_SE, MAC_II, MAC_PLUS, MAC_512KE],
     generatedSpec: () => import("./Data/System 5.0 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_5_1: SystemDiskDef = {
@@ -186,6 +192,7 @@ const SYSTEM_6_0: SystemDiskDef = {
     prefetchChunks: [0, 1, 2, 3, 4, 5, 6, 8],
     machines: [MAC_SE, MAC_II, MAC_PLUS, MAC_512KE],
     generatedSpec: () => import("./Data/System 6.0 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_6_0_1: PlaceholderDiskDef = {
@@ -232,6 +239,7 @@ const SYSTEM_6_0_5: SystemDiskDef = {
     prefetchChunks: [0, 1, 2, 3, 4, 5, 6, 8],
     machines: [MAC_SE, MAC_II, MAC_PLUS, MAC_512KE],
     generatedSpec: () => import("./Data/System 6.0.5 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_6_0_6: PlaceholderDiskDef = {
@@ -273,6 +281,7 @@ const SYSTEM_7_0: SystemDiskDef = {
     machines: [MAC_IIFX, MAC_PLUS, MAC_SE, MAC_II],
     appleTalkSupported: true,
     generatedSpec: () => import("./Data/System 7.0 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_7_1: SystemDiskDef = {
@@ -326,6 +335,7 @@ const SYSTEM_7_5: SystemDiskDef = {
     machines: [QUADRA_650, MAC_IIFX, MAC_PLUS, MAC_SE, MAC_II],
     appleTalkSupported: true,
     generatedSpec: () => import("./Data/System 7.5 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_7_5_1: SystemDiskDef = {
@@ -376,6 +386,7 @@ const SYSTEM_7_5_3: SystemDiskDef = {
     machines: [QUADRA_650, MAC_PLUS, MAC_SE, MAC_II, MAC_IIFX],
     appleTalkSupported: true,
     generatedSpec: () => import("./Data/System 7.5.3 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_7_5_3_PPC: SystemDiskDef = {
@@ -413,6 +424,7 @@ const KANJITALK_7_5_3: SystemDiskDef = {
     machines: [QUADRA_650, MAC_PLUS, MAC_SE, MAC_II, MAC_IIFX],
     appleTalkSupported: true,
     generatedSpec: () => import("./Data/KanjiTalk 7.5.3 HD.dsk.json"),
+    notable: true,
 };
 
 const SYSTEM_7_5_4: PlaceholderDiskDef = {
@@ -465,6 +477,7 @@ const MAC_OS_7_6: SystemDiskDef = {
     machines: [QUADRA_650, MAC_IIFX, POWER_MACINTOSH_9500],
     appleTalkSupported: true,
     generatedSpec: () => import("./Data/Mac OS 7.6 HD.dsk.json"),
+    notable: true,
 };
 
 const MAC_OS_8_0: SystemDiskDef = {
@@ -487,6 +500,7 @@ const MAC_OS_8_0: SystemDiskDef = {
     appleTalkSupported: true,
     hasPlatinumAppearance: true,
     generatedSpec: () => import("./Data/Mac OS 8.0 HD.dsk.json"),
+    notable: true,
 };
 
 const MAC_OS_8_1: SystemDiskDef = {
@@ -507,6 +521,7 @@ const MAC_OS_8_1: SystemDiskDef = {
     appleTalkSupported: true,
     hasPlatinumAppearance: true,
     generatedSpec: () => import("./Data/Mac OS 8.1 HD.dsk.json"),
+    notable: true,
 };
 
 const MAC_OS_8_5: SystemDiskDef = {
@@ -534,6 +549,7 @@ const MAC_OS_8_5: SystemDiskDef = {
     appleTalkSupported: true,
     hasPlatinumAppearance: true,
     generatedSpec: () => import("./Data/Mac OS 8.5 HD.dsk.json"),
+    notable: true,
 };
 
 const MAC_OS_8_6: SystemDiskDef = {
@@ -591,6 +607,7 @@ const MAC_OS_9_0: SystemDiskDef = {
     machines: [POWER_MACINTOSH_G3, POWER_MACINTOSH_9500],
     hasPlatinumAppearance: true,
     generatedSpec: () => import("./Data/Mac OS 9.0 HD.dsk.json"),
+    notable: true,
 };
 
 const MAC_OS_9_0_1: PlaceholderDiskDef = {
@@ -648,7 +665,7 @@ const MAC_OS_9_0_4: SystemDiskDef = {
     generatedSpec: () => import("./Data/Mac OS 9.0.4 HD.dsk.json"),
 };
 
-const ALL_DISKS = [
+export const ALL_DISKS = [
     SYSTEM_1_0,
     SYSTEM_1_1,
     SYSTEM_2_0,
@@ -694,16 +711,28 @@ const ALL_DISKS = [
     MAC_OS_9_0_4,
 ];
 
+export const NOTABLE_DISKS: SystemDiskDef[] = [];
+
 export const DISKS_BY_YEAR: {
     [year: number]: (SystemDiskDef | PlaceholderDiskDef)[];
 } = {};
+export const NOTABLE_DISKS_BY_YEAR: {
+    [year: number]: (SystemDiskDef | PlaceholderDiskDef)[];
+} = {};
 
 ALL_DISKS.forEach(disk => {
     const [year] = disk.releaseDate;
     if (!DISKS_BY_YEAR[year]) {
         DISKS_BY_YEAR[year] = [];
     }
     DISKS_BY_YEAR[year].push(disk);
+    if ("notable" in disk && disk.notable) {
+        NOTABLE_DISKS.push(disk);
+        if (!NOTABLE_DISKS_BY_YEAR[year]) {
+            NOTABLE_DISKS_BY_YEAR[year] = [];
+        }
+        NOTABLE_DISKS_BY_YEAR[year].push(disk);
+    }
 });
 
 export const INFINITE_HD: EmulatorDiskDef = {