diff --git a/simon-says/debug.log b/simon-says/debug.log index afc1ca05e8c629a24d2ac5b4e444b3143256dde3..22f99d59edbc04dd8f3074cd2deaa21873d0b0d0 100644 --- a/simon-says/debug.log +++ b/simon-says/debug.log @@ -189,3 +189,25 @@ [0902/132649.421:ERROR:crash_report_database_win.cc(469)] failed to stat report [0902/132649.421:ERROR:crash_report_database_win.cc(469)] failed to stat report [0902/132649.422:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.529:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.537:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.538:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report +[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css index 4f82a949694f0301a750e03ecbdede6925af3b65..6036fb919e91d4a3c234b999c40e81c36eb01caa 100644 --- a/simon-says/src/features/patternGen/buttonLayout.css +++ b/simon-says/src/features/patternGen/buttonLayout.css @@ -12,47 +12,52 @@ background-color: #f44336; border: none; width: 50%; - height: 20em; + height: 15em; } .redlit{ background-color: #f44336; border: #ffffff; width: 50%; - height: 20em; + height: 15em; } .bluebutton{ background-color: #008CBA; border: none; width: 50%; - height: 20em; + height: 15em; } .bluelit{ background-color: #008CBA; border: #ffffff; width: 50%; - height: 20em; + height: 15em; } .yellowbutton{ background-color: #ffff00; border: none; width: 50%; - height: 20em; + height: 15em; } .yellowlit{ background-color: #ffff00; border: #ffffff; width: 50%; - height: 20em; + height: 15em; } .greenbutton{ background-color: #4CAF50; border: none; width: 50%; - height: 20em; + height: 15em; } .greenlit{ background-color: #4CAF50; border: #ffffff; width: 50%; - height: 20em; + height: 15em; } +.start{ + background-color: #0fc0fc; + width: 100%; + font-size:3em; +} \ No newline at end of file diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js index 12b22cc2e4ea0369d865ddf1da844fb7a41848ba..cca7b4cb6ae9098377310fa893d6c03762c378e6 100644 --- a/simon-says/src/features/patternGen/patternGeneration.js +++ b/simon-says/src/features/patternGen/patternGeneration.js @@ -17,20 +17,20 @@ export function Pattern() { const score = useSelector(selectScore); const patternList = useSelector(selectPatternList); const redclasses = classNames({ - ['redbutton']: borderState === 0, - ['redlit']: borderState === 1, + ['redbutton']: !borderState, + ['redlit']: borderState, }); const blueclasses = classNames({ - ['bluebutton']: borderState === 0, - ['bluelit']: borderState ===1, + ['bluebutton']: !borderState, + ['bluelit']: borderState, }); const yellowclasses = classNames({ - ['yellowbutton']: borderState === 0, - ['yellowlit']: borderState ===1, + ['yellowbutton']: !borderState, + ['yellowlit']: borderState, }); const greenclasses = classNames({ - ['greenbutton']: borderState === 0, - ['greenlit']: borderState ===1, + ['greenbutton']: !borderState, + ['greenlit']: borderState, }); return ( <main> @@ -38,10 +38,10 @@ export function Pattern() { <blockquote class = 'title'> Simon Says </blockquote> - <blockquote class = 'score'> + <blockquote title = 'score' class = 'score'> Score: {score} </blockquote> - <button class = {redclasses}> + <button title = 'red' class = {redclasses}> </button> <button class = {blueclasses}> </button> @@ -49,6 +49,9 @@ export function Pattern() { </button> <button class = {greenclasses}> </button> + <button class = 'start'> + Start + </button> </div> </main> ); diff --git a/simon-says/src/features/patternGen/patternGeneration.test.js b/simon-says/src/features/patternGen/patternGeneration.test.js new file mode 100644 index 0000000000000000000000000000000000000000..81050b7cb2e67493bc3105e8dddd589b7b1fc0c4 --- /dev/null +++ b/simon-says/src/features/patternGen/patternGeneration.test.js @@ -0,0 +1,41 @@ +/* eslint-disable no-magic-numbers */ + +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '../../testing/mockRedux.js'; + +import { Pattern } from './patternGeneration.js'; + +import { + selectBorderState, + selectPatternList, + selectScore, +} from './patternSlice.js' +jest.mock('./patternSlice.js', () =>({ + selectBorderState: jest.fn().mockName('selectBorderState'), + selectPatternList: jest.fn().mockName('selectPatternList'), + selectScore: jest.fn().mockName('selectScore'), +})); + +describe('red button', () => { + test('has a white border if borderState is true', () => { + selectBorderState.mockReturnValue(true); + render(<Pattern button={'Foo'}/>); + expect(screen.getByTitle('red')).toHaveClass('redlit'); + }); +}); +describe('the score counter', () => { + test('displays the correct score', () => { + selectScore.mockReturnValue(100); + render(<Pattern></Pattern>); + expect(screen.getByTitle('score')).toHaveTextContent('Score: 100'); + }); +}); +describe('the pattern list', () => { + test('works', () => { + const list = selectPatternList.mockReturnValue([0, 1, 3]); + render(<Pattern></Pattern>); + expect( list === [0,1,3]); + }); +}); \ No newline at end of file diff --git a/simon-says/src/features/patternGen/patternSlice.js b/simon-says/src/features/patternGen/patternSlice.js index 08ea7f536d0e8bf97cc834e0126c78b17df62e51..e11db47df1e5bcf8034b7df3ed051dbfa8a60cd7 100644 --- a/simon-says/src/features/patternGen/patternSlice.js +++ b/simon-says/src/features/patternGen/patternSlice.js @@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'; const patternSlice = createSlice({ name: 'pattern', initialState: { - border: 0, + borderState: false, patternList: [], score: 0, }, @@ -16,7 +16,7 @@ export const { } = patternSlice.actions; export function selectBorderState(state) { - return state.pattern.border; + return state.pattern.borderState; } export function selectPatternList(state) {