From 3387b6fef4e581d6d6c0a735e662750714ddbd3b Mon Sep 17 00:00:00 2001 From: zeim839 Date: Sat, 29 Jun 2024 15:22:21 -0400 Subject: [PATCH] refactor: lint and rename .js -> .jsx --- src/About/About.js | 311 ------------------------------------- src/About/About.jsx | 104 +++++++++++++ src/About/Contributors.jsx | 148 ++++++++++++++++++ src/About/Credit.jsx | 26 ++++ src/App/App.js | 23 --- src/App/App.jsx | 20 +++ src/Carousel/Carousel.css | 83 +++++----- src/Carousel/Carousel.js | 62 -------- src/Carousel/Carousel.jsx | 99 ++++++++++++ src/Download/Download.js | 110 ------------- src/Download/Download.jsx | 79 ++++++++++ src/Footer/Footer.css | 7 +- src/Footer/Footer.js | 39 ----- src/Footer/Footer.jsx | 21 +++ src/Home/Download.jsx | 47 ++++++ src/Home/Home.css | 73 +++------ src/Home/Home.js | 150 ------------------ src/Home/Home.jsx | 74 +++++++++ src/Home/MeetChars.jsx | 63 ++++++++ src/Navbar/Navbar.js | 51 ------ src/Navbar/Navbar.jsx | 31 ++++ src/index.js | 16 +- src/reportWebVitals.js | 16 +- src/setupTests.js | 2 +- tailwind.config.js | 7 +- 25 files changed, 792 insertions(+), 870 deletions(-) delete mode 100644 src/About/About.js create mode 100644 src/About/About.jsx create mode 100644 src/About/Contributors.jsx create mode 100644 src/About/Credit.jsx delete mode 100644 src/App/App.js create mode 100644 src/App/App.jsx delete mode 100644 src/Carousel/Carousel.js create mode 100644 src/Carousel/Carousel.jsx delete mode 100644 src/Download/Download.js create mode 100644 src/Download/Download.jsx delete mode 100644 src/Footer/Footer.js create mode 100644 src/Footer/Footer.jsx create mode 100644 src/Home/Download.jsx delete mode 100644 src/Home/Home.js create mode 100644 src/Home/Home.jsx create mode 100644 src/Home/MeetChars.jsx delete mode 100644 src/Navbar/Navbar.js create mode 100644 src/Navbar/Navbar.jsx diff --git a/src/About/About.js b/src/About/About.js deleted file mode 100644 index 6c9039bb..00000000 --- a/src/About/About.js +++ /dev/null @@ -1,311 +0,0 @@ -import { useState, useRef, useEffect } from "react"; -import Navbar from "../Navbar/Navbar"; -import "../Home/Home.css"; -import "./About.css"; - -const About = () => { - 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 ( -
- - -
Artists
-
- - Tyra Picture -
Tyra Pasion
-
Lead Artist
- - - - Ryder Picture -
Ryder Keeny
-
UI/UX Lead
- - - - Gianna Picture -
Gianna Fernandez
-
Background Artist
- -
- -
Writers
-
- - Wilson Picture -
Wilson Goins
-
Lead Writer
- - - - Eddy Picture -
Edward Roshko
-
Script Writer
- - - - Sarah Picture -
Sarah Tran
-
Script Editor
- - - - Tikiri Picture -
Tikiri Ekanayake
-
Script Editor
- -
- -
Developers
-
- - Lazzy Picture -
Xael Font
-
Lead Ren'Py Developer
- - - - Anton Picture -
Anton Salvador
-
Senior Developer
- - - - Jason Picture -
Jason Lin
-
Senior Developer
- -
- -
Project Managers
-
- - Jake Picture -
Joseph Malegni
-
Project Lead
- - - - Nick Picture -
Nicolas Valiente
-
Senior Project Manager
- -
- -
Special Thanks
-
- - Mathew Picture -
Mathew Alangadan
- - - - Kaniel Picture -
Kaniel Vicencio
- - - - Mohammed Picture -
Mohammed Ali
- -
-
- - Joey Picture -
Joseph Cabezas
- - - - Mesa Picture -
Jonathan Mesa
- - - - -
UF Open Source Club
- -
- -
Music
-
- - Shimtone Music -
Shimtone - シムトーン
-
Menu Music
- -
- -
-
- Thank you to everyone who contributed to Bytes of Love, including - those whose names may not have been mentioned. This is an open source - visual novel so anyone is welcome to help! LGTM. -
-
- - - -
- ); -}; - -export default About; diff --git a/src/About/About.jsx b/src/About/About.jsx new file mode 100644 index 00000000..e31712a4 --- /dev/null +++ b/src/About/About.jsx @@ -0,0 +1,104 @@ +import { useState, useRef } from 'react' + +import './About.css' +import Layout from '../Layout/Layout' +import { CreditRow, CreditCell } from './Credit' +import Contributors from './Contributors' + +/* eslint-disable */ +const GenContributors = () => ( + <> + { + Contributors.map((row, i) => ( + + { + row.contributors.map((contrib, j) => ( + + )) + } + + )) + } + +) +/* eslint-enable */ + +const About = () => { + 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() + } + } + } + + return ( + + +
+
+ Thank you to everyone who contributed to Bytes of Love, including + those whose names may not have been mentioned. This is an open source + visual novel so anyone is welcome to help! LGTM. +
+
+ + + + ) +} + +export default About diff --git a/src/About/Contributors.jsx b/src/About/Contributors.jsx new file mode 100644 index 00000000..bf6a50d4 --- /dev/null +++ b/src/About/Contributors.jsx @@ -0,0 +1,148 @@ +const Contributors = [ + { + title: 'Artists', + contributors: [ + { + href: 'https://www.linkedin.com/in/tyra-pasion/', + img: require('../assets/credits/Tyra.jpg'), + name: 'Tyra Pasion', + role: 'Lead Artist' + }, + { + href: 'https://www.linkedin.com/in/ryder-keeny/', + img: require('../assets/credits/Ryder.jpg'), + name: 'Ryder Keeny', + role: 'UI/UX Lead' + }, + { + href: 'https://www.linkedin.com/in/gef5027/', + img: require('../assets/credits/Gianna.jpg'), + name: 'Gianna Fernandez', + role: 'Background Artist' + } + ] + }, + { + title: 'Writers', + contributors: [ + { + href: 'https://www.linkedin.com/in/wilson-goins/', + img: require('../assets/credits/Wilson.jpg'), + name: 'Wilson Goins', + role: 'Lead Writer' + }, + { + href: 'https://www.linkedin.com/in/edward-roshko/', + img: require('../assets/credits/Eddy.jpg'), + name: 'Edward Roshko', + role: 'Script Writer' + }, + { + href: 'https://www.linkedin.com/in/sarah-tran1029/', + img: require('../assets/credits/Sarah.jpg'), + name: 'Sarah Tran', + role: 'Script Editor' + }, + { + href: 'https://www.linkedin.com/in/tikiri-ekanayake/', + img: require('../assets/credits/Tikiri.jpg'), + name: 'Tikiri Ekanayake', + role: 'Script Editor' + } + ] + }, + { + title: 'Developers', + contributors: [ + { + href: 'https://www.linkedin.com/in/xael-font/', + img: require('../assets/credits/Lazzy.jpg'), + name: 'Xael Font', + role: "Lead Ren'Py Developer" + }, + { + href: 'https://www.linkedin.com/in/antoncsalvador/', + img: require('../assets/credits/Anton.jpg'), + name: 'Anton Salvador', + role: 'Senior Developer' + }, + { + href: 'https://www.linkedin.com/in/jason-lin-66b906254/', + img: require('../assets/credits/Jason.jpg'), + name: 'Jason Lin', + role: 'Senior Developer' + } + ] + }, + { + title: 'Project Managers', + contributors: [ + { + href: 'https://www.linkedin.com/in/jwmalegni/', + img: require('../assets/credits/Jake.jpg'), + name: 'Joseph Malegni', + role: 'Project Lead' + }, + { + href: 'https://www.linkedin.com/in/nicolasvaliente/', + img: require('../assets/credits/Nick.jpg'), + name: 'Nicolas Valiente', + role: 'Senior Project Manager' + } + ] + }, + { + title: 'Special Thanks', + contributors: [ + { + href: 'https://www.linkedin.com/in/mathewalangadan/', + img: require('../assets/credits/Mathew.jpg'), + name: 'Mathew Alangadan', + role: '' + }, + { + href: 'https://www.linkedin.com/in/kanielv/', + img: require('../assets/credits/Kaniel.jpg'), + name: 'Kaniel Vicencio', + role: '' + }, + { + href: 'https://www.linkedin.com/in/mohammedali0/', + img: require('../assets/credits/Mohammed.jpg'), + name: 'Mohammed Ali', + role: '' + }, + { + href: 'https://www.linkedin.com/in/josephcabezas/', + img: require('../assets/credits/Joey.jpg'), + name: 'Joseph Cabezas', + role: '' + }, + { + href: 'https://www.linkedin.com/in/jonathanamesa/', + img: require('../assets/credits/Mesa.jpg'), + name: 'Jonathan Mesa', + role: '' + }, + { + href: 'https://ufosc.org', + img: 'https://docs.ufosc.org/img/logo.png', + name: 'UF Open Source Club', + role: '' + } + ] + }, + { + title: 'Music', + contributors: [ + { + href: 'https://dova-s.jp/bgm/play20356.html', + img: require('../assets/credits/Shimtone.jpg'), + name: 'Shimtone - シムトーン', + role: 'Menu Music' + } + ] + } +] + +export default Contributors diff --git a/src/About/Credit.jsx b/src/About/Credit.jsx new file mode 100644 index 00000000..74679070 --- /dev/null +++ b/src/About/Credit.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import Image from '../Image/Image' + +const CreditRow = ({ title, children }) => ( + <> +
{title}
+
+ {children} +
+ +) + +const CreditCell = ({ href, img, name, role }) => { + return ( + + Contributor Profile +
{name}
+
{role}
+ + ) +} + +export { CreditRow, CreditCell } diff --git a/src/App/App.js b/src/App/App.js deleted file mode 100644 index 7eafa77f..00000000 --- a/src/App/App.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { BrowserRouter, Route, Routes} from 'react-router-dom'; // Importing necessary components from react-router-dom - -// Importing components for different routes -import Home from '../Home/Home' -import About from '../About/About'; -import Download from '../Download/Download'; - - -function App() { - return ( - - - } /> - } /> - } /> - - - - ); -} - -export default App; \ No newline at end of file diff --git a/src/App/App.jsx b/src/App/App.jsx new file mode 100644 index 00000000..dce5c8c2 --- /dev/null +++ b/src/App/App.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { BrowserRouter, Route, Routes } from 'react-router-dom' + +import Home from '../Home/Home' +import About from '../About/About' +import Download from '../Download/Download' + +function App () { + return ( + + + } /> + } /> + } /> + + + ) +} + +export default App diff --git a/src/Carousel/Carousel.css b/src/Carousel/Carousel.css index a73df19c..59d441db 100644 --- a/src/Carousel/Carousel.css +++ b/src/Carousel/Carousel.css @@ -1,63 +1,56 @@ -/* Base styles */ -body { - margin: 0; - font-family: sans-serif; +.carousel-card { + padding: 50px; + border-radius: 30px; + border: 1px solid rgb(156 71 150); + margin: 15px; + display: flex; + flex-direction: column; + align-items: center; } -.Carousel { - height: 90vh; +.carousel { display: flex; flex-direction: column; - align-items: center; justify-content: center; - margin: 50px auto; - position: relative; /* Relative positioning for the button container */ - width: 80vw; /* Set a fixed width for the carousel */ - /* height: 80vh; Set a fixed height for the carousel */ - overflow: hidden; /* Hide overflow to keep images within the container */ - border-radius: 5%; - background-size: cover; - background-size: no-repeat; - + margin: 25px; } -.Carousel img { - width: 50vh; /* Ensure the image covers the container's width */ - object-fit: cover; - object-position: 55% 50%; +.carousel__body { + display: flex; justify-content: center; - align-items: center; } -.left-button button, .right-button button { - background-color: #4a5568; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - padding: 8px 16px; +.carousel-button { + color: black; + font-size: 60px; + min-width: 20px; } -.left-button img, .right-button img { - width: 30px; /* Adjust the width as needed */ - height: auto; /* Maintains the aspect ratio */ - display: block; /* Ensures the image doesn't have extra space around it */ - margin-top: 30px; +.carousel__slide-indices { + display: grid; + width: fit-content; + margin: 0 auto; } -.button-container { - display: flex; - justify-content: bottom; - align-items: bottom; - position: absolute; - width: 180%; - padding: 20px 0; - box-sizing: border-box; +.carousel__slide-index, .carousel__slide-index--selected { + margin: 5px; + margin-top: 15px; + border-radius: 100%; + width: 13px; + height: 13px; + border: 1.5px solid grey; + background: none; } -/* Custom spacing between buttons using margin */ -.left-button, .right-button{ - margin-right: auto; /* Pushes the button to the left */ - margin-left: auto; /* Pushes the button to the left */ +.carousel__slide-index:hover, .carousel__slide-index--selected:hover { + border: 1.5px solid black; + background: black; } +.carousel__slide-index:active, .carousel__slide-index--selected:active { + transform: translateY(3px); +} + +.carousel__slide-index--selected { + background: grey; +} diff --git a/src/Carousel/Carousel.js b/src/Carousel/Carousel.js deleted file mode 100644 index 609298b6..00000000 --- a/src/Carousel/Carousel.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from "react"; -import './Carousel.css'; - -export const images = [ - "images/C++_Base.png", - "images/Java_Wink.png", - "images/JavaScript_Base.png", - "images/Python_HandsPocket_2.png", - "images/Summer.png", - "images/LGTM.png", -]; - -export const name = [ - "C++", - "Java", - "JavaScript", - "Python", - "", - "", -] - -export const text = [ - "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", - "The team that put together this website during the summer of '24", - "Looks Good To Merge, Let's Get The Money, Let's Guzzle That Milk", -] - -export const Carousel = ({ imageIndex }) => { - return ( -
-
{name[imageIndex]}
- {`Displaying -
{text[imageIndex]}
-
- ); -}; - -export const Carousel_Rotate_Left = ({ onRotate }) => { - return ( -
- -
- ); -}; - -export const Carousel_Rotate_Right = ({ onRotate }) => { - return ( -
- -
- ); -}; - - - diff --git a/src/Carousel/Carousel.jsx b/src/Carousel/Carousel.jsx new file mode 100644 index 00000000..037e6616 --- /dev/null +++ b/src/Carousel/Carousel.jsx @@ -0,0 +1,99 @@ +import React, { useState } from 'react' +import './Carousel.css' + +const CarouselCard = ({ children, style, className }) => ( +
+
+ {children} +
+
+) + +const Carousel = ({ children, style, className }) => { + const [select, setSelect] = useState(0) + const advance = (i) => { + setSelect((select + i) % children.length) + } + + const SlideIndices = () => { + const rows = [] + for (let i = 0; i < children.length; i++) { + if (i !== select) { + rows.push(( +
setSelect(i)} + /> + )) + continue + } + rows.push(( +
setSelect(i)} + /> + )) + } + + return ( +
+ {rows} +
+ ) + } + + const PrevButton = () => { + if (select === 0) { + return (
) + } + return ( + + ) + } + + const NextButton = () => { + if (select === children.length - 1) { + return (
) + } + return ( + + ) + } + + 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
- -
- -
-
Linux
- -
- -
-
Windows
- -
-
- - - -
- ) -} - -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
+ +
+ +
+
Linux
+ +
+ +
+
Windows
+ +
+
+ + + + + ) +} + +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 ( -
-
- {/*

Bytes of Love

*/} - -
- -
- - - -
-
- //
- // 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 ( +
+ MacOS Download Image +

+ {platform} +

+ +
+ ) +} + +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 ( - -
- - -
- bolCover -
- -
-
-
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

- -
- -
- -

Linux

- -
- -
- -

Windows

- -
- -
-
- - -
-

Meet Our Charactetrs!

-
- -
- - -
-
-
- - - - -
- ); -}; - -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 = () => ( + + ) + + return ( + +
+ Bytes of Love Splashscreen +
+
+
+
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('/')}> + UF OSC Logo +
+
+ + + + +
+
+) + +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: [] } -