Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created June 28, 2021 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save codecademydev/f493bf746532b99bc08599d6f0f0b09e to your computer and use it in GitHub Desktop.
Save codecademydev/f493bf746532b99bc08599d6f0f0b09e to your computer and use it in GitHub Desktop.
Codecademy export
import './App.css';
import React from 'react';
import { Score } from './features/score/Score.js';
import { Board } from './features/board/Board.js';
// Add import statements below
import {useDispach} from 'react-redux'
import {setBoard} from './features/board/boardSlice'
const App = () => {
// Add dispatch variable below
const dispach = useDispach()
const startGameHandler = () => {
// Add action dispatch below
dispach(setBoard())
};
const tryAgainHandler = () => {
// Add action dispatch below
dispach(resetCards())
};
return (
<div className="App">
<Score />
<Board />
<footer className="footer">
<button onClick={startGameHandler} className="start-button">
Start Game
</button>
<button onClick={tryAgainHandler} className="try-new-pair-button">
Try New Pair
</button>
</footer>
</div>
);
};
export default App;
import React from 'react';
import { CardRow } from './cardRow/CardRow.js';
// Add import statements below
import {selectBoard} from './boardSlice'
import{ useSelector } from 'react-redux'
export const Board = () => {
// Add selected data variable and implement below
const currentBoard = useSelector(selectBoard)
const numberOfCards = currentBoard.length;
const columns = 3;
const rows = Math.floor(numberOfCards / columns);
const getRowCards = (row) => {
const rowCards = [];
for (let j = 0; j < columns; j++) {
const cardIndex = row * columns + j;
// Implement selected data below
rowCards.push(currentBoard[cardIndex]);
}
return rowCards;
};
let content = [];
for (let row = 0; row < rows; row++) {
const rowCards = getRowCards(row);
content.push(
<CardRow
key={row}
cards={rowCards}
/>
);
}
return <div className="cards-container">{content}</div>;
};
const initialState = [
{id: 0, contents: 'Provider', visible: true, matched: true},
{id: 1, contents: 'Provider', visible: true, matched: true},
{id: 2, contents: 'selector', visible: true, matched: true},
{id: 3, contents: 'selector', visible: true, matched: true},
{id: 4, contents: 'useSelector()', visible: true, matched: true},
{id: 5, contents: 'useSelector()', visible: true, matched: true},
{id: 6, contents: 'useDispatch()', visible: true, matched: true},
{id: 7, contents: 'useDispatch()', visible: true, matched: true},
{id: 8, contents: 'Pure Function', visible: true, matched: true},
{id: 9, contents: 'Pure Function', visible: true, matched: true},
{id: 10, contents: 'react-redux', visible: true, matched: true},
{id: 11, contents: 'react-redux', visible: true, matched: true},
];
export const boardReducer = (state = initialState, action) => {
switch (action.type) {
case 'board/setBoard':
let setState = [];
action.payload.forEach((element, index) =>
setState.push({id: index,
contents: element,
visible: false,
matched: false})
);
return setState;
case 'board/flipCard':
let flipState = [...state];
const cardID = action.payload;
flipState[cardID] = {...state[cardID], visible:true}
const [index1, index2] = flipState
.filter(card => card.visible)
.map(card => card.id);
if (index2 !== undefined){
const card1 = flipState[index1];
const card2 = flipState[index2];
if (card1.contents === card2.contents) {
flipState[index1] = {...card1, visible: false, matched: true}
flipState[index2] = {...card2, visible: false, matched: true}
}
}
return flipState;
case 'board/resetCards':
return state.map(card => ({...card, visible: false}));
default:
return state;
}
}
const wordPairs = [
'Provider', 'Provider',
'selector', 'selector',
'useSelector()', 'useSelector()',
'useDispatch()', 'useDispatch()',
'Pure Function', 'Pure Function',
'react-redux', 'react-redux',
]
const randomWords = () => {
let words = []
let newWordPairs = [...wordPairs]
const reps = newWordPairs.length
for (let i=0; i<reps; i++) {
const wordIndex = Math.floor(Math.random()*newWordPairs.length);
words.push(newWordPairs[wordIndex])
newWordPairs.splice(wordIndex, 1)
}
return words;
}
// action creators
export const setBoard = () => {
const words = randomWords()
return {
type: 'board/setBoard',
payload: words
}
}
export const flipCard = (id) => {
return {
type: 'board/flipCard',
payload: id
}
}
export const resetCards = (indices) => {
return {
type: 'board/resetCards'
}
}
// Add selector export statments below
export const selectBoard = state =>state.board.map(card=>({id:card.id,contents:card.contents}));
export const selectVisibleIDs = state => state.board.filter(card=>card.visible).map(card.id);
export const selectMatchedIDs = state => state.board.filter(card=>card.matched).map(card.id);
import React from 'react';
// Add import statements below
import { useSelector,useDispach } from 'react-redux'
import { selectVisibleIDs,flipCard,selectMatchedIDs,resetCards } from '../../boardSlice'
let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";
export const Card = ({ id, contents }) => {
// Add selected data and dispatch variables below
const dispach = useDispach()
const visibleIDs = useSelector(selectVisibleIDs)
const matchedIDs = useSelector(selectMatchedIDs)
// flip card action
const flipHandler = (id) => {
// Add action dispatch below
dispach(flipCards(id))
};
const tryAgainHandler = () => {
// Add action dispatch below
dispach(resetCards())
};
let cardStyle = 'resting'
let click = () => flipHandler(id);
let cardText = (
<img src={cardLogo} className="logo-placeholder" alt="Card option" />
);
// 1st if statement
// implement card id array membership check
//visibleIDs.includes(id)
if (visibleIDs.includes(id)) {
cardText = contents;
click = () => {};
}
// 2nd if statement
// implement card id array membership check
if (visibleIDs.includes(id) || matchedIDs.includes(ids)) {
cardStyle = 'matched';
}
// 3rd if statement
// implement number of flipped cards check
if (visibleIDs.length === 2) {
click = tryAgainHandler;
}
return (
<button onClick={click} className={`card ${cardStyle}`}>
{cardText}
</button>
);
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { store } from './app/store.js';
// Add import statement below
import {Provider} from 'react-redux'
ReactDOM.render(
// Implement Provider component with store below
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
import React from 'react';
// Add import statement below
import {useSelector} from 'react-redux'
import {selectMatchedIDs} from '../board/boardSlice'
export const Score = () => {
// Add selected data variable below
const cardsMatched = useSelector(selectMatchedIDs)
return (
// implement selected data inside <div>
<div className="score-container">Matched: {cardsMatched}</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment