Language Support in Tooltips (#468)

* Add lang parameter to TextCompoennt

* Add 'mclang' key

* Add clearing old language cache when changed language

* Fetch language in background

* Remove auto-fetching mc language

* wrap mclang with a state

* update contributos

* Move 'mclang' to config.json

* Cleanup code to get mclang key and fix caching

---------

Co-authored-by: Misode <misoloo64@gmail.com>

src/app/Config.ts

@@ -4,6 +4,7 @@ import type { VersionId } from './services/Schemas.js'
 export interface ConfigLanguage {
 	code: string,
 	name: string,
+	mc: string,
 	schemas?: boolean,
 }
 

src/app/components/ItemTooltip.tsx

@@ -1,10 +1,11 @@
 import type { ItemStack } from 'deepslate/core'
 import { AttributeModifierOperation, Enchantment, Identifier, MobEffectInstance, Potion } from 'deepslate/core'
 import { NbtList, NbtType } from 'deepslate/nbt'
-import { message } from '../Utils.js'
+import { useLocale } from '../contexts/Locale.jsx'
 import { useVersion } from '../contexts/Version.jsx'
 import { useAsync } from '../hooks/useAsync.js'
 import { getLanguage, getTranslation } from '../services/Resources.js'
+import { message } from '../Utils.js'
 import { TextComponent } from './TextComponent.jsx'
 
 interface Props {
@@ -13,8 +14,9 @@ interface Props {
 }
 export function ItemTooltip({ item, advanced }: Props) {
 	const { version } = useVersion()
+	const { lang } = useLocale()
 
-	const { value: language } = useAsync(() => getLanguage(version), [version])
+	const { value: language } = useAsync(() => getLanguage(version, lang), [version, lang])
 
 	const isPotion = item.is('potion') || item.is('splash_potion') || item.is('lingering_potion')
 	let displayName = item.tag.getCompound('display').getString('Name')

src/app/components/TextComponent.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'preact/hooks'
+import { useLocale } from '../contexts/Locale.jsx'
 import { useVersion } from '../contexts/Version.jsx'
 import { useAsync } from '../hooks/useAsync.js'
 import { getLanguage, replaceTranslation } from '../services/Resources.js'
@@ -25,6 +26,7 @@ interface Props {
 }
 export function TextComponent({ component, base = { color: 'white' }, shadow = true }: Props) {
 	const { version } = useVersion()
+	const { lang } = useLocale()
 
 	const state = JSON.stringify(component)
 	const parts = useMemo(() => {
@@ -33,7 +35,7 @@ export function TextComponent({ component, base = { color: 'white' }, shadow = t
 		return parts
 	}, [state, base])
 
-	const { value: language } = useAsync(() => getLanguage(version), [version])
+	const { value: language } = useAsync(() => getLanguage(version, lang), [version, lang])
 
 	return <div class="text-component">
 		{shadow && <div>

src/app/services/Resources.ts

@@ -1,5 +1,6 @@
 import type { BlockDefinitionProvider, BlockFlagsProvider, BlockModelProvider, BlockPropertiesProvider, ItemStack, TextureAtlasProvider, UV } from 'deepslate/render'
 import { BlockDefinition, BlockModel, Identifier, ItemRenderer, TextureAtlas, upperPowerOfTwo } from 'deepslate/render'
+import config from '../Config.js'
 import { message } from '../Utils.js'
 import { fetchLanguage, fetchResources } from './DataFetcher.js'
 import type { VersionId } from './Schemas.js'
@@ -167,20 +168,22 @@ export type Language = Record<string, string>
 
 const Languages: Record<string, Language | Promise<Language>> = {}
 
-export async function getLanguage(version: VersionId) {
-	if (!Languages[version]) {
-		Languages[version] = (async () => {
+export async function getLanguage(version: VersionId, lang: string = 'en') {
+	const mcLang = config.languages.find(l => l.code === lang)?.mc ?? 'en_us'
+	const cacheKey = `${version}_${mcLang}`
+	if (!Languages[cacheKey]) {
+		Languages[cacheKey] = (async () => {
 			try {
-				Languages[version] = await fetchLanguage(version)
-				return Languages[version]
+				Languages[cacheKey] = await fetchLanguage(version, mcLang)
+				return Languages[cacheKey]
 			} catch (e) {
 				console.error('Error: ', e)
-				throw new Error(`Cannot get language for version ${version}: ${message(e)}`)
+				throw new Error(`Cannot get language '${mcLang}' for version ${version}: ${message(e)}`)
 			}
 		})()
-		return Languages[version]
+		return Languages[cacheKey]
 	}
-	return Languages[version]
+	return Languages[cacheKey]
 }
 
 export function getTranslation(lang: Language, key: string, params?: string[]) {

src/config.json

@@ -2,61 +2,75 @@
   "languages": [
     {
       "code": "de",
-      "name": "Deutsch"
+      "name": "Deutsch",
+      "mc": "de_de"
     },
     {
       "code": "en",
-      "name": "English"
+      "name": "English",
+      "mc": "en_us"
     },
     {
       "code": "es",
-      "name": "Español"
+      "name": "Español",
+      "mc": "es_es"
     },
     {
       "code": "fr",
-      "name": "Français"
+      "name": "Français",
+      "mc": "fr_fr"
     },
     {
       "code": "it",
-      "name": "Italiano"
+      "name": "Italiano",
+      "mc": "it_it"
     },
     {
       "code": "ja",
-      "name": "日本語"
+      "name": "日本語",
+      "mc": "ja_jp"
     },
     {
       "code": "ko",
       "name": "한국어",
+      "mc": "ko_kr",
       "schemas": false
     },
     {
       "code": "pl",
-      "name": "Polski"
+      "name": "Polski",
+      "mc": "pl_pl"
     },
     {
       "code": "pt",
-      "name": "Português"
+      "name": "Português",
+      "mc": "pt_pt"
     },
     {
       "code": "ru",
-      "name": "Русский"
+      "name": "Русский",
+      "mc": "ru_ru"
     },
     {
       "code": "sk",
       "name": "Slovenčina",
+      "mc": "sk_sk",
       "schemas": false
     },
     {
       "code": "tr",
-      "name": "Türkçe"
+      "name": "Türkçe",
+      "mc": "tr_tr"
     },
     {
       "code": "zh-cn",
-      "name": "简体中文"
+      "name": "简体中文",
+      "mc": "zh_cn"
     },
     {
       "code": "zh-tw",
-      "name": "正體中文"
+      "name": "正體中文",
+      "mc": "zh_hk"
     }
   ],
   "versions": [

src/contributors.json

@@ -152,6 +152,12 @@
     "avatar": "https://avatars.githubusercontent.com/u/34157027?v=4",
     "url": "https://github.com/Flemmli97"
   },
+  {
+    "name": "efekos",
+    "types": ["code", "translation"],
+    "avatar": "https://avatars.githubusercontent.com/u/56752400?v=4",
+    "url": "https://github.com/efekos"
+  },
   {
     "name": "HalbFettKaese",
     "types": ["report", "translation"],
@@ -955,11 +961,5 @@
     "types": ["translation"],
     "avatar": "https://avatars.githubusercontent.com/u/121224522?v=4",
     "url": "https://github.com/notlin4"
-  },
-  {
-    "name":"efekos",
-    "types":["translation"],
-    "avatar":"https://avatars.githubusercontent.com/u/56752400?v=4",
-    "url":"https://github.com/efekos"
   }
 ]