Implemented a rough version of the year's covers.

framedsc · Dec 16, 2023 · ccedc52 · ccedc52
1 parent 80f5284
commit ccedc52
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 36 deletions.
diff --git a/components/home/index.ts b/components/home/index.ts
@@ -0,0 +1 @@
+export * from "./year-cover";
diff --git a/components/home/year-cover.tsx b/components/home/year-cover.tsx
@@ -0,0 +1,151 @@
+import React, { useRef, useEffect, useState, RefObject } from "react";
+import CSS from 'csstype';
+import { IShot } from "@types";
+
+const covers2022 = [
+  {"shotUrl": "https://cdn.framedsc.com/images/1651190325_Cyberpunk2077_2022-04-28_03-58-23.png", "author": "432838731376885762"},
+  {"shotUrl": "https://cdn.framedsc.com/images/1662599787_Monkey_Madness.png", "author": "364473042111561730"},
+]
+
+const getCovers = (year: number) => {
+  switch(year) { 
+    case 2022: { 
+       return covers2022;
+       break; 
+    } 
+    default: { 
+      return [];
+       break; 
+    } 
+ } 
+}
+
+const coverContainerStyle: CSS.Properties = {
+  position: 'relative',
+  //width: '100%',
+  //max-width: '600px', /* Set your desired max-width */
+  width: '600px',
+  height: '800px',
+  overflow: 'hidden',
+  textAlign: 'center',
+  transform: 'translate(-50%, -50%)',
+  left: '50%',
+};
+
+const coverImageStyle: CSS.Properties = {
+  height: '100%',
+  display: 'block',
+  objectFit: 'cover',
+}
+
+const coverFrameStyle: CSS.Properties = {
+  position: 'absolute',
+  top: '20px', /* Adjust top position */
+  left: '20px', /* Adjust left position */
+  right: '20px', /* Adjust right position */
+  bottom: '20px', /* Adjust bottom position */
+  backdropFilter: 'blur(20px) brightness(125%) saturate(120%)',
+  maskComposite: 'exclude',
+  mask:
+    'linear-gradient(transparent 0%, white 0%, white calc(0% + 15px), transparent calc(0% + 15px), transparent calc(100% - 15px), white calc(100% - 15px), white 100%, transparent 100%), linear-gradient(0.25turn, transparent 0%, white 0%, white calc(0% + 15px), transparent calc(0% + 15px), transparent calc(100% - 15px), white calc(100% - 15px), white 100%, transparent 100%)',
+}
+
+const framedTextStyle: CSS.Properties = {
+  position: 'absolute',
+  top: '13%',
+  left: '50%',
+  fontWeight: 'bold',
+  fontSize: '110px',
+  textAlign: 'center',
+  transform: 'translate(-50%, -50%)',
+  opacity: '90%',
+  //mix-blend-mode: 'screen',
+  //color: '#dbdfd8',
+}
+
+const yearTextStyle: CSS.Properties = {
+  position: 'absolute',
+  top: '85%',
+  left:' 50%',
+  fontWeight: 'lighter',
+  fontSize: '95px',
+  textAlign: 'center',
+  transform: 'translate(-50%, -50%)',
+  opacity: '80%',
+  mixBlendMode: 'screen',
+  //color: '#dbdfd8',
+}
+
+export const YearCover = (year: number) => {
+  const covers = getCovers(year);
+
+  return (
+    <div className="year-cover-container" style={coverContainerStyle}>
+      <div className="year-cover-frame" style={coverFrameStyle}></div>
+        <img src={ covers[Math.floor(Math.random() * Math.floor(covers.length))].shotUrl } style={coverImageStyle}/>
+      <div className="cover-framed-text" style={framedTextStyle}>
+        FRAMED
+      </div>
+      <div className="cover-year-text" style={yearTextStyle}>
+        { year }
+      </div>
+    </div>
+  );
+};
+
+/*
+//const [image1, setImage1] = useRef({ shotUrl: "", author: 0});
+//const [image2, setImage2] = useState< any | null>(null);
+var image1 = { shotUrl: "", author: ""};
+var image2 = { shotUrl: "", author: ""};
+var imageToDisplay = 1;
+//const renderInitialized = useRef(false)
+
+export const YearCover = (year: number) => {
+  //const [switchShotInterval, setSwitchShotInterval] = useState(null);
+
+  function switchImage(year: number) {
+    const covers = getCovers(year);
+
+    if(imageToDisplay === 1){
+      imageToDisplay = 2
+      image1 = (covers[Math.floor(Math.random() * Math.floor(covers.length))]);
+    }
+    else if (imageToDisplay === 2){
+      imageToDisplay = 1
+      image2 = (covers[Math.floor(Math.random() * Math.floor(covers.length))]);
+    }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      switchImage(year);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  function imageElement(imageURL: string, shouldDisplay: boolean){
+    return(
+    <div className="shot-wrapper" style={{opacity: shouldDisplay ? 1 : 0, transition: 'opacity 0.5s'}}>
+      <img src={ imageURL } style={coverImageStyle}/>
+    </div>
+    )
+  }
+  
+  const returnObject = {
+    html: <div className="year-cover-container" style={coverContainerStyle}>
+    <div className="year-cover-frame" style={coverFrameStyle}></div>
+    { imageElement(image1.shotUrl, imageToDisplay === 1) }
+    { imageElement(image2.shotUrl, imageToDisplay === 2) }
+    <div className="cover-framed-text" style={framedTextStyle}>
+      FRAMED
+    </div>
+    <div className="cover-year-text" style={yearTextStyle}>
+      { year }
+    </div>
+  </div>
+  }
+
+  return returnObject;
+};
+*/
diff --git a/components/index.ts b/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./charts";
 export * from "./global";
+export * from "./home";
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -11,6 +11,8 @@ import {
 } from "@components/experience-fragments";
 import Link from "next/link";
 
+import { YearCover} from "@components/home";
+
 import { getHofAuthors, getHofImages, getSysImages } from './api/request';
 import { addProperties, normalizeData } from '../util/utils';
 
@@ -76,42 +78,7 @@ const Home = () => {
       <Head>
         <title>Home</title>
       </Head>
-      <LoadWrapper>
-        <main>
-          <div className="absolute z-20 w-full">
-            <Container className="grid grid-rows-2 md:grid-rows-none md:grid-cols-2 gap-0 min-h-screen md:h-auto">
-              <div className="h-full md:h-screen flex flex-col justify-center pr-4 md:pr-10 md:text-right">
-                <h1 className="font-bold text-6xl md:text-8x1 lg:text-8xl load transition-all -translate-y-10 opacity-0 duration-500">
-                  FRAMED
-                </h1>
-                <h2 className="text-2xl font-bold load transition-all -translate-y-10 opacity-0 duration-500">
-                  Year in Review 2022
-                </h2>
-                <Link
-                  className="rounded-md bg-gray-100 text-gray-900 border hover:bg-framed-black hover:text-gray-100 w-fit md:ml-auto px-4 py-2 mt-4 font-bold load transition-all -translate-y-10 opacity-0 duration-500"
-                  href="/data"
-                >
-                  View
-                </Link>
-              </div>
-            </Container>
-          </div>
-          <div className="grid z-10 md:grid-rows-none md:grid-cols-2 gap-0 h-screen md:h-auto">
-            <div className="h-full z-10 md:h-screen flex flex-col justify-center bg-black/30 backdrop-blur-3xl border-r border-r-white/10 shadow-2xl"></div>
-          </div>
-          <picture>
-            <img
-              loading="lazy"
-              className="load top-0 absolute transition-all -translate-y-10 opacity-0 duration-500 h-full md:h-screen object-cover w-full"
-              src={`${imgSrc.current?.replace(
-                "https://cdn.discordapp.com",
-                "https://media.discordapp.net",
-              )}?width=2560&height=1440`}
-              alt="Landscape picture"
-            />
-          </picture>
-        </main>
-      </LoadWrapper>
+    { YearCover(2022) }
     </>
   );
 };