-
-
Save codecademydev/f493bf746532b99bc08599d6f0f0b09e to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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