setSelect(i)}
+ />
+ ))
+ continue
+ }
+ rows.push((
+
setSelect(i)}
+ />
+ ))
+ }
+
+ return (
+
+ {rows}
+
+ )
+ }
+
+ const PrevButton = () => {
+ if (select === 0) {
+ return (
)
+ }
+ return (
+
advance(-1)}
+ >
+ ‹
+
+ )
+ }
+
+ const NextButton = () => {
+ if (select === children.length - 1) {
+ return (
)
+ }
+ return (
+
advance(1)}
+ >
+ ›
+
+ )
+ }
+
+ return (
+
+
+
+
+ {children.map((child, i) => {
+ if (i === select) {
+ return (
{child}
)
+ }
+ return (
+
+ {child}
+
+ )
+ })}
+
+
+
+
+
+ )
+}
+
+export { Carousel, CarouselCard }
diff --git a/src/Download/Download.js b/src/Download/Download.js
deleted file mode 100644
index 21b89191..00000000
--- a/src/Download/Download.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import Navbar from "../Navbar/Navbar"
-import "./Download.css";
-import "../Home/Home.css";
-
-
-const Download = () => {
- const [isMuted, setIsMuted] = useState(false); // Initialize as muted
- const audioRef = useRef(null); // Ref for the audio element
- const [videoPlaying, setVideoPlaying] = useState(false);
- const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
- const toggleMute = () => {
- setIsMuted(!isMuted);
- if (audioRef.current) {
- audioRef.current.volume = isMuted ? 0.5 : 0; // Set volume to 1 if currently muted, 0 if currently unmuted
- if (isMuted) {
- audioRef.current.play().catch(err => {
- console.error("Error playing audio:", err);
- });
- } else {
- audioRef.current.pause();
- }
- }
- };
-
- useEffect(() => {
- toggleMute();
- const handleLocationChange = () => {
- setIsMuted(true);
- if (audioRef.current) {
- audioRef.current.pause();
- }
- };
- }, []);
-
- useEffect(() => {
- const videoElement = document.querySelector('video');
- if (videoElement) {
- videoElement.onplay = () => {
- setVideoPlaying(true);
- };
- videoElement.onerror = () => {
- setVideoPlaying(false);
- };
- }
- if (audioRef.current) {
- audioRef.current.play().catch(err => {
- console.error("Error playing audio:", err);
- });
- }
- }, []);
-
-
- return (
-
-
-
-
Game Engine
-
- BytesOfLove is built using Ren'Py, a popular visual novel engine. Ren'Py allows for rich storytelling experiences through its easy-to-use scripting language and powerful features.
-
-
-
- How to Play
-
-
-
-
-
Mac
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className="download-button-color hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4">
- Download
-
-
-
-
-
Linux
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className="download-button-color bg-blue-500 hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4">
- Download
-
-
-
-
-
Windows
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className="download-button-color bg-blue-500 hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4">
- Download
-
-
-
-
-
- {isMuted ? (
-
-
-
-
- ) : (
-
-
-
-
- )}
-
-
-
-
- )
-}
-
-export default Download
\ No newline at end of file
diff --git a/src/Download/Download.jsx b/src/Download/Download.jsx
new file mode 100644
index 00000000..bf1b6312
--- /dev/null
+++ b/src/Download/Download.jsx
@@ -0,0 +1,79 @@
+import { useState, useRef } from 'react'
+import Layout from '../Layout/Layout'
+
+import './Download.css'
+import '../Home/Home.css'
+
+const Download = () => {
+ const [isMuted, setIsMuted] = useState(false) // Initialize as muted
+ const audioRef = useRef(null) // Ref for the audio element
+ const toggleMute = () => {
+ setIsMuted(!isMuted)
+ if (audioRef.current) {
+ audioRef.current.volume = isMuted ? 0.5 : 0 // Set volume to 1 if currently muted, 0 if currently unmuted
+ if (isMuted) {
+ audioRef.current.play().catch(err => {
+ console.error('Error playing audio:', err)
+ })
+ } else {
+ audioRef.current.pause()
+ }
+ }
+ }
+
+ return (
+
+ Game Engine
+
+ BytesOfLove is built using Ren'Py, a popular visual novel engine. Ren'Py allows for rich storytelling experiences through its easy-to-use scripting language and powerful features.
+
+
+
+ How to Play
+
+
+
+
+
Mac
+
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className='download-button-color hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4'>
+ Download
+
+
+
+
+
Linux
+
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className='download-button-color bg-blue-500 hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4'>
+ Download
+
+
+
+
+
Windows
+
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')} className='download-button-color bg-blue-500 hover:bg-dark-purple text-white font-bold py-2 px-4 rounded m-4'>
+ Download
+
+
+
+
+
+ {isMuted
+ ? (
+
+
+
+
+ )
+ : (
+
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+export default Download
diff --git a/src/Footer/Footer.css b/src/Footer/Footer.css
index c7fd64da..6dbddfec 100644
--- a/src/Footer/Footer.css
+++ b/src/Footer/Footer.css
@@ -9,13 +9,8 @@
width: 80px;
}
-#githubLogo{
- width: 40px;
- align-items: center;
-}
-
#socials{
display: flex;
flex-basis: 50%;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/src/Footer/Footer.js b/src/Footer/Footer.js
deleted file mode 100644
index 3c05b7da..00000000
--- a/src/Footer/Footer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {useNavigate} from "react-router-dom";
-import "./Footer.css"
-
-const Footer = () => {
- const navigate = useNavigate();
-
- return (
-
- //
- //
window.open('https://ufosc.org/', '_blank')}/>
- //
- //
{navigate(`/`)}}>
- //
Home
- //
-
- //
{navigate(`/download`)}}>
- //
Download
- //
-
- //
{navigate(`/about`)}}>
- //
About
- //
- //
- //
- )
-}
-
-export default Footer
diff --git a/src/Footer/Footer.jsx b/src/Footer/Footer.jsx
new file mode 100644
index 00000000..009d38a5
--- /dev/null
+++ b/src/Footer/Footer.jsx
@@ -0,0 +1,21 @@
+import './Footer.css'
+import React from 'react'
+
+import Image from '../Image/Image'
+import BoLLogo from '../assets/BoL Logo Edited.png'
+import GhLogo from '../assets/github_logo.png'
+
+const Footer = () => (
+
+)
+
+export default Footer
diff --git a/src/Home/Download.jsx b/src/Home/Download.jsx
new file mode 100644
index 00000000..a6843312
--- /dev/null
+++ b/src/Home/Download.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import Image from '../Image/Image'
+
+import AppleLogo from '../assets/apple-logo.svg'
+import LinuxLogo from '../assets/linux-logo.png'
+import WindowsLogo from '../assets/windows-logo.png'
+
+const MAC_SRC = 'https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9'
+const LINUX_SRC = 'https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9'
+const WINDOWS_SRC = 'https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9'
+
+const Card = ({ src, platform, img }) => {
+ return (
+
+
+
+ {platform}
+
+ window.open(src, '_blank')}
+ >
+ Download
+
+
+ )
+}
+
+const Download = () => (
+
+
+
+ Download Bytes of Love Now!
+
+
+
+
+
+
+
+)
+
+export default Download
diff --git a/src/Home/Home.css b/src/Home/Home.css
index fc861c4c..e4679ca6 100644
--- a/src/Home/Home.css
+++ b/src/Home/Home.css
@@ -1,4 +1,4 @@
-*{
+* {
font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
}
@@ -7,27 +7,10 @@
display: flex;
flex-direction: column;
background-color: #FEF7D8;
-
text-align: center;
}
-#heroImage{
- width: 100%;
-}
-
-/* Hero Image Styles */
-.picture-carousel {
- position: relative;
- align-self: center;
- text-align: center;
- align-content: center;
- width: 100vw;
- /* max-height: 80vh !important; */
- /* height: 65vh; */
- /* outline: 2px solid red; */
-}
-
-#descriptionSection{
+#descriptionSection {
background: #D184D7;
margin: 30px;
border-radius: 60px;
@@ -35,19 +18,19 @@
padding: 50px;
}
-#descDivi{
+#descDivi {
width: 20%;
margin: auto;
}
-#download #descDivi{
+.home-page-container hr {
padding-bottom: 30px;
}
#aboutHeading {
font-family: cursive;
font-size: 4em;
-
+
}
#description-text {
margin-top: 1vh;
@@ -56,40 +39,37 @@
font-size: 2.5vh;
}
-#meetChars{
- margin: 30px;
+.home__meet-chars {
+ width: 100vw;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
}
-#meetHeading{
+#meetHeading {
font-family: cursive;
font-size: 4em;
-
padding-left: 20px;
padding-right: 20px;
-
-
align-content: center;
align-items: center;
}
-#bytesName{
+#bytesName {
color: #D184D7;
font-family: cursive;
}
-/* Download Styles */
-#download #aboutHeading{
+#download #aboutHeading {
padding-bottom: 50px;
}
-#downloadCol{
- columns: 3;
- padding-bottom: 30px;
-
- margin: 10px;
+.home__download__cards {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
}
-.column{
+.home__download__cards__column {
background-color: white;
padding: 30px;
margin-left: 20px;
@@ -100,36 +80,25 @@
justify-content: center;
flex-direction: column;
height: 40vh;
-
align-items: center;
}
-.logo{
- height: 8vh;
-}
-
-#downloadLabel{
-
+.home__download__cards__column__label {
font-size: 40px;
padding-bottom: 20px;
-
}
-#downloadButton{
-
-
+.home__download__cards__column__button {
background: #C0419D;
color: white;
padding: 10px;
border-radius: 30px;
margin-top: 10px;
-
height: 7vh;
font-size: 21px;
-
- width: 100%
+ width: 200px;
}
-#musicButton{
+#musicButton {
z-index: 1;
}
diff --git a/src/Home/Home.js b/src/Home/Home.js
deleted file mode 100644
index a0cd99fa..00000000
--- a/src/Home/Home.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import "./Home.css";
-import Navbar from "../Navbar/Navbar";
-import Footer from "../Footer/Footer";
-import {Carousel, Carousel_Rotate_Left, Carousel_Rotate_Right, images} from '../Carousel/Carousel';
-
-
-const Home = () => {
- const [isMuted, setIsMuted] = useState(false); // Initialize as muted
- const audioRef = useRef(null); // Ref for the audio element
- const [videoPlaying, setVideoPlaying] = useState(false);
- const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
- const handleRotateLeft = () => {
- setCurrentImageIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
- };
-
- const handleRotateRight = () => {
- setCurrentImageIndex(prevIndex => (prevIndex + 1) % images.length);
- };
-
-
-
- const toggleMute = () => {
- setIsMuted(!isMuted);
- if (audioRef.current) {
- audioRef.current.volume = isMuted ? 0.5 : 0; // Set volume to 1 if currently muted, 0 if currently unmuted
- if (isMuted) {
- audioRef.current.play().catch(err => {
- console.error("Error playing audio:", err);
- });
- } else {
- audioRef.current.pause();
- }
- }
- };
-
- useEffect(() => {
- setCurrentImageIndex(0);
- toggleMute();
- const handleLocationChange = () => {
- setIsMuted(true);
- if (audioRef.current) {
- audioRef.current.pause();
- }
- };
- }, []);
-
- useEffect(() => {
- const videoElement = document.querySelector('video');
- if (videoElement) {
- videoElement.onplay = () => {
- setVideoPlaying(true);
- };
- videoElement.onerror = () => {
- setVideoPlaying(false);
- };
- }
- if (audioRef.current) {
- audioRef.current.play().catch(err => {
- console.error("Error playing audio:", err);
- });
- }
- }, []);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
About Bytes of Love
-
"Bytes of Love" is an engaging open-source dating simulator by the UF Open Source Club. Development began in Fall 2023 and continues actively. This visual novel offers immersive romantic storylines and character interactions, and it's compatible with Mac, Linux, and Windows. The game reflects the collaborative spirit and creativity of the club's contributors.
-
-
-
-
-
Download Bytes of Love Now!
-
-
-
-
-
Mac
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')}>
- Download
-
-
-
-
-
-
Linux
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')}>
- Download
-
-
-
-
-
-
Windows
-
window.open('https://drive.google.com/uc?export=download&id=1lHRB4EOvokiN0LybZw75ij7rI1a_WWZ9', '_blank')}>
- Download
-
-
-
-
-
-
-
-
-
Meet Our Charactetrs!
-
-
-
-
-
- {isMuted ? (
-
-
-
-
- ) : (
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Home;
diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx
new file mode 100644
index 00000000..96ba9a43
--- /dev/null
+++ b/src/Home/Home.jsx
@@ -0,0 +1,74 @@
+import { useState, useRef } from 'react'
+
+import './Home.css'
+import Layout from '../Layout/Layout'
+import Download from './Download'
+import MeetChars from './MeetChars'
+
+import Image from '../Image/Image'
+import MainMenuSplashscreen from '../assets/main_menu.gif'
+
+const Home = () => {
+ const [isMuted, setIsMuted] = useState(false)
+ const audioRef = useRef(null)
+ const toggleMute = () => {
+ setIsMuted(!isMuted)
+ if (audioRef.current) {
+ audioRef.current.volume = isMuted ? 0.5 : 0
+ if (isMuted) {
+ audioRef.current.play().catch(err => {
+ console.error('Error playing audio:', err)
+ })
+ } else {
+ audioRef.current.pause()
+ }
+ }
+ }
+
+ const MuteButton = () => (
+
+ {isMuted
+ ? (
+
+
+
+
+ )
+ : (
+
+
+
+ )}
+
+ )
+
+ return (
+
+
+
+
+
+
+
About Bytes of Love
+
+ Bytes of Love is an engaging open-source dating simulator
+ by the UF Open Source Club. Development began in Fall 2023
+ and continues actively. This visual novel offers immersive
+ romantic storylines and character interactions, and it is
+ compatible with Mac, Linux, and Windows. The game reflects
+ the collaborative spirit and creativity of its contributors.
+
+
+
+
+
+
+
+ )
+}
+
+export default Home
diff --git a/src/Home/MeetChars.jsx b/src/Home/MeetChars.jsx
new file mode 100644
index 00000000..63da8fc9
--- /dev/null
+++ b/src/Home/MeetChars.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { Carousel, CarouselCard } from '../Carousel/Carousel'
+
+import Image from '../Image/Image'
+import CPP from '../assets/C++_Base.png'
+import Java from '../assets/Java_Wink.png'
+import Javascript from '../assets/JavaScript_Base.png'
+import Python from '../assets/Python_HandsPocket_2.png'
+
+const Character = ({ name, image, children }) => {
+ const style = {
+ fontSize: '4vh',
+ marginTop: '3vh',
+ marginBottom: '2vh',
+ fontFamily: 'cursive'
+ }
+ return (
+
+ {name}
+
+
+ {children}
+
+
+ )
+}
+
+const MeetChars = () => {
+ return (
+ <>
+
+
+ Meet Our Characters!
+
+
+
+
+ C++, an edgy CS major focused on game development
+
+
+
+ Java, a determined mother returning to college to conquer
+ challenges of the past
+
+
+
+
+ JavaScript, a peppy CS major interested in web development
+
+
+
+ Python, a kind CS major who aces her classes effortlessly
+
+
+
+ >
+ )
+}
+
+export default MeetChars
diff --git a/src/Navbar/Navbar.js b/src/Navbar/Navbar.js
deleted file mode 100644
index d0f54ef9..00000000
--- a/src/Navbar/Navbar.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import "./Navbar.css";
-
-const Navbar = () => {
- const navigate = useNavigate();
-
- return (
-
-
-
window.open("https://ufosc.org/", "_blank")}
- alt="UF OSC Logo"
- />
-
-
-
-
-
{
- navigate(`/`);
- }}
- >
-
Home
-
-
-
{
- navigate(`/download`);
- }}
- >
-
Download
-
-
-
{
- navigate(`/about`);
- }}
- >
-
About
-
-
-
- );
-};
-
-export default Navbar;
diff --git a/src/Navbar/Navbar.jsx b/src/Navbar/Navbar.jsx
new file mode 100644
index 00000000..49ad5ff4
--- /dev/null
+++ b/src/Navbar/Navbar.jsx
@@ -0,0 +1,31 @@
+import './Navbar.css'
+import Image from '../Image/Image'
+
+const NavbarItem = ({ name, href }) => (
+
{ window.location.replace(href) }}
+ >
+
{name}
+
+)
+
+const Navbar = () => (
+
+
window.location.replace('/')}>
+
+
+
+
+
+
+
+
+
+)
+
+export default Navbar
diff --git a/src/index.js b/src/index.js
index cd46dd49..7b2df3a1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App/App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App/App'
+import reportWebVitals from './reportWebVitals'
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
-);
+)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3ad..9381231d 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
}
-};
+}
-export default reportWebVitals;
+export default reportWebVitals
diff --git a/src/setupTests.js b/src/setupTests.js
index 8f2609b7..52aaef1d 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/tailwind.config.js b/tailwind.config.js
index f8799d01..13442a7b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,14 +6,13 @@ module.exports = {
colors: {
'custom-purple': '#9C4796',
'light-purple': '#B266B2',
- 'dark-purple': '#7A2C7A',
+ 'dark-purple': '#7A2C7A'
},
borderColor: theme => ({
...theme('colors'),
- 'custom-purple': '#9C4796', // Reusing the custom color for border
+ 'custom-purple': '#9C4796' // Reusing the custom color for border
})
}
},
- plugins: [],
+ plugins: []
}
-