Changed some code (details classified)

UoaWDCC · Aug 6, 2024 · 6533131 · 6533131
1 parent 4b8b04a
commit 6533131
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 3 deletions.
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,10 +1,59 @@
 import styles from './nav.module.css'
+import React from "react";
+import {Simulate} from "react-dom/test-utils";
+import toggle = Simulate.toggle;
 
 /*
 New navbar (see header.astro in components folder for previous version)
  */
 
 const Navbar = () => {
+    const [silly, setSilly] = React.useState(false);
+
+    const sillyHandler = () => {
+        if(!silly){
+            if(confirm("You've found the silly animation mode toggle! \nActivating this mode causes rapid, possibly flashing motion. You can turn it off any time by clicking the same button. \n\nWould you like to continue?")){
+                setSilly(true);
+            }
+        }
+        else{
+            setSilly(false);
+        }
+    }
+
+    /* Adds the silly rotation animation to selected elements. The code is kinda scrappy for it lol */
+    React.useEffect(() => {
+        console.log(`set silly animation mode to ${silly}`);
+
+        /* Select elements to apply animation class to.
+        * Select only from the <main> area to exclude navbar (so that you can toggle it back off without that also animating lol) */
+        let mainArea = document.querySelector('main') || document.body;
+        let change = mainArea.querySelectorAll('main h1, h2, h3, h4, h5, h6, img, p, a, .goalCard');
+        let toggleButton = document.getElementById("silly-toggle");
+
+        if(silly){
+            for(const i of change){
+                i.classList.add("silly-anim");
+            }
+            if(toggleButton){
+                toggleButton.style.opacity = "1";
+                toggleButton.style.color = "red";
+                toggleButton.style.fontWeight = "700";
+            }
+        }
+
+        return() => {
+            for(const i of change){
+                i.classList.remove("silly-anim");
+            }
+            if(toggleButton){
+                toggleButton.style.opacity = "0.5";
+                toggleButton.style.color = "rebeccapurple";
+                toggleButton.style.fontWeight = "inherit";
+            }
+        }
+    }, [silly])
+
     return (
         <header className={styles.nav}>
             <a href="/" className={styles.logo}>
@@ -21,6 +70,9 @@ const Navbar = () => {
                 <a href="/members">Members</a>
                 <a href="/contact">Contact</a>
             </nav>
+            <button id="silly-toggle" className={styles.sillyButton} onClick={sillyHandler}>
+                {silly ? "disable silly mode" : "enable silly mode"}
+            </button>
         </header>
     );
 };

diff --git a/src/components/Navbar/nav.module.css b/src/components/Navbar/nav.module.css
@@ -94,10 +94,25 @@
     transition: all 200ms;
 }
 
+.sillyButton{
+    position: absolute;
+    right: 12px;
+    top: 12px;
+
+    font-size: var(--fontsize-sml);
+    color: rebeccapurple;
+    opacity: 0.1;
+
+    transition: all 200ms;
+}
+.sillyButton:hover{
+    opacity: 0.7;
+}
+
 
 /* TODO Navbar mobile */
 @media (max-width: 850px) {
     .links{
         display: none;
     }
-}
+}
diff --git a/src/components/index page/IndexGoalCard.tsx b/src/components/index page/IndexGoalCard.tsx
@@ -31,7 +31,7 @@ const IndexGoalCard = ({styleColor, children, title}: props) => {
     }
 
     return (
-        <div className={styles.goal} style={{...variant}}>
+        <div className={`goalCard ${styles.goal}`} style={{...variant}}>
             <img className={styles.goalBg} alt="abstract background goal shapes" src="/assets/YOO_index-goals-bg.svg"/>
             <h4>
                 {title}

diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -27,7 +27,7 @@ import { ViewTransitions } from "astro:transitions";
 	</head>
 	<body>
 		<!--<Header />-->
-		<Navbar />
+		<Navbar client:load/>
 		<main>
 			<slot />
 		</main>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -13,6 +13,7 @@ import IndexGoals from "../components/index page/IndexGoals";
 import IndexHero from "../components/index page/IndexHero";
 
 import BlobBackground from "../components/BlobBackground/BlobBackground";
+import React from "react";
 
 ---
 
@@ -24,6 +25,7 @@ import BlobBackground from "../components/BlobBackground/BlobBackground";
 		<meta name="generator" content={Astro.generator} />
 		<title>Youth of Ōrākei | Home</title>
 	</head>
+
 	<Layout>
 		<BlobBackground zIndexVal="-10" offset="-100"/>
 		<section class="index-section">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -141,4 +141,33 @@ h5 {
 
 .text-light {
   color: var(--text-light);
+}
+
+/* Really silly animations */
+@keyframes silly-anim{
+  0%{
+    transform: rotate(0);
+  }
+  25%{
+    transform: rotate(90deg) scale(0.5);
+    filter: blur(8px);
+  }
+  50%{
+    transform: rotate(180deg);
+    filter: blur(0);
+  }
+  75%{
+    transform: rotate(270deg) scale(1.5);
+    filter: blur(8px);
+  }
+  100%{
+    transform: rotate(360deg);
+  }
+}
+.silly-anim{
+  animation: silly-anim 1s infinite both linear !important;
+  animation-play-state: paused !important;
+}
+.silly-anim:hover{
+  animation-play-state: running !important;
 }