From c647b92a29064a6893df081314c2cc20263b793e Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Fri, 13 Oct 2023 14:06:51 +1100
Subject: [PATCH] preform animation only content has changed

---
 src/app/page.module.scss |   4 ++
 src/app/page.tsx         | 118 ++++++++++++++++++++++++++++-----------
 2 files changed, 90 insertions(+), 32 deletions(-)

diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 62aa8d9..aa12f04 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -7,6 +7,10 @@
   background-image: url("/noise.png");
   background-blend-mode: hard-light;
   .motto {
+    // Initial for animation
+    filter: blur(10px);
+    opacity: 0;
+    
     width: 50vw;
     margin-right: 10vw;
     .content {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0d1e9ee..0ae5042 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,47 +1,101 @@
-"use client"
+"use client";
 
-import style from "./page.module.scss"
-import "./global.scss"
+import "./global.scss";
+import style from "./page.module.scss";
 
-import gsap from 'gsap'
-import { useLayoutEffect, useRef } from "react"
+import gsap from "gsap";
+import { useEffect, useRef, useState } from "react";
 
 export default function Home() {
-  let timeline = gsap.timeline()
-  const motto = useRef(null)
-  function click() {
-    timeline.to(motto.current, {
-      opacity: 0,
-      filter: "blur(10px)",
-      duration: 0.2,
-      ease: "in"
-    })
-    // Change contents here
-    timeline.to(motto.current, {
-      opacity: 1,
-      filter: "blur(0px)",
-      duration: 0.2,
-      ease: "out"
+  let timeline = gsap.timeline();
+
+  var updateTime = 10 * 1000;
+  const motto = useRef(null);
+  const [hitokoto, setHitokoto] = useState("");
+  const [fromWho, setFromWho] = useState("");
+  const [from, setFrom] = useState("");
+
+  let hitokoto_indicator = ""
+
+  async function updateMotto() {
+    console.log("refresh")
+    let ctx = gsap.context(async () => {
+      var data = await new Promise<{
+        hitokoto: string;
+        from_who: string;
+        from: string;
+      }>(async (res, rej) => {
+        try {
+          const response = await fetch("https://v1.hitokoto.cn");
+          if (response.ok) {
+            res(await response.json());
+            return;
+          } else {
+            rej(await response.json());
+            return;
+          }
+        } catch (error) {
+          rej(String(error));
+          return;
+        }
+      });
+
+      if (data.hitokoto !== hitokoto_indicator) {
+        hitokoto_indicator = data.hitokoto
+
+        timeline.to(motto.current, {
+          opacity: 0,
+          filter: "blur(10px)",
+          duration: 0.2,
+          ease: "in",
+        });
+
+        setHitokoto(data.hitokoto);
+        setFromWho(data.from_who);
+        setFrom(data.from);
+
+        timeline.to(motto.current, {
+          opacity: 1,
+          filter: "blur(0px)",
+          duration: 0.2,
+          ease: "out",
+        })
+      } else {
+        console.log("not updated")
+      }
     })
+    ctx.revert()
   }
-  useLayoutEffect(() => {
+
+  useEffect(() => {
     let ctx = gsap.context(() => {
-      timeline.from(motto.current, {
-        opacity: 0,
-        filter: "blur(10px)",
-        duration: 0.2,
-        ease: "out"
-      })
+      loop(updateMotto, updateTime);
     })
+
     
-    return () => ctx.revert()
-  }, [])
+
+    return () => ctx.revert();
+  }, []);
+
   return (
     <main className={`${style.main} ${style.dark}`}>
       <div className={style.motto} ref={motto}>
-        <div className={style.content}>人人生而自由，在尊严和权利上一律平等。他们赋有理性和良心，并应以兄弟关系的精神相对待。</div>
-        <div className={style.author}>联合国《世界人权宣言》</div>
+        <div className={style.content}>{hitokoto}</div>
+        <div className={style.author}>
+          {fromWho}《{from}》
+        </div>
       </div>
     </main>
-  )
+  );
+}
+
+function loop(task: () => void, time: number) {
+  task();
+  function f() {
+    setTimeout(() => {
+      task();
+      f();
+    }, time);
+  }
+  f();
 }