From 1d0d8d0cfa6d961eae10a3a62f1461859a7f2d90 Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Fri, 5 May 2023 20:09:19 -0400
Subject: [PATCH] feat(directory): header title will only contain operator
 name, instead of full name

---
 Version                                  |  2 +-
 changelogs.yaml                          |  2 ++
 directory/Version                        |  2 +-
 directory/src/component/char_icon.jsx    |  2 +-
 directory/src/routes/Root.jsx            |  3 +++
 directory/src/routes/path/Operator.jsx   | 19 +++++++++++++++++--
 directory/src/scss/root/Root.module.scss |  3 +--
 7 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/Version b/Version
index c3f6bdc..b55f108 100644
--- a/Version
+++ b/Version
@@ -1 +1 @@
-3.6.4
\ No newline at end of file
+3.6.5
\ No newline at end of file
diff --git a/changelogs.yaml b/changelogs.yaml
index 086e0e9..dbb20b2 100644
--- a/changelogs.yaml
+++ b/changelogs.yaml
@@ -42,6 +42,8 @@ showcase:
   2021/05/26:
     - First commit
 directory:
+  2023/05/05:
+    - Header title will only contain operator name, instead of full name (skin name + operator name)
   2023/05/04:
     - Added Start animation for supported operator
   2023/05/01:
diff --git a/directory/Version b/directory/Version
index a77d7d9..5975b14 100644
--- a/directory/Version
+++ b/directory/Version
@@ -1 +1 @@
-1.2.7
\ No newline at end of file
+1.2.8
\ No newline at end of file
diff --git a/directory/src/component/char_icon.jsx b/directory/src/component/char_icon.jsx
index c845ca6..4961847 100644
--- a/directory/src/component/char_icon.jsx
+++ b/directory/src/component/char_icon.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export default function CharIcon(props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox={props.viewBox}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox={props.viewBox} style={props.style}>
       {
         props.type === 'operator' ?
           <g><path d="M89 17.5 30.4 57 24.3 71.4 82.9 32.6Z"></path><path d="M0 17.5 58.6 57 64.7 71.4 6.1 32.7Z"> </path><path d="M89 0 30.4 39.5 24.3 53.9 82.9 15.1Z"> </path><path d="M0 0 58.6 39.5 64.7 53.9 6.1 15.2Z"> </path></g>
diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx
index 2899546..c0e5c4d 100644
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -118,6 +118,9 @@ export default function Root() {
                   viewBox={
                     headerIcon === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
                   }
+                  style={{
+                    height: "2.5rem"
+                  }}
                 />
               </section>
             )}
diff --git a/directory/src/routes/path/Operator.jsx b/directory/src/routes/path/Operator.jsx
index f70aa5b..c50f73e 100644
--- a/directory/src/routes/path/Operator.jsx
+++ b/directory/src/routes/path/Operator.jsx
@@ -36,11 +36,26 @@ const getVoiceFoler = (lang) => {
 const defaultSpineAnimation = 'Idle'
 const backgroundAtom = atom(null)
 
+const getPartialName = (type, input) => {
+  let part;
+  switch (type) {
+    case "name":
+      part = 5
+      break;
+    case "skin":
+      part = 1
+      break;
+    default:
+      return input
+  }
+  return input.replace(/^(.+)( )(·|\/)( )(.+)$/, `$${part}`)
+}
+
 const getTabName = (item, language) => {
   if (item.type === 'operator') {
     return 'operator'
   } else {
-    return item.codename[language].replace(/^(.+)( )(·|\/)()(.+)$/, '$1')
+    return getPartialName("skin", item.codename[language])
   }
 }
 
@@ -155,7 +170,7 @@ export default function Operator() {
 
   useEffect(() => {
     if (config) {
-      setTitle(config.codename[language])
+      setTitle(getPartialName("name", config.codename[language]))
     }
   }, [config, language, key, setTitle])
 
diff --git a/directory/src/scss/root/Root.module.scss b/directory/src/scss/root/Root.module.scss
index 3b1030b..40c2e0d 100644
--- a/directory/src/scss/root/Root.module.scss
+++ b/directory/src/scss/root/Root.module.scss
@@ -16,8 +16,7 @@
       line-height: 1.2em;
 
       .icon {
-        width: 3.88rem;
-        margin-right: 1.88rem;
+        margin-right: 1.5rem;
         fill: var(--text-color);
         display: inline-block;
         vertical-align: middle;