FTBC9 Project 1 - Memory Game

package.json

@@ -1,13 +1,20 @@
 {
   "name": "project1-bootcamp",
   "version": "0.1.0",
+  "homepage": "http://gggaryteo.github.io/",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.2.2",
+    "classnames": "^2.3.2",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.6.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
@@ -27,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0"
   }
 }

src/App.css

@@ -1,19 +1,24 @@
-.App {
-  text-align: center;
+@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Noto+Sans&family=Roboto&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Noto Sans", sans-serif;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+body {
+  width: 100%;
+  min-height: 100vh;
+  background: url("/public/PokemonPics/background.jpg");
 }
 
-.App-header {
-  background-color: #282c34;
+.game-container {
+  width: 100vw;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  text-align: center;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
 }

src/App.js

@@ -1,17 +1,39 @@
 import React from "react";
-import logo from "./logo.png";
 import "./App.css";
+import {Routes, Route} from 'react-router-dom';
+import Game from "./Components/Game";
+import Leaderboard from "./Components/Leaderboard";
 
 class App extends React.Component {
+  constructor(props){
+    super(props)
+    this.state = {
+      scoreboard: [
+        { easy: "easy", score: 0 },
+        { medium: "medium", score: 0 },
+        { hard: "hard", score: 0 },
+      ],
+    };
+  }
+
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
+      <div>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <div className="game-container">
+                <Game />
+              </div>
+            }
+          />
+
+          <Route
+            path="/leaderboard"
+            element={<Leaderboard/>}
+          />
+        </Routes>
       </div>
     );
   }

src/Components/Card.css

@@ -0,0 +1,65 @@
+.card {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+}
+.card.flipped .front {
+  transform: rotateY(0deg);
+  transition-delay: 0.2s;
+}
+.card.flipped .back {
+  transform: rotateY(90deg);
+  transition-delay: 0s;
+}
+.card .front, .card .back {
+  border: 4px solid #3cc8dc;
+  border-radius: 6px;
+}
+.card .front {
+  position: absolute;
+  transform: rotateY(90deg);
+  width: 100%;
+  height: auto;
+  padding: 24.5% 20%;
+  transition: all ease 0.2s;
+  background: white;
+}
+.card .back {
+  width: 100%;
+  height: 100%;
+  padding: 30%;
+  transform: rotateY(0deg);
+  transition: all ease 0.2s;
+  transition-delay: 0.2s;
+  background: #d7f5fa;
+  opacity: 0.9;
+}
+
+.card.matched .xmassparkle {
+  animation: sparkle 1s;
+}
+.card .xmassparkle {
+  position: absolute;
+  width: 20%;
+  z-index: 1;
+  top: -1rem;
+  left: -1rem;
+  opacity: 0;
+  transition: all ease 0.3s;
+}
+@keyframes sparkle {
+  0% {
+    top: 1rem;
+    left: 1rem;
+    opacity: 0;
+  }
+  50% {
+    top: -1rem;
+    left: -1rem;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/Components/Card.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./Card.css";
+
+export default class Card extends React.Component {
+  render() {
+    const { img, matched } = this.props.card;
+    return (
+      <div
+        className={`card ${this.props.flipped ? "flipped" : ""} ${
+          matched === true ? "matched" : ""
+        }`}
+      >
+        <img className="xmassparkle" src={"PokemonPics/sparkle.png"} alt="sparkle" />
+        <img className="front" src={img} alt="card front" />
+        <img
+          className="back"
+          onClick={
+            this.props.disabled
+              ? () => {}
+              : () => this.props.handleClick(this.props.card)
+          }
+          src={"PokemonPics/pokeball.png"}
+          alt="card back"
+        />
+      </div>
+    );
+  }
+}

src/Components/Game.css

@@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Noto+Sans&family=Roboto&display=swap");
+
+.card-grid {
+  display: grid;
+  grid-gap: 20px;
+  margin: auto;
+}
+.card-grid .moves {
+  grid-column: 1 / span 1;
+  text-align: left;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.card-grid button {
+  grid-column: -2 / span 1;
+  width: 200px;
+  margin: 0;
+}
+.card-grid.easy {
+  max-width: 900px;
+  grid-template-columns: repeat(4, 1fr);
+}
+.card-grid.medium {
+  max-width: 1100px;
+  grid-template-columns: repeat(5, 1fr);
+}
+.card-grid.hard {
+  max-width: 1500px;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+audio:hover,
+audio:focus,
+audio:active {
+  -webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
+  -webkit-transform: scale(1.05);
+  -moz-transform: scale(1.05);
+  transform: scale(1.05);
+}
+
+audio {
+  margin-top: 15px;
+  -webkit-transition: all 0.5s linear;
+  -moz-transition: all 0.5s linear;
+  -o-transition: all 0.5s linear;
+  transition: all 0.5s linear;
+  -moz-box-shadow: 2px 2px 4px 0px #006773;
+  -webkit-box-shadow: 2px 2px 4px 0px #006773;
+  box-shadow: 2px 2px 4px 0px #006773;
+  -moz-border-radius: 7px 7px 7px 7px;
+  -webkit-border-radius: 7px 7px 7px 7px;
+  border-radius: 7px 7px 7px 7px;
+}