Homepage

https-sam · https-sam · commit 4b3effe928d9 · 2022-07-17T20:17:33.000-06:00
diff --git a/.swp b/.swp
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@react-three/fiber": "^8.0.27",
+    "@splinetool/react-spline": "^2.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" sizes="any" type="image/png">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@500;600&display=swap" rel="stylesheet">
     <title>Algo Visualizer</title>
   </head>
   <body class="">
diff --git a/src/AppRouter.js b/src/AppRouter.js
@@ -16,7 +16,7 @@ function AppRouter() {
       <Router>
         <Routes>
           <Route exact path = "/"
-                 element = {<MainSortingCanvas/>}/>
+                 element = {<SplashScreen/>}/>
           <Route path = "/about"
                  element = {<AboutScreen/>}/>
           <Route path = "/contact"
diff --git a/src/Utility/Dropdown/Dropdown.js b/src/Utility/Dropdown/Dropdown.js
@@ -29,6 +29,7 @@ function Dropdown() {
                       className = {`${item.class} text-gray-700 dark:text-gray-200 fontFamily-themeFont font-bold`}
                       to = {item.path}
                       onClick = {() => setClick(false)}
+
                   >
                     {item.title}
                   </Link>
diff --git a/src/components/Canvas/Canvas.js b/src/components/Canvas/Canvas.js
@@ -24,7 +24,7 @@ class Canvas extends Component {
 
 
     return (
-      <div className={`w-full flex justify-center dark:bg-gradient-to-b from-lightGray to-richBlue relative`} style={{minHeight:CANVAS_HEIGHT}}>
+      <div id="sorting-main-canvas" className={`w-full flex justify-center dark:bg-gradient-to-b from-lightGray to-richBlue relative`} style={{minHeight:CANVAS_HEIGHT}}>
         <p className="absolute top-3 z-40 font-semibold text-red-600 font-sans" id="sort-canvas-error-msg"></p>
         <div className="flex items-end z-1">
           {arrayLength > 1 ? generatedArray.map((element) => {
diff --git a/src/components/Canvas/Description/SortingCanvasDescription.js b/src/components/Canvas/Description/SortingCanvasDescription.js
@@ -10,7 +10,7 @@ import NormalParagraph from './NormalParagraph'
 import { InputHandler } from '../../InputHandler/InputHandler'
 
 
-function SortingCanvasDescription() {
+const SortingCanvasDescription = () => {
   return (
     <div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 xl:mt-0 md:pt-0">
       <p className="text-[1.5em] md:text-[2.8em] font-bold mb-5">Welcome to Sorting Visualizer</p>
@@ -39,4 +39,4 @@ function SortingCanvasDescription() {
   )
 }
 
-export default SortingCanvasDescription
+export default SortingCanvasDescription;
diff --git a/src/components/Canvas/InputField.js b/src/components/Canvas/InputField.js
@@ -65,9 +65,9 @@ class InputField extends Component {
     return (
       <div className="flex flex-col dark:bg-darkGray bg-gray-100 shadow-lg shadow-gray-200" id="input-field-sort">
 
-        <div className={`flex items-center justify-center py-4 md:py-1 w-sreen gap-4 flex-wrap ${this.name[0] + ' '}`}>  
-                       
-          <div className={`flex  justify-center items-center h-full sm:mb-0`} >
+        <div className={`flex items-center justify-center py-4 md:py-1 w-sreen gap-4 flex-wrap ${this.name[0] + ' '}`}>   
+
+          <div className={`flex justify-center items-center h-full sm:mb-0`}>
               <input placeholder={`Array size (MAX ${InputHandler.getAllowedMaxInputSize()})`} value={inputArrayLength === 0 ? '' : inputArrayLength} onChange={(e) => {
                 if(!this.state.animating) {
                 // SG 07/07/2022 21:03  Input validation, only accepts a number that is less than the allowed array size
@@ -91,7 +91,7 @@ class InputField extends Component {
           
           <div className="flex gap-5 md:gap-10 flex-wrap justify-center items-center">
 
-          <Options options={this.props.InputHandler} algorithm={algorithm} animating={this.state.animating}/> 
+            <Options options={this.props.InputHandler} algorithm={algorithm} animating={this.state.animating}/> 
 
             <div className="flex self-center gap-3 justify-center items-center">
               <AlgorithmSelection strategy={this.Strategy} options={this}/>
diff --git a/src/components/Canvas/MainSortingCanvas.js b/src/components/Canvas/MainSortingCanvas.js
@@ -42,7 +42,7 @@ class MainCanvas extends Component {
     
     return (
       <>
-        <Navigation/>
+        <Navigation themeToggle={true}/>
         <InputField name = {['generic-input', 'instructions']} InputHandler={this} generatedArray={generatedArray} inputArray={generatedArray}/>
         <Canvas defaultBarColor={this.state.options.defaultBarColor} showHeight={this.state.options.showHeight} generatedArray={this.state.generatedArray} barColor={options.defaultBarColor} InputHandler={this}/>
       </>
diff --git a/src/components/Canvas/style.css b/src/components/Canvas/style.css
@@ -14,4 +14,5 @@
   height: 100%;
   position: absolute;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-}
+}
+
diff --git a/src/components/Page/Splash/SplashScreen.js b/src/components/Page/Splash/SplashScreen.js
@@ -1,16 +1,53 @@
-import React      from 'react';
+import React, { Suspense, useEffect } from 'react';
 import './splash.css';
 import Navigation from '../partial/Navbar/Navigation';
 import Cell       from '../../Board/Cell';
+import { useNavigate } from 'react-router-dom'
 
-
+const Spline = React.lazy(() => import('@splinetool/react-spline'));
 
 const SplashScreen = () => {
 
+  useEffect(() => {
+    document.documentElement.classList.add('dark');
+    localStorage.setItem('theme', 'dark');
+    
+    if(document.getElementById('navbar')) {
+      document.getElementById('navbar').style.backgroundColor = "#121824"
+    }
+  }, [])
+
+ const navigate = useNavigate();
+
   return (
       <>
+      <Navigation themeToggle={false}/>
+      <div className="bg-homeGray relative flex justify-end min-h-screen min-w-screen">
+        <p className="font-lg text-white absolute text-[6vh] z-10 top-[15vh] left-[5vw] font-semibold font-spline">Algo Visualizer</p>
+        <p className="font-spline absolute top-[30vh] left-[5vw] text-[1.2em] z-10 text-gray-100">Improve your understanding of algorithms just by watching simple and completely customizable animations. <br/>
+        Welcome to the algo visualizer.</p>
+        <div className="hidden md:block md:scale-[.7] z-1 md:translate-x-[150px] lg:translate-x-[17px] lg:scale-[.9] xl:scale[1] w-fit">
+          <Suspense fallback={<></>}>
+            <Spline scene="https://prod.spline.design/qblRNAa3C-eNH6Bo/scene.splinecode" />
+          </Suspense>
+        </div>
+
+        <div className="absolute top-[50vh] left-[5vw] flex flex-col gap-5">
+          <div className="hover:shadow-custom-md-lightBlue cursor-pointer font-semibold  text-white font-spline bg-lightBlue2 p-[.9em] text-[1.1em] rounded-md"
+          onClick={() => navigate('/sorting-visualizer')}
+          >Sorting Algorithms</div>
+
+
+          <div className="hover:shadow-custom-md-lightBlue cursor-pointer font-semibold  text-white font-spline bg-lightBlue2 p-[.9em] text-[1.1em] rounded-md"
+          onClick={() => navigate('/sorting-visualizer')}
+          >Path Finding Algorithms</div>
+          </div>
+        </div>
+
+
+
         {/*-- Start of background --*/}
-        <div className = "splash_background">
+        {/* <div className = "splash_background">
           <div className = "splash_overlay">
             <div className = "splash_content">
               <h1 className = "splash_title">
@@ -35,7 +72,7 @@ const SplashScreen = () => {
             </div>
           </div>
         </div>
-        {/*-- End of background --*/}
+        -- End of background -- */}
       </>
   );
 };
diff --git a/src/components/Page/Splash/splash.css b/src/components/Page/Splash/splash.css
@@ -31,13 +31,26 @@
 	background-image:    url("../../../../public/background.jpg");
 	background-size:     cover;
 	background-position: center;
-	height:              100vh;
 }
 
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+
+
 
 .splash_overlay {
 	height:           inherit;
-	background-color: rgba(21, 21, 21, 0.91); /* Tint */
+	/* background-color: rgba(21, 21, 21, 0.91); Tint */
 	display:          flex;
 	flex-direction:   column;
 	align-items:      center;
diff --git a/src/components/Page/partial/Navbar/Navigation.js b/src/components/Page/partial/Navbar/Navigation.js
@@ -5,6 +5,7 @@ import './navbar.css';
 import {Button} from '../GenericButton/Button';
 import Dropdown from '../../../../Utility/Dropdown/Dropdown';
 import ThemeToggle from './ThemeToggle';
+import ToggleButton from 'rsuite/esm/Picker/ToggleButton';
 
 
 
@@ -15,7 +16,7 @@ import ThemeToggle from './ThemeToggle';
  * @returns {JSX.Element}
  * @constructor
  */
-function Navigation() {
+function Navigation({themeToggle}) {
   const [click, setClick]       = useState(false);
   const [dropdown, setDropdown] = useState(false);
 
@@ -44,10 +45,12 @@ function Navigation() {
 
   return (
       <>
-        <nav className = {`navbar dark:bg-lightDark`}>
-          <Link to = "/sorting-visualizer"
-                className = {'navbar-logo dark:text-white'}
-                onClick = {closeMobileMenu}>
+        <nav id="navbar" className = {`navbar dark:bg-lightDark`}>
+          <Link to = "/"
+                className = {`navbar-logo dark:text-white`}
+                onClick = {closeMobileMenu}
+                id="navbar-title"
+                >
             Algo Visualizer
             <i className = {'fab fa-firstdraft'}/>
           </Link>
@@ -58,7 +61,8 @@ function Navigation() {
             <li className = {'nav-item'}>
               <Link to = "/"
                     className = {'nav-links dark:text-white dark:hover:text-lightDark'}
-                    onClick = {closeMobileMenu}>
+                    onClick = {closeMobileMenu}
+                    >
                 Home
               </Link>
             </li>
@@ -69,8 +73,9 @@ function Navigation() {
             >
               <Link
                   to = "/documentation"
-                  className = {'nav-links dark:text-white dark:hover:text-lightDark'}
+                  className = {`nav-links dark:text-white dark:hover:text-lightDark`}
                   onClick = {closeMobileMenu}
+
               >
                 Documentation <i className = {'fas fa-caret-down'}/>
               </Link>
@@ -95,7 +100,7 @@ function Navigation() {
               </Link>
             </li> */}
           </ul>
-          <ThemeToggle/>
+          {themeToggle && <ThemeToggle/>}
         </nav>
       </>
   );
diff --git a/src/components/Strategy/Algorithms/QuickSort.js b/src/components/Strategy/Algorithms/QuickSort.js
@@ -1,4 +1,3 @@
-import { LazyResult } from "postcss";
 import { Animation } from "../../Animation/Animation";
 
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,9 +19,11 @@ module.exports = {
         "dropdown": "#4f535a",
         "richBlue": "#0B1120",
         "textGray": "#94A3B7",
+        "homeGray": "#121824"
       },
       fontFamily: {
-        "themeFont": ["Open Sans", "Helvetica", "Arial", "sans-serif"]
+        "themeFont": ["Open Sans", "Helvetica", "Arial", "sans-serif"],
+        "spline": ['Spline Sans', "sans-serif"]
       }
 
 

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ function Dropdown() {`
`29`	`29`	className = {`${item.class} text-gray-700 dark:text-gray-200 fontFamily-themeFont font-bold`}
`30`	`30`	`to = {item.path}`
`31`	`31`	`onClick = {() => setClick(false)}`
	`32`	`+`
`32`	`33`	`>`
`33`	`34`	`{item.title}`
`34`	`35`	`</Link>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import NormalParagraph from './NormalParagraph'`
`10`	`10`	`import { InputHandler } from '../../InputHandler/InputHandler'`
`11`	`11`
`12`	`12`
`13`		`-function SortingCanvasDescription() {`
	`13`	`+const SortingCanvasDescription = () => {`
`14`	`14`	`return (`
`15`	`15`	`<div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 xl:mt-0 md:pt-0">`
`16`	`16`	`<p className="text-[1.5em] md:text-[2.8em] font-bold mb-5">Welcome to Sorting Visualizer</p>`
`@@ -39,4 +39,4 @@ function SortingCanvasDescription() {`
`39`	`39`	`)`
`40`	`40`	`}`
`41`	`41`
`42`		`-export default SortingCanvasDescription`
	`42`	`+export default SortingCanvasDescription;`