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 }) => (
-
-)
+export const BorderMarker = ({ children }) => {
+ const offset = useSelector(selectOffset)
+ return (
+
+ )
+}
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