From 2c123015fcde0d414e541c553287fe69fb682f39 Mon Sep 17 00:00:00 2001
From: AntoineGonzalez <45924026+AntoineGonzalez@users.noreply.github.com>
Date: Thu, 22 Sep 2022 13:46:27 +0200
Subject: [PATCH 1/3] feature: add clear game button

---
 src/tests/components/App.test.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/tests/components/App.test.tsx

diff --git a/src/tests/components/App.test.tsx b/src/tests/components/App.test.tsx
new file mode 100644
index 0000000..b1bc945
--- /dev/null
+++ b/src/tests/components/App.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import App from '../../App'
+import wrapWithReduxProvider from '../utils/reduxProviderWrapper'
+
+describe('components/App.tsx', () => {
+  it('starts the game on start game button click and stops the game on stop game button click', async () => {
+    render(wrapWithReduxProvider(<App />))
+
+    const startGameBtn = screen.getByRole('button', { name: 'Start' })
+    await userEvent.click(startGameBtn)
+    expect(startGameBtn).toHaveTextContent('Stop')
+    await userEvent.click(startGameBtn)
+    expect(startGameBtn).toHaveTextContent('Start')
+  })
+})

From 6df7b6612b0caba8a82237fa9198bdb7b1eee556 Mon Sep 17 00:00:00 2001
From: AntoineGonzalez <45924026+AntoineGonzalez@users.noreply.github.com>
Date: Thu, 22 Sep 2022 13:46:45 +0200
Subject: [PATCH 2/3] feature: add clear game button

---
 src/App.tsx                               |  9 +++++++
 src/store/slices/gameSlice.ts             | 12 +++++++--
 src/tests/components/Grid.test.tsx        | 11 --------
 src/tests/components/PatternList.test.tsx |  2 +-
 src/tests/unit/gameSlice.test.ts          | 32 +++++++++++++++++++++++
 5 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 62f6e52..71a657f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,6 +36,10 @@ function App () {
     dispatch(gameSlice.actions.startGame())
   }
 
+  function handleClearGame () {
+    dispatch(gameSlice.actions.clearGame())
+  }
+
   function handleStopGame () {
     dispatch(gameSlice.actions.stopGame())
   }
@@ -48,6 +52,11 @@ function App () {
         </Header>
         <List>
           <li>Nombre d&apos;itérations : {iterationCounter}</li>
+          <li>
+            <Button onClick={handleClearGame} role="button">
+              Reset
+            </Button>
+          </li>
           <li>
             <Button onClick={gameIsRunning ? handleStopGame : handleStarGame} role="button">
               {gameIsRunning ? 'Stop' : 'Start'}
diff --git a/src/store/slices/gameSlice.ts b/src/store/slices/gameSlice.ts
index f235c30..4474a9a 100644
--- a/src/store/slices/gameSlice.ts
+++ b/src/store/slices/gameSlice.ts
@@ -66,7 +66,7 @@ const getCellNeighboursValues = (grid: boolean[][], { x, y }: Coord) => {
   ]
 }
 
-function computeNextGrid (grid: boolean[][]): boolean[][] {
+const computeNextGrid = (grid: boolean[][]): boolean[][] => {
   return grid.map((line, lineIndex) =>
     line.map((cellIsAlive, colIndex) => {
       const alivedNeighboursCount = getCellNeighboursValues(
@@ -88,7 +88,7 @@ function computeNextGrid (grid: boolean[][]): boolean[][] {
   )
 }
 
-function insertPattern (grid: boolean[][], pattern: Pattern, coord: Coord): boolean[][] {
+const insertPattern = (grid: boolean[][], pattern: Pattern, coord: Coord): boolean[][] => {
   const patternWidth = pattern.size.width
   const patternHeight = pattern.size.height
   const availableWidth = grid[0].length - coord.x
@@ -158,6 +158,14 @@ export const gameSlice = createSlice({
       ...state,
       isRunning: true
     }),
+    clearGame: (state) => ({
+      ...state,
+      grid: Array.from(Array(state.grid.length).keys()).map(() => {
+        return Array.from(Array(state.grid[0].length).keys()).map(() => false)
+      }),
+      isRunning: false,
+      iterationCounter: 0
+    }),
     initialize: (state, action: PayloadAction<GridProps>) => ({
       ...state,
       grid: Array.from(Array(action.payload.height).keys()).map(() => {
diff --git a/src/tests/components/Grid.test.tsx b/src/tests/components/Grid.test.tsx
index ff179a3..133910a 100644
--- a/src/tests/components/Grid.test.tsx
+++ b/src/tests/components/Grid.test.tsx
@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react'
 import Grid from '../../components/Grid'
 import wrapWithReduxProvider from '../utils/reduxProviderWrapper'
 import userEvent from '@testing-library/user-event'
-import App from '../../App'
 
 describe('components/Grid.tsx', () => {
   it('displays a grid with desired dimensions', () => {
@@ -37,14 +36,4 @@ describe('components/Grid.tsx', () => {
     await userEvent.click(cell)
     expect(cell).toHaveStyle('background-color:grey')
   })
-
-  it('starts the game on start game button click and stops the game on stop game button click', async () => {
-    render(wrapWithReduxProvider(<App />))
-
-    const startGameBtn = screen.getByRole('button', { name: 'Start' })
-    await userEvent.click(startGameBtn)
-    expect(startGameBtn).toHaveTextContent('Stop')
-    await userEvent.click(startGameBtn)
-    expect(startGameBtn).toHaveTextContent('Start')
-  })
 })
diff --git a/src/tests/components/PatternList.test.tsx b/src/tests/components/PatternList.test.tsx
index d13e892..12c4bd9 100644
--- a/src/tests/components/PatternList.test.tsx
+++ b/src/tests/components/PatternList.test.tsx
@@ -3,7 +3,7 @@ import wrapWithReduxProvider from '../utils/reduxProviderWrapper'
 import userEvent from '@testing-library/user-event'
 import PatternList from '../../components/PatternList'
 
-describe('components/Grid.tsx', () => {
+describe('components/PatternList.tsx', () => {
   it('displays stored patterns', () => {
     render(wrapWithReduxProvider(<PatternList />))
 
diff --git a/src/tests/unit/gameSlice.test.ts b/src/tests/unit/gameSlice.test.ts
index c8c9deb..36b6a40 100644
--- a/src/tests/unit/gameSlice.test.ts
+++ b/src/tests/unit/gameSlice.test.ts
@@ -66,6 +66,38 @@ describe('store/slices/gameSlice', () => {
     expect(actual).toStrictEqual(expected)
   })
 
+  it('reduces the clearGame action', () => {
+    const { actions, reducer } = gameSlice
+
+    const initialState = {
+      isRunning: true,
+      iterationCounter: 2,
+      grid: gridsFixtures.drawSpaceShipPattern.expected,
+      selectedPattern: {
+        id: 3,
+        name: 'Space Ship',
+        size: {
+          width: 3,
+          height: 3
+        },
+        content: [
+          [false, true, false],
+          [false, false, true],
+          [true, true, true]
+        ]
+      }
+    }
+
+    const actual = reducer(initialState, actions.clearGame())
+
+    expect(actual).toStrictEqual({
+      ...initialState,
+      isRunning: false,
+      iterationCounter: 0,
+      grid: gridsFixtures.drawSpaceShipPattern.initial
+    })
+  })
+
   it('reduces state to start the game', () => {
     const { actions, reducer } = gameSlice
 

From f02650f821a74db0a73eb7529a1214a2c5744e9d Mon Sep 17 00:00:00 2001
From: AntoineGonzalez <45924026+AntoineGonzalez@users.noreply.github.com>
Date: Fri, 23 Sep 2022 15:03:48 +0200
Subject: [PATCH 3/3] feature: add grid size inputs

---
 src/App.tsx                       | 90 ++++++++++++++++++++++++++++---
 src/components/Cell.tsx           |  8 +--
 src/components/Grid.tsx           |  4 +-
 src/hooks/useDebounce.ts          | 25 +++++++++
 src/store/slices/gameSlice.ts     |  2 +
 src/tests/components/App.test.tsx | 67 ++++++++++++++++++++++-
 6 files changed, 183 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/useDebounce.ts

diff --git a/src/App.tsx b/src/App.tsx
index 71a657f..868c272 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,21 +5,26 @@ import gameSlice, { selectIsRunning, selectIterationCounter } from './store/slic
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import PatternList from './components/PatternList'
+import useDebounce from './hooks/useDebounce'
 
 function App () {
   const dispatch = useDispatch()
   const gameIsRunning = useSelector(selectIsRunning)
   const iterationCounter = useSelector(selectIterationCounter)
-  const [intervalId, setIntervalId] = useState<number | null>(null)
+  const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null)
+  const [widthInput, setWidthInput] = useState(50)
+  const [heightInput, setHeightInput] = useState(50)
+  const [width, setWidth] = useState(50)
+  const [height, setHeight] = useState(50)
 
   useEffect(() => {
     if (gameIsRunning) {
       const id = setInterval(
         () => dispatch(gameSlice.actions.tick()),
-        1000
+        500
       )
 
-      setIntervalId(id as unknown as number)
+      setIntervalId(id)
     } else if (intervalId !== null) {
       clearInterval(intervalId)
       setIntervalId(null)
@@ -32,6 +37,13 @@ function App () {
     }
   }, [gameIsRunning])
 
+  useDebounce(() => {
+    setWidthInput(validateWidth(widthInput))
+    setHeightInput(validateHeight(heightInput))
+    setWidth(validateWidth(widthInput))
+    setHeight(validateHeight(heightInput))
+  }, 500, [widthInput, heightInput])
+
   function handleStarGame () {
     dispatch(gameSlice.actions.startGame())
   }
@@ -44,12 +56,66 @@ function App () {
     dispatch(gameSlice.actions.stopGame())
   }
 
+  const handleWidthChange = (newWidth: number) => {
+    setWidthInput(isNaN(newWidth) ? 0 : newWidth)
+  }
+
+  const handleHeightChange = (newHeight: number) => {
+    setHeightInput(isNaN(newHeight) ? 0 : newHeight)
+  }
+
+  const validateDimension = (dimension: number) => {
+    if (dimension < 4) {
+      return 4
+    }
+
+    if (dimension > 100) {
+      return 100
+    }
+
+    return dimension
+  }
+
+  const validateWidth = (widthInput: number) => {
+    return validateDimension(widthInput)
+  }
+
+  const validateHeight = (heightInput: number) => {
+    return validateDimension(heightInput)
+  }
+
   return (
     <AppContainer>
       <Aside>
         <Header>
           Jeu de la vie
         </Header>
+        <ScaleFieldset>
+          <legend>Dimensions</legend>
+          <input
+            data-testid="grid-width-input"
+            type="number"
+            value={widthInput}
+            step='1'
+            min='4'
+            max='100'
+            onChange={
+              (event) => handleWidthChange(parseInt(event.target.value))
+            }
+          />
+          <ScaleSeparator>x</ScaleSeparator>
+          <input
+            data-testid="grid-height-input"
+            type="number"
+            value={heightInput}
+            step='1'
+            min='4'
+            max='100'
+            onChange={
+              (event) => handleHeightChange(parseInt(event.target.value))
+            }
+          />
+        </ScaleFieldset>
         <List>
           <li>Nombre d&apos;itérations : {iterationCounter}</li>
           <li>
@@ -66,7 +132,7 @@ function App () {
         <PatternList></PatternList>
       </Aside>
       <Container>
-        <Grid width={10} height={10} />
+        <Grid width={width} height={height} />
       </Container>
     </AppContainer>
   )
@@ -78,19 +144,29 @@ const Container = styled.div`
 `
 const Header = styled.header`
   margin-bottom: 1.5em;
+  padding: 1em;
+  border-bottom: solid 1px grey;
 `
 const AppContainer = styled.div`
   display: flex;
 `
 const Aside = styled.aside`
-  width: 15%;
-  padding: 1.5em 0.5em;
+  width: 300px;
   text-align: center;
   border-right: solid 1px grey;
 `
+const ScaleSeparator = styled.span`
+  margin: 0 1em;
+`
+const ScaleFieldset = styled.fieldset`
+  border: none;
+  padding-top: 1em;
+  margin-bottom: 1em;
+`
 export const List = styled.ul`
   list-style-type: none;
-  padding: 0;
+  padding: 1em;
+  margin: 0 0 1em 0em;
 `
 const Button = styled.button`
   margin-top: 1em
diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
index fd8eaaa..6c117c5 100644
--- a/src/components/Cell.tsx
+++ b/src/components/Cell.tsx
@@ -1,15 +1,17 @@
 import styled from 'styled-components'
 type Props = {
   isAlive: boolean
+  gridWidth: number
+  gridHeight: number
 }
 
 const Cell = styled.div<Props>`
-  width: 1em;
-  height: 1em;
+  width: ${({ gridWidth, gridHeight }) => 900 / Math.max(gridWidth, gridHeight)}px;
+  height: ${({ gridWidth, gridHeight }) => 900 / Math.max(gridWidth, gridHeight)}px;
   margin: auto;
   border: 1px solid black;
   box-sizing: border-box;
-  background-color: ${(props) => props.isAlive ? 'white' : 'grey'};
+  background-color: ${({ isAlive }) => isAlive ? 'white' : 'grey'};
 `
 
 export default Cell
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 1051650..5ffda21 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -42,6 +42,8 @@ const Grid = ({ width, height }: GridProps) => {
                 <Cell
                   id={`cell-${colIndex}-${lineIndex}`}
                   key={`cell-${colIndex}-${lineIndex}`}
+                  gridWidth={grid[0].length}
+                  gridHeight={grid.length}
                   isAlive={isAlive}
                   onClick={() => handleCellClick({ x: colIndex, y: lineIndex })}
                   role="gridcell"
@@ -62,8 +64,6 @@ type WrapperProps = {
 }
 
 const Wrapper = styled.div<WrapperProps>`
-  width:${({ width }) => width * 1}em;
-  height:${({ height }) => height * 1}em;
   margin: auto;
   margin-bottom: 1.5em;
   border: solid 1px black;
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..c9ac45f
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+function useDebounce (func: () => void, delay: number, deps: unknown[]) {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (timeoutId === null) {
+      func()
+    } else {
+      clearTimeout(timeoutId)
+    }
+
+    setTimeoutId(
+      setTimeout(func, delay)
+    )
+
+    return () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, deps)
+}
+
+export default useDebounce
diff --git a/src/store/slices/gameSlice.ts b/src/store/slices/gameSlice.ts
index 4474a9a..bf76498 100644
--- a/src/store/slices/gameSlice.ts
+++ b/src/store/slices/gameSlice.ts
@@ -168,6 +168,8 @@ export const gameSlice = createSlice({
     }),
     initialize: (state, action: PayloadAction<GridProps>) => ({
       ...state,
+      isRunning: false,
+      iterationCounter: 0,
       grid: Array.from(Array(action.payload.height).keys()).map(() => {
         return Array.from(Array(action.payload.width).keys()).map(() => false)
       })
diff --git a/src/tests/components/App.test.tsx b/src/tests/components/App.test.tsx
index b1bc945..5d3f495 100644
--- a/src/tests/components/App.test.tsx
+++ b/src/tests/components/App.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import App from '../../App'
 import wrapWithReduxProvider from '../utils/reduxProviderWrapper'
@@ -13,4 +13,69 @@ describe('components/App.tsx', () => {
     await userEvent.click(startGameBtn)
     expect(startGameBtn).toHaveTextContent('Start')
   })
+
+  it('clears the game on clear button click', async () => {
+    render(wrapWithReduxProvider(<App />))
+
+    const cells = screen.getAllByRole('gridcell')
+
+    // Change grid content with stable pattern
+    for (let x = 0; x < 2; x++) {
+      for (let y = 0; y < 2; y++) {
+        await userEvent.click(cells[x + y * 49])
+      }
+    }
+
+    // Start game iteration
+    const startGameBtn = screen.getByRole('button', { name: 'Start' })
+    await userEvent.click(startGameBtn)
+
+    // Await first iteration to be process
+    await waitFor(() =>
+      expect(
+        screen.getByText('Nombre d\'itérations : 1')
+      ).toBeInTheDocument()
+    )
+
+    // Reset game
+    const clearGameBtn = screen.getByRole('button', { name: 'Reset' })
+    await userEvent.click(clearGameBtn)
+
+    // Expect iteration to be reset & game to be stop
+    expect(screen.getByText('Nombre d\'itérations : 0')).toBeInTheDocument()
+    expect(startGameBtn).toHaveTextContent('Start')
+  })
+
+  it('changes grid size with width and height inputs', async () => {
+    render(wrapWithReduxProvider(<App />))
+
+    const widthInput = screen.getByTestId('grid-width-input')
+    const heightInput = screen.getByTestId('grid-height-input')
+
+    await userEvent.clear(widthInput)
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('grid-width-input')).toHaveValue(0)
+    })
+
+    await userEvent.type(widthInput, '10')
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('grid-width-input')).toHaveValue(10)
+    })
+
+    await userEvent.clear(heightInput)
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('grid-height-input')).toHaveValue(0)
+    })
+
+    await userEvent.type(heightInput, '10')
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('grid-height-input')).toHaveValue(10)
+      expect(screen.getAllByRole('row')).toHaveLength(10)
+      expect(screen.getAllByRole('gridcell')).toHaveLength(100)
+    })
+  })
 })