Revert "feat(directory): added animated cursor"

This reverts commit b8a2247406.
2023-10-23 18:14:50 -04:00
parent 40b5d85a54
commit 330a2787f8
22 changed files with 28 additions and 96 deletions
--- a/directory/src/App.scss
+++ b/directory/src/App.scss
@@ -15,7 +15,6 @@
  --home-item-background-linear-gradient-color: rgba(0, 0, 0, 10%);
  --home-item-outline-color: rgba(41, 41, 41, 30%);
  --button-color: #999;
-  --cursor-color: var(--text-color);
 }

@mixin dark-theme() {
@@ -31,7 +30,6 @@
  --home-item-background-linear-gradient-color: rgba(255, 255, 255, 10%);
  --home-item-outline-color: rgba(214, 214, 214, 30%);
  --button-color: #666;
-  --cursor-color: var(--text-color);
 }

@media (prefers-color-scheme: dark) {
--- a/directory/src/component/dropdown.jsx
+++ b/directory/src/component/dropdown.jsx
@@ -1,6 +1,5 @@
 import React, {
  useState,
-  useCallback
 } from 'react'
 import PropTypes from 'prop-types';
 import classes from './scss/dropdown.module.scss'
@@ -12,17 +11,9 @@ export default function Dropdown(props) {
    setHidden(!hidden)
  }

-  const onMouseEnter = useCallback((item) => {
-    document.documentElement.style.setProperty('--cursor-color', item.color ? item.color : 'var(--text-color)');
-  }, [])
-
-  const onMouseLeave = useCallback(() => {
-    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
-  }, [])
-
  return (
    <>
-      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`} data-type="clickable">
+      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`}>
        <section
          className={classes.text}
          onClick={() => toggleDropdown()}
@@ -65,9 +56,6 @@ export default function Dropdown(props) {
                        toggleDropdown()
                      }}
                      style={item.color ? { color: item.color } : {}}
-                      data-type="clickable"
-                      onMouseEnter={() => onMouseEnter(item)}
-                      onMouseLeave={() => onMouseLeave()}
                    >
                      {
                        item.icon ? (
--- a/directory/src/component/popup.jsx
+++ b/directory/src/component/popup.jsx
@@ -26,7 +26,7 @@ export default function Popup(props) {
        </section>
      </section>
      <section className={`${classes.overlay} ${hidden ? '' : classes.active}`}
-        onClick={() => toggle()} data-type="clickable"/>
+        onClick={() => toggle()} />
    </section>
    <span
      className={classes['entry-text']}
--- a/directory/src/component/return_button.jsx
+++ b/directory/src/component/return_button.jsx
@@ -8,7 +8,6 @@ export default function ReturnButton(props) {
    <>
      <section className={`${classes['return-button']} ${props.className ? props.className : ''}`}
        onClick={() => props.onClick()}
-        data-type="clickable"
      >
        <section className={classes.wrapper}>
          <section className={classes["arrow-left"]}></section>
--- a/directory/src/component/scss/dropdown.module.scss
+++ b/directory/src/component/scss/dropdown.module.scss
@@ -4,6 +4,7 @@
  user-select: none;
  z-index: 2;
  padding: 0.5em;
+  cursor: pointer;

  &.left {
    .popup, .menu {
@@ -38,6 +39,7 @@
      z-index: -1;
      top: 2.5em;
      right: 0;
+      cursor: auto;
      transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
      overflow: auto;
      padding: 0.5rem;
@@ -91,6 +93,7 @@
    border: 1px solid var(--border-color);
    visibility: hidden;
    color: var(--link-highlight-color);
+    cursor: auto;

    &.left {
      left: 0;
@@ -118,6 +121,7 @@
    }

    .item {
+      cursor: pointer;
      padding: 0.5rem;
      font-size: 1rem;
      display: flex;
@@ -158,6 +162,7 @@
    bottom: 0;
    width: 100vw;
    height: 100vh;
+    cursor: auto;
  }

  &.active,
--- a/directory/src/component/scss/popup.module.scss
+++ b/directory/src/component/scss/popup.module.scss
@@ -1,3 +1,7 @@
+.entry-text {
+  cursor: pointer;
+}
+
 .popup {
  position: fixed;
  left: 0;
--- a/directory/src/component/scss/return_button.module.scss
+++ b/directory/src/component/scss/return_button.module.scss
@@ -9,6 +9,7 @@
  align-items: flex-start;
  padding: 0.6rem 0;
  width: 3rem;
+  cursor: pointer;

  .wrapper {
    display: flex;
--- a/directory/src/component/scss/search_box.module.scss
+++ b/directory/src/component/scss/search_box.module.scss
@@ -49,6 +49,7 @@
    right: 1rem;
    width: 2rem;
    height: 2rem;
+    cursor: pointer;
    opacity: 0;
    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
    visibility: hidden;
--- a/directory/src/component/scss/switch.module.scss
+++ b/directory/src/component/scss/switch.module.scss
@@ -3,6 +3,7 @@
  user-select: none;
  z-index: 2;
  padding: 8px 36px 8px 8px;
+  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
--- a/directory/src/component/scss/totop_button.module.scss
+++ b/directory/src/component/scss/totop_button.module.scss
@@ -2,6 +2,7 @@
  position: fixed;
  user-select: none;
  z-index: 2;
+  cursor: pointer;
  height: 2rem;
  right: 2rem;
  bottom: 1rem;
--- a/directory/src/component/switch.jsx
+++ b/directory/src/component/switch.jsx
@@ -21,7 +21,6 @@ export default function Switch(props) {
          props.handleOnClick(!on)
        }
      }}
-      data-type="clickable"
    >
      <span className={classes.text}>{i18n(props.text)}</span>
      <section className={classes.wrapper}>
--- a/directory/src/component/totop_button.jsx
+++ b/directory/src/component/totop_button.jsx
@@ -52,7 +52,6 @@ export default function ToTopButton(props) {
    <>
      <section className={`${classes['totop-button']} ${clicked ? classes.clicked : ''} ${hidden ? '' : classes.show} ${props.className ? props.className : ''}`}
        onClick={() => { smoothScroll("#root") }}
-        data-type="clickable"
      >
        <section className={classes.bar}></section>
        <section className={classes.bar}></section>
--- a/directory/src/routes/Error.jsx
+++ b/directory/src/routes/Error.jsx
@@ -20,7 +20,6 @@ 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)
@@ -187,25 +186,6 @@ 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,7 +29,6 @@ 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()

@@ -88,7 +87,6 @@ export default function Root() {
        <section
          className={`${header.navButton} ${drawerHidden ? '' : header.active}`}
          onClick={() => toggleDrawer()}
-          data-type="clickable"
        >
          <section className={header.bar} />
          <section className={header.bar} />
@@ -139,25 +137,6 @@ 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"]',
-        ]}
-      />
    </>
  )
 }
@@ -170,7 +149,7 @@ function FooterElement() {
    return (
      <footer className={footer.footer}>
        <section className={`${footer.links} ${footer.section}`}>
-          <section className={footer.item} data-type="clickable">
+          <section className={footer.item}>
            <Popup
              className={footer.link}
              title={i18n('disclaimer')}
@@ -184,7 +163,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} data-type="clickable">
+          <section className={footer.item}>
            <Popup
              className={footer.link}
              title={i18n('contact_us')}
@@ -288,7 +267,6 @@ 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>
@@ -327,7 +305,7 @@ function HeaderButton() {
    )
  } else {
    return (
-      <section className={header['back-arrow']} data-type="clickable">
+      <section className={header['back-arrow']}>
        <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,7 +28,6 @@ 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,7 +64,6 @@ export default function Home() {

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

  const handleAduioStateChange = useCallback((e, state) => {
@@ -259,15 +258,6 @@ 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
@@ -276,8 +266,7 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
        hidden={hidden}
      >
        <section
-          onMouseEnter={() => onMouseEnter()}
-          onMouseLeave={() => onMouseLeave()}
+          onMouseEnter={() => handleVoicePlay(`/${item.link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`)}
        >
          <section className={classes['background-filler']} />
          <section className={classes.outline} />
@@ -307,7 +296,7 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
        </section>
      </NavLink>
    )
-  }, [item, hidden, language, alternateLang, textDefaultLang, onMouseEnter, onMouseLeave])
+  }, [item, hidden, language, alternateLang, textDefaultLang, handleVoicePlay])
 }

 function VoiceSwitchElement({ src, replay, handleAduioStateChange }) {
--- a/directory/src/routes/path/Operator.jsx
+++ b/directory/src/routes/path/Operator.jsx
@@ -130,7 +130,6 @@ 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])

@@ -412,7 +411,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} data-type="clickable">
+                        <section className={`${classes.content} ${option.activeRule && option.activeRule() ? classes.active : ''}`} onClick={(e) => option.onClick(e)} key={option.name}>
                          <section className={classes.option}>
                            <section className={classes.outline} />
                            <section className={`${classes.text} ${classes['no-overflow']}`}>{i18n(option.name)}</section>
--- a/directory/src/scss/_page_base.scss
+++ b/directory/src/scss/_page_base.scss
@@ -66,9 +66,10 @@

  .item {
    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
    width: 12rem;
    margin: 1.25rem;
-    flex-shrink: 0;
    background-image: repeating-linear-gradient(
      90deg,
      var(--home-item-background-linear-gradient-color) 0,
@@ -202,6 +203,7 @@

  .content {
    padding: 0.8rem 0;
+    cursor: pointer;
    transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;

    .option {
--- a/directory/src/scss/root/Root.module.scss
+++ b/directory/src/scss/root/Root.module.scss
@@ -55,8 +55,10 @@
        font-weight: 700;
        padding: 0 1rem;
        text-transform: uppercase;
+        cursor: pointer;
        border-bottom: 0.3rem solid transparent;
        display: inline-block;
+        cursor: pointer;
        text-decoration: none;

        .text-wrapper {
--- a/directory/src/scss/root/header.module.scss
+++ b/directory/src/scss/root/header.module.scss
@@ -38,6 +38,7 @@
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
+  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-start;
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
    "jsdom": "^22.1.0",
    "node-fetch": "^3.3.2",
    "react": "^18.2.0",
-    "react-animated-cursor": "^2.11.2",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "react-router-dom": "^6.17.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,9 +23,6 @@ dependencies:
  react:
    specifier: ^18.2.0
    version: 18.2.0
-  react-animated-cursor:
-    specifier: ^2.11.2
-    version: 2.11.2(react-dom@18.2.0)(react@18.2.0)
  react-dom:
    specifier: ^18.2.0
    version: 18.2.0(react@18.2.0)
@@ -2981,16 +2978,6 @@ packages:
      strip-json-comments: 2.0.1
    dev: false

-  /react-animated-cursor@2.11.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-LV0PtST61tdeW/chCqFt1JLp6i0d5fD9v2uradBcPAkKKCi2Iw7sAcD11ADS1TjXPPj9MOoD9YubEt++/IbZ+g==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /react-dom@18.2.0(react@18.2.0):
    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
    peerDependencies: