Skip to content
Snippets Groups Projects
Commit 542b2d5a authored by jherman5's avatar jherman5
Browse files

Completed initial set up, also edited the name and settings of the app. Checkpoint 1.

parent 8976f3a2
Branches
Tags
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 17493 additions and 0 deletions
simon-says/.gitignore 0 → 100644
+ 23
− 0
View file @ 542b2d5a
# dependencies
/node_modules
# testing
/coverage
# production
/build
# environments
.env.local
.env.development.local
.env.test.local
.env.production.local
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# misc
*~
.DS_Store
simon-says/debug.log 0 → 100644
+ 63
− 0
View file @ 542b2d5a
[0826/194222.117:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.119:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.119:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.119:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.119:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/194222.120:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.725:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.726:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200235.727:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.140:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.141:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.141:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.141:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.142:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.143:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.143:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.143:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0826/200529.143:ERROR:crash_report_database_win.cc(469)] failed to stat report
simon-says/package-lock.json 0 → 100644
+ 16896
− 0
View file @ 542b2d5a
This diff is collapsed.
simon-says/package.json 0 → 100644
+ 50
− 0
View file @ 542b2d5a
{
"name": "simonsays",
"version": "0.0.1",
"description": "4 colored squares light up in a random pattern that you must memorize and repeat.",
"private": true,
"license": "UNLICENSED",
"scripts": {
"lint:js": "eslint ./src",
"lint": "run-s lint:**",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --watchAll",
"eject": "react-scripts eject"
},
"homepage": ".",
"dependencies": {
"@reduxjs/toolkit": "^1.3.5",
"@testing-library/jest-dom": "^5.11.3",
"@testing-library/react": "^10.4.8",
"@testing-library/user-event": "^12.1.1",
"classnames": "^2.2.6",
"npm-run-all": "^4.1.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"devDependencies": {
"@unlsoft/eslint-config": "file:../eslint-config"
},
"eslintConfig": {
"extends": [
"react-app",
"@unlsoft/eslint-config/react"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
simon-says/public/index.html 0 → 100644
+ 19
− 0
View file @ 542b2d5a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta
name="description"
content="4 colored squares light up in a random pattern that you must memorize and repeat."
/>
<meta name="theme-color" content="#26466D" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
<title>Simon Says</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
simon-says/public/logo.svg 0 → 100644
+ 5
− 0
View file @ 542b2d5a
<svg class="dcf-d-block dcf-h-8 dcf-w-8" focusable="false" height="76" width="76" viewBox="0 0 152 152">
<rect x="0" y="0" width="152" height="152" fill="#000000" />
<path d="M147,1H90V42h10V75.673L53.532,2.393,52.648,1H2V42H12v66H2v41H62V108H52V74.336l46.467,73.271L99.351,149H150V108H140V42h10V1Z" stroke-width="3" stroke="#ffffff" fill="#d00000">
</path>
</svg>
simon-says/public/manifest.json 0 → 100644
+ 18
− 0
View file @ 542b2d5a
{
"short_name": "Simon",
"name": "Simon Says",
"description": "4 colored squares light up in a random pattern that you must memorize and repeat.",
"icons": [
{
"src": "logo.svg",
"type": "image/svg+xml",
"sizes": "192x192 512x512",
"purpose": "any maskable"
}
],
"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#26466D",
"background_color": "#26466D"
}
simon-says/src/__snapshots__/app.test.js.snap 0 → 100644
+ 15
− 0
View file @ 542b2d5a
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`the app has one labeled button that displays the value from the store 1`] = `
<div>
<label>
Taps
:
<button
class="blue"
>
9999
</button>
</label>
</div>
`;
simon-says/src/app.js 0 → 100644
+ 14
− 0
View file @ 542b2d5a
import React from 'react';
import { Route } from 'react-router-dom';
import { Counter } from './features/counter/counter.js';
export function App() {
return (
<>
<Route exact path={'/'}>
<Counter label={'Taps'} />
</Route>
</>
);
}
simon-says/src/app.test.js 0 → 100644
+ 27
− 0
View file @ 542b2d5a
/* eslint-disable no-magic-numbers */
import React from 'react';
import { render } from '@testing-library/react';
import './testing/mockRedux.js';
import { MemoryRouter as Router } from 'react-router-dom';
import { App } from './app.js';
import {
selectValue,
} from './features/counter/counterSlice.js';
jest.mock('./features/counter/counterSlice.js', () => ({
selectValue: jest.fn().mockName('selectValue'),
}));
describe('the app', () => {
test('has one labeled button that displays the value from the store', () => {
selectValue.mockReturnValue(9999);
const { container } = render(
<Router initialEntries={['/']}>
<App />
</Router>,
);
expect(container).toMatchSnapshot();
});
});
simon-says/src/app/store.js 0 → 100644
+ 8
− 0
View file @ 542b2d5a
import { configureStore } from '@reduxjs/toolkit';
import counterSlice from '../features/counter/counterSlice.js';
export const store = configureStore({
reducer: {
[counterSlice.name]: counterSlice.reducer,
},
});
simon-says/src/features/counter/counter.js 0 → 100644
+ 37
− 0
View file @ 542b2d5a
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './counter.module.css';
import {
selectValue,
setValue,
} from './counterSlice.js';
export function Counter(props) {
const value = useSelector(selectValue);
const dispatch = useDispatch();
const classes = classNames({
[styles.red]: value % 2 === 0,
[styles.blue]: value % 2 === 1,
});
const onClick = () => dispatch(setValue({
value: value + 1,
}));
return (
<label>
{props.label}:&nbsp;
<button className={classes} onClick={onClick}>
{value}
</button>
</label>
);
}
Counter.propTypes = {
label: PropTypes.string.isRequired,
};
simon-says/src/features/counter/counter.module.css 0 → 100644
+ 7
− 0
View file @ 542b2d5a
.red {
color: rgba(255, 0, 0, 1);
}
.blue {
color: rgba(0, 0, 255, 1);
}
simon-says/src/features/counter/counter.test.js 0 → 100644
+ 44
− 0
View file @ 542b2d5a
/* 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 { Counter } from './counter.js';
import {
selectValue,
setValue,
} from './counterSlice.js';
jest.mock('./counterSlice.js', () => ({
selectValue: jest.fn().mockName('selectValue'),
setValue: jest.fn().mockName('setValue'),
}));
describe('the button', () => {
test('displays the value from the store', () => {
selectValue.mockReturnValue(9999);
render(<Counter label={'Foo'} />);
expect(screen.getByRole('button')).toHaveTextContent(/^9999$/);
});
test('is red when the value from the store is even', () => {
selectValue.mockReturnValue(9998);
render(<Counter label={'Foo'} />);
expect(screen.getByRole('button')).toHaveClass('red');
});
test('is blue when the value from the store is odd', () => {
selectValue.mockReturnValue(9999);
render(<Counter label={'Foo'} />);
expect(screen.getByRole('button')).toHaveClass('blue');
});
test('increments the value in the store when clicked', () => {
selectValue.mockReturnValue(9999);
render(<Counter label={'Foo'} />);
userEvent.click(screen.getByRole('button'));
expect(setValue).toHaveBeenCalledTimes(1);
expect(setValue).toHaveBeenCalledWith({
value: 9999 + 1,
});
});
});
simon-says/src/features/counter/counterSlice.js 0 → 100644
+ 25
− 0
View file @ 542b2d5a
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
setValue: (counter, action) => {
const {
value,
} = action.payload;
counter.value = value;
},
},
});
export default counterSlice;
export const {
setValue,
} = counterSlice.actions;
export function selectValue(state) {
return state.counter.value;
}
simon-says/src/features/counter/counterSlice.test.js 0 → 100644
+ 38
− 0
View file @ 542b2d5a
/* eslint-disable no-magic-numbers */
import counterSlice, {
selectValue,
setValue,
} from './counterSlice.js';
describe('the initial state', () => {
test('has a value of zero', () => {
const state = counterSlice.reducer(undefined, {});
expect(state).toEqual({
value: 0,
});
});
});
describe('selectValue', () => {
test('reads the stored value', () => {
const state = {
value: 9999,
};
const result = selectValue({ [counterSlice.name]: state });
expect(result).toBe(9999);
});
});
describe('setValue', () => {
test('overwrites the stored value', () => {
const state = counterSlice.reducer({
value: 8888,
}, setValue({
value: 9999,
}));
expect(state).toEqual({
value: 9999,
});
});
});
simon-says/src/index.css 0 → 100644
+ 26
− 0
View file @ 542b2d5a
body {
margin: 0;
font-family: sans-serif;
}
#root {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 1);
}
#portrait {
position: relative;
margin: auto;
min-width: 300px;
min-height: 300px;
width: 100%;
height: 100%;
max-width: 62.5vh;
background: rgba(240, 240, 240, 1);
overflow: hidden;
transform: scale(1);
}
simon-says/src/index.js 0 → 100644
+ 29
− 0
View file @ 542b2d5a
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HashRouter as Router } from 'react-router-dom';
import { App } from './app.js';
import { store } from './app/store';
import './index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<Router>
<div id="portrait">
<App />
</div>
</Router>
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
simon-says/src/serviceWorker.js 0 → 100644
+ 141
− 0
View file @ 542b2d5a
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
),
);
export function register(config) {
// eslint-disable-next-line no-restricted-syntax
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA',
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker === null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error('Error during service worker registration:', error);
});
}
const NOT_FOUND = 404;
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === NOT_FOUND ||
(contentType !== null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.',
);
});
}
export function unregister() {
// eslint-disable-next-line no-restricted-syntax
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister();
});
}
}
simon-says/src/setupTests.js 0 → 100644
+ 8
− 0
View file @ 542b2d5a
// See https://testing-library.com/docs/dom-testing-library/api-queries.
// See also https://github.com/testing-library/jest-dom.
import '@testing-library/jest-dom/extend-expect';
afterEach(() => {
jest.clearAllMocks();
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment