feat(directory): added animated cursor

2023-10-23 16:47:09 -04:00
parent f361049de0
commit 67daf20aa7
22 changed files with 100 additions and 29 deletions
--- a/directory/src/routes/Error.jsx
+++ b/directory/src/routes/Error.jsx
@@ -20,6 +20,7 @@ import { useHeader } from '@/state/header';
 import VoiceElement from '@/component/voice';
 import spine from '!/libs/spine-player'
 import '!/libs/spine-player.css'
+import AnimatedCursor from "react-animated-cursor"
 import useUmami from '@/state/insights';

 const voiceOnAtom = atomWithStorage('voiceOn', false)
@@ -186,6 +187,25 @@ export default function Error() {
          handleAduioStateChange={handleAduioStateChange}
        />
      </main>
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={36}
+        innerScale={1}
+        outerScale={0.5}
+        outerAlpha={0.7}
+        hasBlendMode={true}
+        innerStyle={{
+          backgroundColor: 'var(--cursor-color)'
+        }}
+        outerStyle={{
+          backgroundColor: 'transparent',
+          border: '3px solid var(--cursor-color)'
+        }}
+        clickables={[
+          'a',
+          'section[data-type="clickable"]',
+        ]}
+      />
    </section>
  );
 }
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -2,7 +2,7 @@ import React, {
  useState,
  useEffect,
  useMemo,
-  useCallback
+  useCallback,
 } from 'react'
 import PropTypes from 'prop-types';
 import {
@@ -29,6 +29,7 @@ import Popup from '@/component/popup';
 import Border from '@/component/border';
 import CharIcon from '@/component/char_icon';
 import ToTopButton from '@/component/totop_button';
+import AnimatedCursor from "react-animated-cursor"

 const currentYear = new Date().getFullYear()

@@ -79,8 +80,7 @@ export default function Root() {
    setTimeout(() => {
      document.querySelector('.loader').style.display = 'none'
    }, 500)
-  }
-    , [])
+  }, [])

  return (
    <>
@@ -88,6 +88,7 @@ export default function Root() {
        <section
          className={`${header.navButton} ${drawerHidden ? '' : header.active}`}
          onClick={() => toggleDrawer()}
+          data-type="clickable"
        >
          <section className={header.bar} />
          <section className={header.bar} />
@@ -138,6 +139,25 @@ export default function Root() {
        <ScrollRestoration />
      </main>
      <FooterElement />
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={36}
+        innerScale={1}
+        outerScale={0.5}
+        outerAlpha={0.7}
+        hasBlendMode={true}
+        innerStyle={{
+          backgroundColor: 'var(--cursor-color)'
+        }}
+        outerStyle={{
+          backgroundColor: 'transparent',
+          border: '3px solid var(--cursor-color)'
+        }}
+        clickables={[
+          'a',
+          'section[data-type="clickable"]',
+        ]}
+      />
    </>
  )
 }
@@ -150,7 +170,7 @@ function FooterElement() {
    return (
      <footer className={footer.footer}>
        <section className={`${footer.links} ${footer.section}`}>
-          <section className={footer.item}>
+          <section className={footer.item} data-type="clickable">
            <Popup
              className={footer.link}
              title={i18n('disclaimer')}
@@ -164,7 +184,7 @@ function FooterElement() {
          <section className={footer.item}>
            <Link reloadDocument to="https://gura.ch/aklive2d-gh" target="_blank" className={footer.link}>GitHub</Link>
          </section>
-          <section className={footer.item}>
+          <section className={footer.item} data-type="clickable">
            <Popup
              className={footer.link}
              title={i18n('contact_us')}
@@ -268,6 +288,7 @@ function HeaderTabsElement({ item }) {
        item.onClick && item.onClick(e, currentTab)
      }}
      style={item.style}
+      data-type="clickable"
    >
      <section className={classes['text-wrapper']}>
        <span>{i18n(item.key)}</span>
@@ -306,7 +327,7 @@ function HeaderButton() {
    )
  } else {
    return (
-      <section className={header['back-arrow']}>
+      <section className={header['back-arrow']} data-type="clickable">
        <Link to="/" className={header.link}>
          <section className={header.arrow1} />
          <section className={header.arrow2} />
--- a/directory/src/routes/path/Changelogs.jsx
+++ b/directory/src/routes/path/Changelogs.jsx
@@ -28,6 +28,7 @@ export default function Changelogs() {
    setExtraArea([])
    setFastNavigation([])
    setHeaderIcon(null)
+    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
  }, [setExtraArea, setFastNavigation, setHeaderIcon, setTitle])

  useEffect(() => {
--- a/directory/src/routes/path/Home.jsx
+++ b/directory/src/routes/path/Home.jsx
@@ -64,6 +64,7 @@ export default function Home() {

  useEffect(() => {
    setContent(config?.operators || [])
+    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
  }, [config])

  const handleAduioStateChange = useCallback((e, state) => {
@@ -258,6 +259,15 @@ export default function Home() {
 function OperatorElement({ item, hidden, handleVoicePlay }) {
  const { textDefaultLang, language, alternateLang } = useLanguage()

+  const onMouseEnter = useCallback(() => {
+    handleVoicePlay(`/${item.link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`)
+    document.documentElement.style.setProperty('--cursor-color', item.color);
+  }, [handleVoicePlay, item.color, item.link])
+
+  const onMouseLeave = useCallback(() => {
+    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
+  }, [])
+
  return useMemo(() => {
    return (
      <NavLink
@@ -266,7 +276,8 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
        hidden={hidden}
      >
        <section
-          onMouseEnter={() => handleVoicePlay(`/${item.link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`)}
+          onMouseEnter={() => onMouseEnter()}
+          onMouseLeave={() => onMouseLeave()}
        >
          <section className={classes['background-filler']} />
          <section className={classes.outline} />
@@ -296,7 +307,7 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
        </section>
      </NavLink>
    )
-  }, [item, hidden, language, alternateLang, textDefaultLang, handleVoicePlay])
+  }, [item, hidden, language, alternateLang, textDefaultLang, onMouseEnter, onMouseLeave])
 }

 function VoiceSwitchElement({ src, replay, handleAduioStateChange }) {
--- a/directory/src/routes/path/Operator.jsx
+++ b/directory/src/routes/path/Operator.jsx
@@ -130,6 +130,7 @@ export default function Operator() {
      fetch(`/${import.meta.env.VITE_DIRECTORY_FOLDER}/voice_${config.link}.json`).then(res => res.json()).then(data => {
        setVoiceConfig(data)
      })
+      document.documentElement.style.setProperty('--cursor-color', config.color);
    }
  }, [key, operators, setHeaderIcon])

@@ -411,7 +412,7 @@ export default function Operator() {
                  <section className={classes['styled-selection']}>
                    {item.options.map((option) => {
                      return (
-                        <section className={`${classes.content} ${option.activeRule && option.activeRule() ? classes.active : ''}`} onClick={(e) => option.onClick(e)} key={option.name}>
+                        <section className={`${classes.content} ${option.activeRule && option.activeRule() ? classes.active : ''}`} onClick={(e) => option.onClick(e)} key={option.name} data-type="clickable">
                          <section className={classes.option}>
                            <section className={classes.outline} />
                            <section className={`${classes.text} ${classes['no-overflow']}`}>{i18n(option.name)}</section>