@ -1,4 +1,4 @@
import { useEffect , useState } from "react" ; import { useEffect , useMemo , useRef , use State } from "react" ;
import { Button } from "../comps/button" ; import { Button } from "../comps/button" ;
import { useText } from "../utils/usetext.jsx" ; import { useText } from "../utils/usetext.jsx" ;
import { useNavigate } from "react-router-dom" ; import { useNavigate } from "react-router-dom" ;
@ -7,6 +7,7 @@ import Canvas from "../comps/canvas.jsx";
import Lottie from "lottie-react" ; import Lottie from "lottie-react" ;
import hint _animation from '../assets/lottie/hint.json' ; import hint _animation from '../assets/lottie/hint.json' ;
import egg _bg from '../assets/lottie/egg_bg.json' ; import egg _bg from '../assets/lottie/egg_bg.json' ;
import circle from '../assets/lottie/circle.json' ;
import { lookatKeyword } from "../utils/firebase.js" ; import { lookatKeyword } from "../utils/firebase.js" ;
const State = { const State = {
@ -14,6 +15,8 @@ const State={
Explore : 'Explore' , Explore : 'Explore' ,
} }
const AnimationTime = 1000 ;
export default function Explore ( ) { export default function Explore ( ) {
const { selectedKeyword , getText } = useText ( ) ; const { selectedKeyword , getText } = useText ( ) ;
@ -26,6 +29,19 @@ export default function Explore() {
const [ state , setState ] = useState ( State . Intro ) ; const [ state , setState ] = useState ( State . Intro ) ;
const [ lookat , setLookat ] = useState ( selectedKeyword [ 0 ] || null ) ; const [ lookat , setLookat ] = useState ( selectedKeyword [ 0 ] || null ) ;
const [ showInfo , setShowInfo ] = useState ( false ) ; const [ showInfo , setShowInfo ] = useState ( false ) ;
const sortedKeywords = useMemo ( ( ) => [ ... selectedKeyword ] ? . sort ( ( a , b ) => a . id - b . id ) , [ selectedKeyword ] ) ;
console . log ( sortedKeywords ) ;
const refTarget = useRef ( ) ;
function updateTarget ( x , y ) {
if ( refTarget . current ) {
refTarget . current . style . left = ` ${ x } px ` ;
refTarget . current . style . top = ` ${ y } px ` ;
}
}
useEffect ( ( ) => { useEffect ( ( ) => {
@ -37,7 +53,7 @@ export default function Explore() {
useEffect ( ( ) => { useEffect ( ( ) => {
const timeoutId = setTimeout ( ( ) => { const timeoutId = setTimeout ( ( ) => {
setState ( State . Explore ) ; setState ( State . Explore ) ;
} , 2000 ) ; } , AnimationTime ) ;
return ( ) => { return ( ) => {
clearTimeout ( timeoutId ) ; clearTimeout ( timeoutId ) ;
@ -58,56 +74,60 @@ export default function Explore() {
return ( return (
< > < >
< main className = "!px-0 !gap-0 !justify-start" > < main className = "!px-0 !gap-0 !justify-start" >
< section className = "z-10 absolute top-[1.5rem] left-[1.5rem] right-[1.5rem] flex flex-row justify-between items-center" > < section className = "z-10 fixed top-[1.5rem] left-[1.5rem] right-[1.5rem] flex flex-row justify-between items-center" >
< button className = "uppercase flex flex-row" onClick = { ( ) => { < button className = "uppercase flex flex-row" onClick = { ( ) => {
navigate ( '/keywords' ) ; navigate ( '/keywords' ) ;
} } > < img src = "back.svg" alt = "back" / > { getText ( 'button_reselect' ) } < / button > } } > < img src = "back.svg" alt = "back" / > { getText ( 'button_reselect' ) } < / button >
< button className = "z-20 w-[1.875rem] border aspect-square flex justify-center items-center rounded-full" < button className = "z-20 mr-[2.5rem] w-[1.875rem] border aspect-square flex justify-center items-center rounded-full"
onClick = { ( ) => { onClick = { ( ) => {
setShowInfo ( ! showInfo ) ; setShowInfo ( ! showInfo ) ;
} } > { ! showInfo ? 'i' : < img src = "x.svg" alt = "close" / > } < / button > } } > { ! showInfo ? 'i' : < img src = "x.svg" alt = "close" / > } < / button >
< / section > < / section >
< div className = "w-full flex-1 flex justify-center items-center overflow-hidden" > < div className = "w-full flex justify-center items-center overflow-hidden p-[1rem] " >
< div className = "w-full relative aspect-square" > < div className = "w-full relative aspect-square" >
{ /* <img src="egg_bg.svg" alt="egg" className="w-full object-contain"/> */ } { /* <img src="egg_bg.svg" alt="egg" className="w-full object-contain"/> */ }
< Canvas className = "absolute inset-0 top-0 left-0 w-full h-full transform-origin-center transform-[scale(1.1)]" < Canvas className = "absolute inset-0 top-0 left-0 w-full h-full transform-origin-center transform-[scale(1.1)]"
lookat = { selectedKeyword . indexOf ( lookat ) } / > lookat = { selectedKeyword . indexOf ( lookat ) }
updateTarget = { updateTarget } / >
< div className = "absolute inset-0 top-0 left-0 w-full h-full transform-origin-center transform-[scale(1.1)]" > < div className = "absolute inset-0 top-0 left-0 w-full h-full transform-origin-center transform-[scale(1.1)]" >
< img src = "egg_bg(500x500).png" alt = "egg" className = "absolute w-full object-contain" / > < img src = "egg_bg(500x500).png" alt = "egg" className = "absolute w-full object-contain" / >
< Lottie animationData = { egg _bg } loop = { true } className = 'absolute w-full h-full' / > < Lottie animationData = { egg _bg } loop = { true } className = 'absolute w-full h-full' / >
< / div > < / div >
{ / * < d i v r e f = { r e f T a r g e t } c l a s s N a m e = " a b s o l u t e w - [ 3 4 p x ] h - [ 3 4 p x ] " >
< Lottie animationData = { circle } loop = { true } className = 'absolute translate-x-[-50%] translate-y-[-50%]' / >
< / div > * / }
< / div > < / div >
< / div > < / div >
< div className = "flex flex-row gap-[0.75rem] justify-center items-center mt-[1.5rem]" > < div className = "flex flex-row gap-[0.75rem] justify-center items-center mt-[0.4 1rem]" >
< img src = "eye.svg" alt = "eye" className = "w-[0.9965rem] object-contain" / > < img src = "eye.svg" alt = "eye" className = "w-[0.9965rem] object-contain" / >
< div className = "text-[0.75 rem]" > { getText ( 'title_observe' ) } < / div > < div className = "text-[1 rem]" > { getText ( 'title_observe' ) } < / div >
< / div > < / div >
< section className = "w-full px-[1.75rem] flex flex-col mt-[1.44 rem]" > < section className = "w-full px-[2.44rem] flex flex-col mt-[1.22 rem]" >
< div className = "w-full overflow-x-auto py-[1 rem]" > < div className = "w-full grid grid-cols-2 gap-[0.75 rem]" >
< div className = "flex flex-row gap-[0.75rem]" > { /* <div className="flex flex-row flex-wrap gap-[0.75rem]"> */ }
{ selectedKeyword . map ( ( keyword , index ) => ( { sortedKeywords . map ( ( keyword , index ) => (
< div key = { index } className = "w-full flex justify-center items-center border border-white" < div key = { index } className = "flex justify-center items-center border border-white"
style = { { style = { {
backgroundColor : lookat && lookat . title === keyword . title ? '#939393' : 'transparent' , backgroundColor : lookat && lookat . title === keyword . title ? '#939393' : 'transparent' ,
/ / c o l o r : l o o k a t & & l o o k a t . t i t l e = = = k e y w o r d . t i t l e ? ' b l a c k ' : ' w h i t e ' , / / c o l o r : l o o k a t & & l o o k a t . t i t l e = = = k e y w o r d . t i t l e ? ' b l a c k ' : ' w h i t e ' ,
} } } }
onClick = { ( ) => setLookat ( keyword ) } > onClick = { ( ) => setLookat ( keyword ) } >
< span className = "text-center text-nowrap text-[0.6875rem] px-[0.97rem] py-[0.47 rem]" > { keyword . title } < / span > < span className = "text-center text-nowrap text-[1rem] py-[1.25 rem]" > { keyword . title } < / span >
< / div > < / div >
) ) } ) ) }
< / div > { /* </div> */ }
< / div > < / div >
< div className = "w-full py-[0.5 rem]" > < div className = "w-full mt-[1.31 rem]" >
{ lookat && ( { lookat && (
< div className = "text-[0.875rem] tracking-[0.0875 rem] leading-[160%]" > { lookat . content } < / div > < div className = "text-[1rem] tracking-[0.1 rem] leading-[160%]" > { lookat . content } < / div >
) } ) }
< / div > < / div >
< / section > < / section >
< / main > < / main >
{ showInfo && < About / > } { showInfo && < About onClose = { ( ) => setShowInfo ( false ) } showContact = { true } / > }
< / > < / >
) ; ) ;
} }
