Skip to content

Commit

Permalink
Format code; update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
llaenowyd committed Sep 24, 2023
1 parent 881fb8f commit bb4973d
Showing 22 changed files with 161 additions and 240 deletions.
79 changes: 12 additions & 67 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,15 @@
# Getting Started with Create React App
# Speed Reader by a110

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This app is intended to help the user improve their reading speed by displaying the words
of a text passage one by one at a given speed. That prevents the reader from effectively
subvocalization or regression. For more background on the contextual meaning of these terms,
visit the [Wikipedia page on Speed Reading](https://en.wikipedia.org/wiki/Speed_reading) -
the content of which is used as the default text passage within the app.

## Available Scripts
The text used in the app can be easily replaced by any other text that might be more
applicable to the specific use case.

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
The styling could use refinement and in particular there is no support as yet for a dark
mode view. Also the deployment originally intended with GitHub Pages was not possible due
to the behavior of the main app at [a110.dev](https://a110.dev). Thus for the time being
this app can be viewed via Netlify at [https://main--velvety-gumdrop-c43a77.netlify.app/](https://main--velvety-gumdrop-c43a77.netlify.app/)
2 changes: 1 addition & 1 deletion jsconfig.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{ }
{}
2 changes: 1 addition & 1 deletion src/App.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React from "react";
import { useRecoilValue } from "recoil";
import Frame from "./components/Frame";
import Header from "./components/Header";
import { VIEW_NAME_PASSAGE } from './constants'
import { VIEW_NAME_PASSAGE } from "./constants";
import state from "./state";
import Passage from "./views/Passage";
import WordsRunner from "./views/WordsRunner";
74 changes: 37 additions & 37 deletions src/GlobalStyles.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
import React from 'react'
import { createGlobalStyle } from 'styled-components'
import tw, { GlobalStyles as BaseStyles } from 'twin.macro'

const CustomStyles = createGlobalStyle`
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
${tw`antialiased`}
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
#root {
background-color: cyan;
height: 100%;
}
`

const GlobalStyles = () => (
<>
<BaseStyles />
<CustomStyles />
</>
)

export default GlobalStyles
import React from "react";
import { createGlobalStyle } from "styled-components";
import tw, { GlobalStyles as BaseStyles } from "twin.macro";

const CustomStyles = createGlobalStyle`
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
${tw`antialiased`}
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
#root {
background-color: cyan;
height: 100%;
}
`;

const GlobalStyles = () => (
<>
<BaseStyles />
<CustomStyles />
</>
);

export default GlobalStyles;
20 changes: 9 additions & 11 deletions src/components/Button.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import tw, { styled } from 'twin.macro';
import 'styled-components/macro';
import React from "react";
import tw, { styled } from "twin.macro";
import "styled-components/macro";

const StyledAnchor = styled.a(() => [
`
@@ -26,13 +26,11 @@ const StyledAnchor = styled.a(() => [
active:top-0.5
hover:from-sky-400
hover:to-sky-500
`
])
`,
]);

const Button = ({value, onClick}) => {
return (
<StyledAnchor onClick={onClick}>{value}</StyledAnchor>
)
}
const Button = ({ value, onClick }) => {
return <StyledAnchor onClick={onClick}>{value}</StyledAnchor>;
};

export default Button
export default Button;
9 changes: 2 additions & 7 deletions src/components/Controls/PlayPauseButton.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useRecoilState } from "recoil";
import state from "../../state";
import Button from '../Button'
import Button from "../Button";

const PlayPauseButton = () => {
const [isPlaying, setIsPlaying] = useRecoilState(state.isPlaying);
@@ -10,12 +10,7 @@ const PlayPauseButton = () => {
setIsPlaying((isPlaying) => !isPlaying);
}, [setIsPlaying]);

return (
<Button
value={isPlaying ? "Pause" : "Play"}
onClick={onClick}
/>
);
return <Button value={isPlaying ? "Pause" : "Play"} onClick={onClick} />;
};

export default PlayPauseButton;
4 changes: 2 additions & 2 deletions src/components/Controls/ResetButton.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
import { useSetRecoilState } from "recoil";
import { VIEW_NAME_PASSAGE } from "../../constants";
import state from "../../state";
import Button from '../Button'
import Button from "../Button";

const ResetButton = () => {
const setIsPlaying = useSetRecoilState(state.isPlaying);
@@ -12,7 +12,7 @@ const ResetButton = () => {
const onClick = useCallback(() => {
setIsPlaying(false);
setOffset(0);
setViewName(VIEW_NAME_PASSAGE)
setViewName(VIEW_NAME_PASSAGE);
}, [setIsPlaying, setOffset, setViewName]);

return <Button value="Reset" onClick={onClick} />;
2 changes: 1 addition & 1 deletion src/components/Controls/RestartButton.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useSetRecoilState } from "recoil";
import state from "../../state";
import Button from '../Button'
import Button from "../Button";

const RestartButton = () => {
const setIsPlaying = useSetRecoilState(state.isPlaying);
18 changes: 4 additions & 14 deletions src/components/Controls/WpmControl.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import React from "react";
import React from "react";
import { useRecoilValue } from "recoil";
import tw from 'twin.macro';
import tw from "twin.macro";
import state from "../../state";
import WpmSlider from "./WpmSlider";

const Row = tw.div`flex gap-2 items-center w-full bg-gray-100`
const Label = tw.span`italic font-bold text-blue-800`
const Row = tw.div`flex gap-2 items-center w-full bg-gray-100`;
const Label = tw.span`italic font-bold text-blue-800`;

const WpmControl = () => {
const wpm = useRecoilValue(state.wpm);

// const onChange = useCallback(
// (ev) => {
// const evTargetValue = ev.target.value;
// const nextValue = parseInt(evTargetValue, 10);
// if (isNaN(nextValue)) return;
// setWpm(ev.target.value);
// },
// [setWpm],
// );

return (
<Row>
<WpmSlider />
12 changes: 9 additions & 3 deletions src/components/Controls/WpmSlider.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useCallback, useMemo } from "react";
import tw from 'twin.macro'
import tw from "twin.macro";
import { useRecoilState } from "recoil";
import state from "../../state";

const SCALE = 50;
const MIN = 2;
const MAX = 10;

const StyledInput = tw.input`flex-1`
const StyledInput = tw.input`flex-1`;

const WpmSlider = () => {
const [wpm, setWpm] = useRecoilState(state.wpm);
@@ -25,7 +25,13 @@ const WpmSlider = () => {
);

return (
<StyledInput type="range" min={MIN} max={MAX} value={value} onChange={onChange} />
<StyledInput
type="range"
min={MIN}
max={MAX}
value={value}
onChange={onChange}
/>
);
};

6 changes: 3 additions & 3 deletions src/components/Controls/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";
import tw from 'twin.macro';
import tw from "twin.macro";
import PlayPauseButton from "./PlayPauseButton";
import ResetButton from "./ResetButton";
import RestartButton from "./RestartButton";
import WpmControl from "./WpmControl";

const Buttons = tw.div`flex justify-between gap-2`
const Stack = tw.div`flex flex-col gap-2 bg-yellow-100 max-w-sm`
const Buttons = tw.div`flex justify-between gap-2`;
const Stack = tw.div`flex flex-col gap-2 bg-yellow-100 max-w-sm`;

const Controls = () => {
return (
6 changes: 3 additions & 3 deletions src/components/Frame.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react";
import tw from 'twin.macro';
import 'styled-components/macro';
import tw from "twin.macro";
import "styled-components/macro";

const Container = tw.div`h-full w-full flex flex-col bg-orange-200 p-2`
const Container = tw.div`h-full w-full flex flex-col bg-orange-200 p-2`;

const Frame = ({ children }) => <Container>{children}</Container>;

10 changes: 5 additions & 5 deletions src/components/Header.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import tw from 'twin.macro';
import 'styled-components/macro';
import tw from "twin.macro";
import "styled-components/macro";

const Container = tw.div`flex flex-row items-center h-12 gap-4 px-2 py-8 border-b`
const Image = tw.img`h-12`
const Text = tw.span`select-none text-xl`
const Container = tw.div`flex flex-row items-center h-12 gap-4 px-2 py-8 border-b`;
const Image = tw.img`h-12`;
const Text = tw.span`select-none text-xl`;

const Header = () => (
<Container>
16 changes: 8 additions & 8 deletions src/components/PassageText.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react';
import { useRecoilState } from 'recoil';
import state from '../state'
import TextArea from './TextArea';
import React from "react";
import { useRecoilState } from "recoil";
import state from "../state";
import TextArea from "./TextArea";

const PassageText = () => {
const [passage, setPassage] = useRecoilState(state.passage)
const [passage, setPassage] = useRecoilState(state.passage);

return <TextArea text={passage} onChange={setPassage} />
}
return <TextArea text={passage} onChange={setPassage} />;
};

export default PassageText
export default PassageText;
10 changes: 0 additions & 10 deletions src/components/PasteBox.js

This file was deleted.

Loading

0 comments on commit bb4973d

Please sign in to comment.