From 081aafa0e5b33c53f92b8f0099c96e2200c665b1 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sun, 15 Dec 2019 01:09:42 +0100
Subject: [PATCH] Add offset options

---
 src/components/Options.js      | 11 ++++++++++-
 src/components/PivotMarker.css |  5 +++++
 src/components/PivotMarker.js  | 25 ++++++++++++++++---------
 src/components/Segment.css     |  5 +++++
 src/components/Segment.js      | 13 ++++++++-----
 src/store/actions.js           |  1 +
 src/store/reducer.js           |  1 +
 src/store/selectors.js         |  6 +++++-
 8 files changed, 51 insertions(+), 16 deletions(-)

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 (
     <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>
   )
 }
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 }) => (
   <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>
+  )
+}
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 (
-    <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>
   )
 }
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