npx create-react-app whack-a-hippie
npm i lodash seamless-immutable redux --save
cd whack-a-hippie

//reducer.js

//Immutable will allow our Redux state to become an immutable solution, in other words, every update creates new value, leaving the old object or value unchanged
import Immutable from 'seamless-immutable';
//Lodash is a JavaScript library which provides utility functions for common programming tasks, such as simplifying strings, numbers, arrays, functions and objects. 
import _ from 'lodash';

//Sets the initial states of our Game
const initialState = Immutable({
  //initial state of the game is new game/unstarted
  gameState: 'unstarted',          
  //initial number of hippies(screens) to display is 10 and the hippies will be hidden(in)                  
  hippies: _.times(10, i => ({ index: i, hippieState: 'in' })),
  //initial/default time of our game is 3000ms or 30 seconds
  gameLength: 30000,
});

//exports our main reducer function and passes the actions and initialState props to it
export default function reducer(state=initialState, action) {

//actions can be thought of as an event (usually with a type) that happens in the application.

  //we will switch between the game states using action.type to see when it needs to update the immutable state
  switch (action.type) {
    //case if the game starts, we start the game with a new round
    case 'GAMESTATE_START': 
      return state
        //game has started
        .set('gameState', 'started')
        //score is equal to 0
        .set('score', 0)
        //timer is initialized
        .set('time', state.gameLength)
        //the game will store the High Score acheived by the player in the Local Browser Storage
        .set('highScore', localStorage.getItem('highScore') || 0)
        //will initialize the display of the hippies on randomized basis
        .set('hippies', state.hippies.map(hippie => hippie.set('hippieState', 'in')));

    //case if the game starts, then the timer will count down 1000ms (1s)
    case 'TICK': 
      return state.update('time', time => time - 1000);

    //if the game ends, it updates the High Score stored in the Local Browser Storage
    case 'GAMESTATE_END': 
      if (state.score > state.highScore) {
        localStorage.setItem('highScore', state.score);
      }
      //it will also end the game by updating the state to game over and hiding the hippies again
      return state
        .set('gameState', 'gameover')
        .set('hippies', state.hippies.map(hippie => hippie.set('hippieState', 'in')));

    //case if the hippies' state is 'out', then they will be displayed
    case 'HIPPIE_COMES_OUT':
      return state
        .setIn(['hippies', action.index, 'hippieState'], 'out');

    //case if the hippies' state is 'in', then they will be hidden again
    case 'HIPPIE_GOES_IN':
      return state
        .setIn(['hippies', action.index, 'hippieState'], 'in');

    ////case if the hippies' are being hit with cursor, then the score will update with 1
    case 'HIPPIE_HIT':
      return state
        .setIn(['hippies', action.index, 'hippieState'], 'hit')
        .update('score', score => score + 1);

    //default state is initialState
    default:
      return state;
  }
}

//store.js

//Create a new Redux store which will tie together the state, actions, and reducers that make up our app. 
import { createStore } from 'redux';
//Lodash is a JavaScript library which provides utility functions for common programming tasks, such as simplifying strings, numbers, arrays, functions and objects. 
import _ from 'lodash';
//Our reducer file contains our new state functions
import reducer from './reducer.js';

const gameLength = 30000, //will set our game lenght to 30s
      secondLength = 1000, // this will set the time it takes for a new hippie to pop out, ie. 1s
      hippiesPerSecondLow = 1, // minimum amount of hippies per second
      hippiesPerSecondHigh = 5, // maximum amount of hippies per second
      hippieOutLengthLow = 1000, //minimum time a hippie can stay on screen
      hippieOutLengthHigh = 2500; //maximum time a hippie can stay on screen
//initializes our store by passing root reducer functions   
const store = createStore(reducer);

//Will contain the game logic for when we start the game
function startGame() {
  //gets initial state from reducer
  const gameState = store.getState().gameState;

  //if the game has started
  if (gameState !== 'started') {
    //play this sound and update the game to dispatch the GAMESTATE_START action from our reducer.js
    const audio = new Audio(process.env.PUBLIC_URL + '/whack.mp3');
    audio.play();

    //dispatch calls the reducer, saves the state, and runs the listeners
    store.dispatch({ type: 'GAMESTATE_START' });

    //dispatch the TICK action from our reducer.js to initialize the timer
    const clockInterval = setInterval(() => {
      store.dispatch({ type: 'TICK' })
    }, 1000);

    //repeats a the hippies per second at every given time-interval
    const secondsInterval = setInterval(triggerSecond, secondLength);

    // timeout function will end the round, reset game lenght, and clear up the timer/hippies per second by dispatching the GAMESTATE_END action from our reducer.js 
    setTimeout(() => {
      clearInterval(secondsInterval);
      clearInterval(clockInterval);
      store.dispatch({ type: 'GAMESTATE_END' });
    }, gameLength);
  }
}

//will contain the function to trigger the hippies upon each round second
function triggerSecond() {
  //will randomize our hippies between their 'in' and 'out' states to display on the tv, and set the min and max amount of hippies to be shown per hippie display second
  const hippies = store.getState().hippies,
        //_.filter() iterates over our hippies collection, returning an array of all hippie predicate that returns true.
        hippiesIn = _.filter(hippies, hippie => hippie.hippieState === 'in'),
        //_.map() method creates a hippiesIn array of values by running each element in our hippie collection through the iteratee.
        indexList = _.map(hippiesIn, hippie => hippie.index),
        //_.random() will return a random value which is in the hippiesPerSecondLow and hippiesPerSecondHigh range
        hippiesThisSecond = _.random(hippiesPerSecondLow, hippiesPerSecondHigh);

  //_.sampleSize() will return a hippie array of (n) random hippies per second
  _.sampleSize(indexList, hippiesThisSecond).forEach(triggerHippie);
}

//function to trigger the hippies per second for each game round
function triggerHippie(index) {
  //random in and out of hippies
  const hippieOutLength = _.random(hippieOutLengthLow, hippieOutLengthHigh);
  //dispatch the HIPPIE_COMES_OUT action from our reducer.js 
  store.dispatch({ type: 'HIPPIE_COMES_OUT', index });

  //timeout will dispatch the 'HIPPIE_GOES_IN action to stop hippies from popping up
  setTimeout(() => {
    store.dispatch({ type: 'HIPPIE_GOES_IN', index }) 
  }, hippieOutLength);
}

//will render our action when player clicks on a hippie
function onHippieClick(index) {
  return function () {
    //will render the hippies as 'out' or displayed, and play a clicking sound when a player clicks on them
    if (store.getState().hippies[index].hippieState === 'out') {
      const audio = new Audio(process.env.PUBLIC_URL + '/click.mp3');
      audio.play();
      //dispatch the ''HIPPIE_HIT' action to add to our score
      store.dispatch({ type: 'HIPPIE_HIT', index });
    }
  }
}

//exports our store 
export default store;
export { startGame, onHippieClick };

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
//import our store
import store, { startGame, onHippieClick } from './store/store';
import App from './App';
import './index.css';

//subscribe keeps an array of listener callbacks and returns a function to remove the new callback
store.subscribe(render);

//renders our store
render();

//renders our main function which contains the game objects
function render() {
  ReactDOM.render(
    <App 
      state={store.getState()}
      onStart={startGame}
      onHippieClick={onHippieClick}
    />, 
    document.getElementById('root')
  );
}

//Status.js
import React from 'react';

//will display the status of our game throughout round states
export default class Status extends React.Component {
  render() {
    //initial properties of defined functions
    const { gameState, onStart, score, highScore, time } = this.props;
    //will render top piece of game (header) upon each game state
    return (
      //when you click the header, it will start the game
      <div className="Status" onClick={onStart}>
        {
          //game unstarted will render unstarted header with normal heading
          gameState === 'unstarted' ? 
            renderUnstarted()
          //game started will render started header with score and timer
          : gameState === 'started' ? 
            renderStarted(score, time)
          //game over will render over header with final score and highest score
          : gameState === 'gameover' ? 
            renderGameOver(score, highScore)
          : null
        }
      </div>
    );
  }
}

//unstarted game screen with default information
function renderUnstarted() {
  return (
    <div>
      <h1>Whack-A-Hippie</h1> 
      <h3>Stop the Hipster Propaganda! Remote click <span className="clicker">here</span> to start.</h3>
      <div className="flower"></div>
    </div>
  );
}

//started game screen with timer and current score
function renderStarted(score, time) {
  const date = new Date(time),
        format = time => time < 10 ? '0' + time : time,
        minutes = format(date.getMinutes()),
        seconds = format(date.getSeconds());

  return (
    <div>
      <h2 className="score">Current Score: {score}</h2>
      <h3 className="time">Time Left: {minutes}:{seconds}</h3>
    </div>  
  );
}

//game over screen with final score and highest score achieved
function renderGameOver(score, highScore) {
  return (
    <div>
      <h1>Game Over</h1> 
      {/*Will display final score for current round */}
      <h3 className="results"> You stopped {score} Hipsters dude!</h3>
      {/*Will show high score stored in Local Browser Storage */}
      {
        score > highScore ?
        <h2 className="groovy"> Groovy, you got a new High Score! </h2>
        : 
        <h2 className="groovy"> Groovy, your Highest Score is: {highScore} points </h2>
      }
      {/*Will allow player to restart game */}
      <h2 className="replay"><span className="clicker"><i class="fas fa-play"></i></span> Try Again? </h2>
    </div>
  );
}

//Hippie.js
import React from 'react';
//will display our hippie image to be rendered
import hippieIMG from '../assets/hippie.png';

//Main hippie component that will display our hippies between game states
export default class Hippie extends React.Component {
  render() {
    //initial properties of defined functions
    const { hippieState, onHippieClick } = this.props;

    return (
      //render our screen
      <div className={getScreenClass(hippieState)} onClick={onHippieClick}>
        {/*render our hippies*/}
        <img 
          className={getHippieClass(hippieState)} 
          src={hippieIMG}
          alt="hippie"
        />
      </div>
    );
  }
}

//will render the hippie to pop out if its state is out/displayed
function getHippieClass(hippieState) {
  return `Hippie ${hippieState === 'out' ? 'Pop-out' : ''}`;
}

//will render the screen to allow player to hit the hippie if its state is out/displayed
function getScreenClass(hippieState) {
  return `Screen ${hippieState === 'hit' ? 'Hippie-hit' : ''}`;
}

//Game.js
import React from 'react';
import Hippie from './Hippie.js';

//main Game component
export default class Game extends React.Component {
  render () {
    //initial properties of defined functions
    const { hippies, onHippieClick } = this.props;

    return (
      <div className="Game">
        {/*Render all the Hippies from Hippie.js according to its state*/}
        {hippies && hippies.map((hippie) => 
          <Hippie 
            key={hippie.index} 
            hippieState={hippie.hippieState}
            onHippieClick={onHippieClick(hippie.index)}
          />
        )}
      </div>
    );
  }
}

//App.js
import React from 'react';
import Game from './components/Game';
import Status from './components/Status';

export default class App extends React.Component {
  render() {
    //initial properties of already defined functions
    const {state, onStart, onHippieClick} = this.props;
    //initial state of already defined functions
    const {hippies, gameState, score, highScore, time} = state;

    return (
      <div className="App">
        {/*Will display the game status per each round*/}
        <Status 
          onStart={onStart}
          gameState={gameState}
          score={score}
          highScore={highScore}
          time={time}
        />       
        {/*Will display the game objects per round */}
        <Game 
          hippies={hippies} 
          onHippieClick={onHippieClick}
          gameState={gameState}
        />
      </div>
    );
  }
}

npm start