From f16aee43c327348cf69d3178f35cfaf7471f7ae1 Mon Sep 17 00:00:00 2001 From: Joseph Hale Date: Fri, 03 Jun 2022 02:22:59 +0000 Subject: [PATCH] Polish off Settings screen Binary Clock now has what I consider the minimum viable set of features required for a successful release on the app store! Closes #1 --- CONTRIBUTING.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 13 +++++++++++++ docs/binary_clock_demo.gif | 0 docs/binary_clock_settings_demo.gif | 0 src/components/BinaryClock.tsx | 2 +- src/components/BinaryDigit.tsx | 2 +- src/components/BinaryDot.tsx | 4 ++-- src/utils/BinaryClockSettings.ts | 12 +++++++----- 8 file(s) changed, 86 insertion(s)(+), 9 deletion(s)(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,62 @@ + + +# Contributing to `BinaryClock` + +Thank you for your interest in contributing to `BinaryClock`! There are lots of ways you can do so: + - [Sponsoring the developer](https://github.com/sponsors/jhale1805) to fund the app's continued presence on the App Store and Google Play. + - [Submitting feature requests](https://github.com/jhale1805/BinaryClock/issues/new/choose). + - [Reporting bugs](https://github.com/jhale1805/BinaryClock/issues/new/choose). + - Developing new features/bug fixes. + +The rest of this document will focus on that last bullet point, providing a +guide to setting up your development environment so you can bring your ideas for +`BinaryClock` to life. + +## Development Setup + +Start by following the [React Native CLI +Quickstart](https://reactnative.dev/docs/environment-setup) from the official +docs. + +Then fork and clone this repository to your machine. + +From there you can start experimenting with making any changes you like! + +## Directory Structure +Nearly all development on Binary Clock occurs within the `src` folder. Here's +what each subfolder contains: + +- `components`: Individual, reusable UI components for the clock and its + settings page. +- `pages`: Complete screens for the app. +- `utils`: The backend logic for storing and retriving user settings from + persistent storage. + + +## Submitting Contributions +After completing the installation steps above, make whatever bug fixes or +improvements you want in the codebase. + +When you are done, simply commit your code with a brief message explaining what +was changed, and why. A series of automated checks will run to make sure +everything looks good before the commit gets saved: +- The unit test suite will automatically run and inform you of any failing tests + that need fixing. +- Linters will automatically run and correct any code formatting problems. Make + sure to `git add .` after these run to capture their changes. + +Finally push up your changes to your fork and open a Pull Request (PR) back into +`jhale1805/BinaryClock`. +- A bot will post a link on your PR asking you to sign a standard Contributor + License Agreement (CLA) giving me permission to integrate your contribution + into the project. +- Any questions about your contribution will be discussed within the PR's + comment section. +- After everything looks great, your PR will be merged into the `main` branch of + `BinaryClock`! \ No newline at end of file diff --git a/README.md b/README.md --- a/README.md +++ b/README.md @@ -17,6 +17,19 @@ seconds values to binary digits which are used to brighten or dim corresponding squares on the screen. +## Built-in Customization Options! +![A gif showing the settings menu of the Binary Clock](./docs/binary_clock_settings_demo.gif) + +The Binary Clock has a built-in settings page where you can configure the brightness of the clock and enable hints! + +More settings are planned for the future (e.g. [choosing the clock's +color](https://github.com/jhale1805/BinaryClock/issues/3)). Feel free +to [open a feature +request](https://github.com/jhale1805/BinaryClock/issues/new/choose) +with any ideas you may have! + +## Contributing +See [CONTRIBUTING.md](CONTRIBUTING.md) ## License diff --git a/docs/binary_clock_demo.gif b/docs/binary_clock_demo.gif --- a/docs/binary_clock_demo.gif +++ b/docs/binary_clock_demo.gif diff --git a/docs/binary_clock_settings_demo.gif b/docs/binary_clock_settings_demo.gif new file mode 100644 --- /dev/null +++ b/docs/binary_clock_settings_demo.gif diff --git a/src/components/BinaryClock.tsx b/src/components/BinaryClock.tsx --- a/src/components/BinaryClock.tsx +++ b/src/components/BinaryClock.tsx @@ -19,7 +19,7 @@ const BinaryClock: React.FC = args => { const defaults = { orientation: Orientation.Landscape, - brightness: 0.5, + brightness: 1, showHints: false, }; const props = {...defaults, ...args}; diff --git a/src/components/BinaryDigit.tsx b/src/components/BinaryDigit.tsx --- a/src/components/BinaryDigit.tsx +++ b/src/components/BinaryDigit.tsx @@ -20,7 +20,7 @@ /* eslint no-bitwise: ["error", { "allow": ["&"] }] */ const BinaryDigit: React.FC = args => { const defaults = { - brightness: 0.5, + brightness: 1, maxVisible: 15, maxValue: 15, showHints: false, diff --git a/src/components/BinaryDot.tsx b/src/components/BinaryDot.tsx --- a/src/components/BinaryDot.tsx +++ b/src/components/BinaryDot.tsx @@ -48,10 +48,10 @@ backgroundColor: 'green', }, activeDot: { - opacity: 0.5, + opacity: 1, }, inactiveDot: { - opacity: 0.125, + opacity: 0.25, }, hint: { alignItems: 'center', diff --git a/src/utils/BinaryClockSettings.ts b/src/utils/BinaryClockSettings.ts --- a/src/utils/BinaryClockSettings.ts +++ b/src/utils/BinaryClockSettings.ts @@ -30,7 +30,7 @@ public static async getBrightness() { let temp = await DefaultPreference.get(BRIGHTNESS_KEY); if (temp === undefined || temp === null) { - temp = '0.5'; + temp = '1'; } return Number(temp); } @@ -53,17 +53,19 @@ } function useBrightness(): [number, Dispatch>] { - const [brightness, setBrightness] = useState(0.5); + const [brightness, setBrightness] = useState(1); const isFocused = useIsFocused(); useEffect(() => { BinaryClockSettings.getBrightness() .then(value => { - console.debug('Brightness Setting: ' + value); - setBrightness(value); + setTimeout(() => { + console.debug('Brightness Setting: ' + value); + setBrightness(value); + }, 0); }) .catch(err => { console.error(err); - setBrightness(0.5); + setBrightness(1); }); }, [isFocused]); return [brightness, setBrightness]; -- tangled.sh