From 406ef1eeaabda811edc673b97f1bae6c8b8fe8de Mon Sep 17 00:00:00 2001 From: Ivan Sosnin Date: Fri, 12 Oct 2018 22:02:23 +0500 Subject: [PATCH 1/2] Minor optimizations --- src/assets/css/app.css | 62 ++--------------------------------------- src/assets/css/card.css | 1 - src/components/app.js | 26 +++++++---------- 3 files changed, 12 insertions(+), 77 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index f9709c7..a6c4233 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -149,16 +149,12 @@ button { cursor: pointer; color: #FFF; background: #8bbc37; - -webkit-box-shadow: 0 3px 1px #64950d; - -moz-box-shadow: 0 3px 1px #64950d; - box-shadow: 0 3px 1px #64950d; + box-shadow: 0 3px 1px #64950d; border: 0; padding: 10px; margin: 20px auto; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + border-radius: 5px; display: block; text-decoration: none; text-align: center; @@ -170,58 +166,6 @@ button:disabled { cursor: auto; } -/* -.draw-border { - box-shadow: inset 0 0 0 4px #58afd1; - color: cyan; - transition: color 0.25s 0.0833333333s; - position: relative; -} -.draw-border::before, .draw-border::after { - border: 0 solid transparent; - box-sizing: border-box; - content: ''; - pointer-events: none; - position: absolute; - width: 0; - height: 0; - bottom: 0; - right: 0; -} -.draw-border::before { - border-bottom-width: 4px; - border-left-width: 4px; -} -.draw-border::after { - border-top-width: 4px; - border-right-width: 4px; -} -.draw-border:hover { - color: #FF9A56; -} -.draw-border:hover::before, .draw-border:hover::after { - border-color: #FF9A56; - transition: border-color 0s, width 0.25s, height 0.25s; - width: 100%; - height: 100%; -} -.draw-border:hover::before { - transition-delay: 0s, 0s, 0.25s; -} -.draw-border:hover::after { - transition-delay: 0s, 0.25s, 0s; -} - -.startGame-btn { - display: block; - width: 150px; - height: 40px; - font-size: 16px; - text-align: center; - margin: 0 auto; -} - - */ .card { position: relative; width: 200px; @@ -234,8 +178,6 @@ button:disabled { .card:hover { cursor: pointer; - -webkit-box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75); transition: all 0.3s ease-in; } diff --git a/src/assets/css/card.css b/src/assets/css/card.css index d34b6c6..88ae000 100644 --- a/src/assets/css/card.css +++ b/src/assets/css/card.css @@ -1,7 +1,6 @@ .front { width: 100%; height: 100%; - } .front-icon { diff --git a/src/components/app.js b/src/components/app.js index c31eef6..5a91483 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -42,7 +42,6 @@ class App extends Component { accuracy: 0, highScores: [] }; - // console.log(this.state.cardRevealStates); this.handleClick = this.handleClick.bind(this); this.startNewGame = this.startNewGame.bind(this); @@ -58,9 +57,8 @@ class App extends Component { this.startNewGame() } - _render render() { - const { numberOfAttempts, gamesPlayed, accuracy } = this.state; + const { numberOfAttempts, gamesPlayed, accuracy, cardRevealStates, highScores } = this.state; return (
@@ -84,19 +82,19 @@ class App extends Component {
-
- +
); } @@ -150,9 +148,6 @@ class App extends Component { document.getElementById("gc").innerHTML = "Game Complete in " + this.state.numberOfAttempts + " Attempts"; document.getElementById("buttondiv").style.display = "none"; - // console.log( - // "Game Complete in" + this.state.numberOfAttempts + "attempts" - // ); } } @@ -164,7 +159,6 @@ class App extends Component { cardRevealStates: newRevealStates }); - // console.log("Clicked"); this.checkForMatch(); this.addNumberOfClicks(); } @@ -197,8 +191,8 @@ class App extends Component { }); } - randomizeCards(cards) { - var currentIndex = cards.length, + randomizeCards() { + var currentIndex = this.cards.length, temporaryValue, randomIndex; @@ -206,12 +200,12 @@ class App extends Component { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; - temporaryValue = cards[currentIndex]; - cards[currentIndex] = cards[randomIndex]; - cards[randomIndex] = temporaryValue; + temporaryValue = this.cards[currentIndex]; + this.cards[currentIndex] = this.cards[randomIndex]; + this.cards[randomIndex] = temporaryValue; } - this.renderCards(cards); + this.renderCards(); } renderCards() { From 76b968bb1bc3d276dcf2bc8c1ad1c1b48610f94b Mon Sep 17 00:00:00 2001 From: Michael Salvati Date: Sun, 13 Jan 2019 15:54:05 -0800 Subject: [PATCH 2/2] app.js updated and ivan added to contributers list --- package.json | 3 ++- src/components/app.js | 44 ++++++++++++++++++++++++++++++------------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 59ce11e..1188c65 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "Sunil Kumar Jain (https://github.com/sunilsj99)", "Cintia Tahirih (https://github.com/cTahirih)", "Prashant Chaudhari (https://github.com/pandaa880)", - "Alexis Pandaan (https://github.com/Alexius08)" + "Alexis Pandaan (https://github.com/Alexius08)", + "Ivan Sosnin (https://github.com/vansosnin)" ], "license": "ISC", "repository": { diff --git a/src/components/app.js b/src/components/app.js index a11fa8b..7316040 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -42,6 +42,7 @@ class App extends Component { accuracy: 0, highScores: [] }; + // console.log(this.state.cardRevealStates); this.handleClick = this.handleClick.bind(this); this.startNewGame = this.startNewGame.bind(this); @@ -58,7 +59,7 @@ class App extends Component { } render() { - const { numberOfAttempts, gamesPlayed, accuracy, cardRevealStates, highScores } = this.state; + const { numberOfAttempts, gamesPlayed, accuracy } = this.state; return (
@@ -82,19 +83,19 @@ class App extends Component {
-
- +
); } @@ -148,6 +149,9 @@ class App extends Component { document.getElementById("gc").innerHTML = "Game Complete in " + this.state.numberOfAttempts + " Attempts"; document.getElementById("buttondiv").style.display = "none"; + // console.log( + // "Game Complete in" + this.state.numberOfAttempts + "attempts" + // ); } } @@ -166,8 +170,22 @@ class App extends Component { } }); - this.checkForMatch(); - this.addNumberOfClicks(); + //checks if only two cards are flipped + if (cardsFlipped < 3) { + //if only 2 are flipped it continues on + this.setState({ + cardRevealStates: newRevealStates + }); + + this.checkForMatch(); + + this.addNumberOfClicks(); + } else { + //if more then two are it returns and doesn't let you flip another + return; + } + + } addNumberOfClicks() { @@ -198,8 +216,8 @@ class App extends Component { }); } - randomizeCards() { - var currentIndex = this.cards.length, + randomizeCards(cards) { + var currentIndex = cards.length, temporaryValue, randomIndex; @@ -207,12 +225,12 @@ class App extends Component { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; - temporaryValue = this.cards[currentIndex]; - this.cards[currentIndex] = this.cards[randomIndex]; - this.cards[randomIndex] = temporaryValue; + temporaryValue = cards[currentIndex]; + cards[currentIndex] = cards[randomIndex]; + cards[randomIndex] = temporaryValue; } - this.renderCards(); + this.renderCards(cards); } renderCards() { @@ -240,4 +258,4 @@ class App extends Component { } } -export default App; +export default App; \ No newline at end of file