add RoundTitle component (#33)

21-23 · Nov 4, 2017 · 412db49 · 412db49
1 parent f520077
commit 412db49
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 1 deletion.
diff --git a/.storybook/stories.js b/.storybook/stories.js
@@ -4,3 +4,4 @@ require('../src/components/SelectorInput/SelectorInput.story.js');
 require('../src/components/MarkupRenderer/MarkupRenderer.story.js');
 require('../src/components/BannedCharacters/BannedCharacters.story.js');
 require('../src/components/Scoreboard/Scoreboard.story.js');
+require('../src/components/PuzzleTitle/PuzzleTitle.story.js');
diff --git a/scenarios/game/index.js b/scenarios/game/index.js
@@ -8,6 +8,8 @@ import { setPuzzle } from './puzzle';
 countdown();
 
 setPuzzle({
+    title: 'Signing Up',
+    index: 1,
     markup :`
     <main data-qdid="1">
         <input data-qdid="2" type="text"></input>

diff --git a/src/components/PuzzleTitle/PuzzleTitle.js b/src/components/PuzzleTitle/PuzzleTitle.js
@@ -0,0 +1,34 @@
+import { h } from 'preact';
+
+const textShadow = '0 1px 4px rgba(0, 0, 0, 0.15)';
+const margin = '0 0.3em 0 0;';
+
+const PuzzleTitle = ({ index, title }) => (
+    <p>
+        <span className="puzzle-index">#{index}</span>
+        <span className="puzzle-title">{ title }</span>
+
+        <style jsx>{`
+            p {
+                font-size: 1.5rem;
+            }
+
+            .puzzle-index {
+                color: #badece;
+                text-shadow: ${textShadow};
+                margin: ${margin};
+                vertical-align: middle;
+            }
+
+            .puzzle-title {
+                color: #f8d940;
+                font-weight: bold;
+                text-shadow: ${textShadow};
+                margin: ${margin};
+                vertical-align: middle;
+            }
+        `}</style>
+    </p>
+);
+
+export { PuzzleTitle };
diff --git a/src/components/PuzzleTitle/PuzzleTitle.story.js b/src/components/PuzzleTitle/PuzzleTitle.story.js
@@ -0,0 +1,9 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+
+import { PuzzleTitle } from './PuzzleTitle';
+
+storiesOf('PuzzleTitle', module)
+    .add('default', () => (
+        <PuzzleTitle index={1} title="Signing up"/>
+    ));
diff --git a/src/game/components/RoundLayout.js b/src/game/components/RoundLayout.js
@@ -8,6 +8,7 @@ const RoundLayout = ({ children }) => {
 
     return (
         <div className="app-root">
+            { components.PuzzleTitle }
             { components.BannedCharacters }
             <div className="panel">
                 <div className="selector-input-container">

diff --git a/src/game/containers/RoundContainer.js b/src/game/containers/RoundContainer.js
@@ -9,13 +9,20 @@ import { MarkupRenderer } from '../../components/MarkupRenderer/MarkupRenderer';
 import { withDotSelectionIndicator } from '../../components/MarkupRenderer/with-dot-selection-indicator';
 import { Line } from '../../components/MarkupRenderer/Line';
 import { BannedCharacters } from '../../components/BannedCharacters/BannedCharacters';
+import { PuzzleTitle } from '../../components/PuzzleTitle/PuzzleTitle';
 
 import * as RoundPhase from '../../shared/constants/round-phase';
 import { DURATION } from '../../shared/constants/round';
 
 import { phase } from '../../shared/selectors/round-phase-selectors';
 import { countdown } from '../../shared/selectors/countdown-selectors';
-import { expectedSelection, bannedChars, markup} from '../../shared/selectors/puzzle-selectors';
+import {
+    expectedSelection,
+    bannedChars,
+    markup,
+    index as puzzleIndex,
+    title as puzzleTitle,
+} from '../../shared/selectors/puzzle-selectors';
 import { selector, selection } from '../selectors/solution-selectors';
 import { highlightedBannedChars } from '../selectors/round-selectors';
 
@@ -31,8 +38,14 @@ const PureRound = ({
     actualSelection,
     bannedChars,
     highlightedBannedChars,
+    puzzleIndex,
+    puzzleTitle,
 }) => roundPhase !== RoundPhase.IN_PROGRESS && roundPhase !== RoundPhase.FINISHED ? null :
     <RoundLayout>
+        <PuzzleTitle
+            index={puzzleIndex}
+            title={puzzleTitle}
+        />
         <SelectorInput
             value={selector}
             disabled={roundPhase === RoundPhase.FINISHED}
@@ -62,6 +75,8 @@ const RoundContainer = connect(createStructuredSelector({
     selector,
     bannedChars,
     highlightedBannedChars,
+    puzzleIndex,
+    puzzleTitle,
 }), {
     setSelector,
 })(PureRound);

diff --git a/src/shared/reducers/puzzle-reducer.js b/src/shared/reducers/puzzle-reducer.js
@@ -4,13 +4,17 @@ const initialState = {
     markup: '',
     bannedChars: [],
     expectedSelection: [],
+    title: '',
+    index: -1,
 };
 
 export function puzzleReducer(state = initialState, action) {
     switch (action.type) {
         case Actions.RECEIVE_PUZZLE:
             return {
                 ...state,
+                title: action.payload.title,
+                index: action.payload.index,
                 markup: action.payload.markup,
                 bannedChars: action.payload.bannedChars,
                 expectedSelection: action.payload.expectedSelection,

diff --git a/src/shared/selectors/puzzle-selectors.js b/src/shared/selectors/puzzle-selectors.js
@@ -1,6 +1,8 @@
 import { createSelector } from 'reselect';
 
 export const puzzle = state => state.puzzle;
+export const title = createSelector([puzzle], puzzle => puzzle.title);
+export const index = createSelector([puzzle], puzzle => puzzle.index);
 export const bannedChars = createSelector([puzzle], puzzle => puzzle.bannedChars);
 export const markup = createSelector([puzzle], puzzle => puzzle.markup);
 export const expectedSelection = createSelector([puzzle], puzzle => puzzle.expectedSelection);