feat(directory): finish home page

directory/src/routes/path/changelogs.jsx

@@ -0,0 +1,32 @@
+import {
+  useState,
+  useEffect,
+  useContext
+} from 'react'
+import './changelogs.css'
+import { HeaderContext } from '@/context/useHeaderContext';
+import { LanguageContext } from '@/context/useLanguageContext';
+import useUmami from '@parcellab/react-use-umami'
+
+export default function Changelogs(props) {
+  const _trackEvt = useUmami('/changelogs')
+  const {
+    setTitle,
+    setTabs,
+    currentTab, setCurrentTab
+  } = useContext(HeaderContext)
+  const { language, i18n } = useContext(LanguageContext)
+
+  useEffect(() => {
+    setTitle('changelogs')
+    setTabs([])
+  }, [])
+
+  return (
+    <section>
+      <section>
+        Under Construction :(
+      </section>
+    </section>
+  )
+}

directory/src/routes/path/home.css

@@ -0,0 +1,126 @@
+.home .item-group {
+    padding: 1rem;
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+}
+
+.home .item-group-date {
+    margin: 1.5rem;
+    font-family: "Bender";
+    font-weight: bold;
+    text-align: right;
+    color: var(--date-color);
+    font-size: 1.5rem;
+    letter-spacing: 0.1rem;
+    flex: auto;
+}
+
+.home .item-group .item {
+    position: relative;
+    cursor: pointer;
+    width: 180px;
+    margin: 1.25rem;
+    background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
+}
+
+.home .item-group .item .item-outline {
+    content: "";
+    display: block;
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+}
+
+.home .item-group .item .item-outline{
+    width: 100%;
+    height: 100%;
+    left: -6px;
+    top: -6px;
+    border: var(--home-item-outline-color) 1px dashed;
+    padding: 6px;
+}
+
+.home .item-group .item .item-outline::before,
+.home .item-group .item .item-outline::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: -3px;
+    height: 3px;
+    width: 100%;
+    border-left: var(--text-color) solid 3px;
+    border-right: var(--text-color) solid 3px;
+}
+
+.home .item-group .item .item-outline::before {
+    top: -3px;
+}
+
+.home .item-group .item .item-outline::after {
+    bottom: -3px;
+}
+
+.home .item-group .item:hover .item-outline,
+.home .item-group .item:hover .item-info .item-info-background {
+    opacity: 1;
+    visibility: visible;
+}
+
+.home .item-group .item .item-img {
+    height: 360px;
+    width: 100%;
+    transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+}
+
+.home .item-group .item:hover .item-img {
+    background-color: var(--home-item-hover-background-color);
+}
+
+.home .item-group .item .item-info {
+    white-space: nowrap;
+    position: relative;
+    padding: 0.8rem 0.4rem;
+    line-height: 1;
+}
+
+.home .item-group .item .item-info .item-title-container {
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.home .item-group .item .item-info .item-title-container .item-title,
+.home .item-group .item .item-info .item-text-wrapper {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.home .item-group .item .item-info .item-title-container .item-type {
+    width: 1.5rem;
+    fill: var(--text-color)
+}
+
+.home .item-group .item .item-info .item-text {
+    color: var(--text-color);
+    font-size: 0.75rem;
+    font-family: "Geometos";
+    margin-top: 1rem; 
+}
+
+.home .item-group .item .item-info .item-info-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+    background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
+}

directory/src/routes/path/home.jsx

@@ -1,32 +1,115 @@
 import {
   useState,
   useEffect,
-  useContext
+  useContext,
+  useMemo
 } from 'react'
+import {
+  Link,
+} from "react-router-dom";
 import './home.css'
-import { TitleContext } from '@/context/useTitleContext';
+import { ConfigContext } from '@/context/useConfigContext';
+import { LanguageContext } from '@/context/useLanguageContext';
+import { HeaderContext } from '@/context/useHeaderContext';
+import CharIcon from '@/component/char_icon';
+import MainBorder from '@/component/main_border';
+import useUmami from '@parcellab/react-use-umami'
 
-export default function Home(props) {
-  const { title, setTitle } = useContext(TitleContext)
-  useEffect(() => {
-    fetch("/_assets/directory.json").then(res => res.json()).then(data => {
-      console.log(data)
-    })
-  }, [])
+export default function Home() {
+  const _trackEvt = useUmami('/')
+  const {
+    setTitle,
+    setTabs,
+    currentTab, setCurrentTab } = useContext(HeaderContext)
+  const { config } = useContext(ConfigContext)
+  const {
+    language,
+    textDefaultLang,
+    alternateLang,
+    i18n
+  } = useContext(LanguageContext)
 
   useEffect(() => {
     setTitle('dynamic_compile')
+    setTabs([
+      {
+        key: 'all',
+        text: i18n.key.all
+      }, {
+        key: 'operator',
+        text: i18n.key.elite2
+      }, {
+        key: 'skin',
+        text: i18n.key.skin
+      }
+    ])
+    setCurrentTab('all')
   }, [])
 
+  const renderContent = () => {
+    const list = config?.filter((v) => currentTab === 'all' || currentTab === v.type)
+    const content = []
+    if (list) {
+      console.log(list)
+      let items = {}
+      list.forEach(element => {
+        if (items[element.date]) {
+          items[element.date].push(toItemEl(element))
+        } else {
+          items[element.date] = [toItemEl(element)]
+        }
+      });
+      items = Object.keys(items).sort().reverse().reduce((r, k) => {
+        r[k] = items[k]
+        return r
+      }, {})
+      for (const [date, group] of Object.entries(items)) {
+        content.push(
+          <section className="item-group-wrapper" key={date}>
+            <section className="item-group">
+              {group.map((v) => v)}
+              <section className='item-group-date'>{date}</section>
+            </section>
+            <MainBorder />
+          </section>
+        )
+      }
+    }
+    return content
+  }
+  const toItemEl = (item) => {
+    return (
+      <Link reloadDocument to={`/${item.link}`} className="item" key={item.link}>
+        <section className="item-outline"/>
+        <section className="item-img">
+          <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
+        </section>
+        <section className="item-info">
+          <section className="item-title-container">
+            <section className="item-title">{item.codename[language]}</section>
+            <section className="item-type">
+              <CharIcon
+                type={item.type}
+                viewBox={ 
+                  item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                } />
+            </section>
+          </section>
+          <section className="item-text-wrapper">
+            <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
+          </section>
+          <section className="item-info-background" style={{
+            color: item.color
+          }} />
+        </section>
+      </Link>
+    )
+  }
+  const content = useMemo(() => renderContent(), [currentTab, config, language])
+
   return (
-    <section>
-      <section>
-        {title}
-        <button onClick={() => setTitle('123')}>123</button>
-      </section>
-      <section>
-        22s
-      </section>
+    <section className="home">
+      {content}
     </section>
   )
 }

directory/src/routes/path/news.jsx

@@ -1,27 +0,0 @@
-import {
-  useState,
-  useEffect,
-  useContext
-} from 'react'
-import './news.css'
-import { TitleContext } from '@/context/useTitleContext';
-
-export default function News(props) {
-  const { title, setTitle } = useContext(TitleContext)
-
-  useEffect(() => {
-    setTitle('news')
-  }, [])
-
-  return (
-    <section>
-      <section>
-        1
-        <button onClick={() => setTitle('123')}>123</button>
-      </section>
-      <section>
-        2
-      </section>
-    </section>
-  )
-}

directory/src/routes/path/operator.jsx

@@ -4,13 +4,15 @@ import {
   useContext
 } from 'react'
 import './operator.css'
-import { TitleContext } from '@/context/useTitleContext';
+import { HeaderContext } from '@/context/useHeaderContext';
+import useUmami from '@parcellab/react-use-umami'
 
 export default function Operator(props) {
-  const { title, setTitle } = useContext(TitleContext)
+  const _trackEvt = useUmami('/operator/:key')
+  const { setTitle } = useContext(HeaderContext)
 
   useEffect(() => {
-    setTitle('Chen')
+    setTitle('chen')
   }, [])
 
   return (