neidley / mobile-mines Goto Github PK

Look at src/img/whew.png.
Look at src/img2/whew.png.

Using these for reference, create your own appropriate image
and replace src/img/whew.png with a creation of your own.

I previously tried implementing a scoreboard by assigning an array variable like so in src/components/Gameboard.js

class Gameboard extends Component {
  onClick(e) {
    e.preventDefault();

    let mine = e.target;
    let url = e.target.src;
    let scoreboard = [0,0];

However, upon hitting the play button, it refreshes the page thus also resetting the scoreboard variable to [0,0].

This feature will be easier after Redux is implemented.

Look at src/img/lookout.png.

Using this for reference, create your own appropriate image
and replace src/img/lookout.png with a creation of your own.

randomMine selects a random number 1 - 5,
to determine which mine will be armed to explode if clicked.

Currently it is only reset upon window refresh,
but we also want it to be reset every time the play button is pressed.

This should be a good starting place, here in Provider.js where it is currently set within DEFAULT_STATE -

const DEFAULT_STATE = {
  message: "Good Luck",
  minesRemaining: 4,
  gameEnded: false,
  randomMine: `mine_${Math.floor(Math.random() * 5) + 1}`,
  mines
};

This will require implementing Redux.

Refer to src/components/Play.js, specifically the .onClick(e) function to alter the button behavior
after mapStateToProps and PropTypes have been added.

For information on these concepts, here's a good place to start:

https://redux.js.org/basics/usage-with-react

https://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops

React JS / Redux Tutorial - 7 - mapStateToProps -
https://www.youtube.com/watch?v=IIMUXbkKzW0

User should be able to select how many rows of mines they would like to defuse: 1, 2, or 3.

They could be 3 buttons labeled Easy, Medium, Hard.

There should be one randomMine or explosive mine per row that results in a loss for the whole game.

Using dev tools React extension in Google Chrome, place cursor over the React Developer Tool icon in the extension bar. Click and see that:

This page is using the development build of React. 🚧

Note that the development build is not suitable for production. 
Make sure to use the production build before deployment.

Open the developer tools, and the React tab will appear to the right.

Here's a link with instructions to prepare a React app for production:
https://reactjs.org/docs/optimizing-performance.html#use-the-production-build

Once you make the change and everything's running locally,

1. Create a Pull-Request and include a screenshot of the React Developer Tool displaying that the app is running in production mode.
2. Reference the PR in this Issue's chat and
3. Get your contribution merged!

Look at src/img/explosion.png.
Look at src/img2/explosion.png.

Using these for reference, create your own appropriate image
and replace src/img/explosion.png with a creation of your own.

Go into src/App.css, line 50-57 should look like this:

.play {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  text-decoration-color: #000000;
  text-size: 50px;
  background-color: #509010;
}

Please change background-color to something new.
Here's W3's color picker for reference:
https://www.w3schools.com/colors/colors_picker.asp

When a player hits play, it should start a timer.

When the player wins, the total completion time should be saved with input initials, if it's a highscore.

The total completion time should be displayed (regardless whether it's a highscore) upon victory.

This may need to be implemented after Redux is added.
Here's a resource that might help us get started:
https://medium.com/@khwsc1/creating-timer-app-with-react-js-part-1-401d4af6e4fb

I'm familiar with
Rails backend with PostgreSQL,
Firebase,
and MongoDB through mlab.com.

Whether you prefer an alternative backend to these or not,
I'd love to pair-program implementing the backend with anyone interested.

In src/App.css, look for the body styling:

body {
  padding-top: 25px;
  background: url('../src/img/underwater.png') no-repeat;
  background-size: 1280px 853px;
}

Find (non-copyright) or create a new background and replace src/img/underwater.png with it.

reference mobile-mines/client/App.css

// lines 25 - 38

@keyframes App-logo-spin {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(45deg);
  }
}

This animation was originally the React logo spin animation you see when you first create a React app