Add offset options

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 (
     <div>
@@ -27,6 +29,13 @@ export const Options = () => {
         value={wpm}
         onChange={debounce(val => dispatch(setWpm(val)), 50)}
       />
+      <Slider
+        title={'Offset from center'}
+        min={-50}
+        max={50}
+        value={offset}
+        onChange={val => dispatch(setOffset(val))}
+      />
     </div>
   )
 }

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;

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 }) => (
   <div>
@@ -10,12 +12,17 @@ export const PipeMarker = ({ children }) => (
   </div>
 )
 
-export const BorderMarker = ({ children }) => (
-  <div>
-    <div className={styles.border}></div>
-    <div className={styles.marker}></div>
-    {children}
-    <div className={styles.marker}></div>
-    <div className={styles.border}></div>
-  </div>
-)
+export const BorderMarker = ({ children }) => {
+  const offset = useSelector(selectOffset)
+  return (
+    <div>
+      <div className={styles.border}></div>
+      <div className={styles.wrapper}>
+        <div className={styles.marker} style={{ left: offset + '%' }}></div>
+        {children}
+        <div className={styles.marker} style={{ left: offset + '%' }}></div>
+      </div>
+      <div className={styles.border}></div>
+    </div>
+  )
+}

src/components/Segment.css

@@ -1,6 +1,11 @@
+.wrapper {
+  overflow: hidden;
+}
+
 .container {
   display: flex;
   font-size: 2.4em;
+  position: relative;
 }
 .pivot {
   color: red;

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 (
-    <div className={styles.container}>
-      <span className={styles.prefix}>{prefix}</span>
-      <span className={styles.pivot}>{pivot}</span>
-      <span className={styles.suffix}>{suffix}</span>
+    <div className={styles.wrapper}>
+      <div className={styles.container} style={{ left: offset + '%' }}>
+        <span className={styles.prefix}>{prefix}</span>
+        <span className={styles.pivot}>{pivot}</span>
+        <span className={styles.suffix}>{suffix}</span>
+      </div>
     </div>
   )
 }

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' })

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 })

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