Valentine (#50)

* Valentine

* desktop

package.json

@@ -32,6 +32,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-burger-menu": "^3.0.9",
     "react-dom": "^18.2.0",
+    "react-dom-confetti": "^0.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.14.2",
     "react-spotify-player": "^1.0.4",

src/Valentine/Valentine.scss

@@ -0,0 +1,9 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/Valentine/Valentine.tsx

@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import Confetti from 'react-dom-confetti';
+import heart from './assets/heart.svg';
+import './Valentine.scss';
+import img0 from './assets/IMG_0104.jpeg';
+import img1 from './assets/IMG_1200.jpeg';
+import img2 from './assets/IMG_3226.jpeg';
+import img3 from './assets/IMG_3240.jpeg';
+import img4 from './assets/IMG_3683.jpeg';
+import img5 from './assets/IMG_6763.jpeg';
+import img6 from './assets/IMG_9320.jpeg';
+import img7 from './assets/IMG_9441.jpeg';
+import img8 from './assets/IMG_9533.jpeg';
+import img9 from './assets/IMG_9737.jpeg';
+
+const confettiConfig = {
+  angle: 90,
+  spread: 360,
+  startVelocity: 15,
+  elementCount: 200,
+  dragFriction: 0.05,
+  duration: 3000,
+  stagger: 3,
+  width: '10px',
+  height: '10px',
+  perspective: '500px',
+  colors: ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a'],
+};
+
+function Valentine(): JSX.Element {
+  const [showConfetti, setShowConfetti] = useState(false);
+
+  const handleClick = () => {
+    setShowConfetti(true);
+    setTimeout(() => setShowConfetti(false), 3000); // Reset after 3 seconds
+  };
+
+  const button = (
+    <button
+      type="button"
+      style={{
+        width: '144px', height: '48px', margin: '0 24px', fontSize: '16px', zIndex: 100,
+      }}
+      onClick={handleClick}
+    >
+      Yes
+    </button>
+  );
+
+  if (window.innerWidth < 768) {
+    return (
+      <div style={{
+        color: 'white',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        verticalAlign: 'middle',
+        justifyContent: 'center',
+        height: '100vh',
+        backgroundColor: 'pink',
+        overflow: 'hidden',
+        position: 'relative',
+        fontSize: '24px',
+      }}
+      >
+        Come back on desktop!
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      verticalAlign: 'middle',
+      justifyContent: 'center',
+      height: '100vh',
+      backgroundColor: 'pink',
+      overflow: 'hidden',
+      position: 'relative',
+    }}
+    >
+      <img
+        src={img0}
+        alt="img0"
+        style={{
+          position: 'absolute',
+          top: '70%',
+          left: '37%',
+          width: '400px',
+        }}
+      />
+
+      <img
+        src={img1}
+        alt="img1"
+        style={{
+          position: 'absolute',
+          top: '3%',
+          left: '27%',
+          transform: 'rotate(5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img2}
+        alt="img2"
+        style={{
+          position: 'absolute',
+          top: '10%',
+          left: '80%',
+          transform: 'rotate(5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img3}
+        alt="img3"
+        style={{
+          position: 'absolute',
+          top: '30%',
+          left: '10%',
+          transform: 'rotate(-5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img4}
+        alt="img4"
+        style={{
+          position: 'absolute',
+          top: '55%',
+          left: '80%',
+          transform: 'rotate(-5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img5}
+        alt="img5"
+        style={{
+          position: 'absolute',
+          top: '2%',
+          left: '58%',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img6}
+        alt="img6"
+        style={{
+          position: 'absolute',
+          top: '0%',
+          left: '0%',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img7}
+        alt="img7"
+        style={{
+          position: 'absolute',
+          top: '60%',
+          left: '0%',
+          transform: 'rotate(5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img8}
+        alt="img8"
+        style={{
+          position: 'absolute',
+          top: '65%',
+          left: '62%',
+          transform: 'rotate(-5deg)',
+          height: '400px',
+        }}
+      />
+
+      <img
+        src={img9}
+        alt="img9"
+        style={{
+          position: 'absolute',
+          top: '60%',
+          left: '20%',
+          transform: 'rotate(5deg)',
+          height: '400px',
+        }}
+      />
+
+      <Confetti active={showConfetti} config={confettiConfig} />
+
+      <img
+        src={heart}
+        alt="heart"
+        style={{
+          animation: 'spin 2s linear infinite',
+          width: '144px',
+          height: '144px',
+          margin: '16px',
+        }}
+      />
+
+      <div style={{
+        fontSize: '24px', margin: '24px', fontWeight: 'bold', textShadow: '1px 1px 1px rgba(0, 0, 0, 0.5)', zIndex: 100,
+      }}
+      >
+        Emi, will you be my valentine?
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {button}
+        {button}
+      </div>
+    </div>
+  );
+}
+
+export default Valentine;

src/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import Home from './Home';
 import LoadingSpinner from './Connections/Loading';
+import Valentine from './Valentine/Valentine';
 
 const ConnectionsProvider = lazy(() => import('./Connections/ConnectionsProvider'));
 const ConnectionsRouter = lazy(() => import('./Connections/ConnectionsRouter'));
@@ -12,6 +13,8 @@ const ConnectionsNYTArchive = lazy(() => import('./Connections/ConnectionsNYTArc
 const ConnectionsNYTToday = lazy(() => import('./Connections/ConnectionsNYTToday'));
 const ConnectionsLanding = lazy(() => import('./Connections/ConnectionsLanding'));
 
+const isValentines = new Date().getMonth() === 1 && new Date().getDate() === 14;
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Router>
     <Suspense fallback={<LoadingSpinner />}>
@@ -57,6 +60,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
           )}
         />
 
+        {isValentines && <Route path="/valentine" Component={Valentine} />}
         <Route path="*" Component={Home} />
       </Routes>
     </Suspense>

yarn.lock

@@ -1914,6 +1914,11 @@ dom-align@^1.7.0:
   resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz"
   integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==
 
+[email protected]:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-confetti/-/dom-confetti-0.2.2.tgz#bdf2e7652d37b5cffb532c0a3263d108dd8a2363"
+  integrity sha512-+UVH9Y85qmpTnbmFURwLWjqLIykyIrsNSRkPX/eFlBuOURz9RDX8JoZHnajZHyFuCV0w/K3+tZK0ztfoTw6ejg==
+
 electron-to-chromium@^1.4.477:
   version "1.4.512"
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.512.tgz"
@@ -3737,6 +3742,13 @@ react-burger-menu@^3.0.9:
     prop-types "^15.7.2"
     snapsvg-cjs "0.0.6"
 
+react-dom-confetti@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom-confetti/-/react-dom-confetti-0.2.0.tgz#76df26762da532057d5b1fbe38a8096f9dc33d40"
+  integrity sha512-+XRTi+WlCrcRN2dTjdEopOaPFtS7hpaHRRQ0sHiVRGqpchKz4QVh3i+6eLEEpNHYpN2VgPmhjvJ/vnjmUYhlIQ==
+  dependencies:
+    dom-confetti "0.2.2"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"