Skip to content

Instantly share code, notes, and snippets.

@tomgp

tomgp/step1.html

Last active May 14, 2018 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomgp/857d91291c1572fd602f4da5ddfd53b4 to your computer and use it in GitHub Desktop.
Save tomgp/857d91291c1572fd602f4da5ddfd53b4 to your computer and use it in GitHub Desktop.
Download ZIP
redux tutorial steps
Raw
step1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snap</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
</head>
<body>
<h1>Redux Snap!</h1>
</body>
<script>
// ⬇ We'll write our code in here
const snapModel = {
turn: undefined, // whos turn it is
playerCards: [[],[]], // a stack of cards for each player to draw from
playedCards: [[],[]], // a stack of cards for each player to play on to
winner: undefined,
deckOfCards: [] // a place to keep the cards before they're shuffled or dealt
}
snapModel.deckOfCards = ['♥','♦','♠','♣'].reduce((deck, suit)=>{
for(let i=1; i<=13;i ++){
deck.push({
suit,
number:i
})
}
return deck;
}, []);
const START_GAME = 'start';
const PLAY_CARD = 'play card';
const SHOUT_SNAP = 'shout snap';
</script>
</html>
Raw
step2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snap</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
</head>
<body>
<h1>Redux Snap!</h1>
</body>
<script>
// ⬇ We'll write our code in here
const snapModel = {
turn: undefined, // whos turn it is
playerCards: [[],[]], // a stack of cards for each player to draw from
playedCards: [[],[]], // a stack of cards for each player to play on to
winner: undefined,
deckOfCards: [] // a place to keep the cards before they're shuffled or dealt
}
snapModel.deckOfCards = ['♥','♦','♠','♣'].reduce((deck, suit)=>{
for(let i=1; i<=13;i ++){
deck.push({
suit,
number:i
})
}
return deck;
}, []);
const START_GAME = 'start';
const PLAY_CARD = 'play card';
const SHOUT_SNAP = 'shout snap';
function snapReducer(state = snapModel, action) {
const newState = JSON.parse(JSON.stringify(state)); //make a quick copy of the state,
switch(action.type){
case START_GAME:
return newState;
case PLAY_CARD:
return newState;
case SHOUT_SNAP:
return newState;
default:
return state;
}
console.error('oops, shouldn\'t be able to get here!');
}
const {createStore} = Redux;
const gameStore = createStore(snapReducer);
gameStore.subscribe(()=>{
console.log(gameStore.getState());
})
gameStore.dispatch({type:START_GAME});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment