Merge pull request #1 from Yeab-Ad/main

footer added

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "whac-a-mole-react",
+  "name": "whac-a-mole-react-game",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -8,6 +8,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "canvas-confetti": "^1.4.0",
     "gsap": "^3.6.1",
     "prop-types": "^15.7.2",

src/index.css

@@ -1,10 +1,10 @@
 :root {
   --controls: hsl(38, 96%, calc((55 + var(--lightness, 0)) * 1%));
-  --controls-secondary: hsl(55, 100%, 50%);
+  --controls-secondary: hsl(337, 100%, 50%);
   --controls-color: hsl(0, 0%, 100%);
   --sky: hsl(204, 80%, 80%);
   --grass: hsl(98, 40%, 50%);
-  --dirt: hsl(35, 40%, 20%);
+  --dirt: hsl(350, 39%, 20%);
 }
 
 * {
@@ -175,7 +175,7 @@ button:active {
 }
 
 .icon {
-  fill: hsl(35, 50%, 28%);
+  fill: hsl(0, 0%, 22%);
   stroke-width: 20px;
   overflow: visible;
   height: 24px;
@@ -219,4 +219,39 @@ button:active {
 .boring-text {
   font-size: 2rem;
   text-align: center;
-}
+}
+
+.footer{
+  position: fixed;
+    bottom: 0;
+    margin: 10px;
+}
+
+.footer-container {
+display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f2f2f254;
+    padding: 7px;
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    z-index: 111111;
+}
+
+.github, .website {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.github img, .website img {
+  width: 23px;
+  height: 23px;
+  margin-right: 5px;
+}
+
+p {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+}

src/main.jsx

@@ -2,10 +2,28 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import Game from './components/Game'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import { faGithub, faWebsite } from '@fortawesome/free-solid-svg-icons'
 
 ReactDOM.render(
   <React.StrictMode>
     <Game />
+    <footer className="footer">
+      <div className="footer-container">
+        <div className="github">
+          <a href="https://github.com/Yeab-Ad" target="_blank">
+            <img src="src\assets\github-icon.png" alt="GitHub Icon" />
+          </a>
+          <p>Yeab-Ad</p>
+        </div>
+        <div className="website">
+          <a href="https://yeabsiraofficial.netlify.app" target="_blank">
+            <img src="src\assets\U.svg" alt="Website Icon" />
+          </a>
+          <p>Website</p>
+        </div>
+      </div>
+    </footer>
   </React.StrictMode>,
   document.getElementById('root')
 )

yarn.lock

@@ -250,6 +250,32 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/[email protected]":
+  version "6.4.0"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz"
+  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
+
+"@fortawesome/fontawesome-svg-core@^6.4.0", "@fortawesome/fontawesome-svg-core@~1 || ~6":
+  version "6.4.0"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz"
+  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
@@ -1476,14 +1502,14 @@ progress@^2.0.0:
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
   dependencies:
     loose-envify "^1.4.0"
     object-assign "^4.1.1"
-    react-is "^16.8.1"
+    react-is "^16.13.1"
 
 punycode@^2.1.0:
   version "2.1.1"
@@ -1499,7 +1525,7 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-is@^16.8.1:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -1509,7 +1535,7 @@ react-refresh@^0.9.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
-react@^17.0.0, [email protected]:
+react@^17.0.0, react@>=16.3, react@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==