feat: language selector icon update (#709)

* refactor: combo drawer controller

* refactor: card select modal components

* refactor: metadata tab

* refactor: load data submenu

* feat: language selector update

* refactor: remove flags

* refactor: cleanup

* refactor: clean up relic scorer header, remove one-click-optimize

* refactor: home tab wording

src/lib/characterPreview/CharacterScoringSummary.tsx

@@ -34,7 +34,7 @@ export const CharacterScoringSummary = (props: {
 
   const characterId = result.simulationForm.characterId
   const characterMetadata = DB.getMetadata().characters[characterId]
-  const elementalDmgValue: string = ElementToDamage[characterMetadata.element]
+  const elementalDmgValue = ElementToDamage[characterMetadata.element]
 
   function ScoringSet(props: {
     set: string
@@ -155,7 +155,7 @@ export const CharacterScoringSummary = (props: {
       const upgradeStat = statUpgrade.stat!
       const isFlat = Utils.isFlat(statUpgrade.stat)
       const suffix = isFlat ? '' : '%'
-      const rollValue = Utils.precisionRound(StatCalculator.getMaxedSubstatValue(upgradeStat, 0.8))
+      const rollValue = TsUtils.precisionRound(StatCalculator.getMaxedSubstatValue(upgradeStat as SubStats, 0.8))
 
       rows.push(
         <Flex key={Utils.randomId()} align='center' gap={10}>

src/lib/i18n/LanguageSelector.tsx

@@ -1,63 +1,50 @@
 import { Button, Flex, Select } from 'antd'
 import { languages } from 'lib/i18n/i18n'
 import { Assets } from 'lib/rendering/assets'
-import React, { ReactElement } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-// FIXME LOW
-
-type placementOptions = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
-
 type Languages = keyof typeof languages
 
 const completedLocales: Languages[] = ['en', 'zh', 'pt'] as const
 
-export function LanguageSelector(props: { style: React.CSSProperties; dropdownStyle: React.CSSProperties; flagOnly: boolean; placement: placementOptions }) {
+export function LanguageSelector() {
   const { i18n } = useTranslation()
-  const selectOptions = ((locales: { [key in Languages]: { locale: string; nativeName: string } }) => {
-    const ret: { value: string; label: ReactElement }[] = []
-    for (const key in locales) {
-      ret.push({
-        value: locales[key as Languages].locale,
-        label: (
-          <Flex gap={8}>
-            <img style={{ height: 15, marginTop: 4 }} src={Assets.getFlag(locales[key as Languages].locale)}/>
-            {locales[key as Languages].nativeName}
-            {/* eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access */}
-            {completedLocales.includes(locales[key].locale) ? '' : ' (WIP)'}
-          </Flex>
-        ),
-      })
-    }
-    return ret
-  })(languages)
+  const selectOptions = Object.values(languages)
+    .map(({ locale, nativeName, shortName }) => ({
+      value: locale,
+      display: (
+        <Flex align='center' gap={10}>
+          <img style={{ width: 22 }} src={Assets.getGlobe()}/>
+          {shortName}
+        </Flex>
+      ),
+      label: (
+        <Flex gap={8}>
+          {nativeName}
+          {completedLocales.includes(locale) ? '' : ' (WIP)'}
+        </Flex>
+      ),
+    }))
+
   return (
     <Select
       options={selectOptions}
       optionRender={(option) => option.data.label}
-      labelRender={({ label, value }) => {
-        if (!props.flagOnly) {
-          return (
-            <Flex gap={8}>
-              <img style={{ height: 15, marginTop: 8 }} src={Assets.getFlag(value as Languages)}/>{languages[value as Languages].nativeName}
-            </Flex>
-          )
-        }
-        return <img style={{ height: 15, marginTop: 8 }} src={Assets.getFlag(value as Languages)}/>
-      }}
       onChange={(e: string) => {
-        i18n.changeLanguage(e)
+        void i18n.changeLanguage(e)
       }}
-      style={props.style}
-      dropdownStyle={props.dropdownStyle}
+      style={{ width: 135, marginRight: 6, height: 36 }}
+      placement='bottomLeft'
+      optionLabelProp='display'
+      dropdownStyle={{ width: 210 }}
       defaultValue={i18n.resolvedLanguage}
-      placement={props.placement}
       dropdownRender={(menu) => (
         <Flex gap={4} vertical>
           {menu}
           <Button
             type='primary'
-            style={{ borderRadius: 5, height: 40 }}
+            style={{ borderRadius: 5, height: 32 }}
             onClick={() => window.open('https://discord.gg/rDmB4Un7qg')}
           >
             Help translate the website!

src/lib/i18n/i18n.ts

@@ -11,56 +11,63 @@ export const languages = {
   en: {
     locale: 'en',
     nativeName: 'English',
+    shortName: 'English',
   },
   es: {
     locale: 'es',
     nativeName: 'Español',
+    shortName: 'Español',
   },
   fr: {
     locale: 'fr',
     nativeName: 'Français',
+    shortName: 'Français',
   },
   it: {
     locale: 'it',
     nativeName: 'Italiano',
+    shortName: 'Italiano',
   },
   pt: {
     locale: 'pt',
-    nativeName: 'Português (Brasil)',
+    nativeName: 'Português (BR)',
+    shortName: 'Português',
   },
   zh: {
     locale: 'zh',
     nativeName: '中文',
+    shortName: '中文',
   },
   /*
-  de: {
-    locale: 'de',
-    nativeName: 'Deutsch',
-  },
-  id: {
-    locale: 'id',
-    nativeName: 'Bahasa Indonesia',
-  },
-  ja: {
-    locale: 'ja',
-    nativeName: '日本語',
-  },
-  ko: {
-    locale: 'ko',
-    nativeName: '한국인',
-  },
-  ru: {
-    locale: 'ru',
-    nativeName: 'русский',
-  },
-  th: {
-    locale: 'th',
-    nativeName: ' ไทย',
-  },
-  vi: {
-    locale: 'vi',
-    nativeName: 'tiếng việt',
-  }, */
+      de: {
+        locale: 'de',
+        nativeName: 'Deutsch',
+      },
+      id: {
+        locale: 'id',
+        nativeName: 'Bahasa Indonesia',
+      },
+      ja: {
+        locale: 'ja',
+        nativeName: '日本語',
+      },
+      ko: {
+        locale: 'ko',
+        nativeName: '한국인',
+      },
+      ru: {
+        locale: 'ru',
+        nativeName: 'русский',
+      },
+      th: {
+        locale: 'th',
+        nativeName: ' ไทย',
+      },
+      vi: {
+        locale: 'vi',
+        nativeName: 'tiếng việt',
+      },
+  */
 } as const
 
 export const supportedLanguages = Object.keys(languages)

src/lib/layout/LayoutHeader.tsx

@@ -50,12 +50,7 @@ export function LayoutHeader() {
           </a>
         </Flex>
         <Flex>
-          <LanguageSelector
-            style={{ width: 60, marginRight: 6, height: 36 }}
-            dropdownStyle={{ width: 210 }}
-            flagOnly={true}
-            placement='bottomRight'
-          />
+          <LanguageSelector/>
           <a href='https://ko-fi.com/fribbels' target='_blank' rel='noreferrer'>
             <Flex>
               <img src={Assets.getKofi()} style={{ height: 36, marginRight: 6, borderRadius: 5 }}></img>

src/lib/optimization/defaultForm.ts

@@ -106,7 +106,7 @@ export function getDefaultForm(initialCharacter: { id: string }) {
     defaultForm.comboBreak = scoringMetadata.simulation.comboBreak
   }
 
-  return defaultForm
+  return defaultForm as Form
 }
 
 export function defaultTeammate() {

src/lib/rendering/assets.ts

@@ -172,4 +172,8 @@ export const Assets = {
   getHomeBackground: (file: string) => {
     return getImageUrl(`/misc/home/background/${file}.webp`)
   },
+
+  getGlobe: () => {
+    return getImageUrl(`/misc/globe.webp`)
+  },
 }

src/lib/tabs/tabHome/HomeTab.tsx

@@ -68,8 +68,8 @@ function CommunityCollapse() {
         </span>
 
         <span>
-          Come be a part of our Star Rail community! Join the <ColorizedLinkWithIcon text='Discord server' url='https://discord.gg/rDmB4Un7qg'/> to hang out,
-          or check out the <ColorizedLinkWithIcon text='GitHub repo' url='https://github.com/fribbels/hsr-optimizer'/> if you'd like to contribute.
+          Come be a part of our Star Rail community! Join the <ColorizedLinkWithIcon text='Discord' url='https://discord.gg/rDmB4Un7qg'/> server to hang out,
+          or check out the <ColorizedLinkWithIcon text='GitHub' url='https://github.com/fribbels/hsr-optimizer'/> repo if you'd like to contribute.
         </span>
       </Flex>
       <Flex style={{ flex: 1 }} align='flex-start'>
@@ -267,7 +267,7 @@ function SearchBar() {
         placeholder='UUID'
         enterButton={(
           <Flex gap={5} style={{ marginRight: 5 }}>
-            <SearchOutlined/> Search
+            <SearchOutlined style={{ marginRight: 10 }}/> Search
           </Flex>
         )}
         allowClear

src/lib/tabs/tabImport/LoadDataSubmenu.tsx

@@ -5,8 +5,7 @@ import { SaveState } from 'lib/state/saveState'
 import { importerTabButtonWidth, importerTabSpinnerMs } from 'lib/tabs/tabImport/importerTabUiConstants'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-// FIXME LOW
+import { HsrOptimizerSaveFormat } from 'types/store'
 
 const { Text } = Typography
 
@@ -16,30 +15,24 @@ enum Stages {
   FINISHED = 2,
 }
 
-type LoadSaveState = {
-  characters: []
-  relics: []
-}
-
 export function LoadDataSubmenu() {
   const [currentStage, setCurrentStage] = useState<Stages>(Stages.LOAD_FILE)
-  const [currentSave, setCurrentSave] = useState<LoadSaveState | undefined>(undefined)
+  const [currentSave, setCurrentSave] = useState<HsrOptimizerSaveFormat | undefined>(undefined)
   const [loading1, setLoading1] = useState(false)
   const [loading2, setLoading2] = useState(false)
   const { t } = useTranslation('importSaveTab', { keyPrefix: 'LoadData' })
 
-  function beforeUpload(file): Promise<boolean> {
+  function beforeUpload(file: File): Promise<boolean> {
     return new Promise(() => {
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onload = () => {
         const fileUploadText = String(reader.result)
-        // console.log('Uploaded file', fileUploadText)
-
         const json = JSON.parse(fileUploadText)
-        // console.log('Parsed json', json)
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         if (json.fileType || json.source) {
+          // Invalid save file
           setLoading1(true)
 
           setTimeout(() => {
@@ -54,7 +47,7 @@ export function LoadDataSubmenu() {
 
         setTimeout(() => {
           setLoading1(false)
-          setCurrentSave(json)
+          setCurrentSave(json as HsrOptimizerSaveFormat)
           setCurrentStage(Stages.CONFIRM_DATA)
         }, importerTabSpinnerMs)
       }
@@ -65,7 +58,7 @@ export function LoadDataSubmenu() {
   function loadConfirmed() {
     setLoading2(true)
     setTimeout(() => {
-      DB.setStore(currentSave, false)
+      DB.setStore(currentSave!, false)
       window.refreshRelicsScore()
 
       setTimeout(() => {
@@ -106,7 +99,7 @@ export function LoadDataSubmenu() {
     if (!currentSave?.relics || !currentSave.characters) {
       return (
         <Flex style={{ minHeight: 100 }}>
-          <Flex vertical gap={10} style={{ display: currentStage >= 1 ? 'flex' : 'none' }}>
+          <Flex vertical gap={10} style={{ display: currentStage >= Stages.CONFIRM_DATA ? 'flex' : 'none' }}>
             {
               /* Invalid save file, please try a different file. Did you mean to use the Relic scanner import tab? */
               t('Stage2.ErrorMsg')
@@ -117,7 +110,7 @@ export function LoadDataSubmenu() {
     }
     return (
       <Flex style={{ minHeight: 100 }}>
-        <Flex vertical gap={10} style={{ display: currentStage >= 1 ? 'flex' : 'none' }}>
+        <Flex vertical gap={10} style={{ display: currentStage >= Stages.CONFIRM_DATA ? 'flex' : 'none' }}>
           <Text>
             {
               /* File contains {n relics} and {m characters}. Replace your current data with the uploaded data? */
@@ -135,7 +128,7 @@ export function LoadDataSubmenu() {
   function LoadCompleted() {
     return (
       <Flex style={{ minHeight: 100 }}>
-        <Flex vertical gap={10} style={{ display: currentStage >= 2 ? 'flex' : 'none' }}>
+        <Flex vertical gap={10} style={{ display: currentStage >= Stages.FINISHED ? 'flex' : 'none' }}>
           <Text>
             {t('Stage3.SuccessMessage')/* Done! */}
           </Text>