From 303838f63d418a24990cfd1f49ea65f88083a293 Mon Sep 17 00:00:00 2001 From: Will Scullin Date: Fri, 3 Jun 2022 15:30:39 -0700 Subject: [PATCH] Use CSS modules (#123) * Use CSS modules * Fix tests * Feedback --- css/apple2.css | 2 +- index.html | 3 +- jest.config.js | 1 + js/components/App.tsx | 2 + js/components/Apple2.tsx | 4 +- js/components/CPUMeter.tsx | 4 +- js/components/ControlStrip.tsx | 6 +- js/components/DiskII.tsx | 14 +- js/components/ErrorModal.tsx | 4 +- js/components/FileModal.tsx | 4 +- js/components/Header.tsx | 10 +- js/components/Inset.tsx | 4 +- js/components/Keyboard.tsx | 28 +- js/components/Modal.tsx | 73 +---- js/components/OptionsModal.tsx | 4 +- js/components/Screen.tsx | 13 +- js/components/css/App.module.css | 34 ++ js/components/css/Apple2.module.css | 4 + js/components/css/CPUMeter.module.css | 14 + js/components/css/ControlStrip.module.css | 41 +++ js/components/css/DiskII.module.css | 29 ++ js/components/css/ErrorModal.module.css | 5 + js/components/css/FileModal.module.css | 5 + js/components/css/Header.module.css | 30 ++ js/components/css/Inset.module.css | 18 ++ js/components/css/Keyboard.module.css | 210 ++++++++++++ js/components/css/Modal.module.css | 63 ++++ js/components/css/OptionsModal.module.css | 11 + js/components/css/Screen.module.css | 105 ++++++ js/ui/joystick.ts | 2 +- package-lock.json | 374 ++++++++++++++++++++++ package.json | 3 + tsconfig.json | 1 + types/styles.d.ts | 4 + webpack.config.js | 22 ++ 35 files changed, 1047 insertions(+), 104 deletions(-) create mode 100644 js/components/css/App.module.css create mode 100644 js/components/css/Apple2.module.css create mode 100644 js/components/css/CPUMeter.module.css create mode 100644 js/components/css/ControlStrip.module.css create mode 100644 js/components/css/DiskII.module.css create mode 100644 js/components/css/ErrorModal.module.css create mode 100644 js/components/css/FileModal.module.css create mode 100644 js/components/css/Header.module.css create mode 100644 js/components/css/Inset.module.css create mode 100644 js/components/css/Keyboard.module.css create mode 100644 js/components/css/Modal.module.css create mode 100644 js/components/css/OptionsModal.module.css create mode 100644 js/components/css/Screen.module.css create mode 100644 types/styles.d.ts diff --git a/css/apple2.css b/css/apple2.css index d409af6..65ce84e 100644 --- a/css/apple2.css +++ b/css/apple2.css @@ -162,7 +162,7 @@ th { display: flex; } -.inset button, .modal-overlay button { +.inset button { min-width: 36px; margin: 0 2px; } diff --git a/index.html b/index.html index 3124b0f..1059ace 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ - - +
diff --git a/jest.config.js b/jest.config.js index 846f9f6..700cc1b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,6 +2,7 @@ module.exports = { 'moduleNameMapper': { '^js/(.*)': '/js/$1', '^test/(.*)': '/test/$1', + '\\.css$': 'identity-obj-proxy', }, 'roots': [ 'js/', diff --git a/js/components/App.tsx b/js/components/App.tsx index 0bac016..ff35d54 100644 --- a/js/components/App.tsx +++ b/js/components/App.tsx @@ -7,6 +7,8 @@ import { SYSTEM_TYPE_APPLE2E } from '../ui/system'; import { SCREEN_GL } from '../ui/screen'; import { defaultSystem, systemTypes } from './util/systems'; +import './css/App.module.css'; + /** * Top level application component, provides the parameters * needed by the Apple2 component to bootstrap itself. diff --git a/js/components/Apple2.tsx b/js/components/Apple2.tsx index 9d36a67..f76b077 100644 --- a/js/components/Apple2.tsx +++ b/js/components/Apple2.tsx @@ -14,6 +14,8 @@ import { Slinky } from './Slinky'; import { ThunderClock } from './ThunderClock'; import { ErrorModal } from './ErrorModal'; +import styles from './css/Apple2.module.css'; + /** * Interface for the Apple2 component. */ @@ -64,7 +66,7 @@ export const Apple2 = (props: Apple2Props) => { }, [props]); return ( -
+
diff --git a/js/components/CPUMeter.tsx b/js/components/CPUMeter.tsx index 43c206b..0691911 100644 --- a/js/components/CPUMeter.tsx +++ b/js/components/CPUMeter.tsx @@ -3,6 +3,8 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { Apple2 as Apple2Impl } from '../apple2'; import type { Stats } from '../apple2'; +import styles from './css/CPUMeter.module.css'; + /** * Interface for CPUMeter. */ @@ -63,7 +65,7 @@ export const CPUMeter = ({ apple2 }: CPUMeterProps) => { }, []); return ( -
+
{mode === 0 && `${khz} Khz`} {mode === 1 && `${fps} fps`} {mode === 2 && `${rps} rps`} diff --git a/js/components/ControlStrip.tsx b/js/components/ControlStrip.tsx index aa72682..e4bec17 100644 --- a/js/components/ControlStrip.tsx +++ b/js/components/ControlStrip.tsx @@ -13,6 +13,8 @@ import { JoyStick } from '../ui/joystick'; import { Screen, SCREEN_FULL_PAGE } from '../ui/screen'; import { System } from '../ui/system'; +import styles from './css/ControlStrip.module.css'; + const README = 'https://github.com/whscullin/apple2js#readme'; interface ControlStripProps { @@ -77,7 +79,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => { useHotKey('F12', doReset); return ( -
+
@@ -88,7 +90,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => { {e && ( -
+
Reset
)} diff --git a/js/components/DiskII.tsx b/js/components/DiskII.tsx index e622a3e..0840d43 100644 --- a/js/components/DiskII.tsx +++ b/js/components/DiskII.tsx @@ -7,6 +7,8 @@ import { loadJSON, loadHttpFile, getHashParts } from './util/files'; import { ErrorModal } from './ErrorModal'; import { useHash } from './hooks/useHash'; +import styles from './css/DiskII.module.css'; + /** * Storage structure for Disk II state returned via callbacks. */ @@ -73,20 +75,14 @@ export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => { }, []); return ( -
+
-
+
-
+
{label}
diff --git a/js/components/ErrorModal.tsx b/js/components/ErrorModal.tsx index 0e58d1c..0c0b7bc 100644 --- a/js/components/ErrorModal.tsx +++ b/js/components/ErrorModal.tsx @@ -2,6 +2,8 @@ import { h } from 'preact'; import { useCallback } from 'preact/hooks'; import { Modal, ModalContent, ModalFooter } from './Modal'; +import styles from './css/ErrorModal.module.css'; + export interface ErrorProps { error: unknown | undefined; setError: (error: string | undefined) => void; @@ -30,7 +32,7 @@ export const ErrorModal = ({ error, setError }: ErrorProps) => { onClose={onClose} > -
+
{errorStr}
diff --git a/js/components/FileModal.tsx b/js/components/FileModal.tsx index 1c99060..8279a23 100644 --- a/js/components/FileModal.tsx +++ b/js/components/FileModal.tsx @@ -11,6 +11,8 @@ import { noAwait } from './util/promises'; import { useHash } from './hooks/useHash'; import { FileChooser, FilePickerAcceptType } from './FileChooser'; +import styles from './css/FileModal.module.css'; + const DISK_TYPES: FilePickerAcceptType[] = [ { description: 'Disk Images', @@ -106,7 +108,7 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => <> -
+