update

src/pages/explore.jsx

@@ -7,8 +7,7 @@ import Canvas from "../comps/canvas.jsx";
 import Lottie from "lottie-react";
 import hint_animation from '../assets/lottie/hint.json';
 import egg_bg from '../assets/lottie/egg_bg.json';
-import circle from '../assets/lottie/circle.json';
+import { onLookatChange, lookatKeyword } from "../utils/firebase.js";
-import { lookatKeyword } from "../utils/firebase.js";
 
 const State={
     Intro: 'Intro',
@@ -47,7 +46,7 @@ export default function Explore({onClose}) {
     useEffect(()=>{
 
         // if(!lookat)
-        lookatKeyword(lookat);
+        // lookatKeyword(lookat);
 
     },[lookat]);
 
@@ -56,8 +55,14 @@ export default function Explore({onClose}) {
             setState(State.Explore);
         }, AnimationTime);
 
+        const unsub=onLookatChange((new_lookat)=>{
+            setLookat(new_lookat);
+            console.log("Lookat changed:", new_lookat);
+        });
+
         return () => {
             clearTimeout(timeoutId);
+            unsub();
         };
 
     },[]);
@@ -108,6 +113,7 @@ export default function Explore({onClose}) {
                 <div className="text-[1rem]">{getText('title_observe')}</div>
             </div>
             <section className="w-full px-[2.44rem] flex flex-col mt-[1.22rem]">
+                {/* {JSON.stringify(lookat)} */}
                 <div className="w-full grid grid-cols-2 gap-[0.75rem]">
                     {/* <div className="flex flex-row flex-wrap gap-[0.75rem]">    */}
                         {sortedKeywords.map((keyword, index) => (
@@ -118,9 +124,11 @@ export default function Explore({onClose}) {
                                 }}
                                 onClick={()=>{
                                     if(lookat && lookat.title===keyword.title){
-                                        setLookat(null);
+                                        // setLookat(null);
+                                        lookatKeyword(null);
                                     }else{
-                                        setLookat(keyword)
+                                        // setLookat(keyword)
+                                        lookatKeyword(keyword);
                                     };
                                 }}>
                                 <span className="text-center text-nowrap text-[1rem] py-[1.25rem]">{keyword.title}</span>

src/utils/firebase.js

@@ -8,15 +8,16 @@ import { exists } from "firebase/firestore/pipelines";
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: "AIzaSyB3Yfrh18w5VNSb36LFHJHvegTSv_W1VOU",
+  apiKey: "AIzaSyBPI9CDh0rnGnFAc4xSCfTC43oDDblEAsY",
-  authDomain: "uc-23070-grayscale.firebaseapp.com",
+  authDomain: "uc-23070-grayscale-backup.firebaseapp.com",
-  projectId: "uc-23070-grayscale",
+  projectId: "uc-23070-grayscale-backup",
-  storageBucket: "uc-23070-grayscale.firebasestorage.app",
+  storageBucket: "uc-23070-grayscale-backup.firebasestorage.app",
-  messagingSenderId: "866564340708",
+  messagingSenderId: "611635514938",
-  appId: "1:866564340708:web:31eea78e6c56eeab6825f1",
+  appId: "1:611635514938:web:897fdb87381a0e54166f03",
-  measurementId: "G-NNY50B5T9F"
+  measurementId: "G-F2TFEBMWCN"
 };
 
+
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 
@@ -79,8 +80,9 @@ export function lookatKeyword(keyword) {
 
     // Update the keyword document with the focused state
     setDoc(keywordRef, {
-        id: keyword.id,
+        // id: keyword.id,
-        title: keyword.title,
+        // title: keyword.title,
+        ...keyword,
         updatedTime: new Date(),
     });
 }
@@ -128,3 +130,18 @@ export async function getState(){
     }
 }
 
+export function onLookatChange(callback) {
+
+    const db = getFirestore(app);
+    const keywordRef = doc(collection(db, "lookat"), 'latest');
+
+   const unsubscribe = onSnapshot(keywordRef, (doc) => {
+       if (doc.exists()) {
+           callback(doc.data());
+       } else {
+           console.log("No such document!");
+       }
+   });
+
+   return unsubscribe;
+}

src/utils/usetext.jsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import useSWR from "swr";
-import { onStateChange } from "./firebase";
+import { onStateChange,  } from "./firebase";
 
 const TextContent=createContext();