a little tweaking to get in the mood for game of life app

package-lock.json

@@ -12,9 +12,11 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.3.3",
+        "p5": "^1.9.4",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.3.1",
+        "react-p5": "^1.4.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -4801,6 +4803,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/p5": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.7.0.tgz",
+      "integrity": "sha512-6AnjmW98/edgXB+pYDBx7t6QbCogIG6NUzey93JpGTZA4096C+KjSN8y0sj43QRd9XtblrAhoRXHj1pFZ2vsCg==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -14393,6 +14401,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
+      "license": "MIT",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -14459,6 +14476,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/p5": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.9.4.tgz",
+      "integrity": "sha512-dhiZ9mvXx5pm8eRwml34xbeUwce4uS9Q2za0YOHg2p97N9iNAb5hTIHAt77CHKHXAh6A16u/oalz5egRfTyFWw==",
+      "license": "LGPL-2.1"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -16574,6 +16597,33 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "license": "MIT"
     },
+    "node_modules/react-p5": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-p5/-/react-p5-1.4.1.tgz",
+      "integrity": "sha512-njeL8zskkbo8gK3ql1u4/MgmecT/g7Z7LvypTn65DWUnuBvV/9S5AowcKkwQuLVo8/DDAE5vgGVFq1DOkoWiJA==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/p5": "1.7.0",
+        "opencollective-postinstall": "2.0.2",
+        "p5": "1.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/gherciu-gheorghe"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-dom": ">= 17.0.1"
+      }
+    },
+    "node_modules/react-p5/node_modules/p5": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.7.0.tgz",
+      "integrity": "sha512-qrbT/44Dwm63ZtOKX/mp61pw+5yj6ijYLOmRv7p6zcfjbo83Vb0gVFEvW0kTLFu7hceWCig0HONo9F1bSlqbsQ==",
+      "license": "LGPL-2.1"
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

package.json

@@ -8,9 +8,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.3",
+    "p5": "^1.9.4",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
+    "react-p5": "^1.4.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/Components/App/App.js

@@ -1,10 +1,8 @@
 import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import React, { Component } from 'react';
 import Header from '../Header/Header';
 import quotes from '../Quote/quotes';
 import QuoteCard from '../Quote/QuoteCard';
-import { Carousel } from 'bootstrap';
 import UncontrolledExample from '../Carousel/Carousel';
 import Footer from '../Footer/Footer';
 
@@ -60,7 +58,7 @@ export default class App extends Component {
     return (
       
       <div>
-<Header /><div className='wrapper'>
+<Header /><div className='App'>
         <h1 className="text-center">Random Kingdom Hearts Quote Generator</h1>
         <p> Click the WEPA! button to cycle through an array of different 
           character quotes from the Kingdom Hearts video game series!

src/Components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 import Carousel from 'react-bootstrap/Carousel';
-import exampleCarouselImage from './gfc-logo-12@2x_transp.png';
+import firstImg from './gfc-logo-12@2x_transp.png';
 import secondImg from './nostr_logo.png'
 import thirdImg from './pr_map.png'
 
-function UncontrolledExample() {
+function slideShow() {
   return (
     <Carousel>
       <Carousel.Item>
-        <img src={exampleCarouselImage} alt="first slide" className="d-block w-100" />
+        <img src={firstImg} alt="first slide" className="d-block w-100" />
         <Carousel.Caption>
           <h3>Programming</h3>
           <p>Regular engagement in international
@@ -37,4 +37,4 @@ function UncontrolledExample() {
   );
 }
 
-export default UncontrolledExample;
+export default slideShow;