add kor translation

packages/webgal/src/UI/Menu/Options/NormalOption.tsx

@@ -2,7 +2,7 @@ import styles from './normalOption.module.scss';
 
 export const NormalOption = (props: any) => {
   return (
-    <div className={styles.NormalOption} style={{ width: props.full ? '100%' : 'auto' }}>
+    <div className={styles.NormalOption} style={{ width: props.full ? '100%' : 'auto', ...props.style }}>
       {/* <div className={styles.NormalOption_title_sd}>{props.title}</div> */}
       {/* <div className={styles.NormalOption_title_bef}>{props.title}</div> */}
       <div className={styles.NormalOption_title}>{props.title}</div>

packages/webgal/src/UI/Menu/Options/System/System.tsx

@@ -32,7 +32,7 @@ export function System() {
   const dispatch = useDispatch();
   const setLanguage = useLanguage();
   const t = useTrans('menu.options.pages.system.options.');
-  const { playSeDialogOpen } = useSoundEffect();
+  const { playSeDialogOpen, playSeEnter, playSeSwitch } = useSoundEffect();
 
   function exportSaves() {
     const gameData: IExportGameData = {
@@ -95,6 +95,7 @@ export function System() {
   }
 
   const [showAbout, setShowAbout] = useState(false);
+  const [showLanguageSelect, setShowLanguageSelect] = useState(false);
 
   function toggleAbout() {
     setShowAbout(!showAbout);
@@ -129,14 +130,53 @@ export function System() {
               currentChecked={userDataState.optionData.skipAll ? 1 : 0}
             />
           </NormalOption>
-          <NormalOption key="option7" title={t('language.title')}>
-            <NormalButton
-              currentChecked={userDataState.optionData.language}
-              textList={Object.values(languages)}
-              functionList={Object.keys(languages).map(
-                (k) => () => setLanguage(language[k as unknown as number] as unknown as language),
+          <NormalOption key="option7" title={t('language.title')} style={{ zIndex: showLanguageSelect ? 1 : undefined }}>
+            <div
+              className={styles.Option_select}
+              onBlur={(event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setShowLanguageSelect(false);
+              }}
+            >
+              <button
+                type="button"
+                className={`${styles.Option_select_button} ${
+                  showLanguageSelect ? styles.Option_select_button_active : ''
+                }`}
+                onClick={() => {
+                  playSeSwitch();
+                  setShowLanguageSelect(!showLanguageSelect);
+                }}
+                onMouseEnter={playSeEnter}
+              >
+                {languages[language[userDataState.optionData.language]]}
+              </button>
+              {showLanguageSelect && (
+                <div className={styles.Option_select_menu}>
+                  {Object.entries(languages).map(([key, name]) => {
+                    const value = language[key as keyof typeof language] as language;
+                    return (
+                      <button
+                        type="button"
+                        key={key}
+                        className={`${styles.Option_select_item} ${
+                          value === userDataState.optionData.language
+                            ? styles.Option_select_item_active
+                            : ''
+                        }`}
+                        onClick={() => {
+                          playSeSwitch();
+                          setLanguage(value);
+                          setShowLanguageSelect(false);
+                        }}
+                        onMouseEnter={playSeEnter}
+                      >
+                        {name}
+                      </button>
+                    );
+                  })}
+                </div>
               )}
-            />
+            </div>
           </NormalOption>
           <NormalOption key="option2" title={t('resetData.title')}>
             <NormalButton

packages/webgal/src/UI/Menu/Options/options.module.scss

@@ -117,6 +117,65 @@
   animation: Elements_in ease-out 0.7s forwards;
 }
 
+.Option_select {
+  position: relative;
+  max-width: 100%;
+  font-size: 150%;
+}
+
+.Option_select_button,
+.Option_select_item {
+  box-sizing: border-box;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: rgba(50, 50, 50, 0.05);
+  color: rgba(160, 170, 160, 1);
+  font: inherit;
+  cursor: pointer;
+}
+
+.Option_select_button {
+  min-width: 10em;
+  padding: 0.2em 1em;
+  text-align: left;
+}
+
+.Option_select_button:hover,
+.Option_select_button:focus-visible,
+.Option_select_button_active {
+  border-bottom-color: rgba(81, 110, 65, 0.9);
+  color: rgba(81, 110, 65, 0.9);
+  font-weight: bold;
+}
+
+.Option_select_menu {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  display: grid;
+  min-width: 100%;
+  padding: 0.25em;
+  background: rgb(235, 243, 250);
+  box-shadow: 0 0.2em 0.8em rgba(34, 75, 55, 0.2);
+}
+
+.Option_select_item {
+  padding: 0.35em 0.75em;
+  background: rgb(235, 243, 250);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.Option_select_item:hover,
+.Option_select_item:focus-visible,
+.Option_select_item_active {
+  background: rgba(81, 110, 65, 0.15);
+  border-bottom-color: rgba(81, 110, 65, 0.9);
+  color: rgba(81, 110, 65, 0.9);
+  font-weight: bold;
+}
+
 .Options_page_button {
   font-family: "思源宋体", serif;
   font-size: 300%;

packages/webgal/src/UI/Translation/Translation.tsx

@@ -44,6 +44,9 @@ export default function Translation() {
           case 'pt_BR':
             setLang(language.ptBr);
             break;
+          case 'ko':
+            setLang(language.ko);
+            break;
           default:
             setLang(language.zhCn);
             break;

packages/webgal/src/UI/Translation/translation.module.scss

@@ -27,18 +27,26 @@
 
 .langSelect{
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 50px;
+  width: 90%;
+  max-width: 1200px;
+  box-sizing: border-box;
   padding: 50px;
 }
 
 .langSelectButton{
+  max-width: 100%;
+  box-sizing: border-box;
   font-family: "资源圆体", serif;
   cursor: pointer;
   font-size: 200%;
   color: #FFFFFF;
   border-radius: 4px;
   border: 1px solid rgba(255,255,255,0.8);
   padding: 10px 50px;
+  text-align: center;
   transition: color 0.33s, background-color 0.33s;
 }
 

packages/webgal/src/config/language.ts

@@ -12,6 +12,7 @@ import fr from '@/translations/fr';
 import de from '@/translations/de';
 import zhTw from '@/translations/zh-tw';
 import ptBr from '@/translations/pt-br';
+import ko from '@/translations/ko';
 /*
   Import your translation configs here;
   example:
@@ -26,6 +27,7 @@ export enum language {
   de,
   zhTw,
   ptBr,
+  ko,
 }
 
 const languages: Record<string, string> = {
@@ -36,6 +38,7 @@ const languages: Record<string, string> = {
   de: 'Deutsch',
   zhTw: '繁體中文',
   ptBr: 'Português do Brasil',
+  ko: '한국어',
 };
 
 export const i18nTranslationResources: Record<string, { translation: Record<string, any> }> = {
@@ -46,6 +49,7 @@ export const i18nTranslationResources: Record<string, { translation: Record<stri
   de: { translation: de },
   zhTw: { translation: zhTw },
   ptBr: { translation: ptBr },
+  ko: { translation: ko },
 };
 
 export const defaultLanguage: language = language.zhCn;