diff --git a/src/components/Options.js b/src/components/Options.js index bb147de..7c354c2 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -2,13 +2,15 @@ import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { debounce } from 'debounce' -import { setMaxLength, setWpm } from '../store/actions' +import { setMaxLength, setWpm, setOffset } from '../store/actions' import { Slider } from './Slider' +import { selectOffset } from '../store/selectors' export const Options = () => { const dispatch = useDispatch() const maxLength = useSelector(state => state.maxLength) const wpm = useSelector(state => state.wpm) + const offset = useSelector(selectOffset) return (
@@ -27,6 +29,13 @@ export const Options = () => { value={wpm} onChange={debounce(val => dispatch(setWpm(val)), 50)} /> + dispatch(setOffset(val))} + />
) } diff --git a/src/components/PivotMarker.css b/src/components/PivotMarker.css index 464a1fa..79fcebd 100644 --- a/src/components/PivotMarker.css +++ b/src/components/PivotMarker.css @@ -1,9 +1,14 @@ +.wrapper { + overflow: hidden; +} + .border { height: 2px; background: black; } .marker { + position: relative; height: 6px; width: 2px; background: black; diff --git a/src/components/PivotMarker.js b/src/components/PivotMarker.js index 1597a69..d7f29dc 100644 --- a/src/components/PivotMarker.js +++ b/src/components/PivotMarker.js @@ -1,6 +1,8 @@ import React from 'react' +import { useSelector } from 'react-redux' import styles from './PivotMarker.css' +import { selectOffset } from '../store/selectors' export const PipeMarker = ({ children }) => (
@@ -10,12 +12,17 @@ export const PipeMarker = ({ children }) => (
) -export const BorderMarker = ({ children }) => ( -
-
-
- {children} -
-
-
-) +export const BorderMarker = ({ children }) => { + const offset = useSelector(selectOffset) + return ( +
+
+
+
+ {children} +
+
+
+
+ ) +} diff --git a/src/components/Segment.css b/src/components/Segment.css index 5e83510..a539b67 100644 --- a/src/components/Segment.css +++ b/src/components/Segment.css @@ -1,6 +1,11 @@ +.wrapper { + overflow: hidden; +} + .container { display: flex; font-size: 2.4em; + position: relative; } .pivot { color: red; diff --git a/src/components/Segment.js b/src/components/Segment.js index 9b1a17f..2b89d2c 100644 --- a/src/components/Segment.js +++ b/src/components/Segment.js @@ -1,16 +1,19 @@ import React from 'react' import { useSelector } from 'react-redux' -import { selectPivotizedSegment } from '../store/selectors' +import { selectPivotizedSegment, selectOffset } from '../store/selectors' import styles from './Segment.css' export const Segment = () => { const [prefix, pivot, suffix] = useSelector(selectPivotizedSegment) + const offset = useSelector(selectOffset) return ( -
- {prefix} - {pivot} - {suffix} +
+
+ {prefix} + {pivot} + {suffix} +
) } diff --git a/src/store/actions.js b/src/store/actions.js index 92e4711..d886f99 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -11,6 +11,7 @@ export const setMaxLength = length => ({ payload: length }) export const setWpm = wpm => ({ type: 'SET_WPM', payload: wpm }) +export const setOffset = offset => ({ type: 'SET_OFFSET', payload: offset }) export const start = () => ({ type: 'START' }) export const stop = () => ({ type: 'STOP' }) export const pause = () => ({ type: 'PAUSE' }) diff --git a/src/store/reducer.js b/src/store/reducer.js index 0b65f1f..d703d58 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -34,6 +34,7 @@ const reducer = { curIdx: 0 }), SET_WPM: (state, payload) => ({ ...state, wpm: payload }), + SET_OFFSET: (state, payload) => ({ ...state, offset: payload }), START: state => ({ ...state, running: true }), STOP: state => ({ ...state, running: false, curIdx: 0 }), PAUSE: state => ({ ...state, running: false }) diff --git a/src/store/selectors.js b/src/store/selectors.js index 0b95322..fd36522 100644 --- a/src/store/selectors.js +++ b/src/store/selectors.js @@ -84,6 +84,10 @@ export const selectPrevSentence = createSelector( export const selectHasNextSentence = createSelector(selectNextSentence, Boolean) export const selectHasPrevSentence = createSelector(selectPrevSentence, Boolean) -export const selectRunning = state => state.running export const selectWpm = state => state.wpm export const selectInterval = createSelector(selectWpm, wpm => 60000 / wpm) +export const selectOffset = state => state.offset + +// player + +export const selectRunning = state => state.running