create finding colours app

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "eslint.enable": false
 }

cypress/integration/finding-colors.e2e.js

@@ -0,0 +1,7 @@
+describe('Clicking right color should finish game', function() {
+  it('finds Question, clicks answers, solves game', function() {
+    cy.visit('http://localhost:3000/colors')
+
+    cy.get('[data-testid=question]')
+  })
+})

cypress/integration/simple_spec.js → cypress/integration/finding-words.e2e.js

@@ -4,26 +4,26 @@ describe('Clicking N should turn button green', function() {
 
     cy.get('.grid')
       .contains('N')
-      .should('not.have.class', 'correct')
+      .should('not.have.class', 'green')
 
     cy.get('.grid')
       .contains('N')
       .click()
-      .should('have.class', 'correct')
+      .should('have.class', 'green')
   })
 })
 
-describe('First clicking O should turn button orange (almost correct)', function() {
+describe('First clicking O should turn button orange', function() {
   it('finds O, clicks it and it should turn orange', function() {
     cy.visit('http://localhost:3000/')
 
     cy.get('.grid')
       .contains('O')
-      .should('not.have.class', 'correct')
+      .should('not.have.class', 'green')
 
     cy.get('.grid')
       .contains('O')
       .click()
-      .should('have.class', 'almost-correct')
+      .should('have.class', 'orange')
   })
 })

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --verbose=false",
     "eject": "react-scripts eject",
     "analyze": "source-map-explorer build/static/js/main.*",
     "verify": "yarn test; yarn build; yarn cypress:ci",
@@ -33,11 +33,13 @@
     "coveralls": "^3.0.3",
     "cypress": "^3.1.5",
     "howler": "^2.1.1",
+    "jest-dom": "^3.1.2",
     "prevent-double-tap-zoom": "^2.0.4",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-redux": "^6.0.1",
     "react-scripts": "^2.1.8",
+    "react-testing-library": "^6.0.0",
     "redux": "^4.0.1",
     "source-map-explorer": "^1.7.0",
     "typescript": "^3.3.3333"

src/finding-colors/App.css

@@ -0,0 +1,12 @@
+.app {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.question {
+  color: #00141a;
+  text-shadow: 2px 2px 10px white, -2px -2px 10px white;
+}

src/finding-colors/App.tsx

@@ -0,0 +1,108 @@
+import { RouteComponentProps } from '@reach/router'
+import * as React from 'react'
+import BackgroundImage from 'src/shared/components/BackgroundImage'
+import Grid from 'src/shared/components/Grid'
+import Overlay from 'src/shared/components/Overlay'
+import Button from 'src/shared/components/Button'
+import { sample } from 'src/shared/utils/general'
+import './App.css'
+import dog from './charles-deluvio-628935-unsplash.jpg'
+
+// credits image: Photo by Charles Deluvio 🇵🇭🇨🇦 on Unsplash
+
+interface Props extends RouteComponentProps {}
+
+interface State {
+  currentAnswer?: string
+  answers: Answer[]
+  question: string
+  didWin: boolean
+}
+
+interface Answer {
+  name: string
+  colorCode: string
+}
+
+const possibleAnswers = [
+  { name: 'blue', colorCode: '#124bf8' },
+  { name: 'orange', colorCode: '#ef7d00' },
+  { name: 'green', colorCode: '#75b843' },
+  { name: 'red', colorCode: '#d01534' },
+  { name: 'white', colorCode: '#ffffff' },
+  { name: 'yellow', colorCode: '#ffd332' },
+  { name: 'black', colorCode: '#00141a' },
+  { name: 'purple', colorCode: '#9b128f' }
+]
+
+class App extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    const puzzle = this.generatePuzzle()
+    this.state = {
+      ...puzzle,
+      didWin: false
+    }
+  }
+
+  public generatePuzzle = () => {
+    const answers = new Array(25).fill(null).map(a => sample(possibleAnswers))
+    const question = sample(answers).name
+    return { answers, question }
+  }
+
+  public render() {
+    return (
+      <BackgroundImage imageSrc={dog}>
+        <div className="app">
+          <h1 className="question" data-testid="question">
+            {this.state.question.toUpperCase()}
+          </h1>
+          {this.renderAnswers(this.state.answers)}
+        </div>
+        {this.state.didWin && (
+          <Overlay>
+            <p data-testid="youwon">YOU WON</p>
+            <Button onMouseDown={this.resetGame}>Play again?</Button>
+          </Overlay>
+        )}
+      </BackgroundImage>
+    )
+  }
+
+  public renderAnswers(answers: Answer[]) {
+    const { currentAnswer, question } = this.state
+    return (
+      <Grid>
+        {answers.map((answer, index) => (
+          <Grid.Item
+            key={index}
+            onMouseDown={() => this.handlePress(answer)}
+            onTouchStart={() => this.handlePress(answer)}
+            slideouttop={
+              currentAnswer === question && currentAnswer !== answer.name
+            }
+            style={{ backgroundColor: answer.colorCode }}
+            data-testid={`button-${answer.name}`}
+          />
+        ))}
+      </Grid>
+    )
+  }
+
+  public handlePress = (item: Answer) => {
+    const currentAnswer = item.name
+    const { question } = this.state
+    this.setState({ currentAnswer })
+    if (currentAnswer === question) {
+      setTimeout(() => this.setState({ didWin: true }), 1000)
+    }
+  }
+
+  public resetGame = () => {
+    const puzzle = this.generatePuzzle()
+    this.setState({ ...puzzle, currentAnswer: undefined, didWin: false })
+  }
+}
+
+export default App

src/finding-colors/__tests__/App.test.js

@@ -0,0 +1,38 @@
+import 'jest-dom/extend-expect'
+import React from 'react'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitForElement
+} from 'react-testing-library'
+import { mockMathRandom } from '../../shared/test-utils/mockMathRandom'
+import App from '../App'
+
+mockMathRandom()
+
+let question
+let getByTestId
+let utils
+
+beforeEach(() => {
+  utils = render(<App />)
+  getByTestId = utils.getByTestId
+  question = getByTestId('question')
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+it('should render App with question ORANGE', () => {
+  expect(question.textContent).toContain('ORANGE')
+})
+
+it('should show you won when pressing correct color', async () => {
+  const orangeButton = getByTestId(`button-orange`)
+  expect(orangeButton).toBeInTheDocument()
+  fireEvent.mouseDown(orangeButton)
+  const youWon = await waitForElement(() => getByTestId('youwon'))
+  expect(youWon).toBeInTheDocument()
+})

src/finding-colors/index.ts

@@ -0,0 +1 @@
+export { default } from './App'

src/finding-words/App.tsx

@@ -1,11 +1,11 @@
 import { faCog, faInfoCircle, faRedo } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { RouteComponentProps } from '@reach/router'
+import * as React from 'react'
 import Game from 'src/finding-words/components/Game/'
 import AboutPage from 'src/finding-words/pages/About'
 import NewGamePage from 'src/finding-words/pages/NewGame'
 import SettingsPage from 'src/finding-words/pages/Settings'
-import * as React from 'react'
 import BackgroundImage from 'src/shared/components/BackgroundImage'
 import BottomBar from 'src/shared/components/BottomBar'
 import Button from 'src/shared/components/Button'

src/finding-words/AppContainer.tsx

@@ -1,12 +1,12 @@
+import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
 import {
   didLoose,
   didWin,
   getRemainingSolution
 } from 'src/finding-words/model/puzzle-utils'
 import * as gameActions from 'src/finding-words/redux/game-actions'
 import { IStoreState } from 'src/finding-words/types'
-import { connect } from 'react-redux'
-import { Dispatch } from 'redux'
 import * as navigationActions from 'src/shared/redux/navigation-actions'
 import App from './App'
 
@@ -26,7 +26,7 @@ const mapDispatchToProps = (
   >
 ) => {
   const updateSolution = (solution: string[]) => {
-    // safe name to localstorage, TODO: use redux-persist for this
+    // save name to localstorage, TODO: use redux-persist for this
     localStorage.setItem('name', solution.join(''))
     dispatch(gameActions.updateSolution(solution))
   }

src/finding-words/components/Game/Game.tsx

@@ -1,10 +1,11 @@
+import * as React from 'react'
 import {
   GridType,
   IGameState,
   IGridItem,
   StatusEnum
 } from 'src/finding-words/types'
-import * as React from 'react'
+
 import Grid from 'src/shared/components/Grid'
 
 interface IAddAnswer {
@@ -38,9 +39,10 @@ const Game = ({ game, addAnswer }: IGameProps) => {
             key={`${rowIndex}-${columnIndex}`}
             onMouseDown={() => handlePress(item)}
             onTouchStart={() => handlePress(item)}
-            wrong={item.status === StatusEnum.Wrong}
-            correct={item.status === StatusEnum.Correct}
-            almostCorrect={item.status === StatusEnum.AlmostCorrect}
+            falldown={item.status === StatusEnum.Wrong}
+            red={item.status === StatusEnum.Wrong}
+            green={item.status === StatusEnum.Correct}
+            orange={item.status === StatusEnum.AlmostCorrect}
           >
             {item.letter}
           </Grid.Item>

src/index.css

@@ -1,12 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Lato:400,900');
 
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-  -webkit-user-select: none; /* disable text selection for all elements */
-}
-
 :root {
   --blauw: #025f76;
   --oranje: #ef7d00;
@@ -32,6 +25,18 @@ html {
   }
 }
 
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  -webkit-user-select: none; /* disable text selection for all elements */
+}
+
+body {
+  color: var(--wit);
+  background: var(--blauw);
+}
+
 h1 {
   font-size: 2.5em;
   margin: 1.75em 0;
@@ -48,8 +53,3 @@ p {
 a {
   color: var(--wit);
 }
-
-body {
-  color: var(--wit);
-  background: var(--blauw);
-}

src/index.tsx

@@ -34,7 +34,7 @@ ReactDOM.render(
     <Provider store={store}>
       <Router>
         <FindingWords path="/" default={true} />
-        <FindingColors path="/finding-colors" />
+        <FindingColors path="/colors" />
       </Router>
     </Provider>
   </ErrorBoundary>,

src/shared/components/BackgroundImage/BackgroundImage.css

@@ -1,20 +1,9 @@
-.background-image {
-  background-size: cover;
-  display: block;
-  filter: blur(2px);
-  min-height: 100%;
-  left: 0;
-  right: 0;
-  position: fixed;
-  transform: scale(
-    1.1
-  ); /* adds scaling to avoid white border on blurred image */
-}
-
-.background-image-children {
+.background {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
+  background-position: center;
+  background-size: cover;
 }