CreeperVM/webapp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add country name to flag tooltip

Browse Source
This commit is contained in:
Elijah R 2024-06-23 03:28:23 -04:00
parent 03be418d97
commit 1397764251
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/ts/i18n.ts
View File

@ -150,6 +150,7 @@ export class I18n {
// The language data itself
private langs : Map<string, Language> = new Map<string, Language>();
private lang: Language = fallbackLanguage;
private countryNames: {[key: string]: string} | null = null;
private languageDropdown: HTMLSpanElement = document.getElementById('languageDropdown') as HTMLSpanElement;
private emitter: Emitter<I18nEvents> = createNanoEvents();
@ -163,7 +164,7 @@ export class I18n {
var res = await fetch("lang/languages.json");
if (!res.ok) {
alert("Failed to load languages.json: " + res.statusText);
this.SetLanguage(fallbackLanguage, fallbackId);
await this.SetLanguage(fallbackLanguage, fallbackId);
this.ReplaceStaticStrings();
return;
}
@ -184,9 +185,9 @@ export class I18n {
a.classList.add('dropdown-item');
a.href = '#';
a.innerText = `${_lang.flag} ${_lang.languageName}`;
a.addEventListener('click', (e) => {
a.addEventListener('click', async e => {
e.preventDefault();
this.SetLanguage(_lang, langId);
await this.SetLanguage(_lang, langId);
this.ReplaceStaticStrings();
});
this.languageDropdown.appendChild(a);
@ -209,15 +210,33 @@ export class I18n {
}
// If all else fails, use the default language
if (lang === null) lang = langData.defaultLanguage;
this.SetLanguage(this.langs.get(lang) as Language, lang);
await this.SetLanguage(this.langs.get(lang) as Language, lang);
this.ReplaceStaticStrings();
}
private SetLanguage(lang: Language, id: string) {
private async getCountryNames(lang: string) : Promise<{[key: string]: string} | null> {
lang = lang.split('-')[0].toLowerCase();
let res = await fetch(`https://www.unpkg.com/cldr-localenames-full@45.0.0/main/${lang}/territories.json`);
if (!res.ok) {
console.error(`Failed to load territories.json for ${lang}: ${res.statusText}`);
return null;
}
let data = await res.json();
return data.main[lang].localeDisplayNames.territories;
}
getCountryName(code: string) : string {
if (this.countryNames === null) return code;
return this.countryNames[code] || code;
}
private async SetLanguage(lang: Language, id: string) {
let lastId = this.langId;
this.langId = id;
this.lang = lang;
this.countryNames = await this.getCountryNames(id);
// Only replace static strings
if (this.langId != lastId) this.ReplaceStaticStrings();

13
src/ts/main.ts
View File

@ -10,7 +10,6 @@ import 'simple-keyboard/build/css/index.css';
import VoteStatus from './protocol/VoteStatus.js';
import * as bootstrap from 'bootstrap';
import MuteState from './protocol/MuteState.js';
import { Unsubscribe } from 'nanoevents';
import { I18nStringKey, TheI18n } from './i18n.js';
import { Format } from './format.js';
import AuthManager from './AuthManager.js';
@ -607,7 +606,10 @@ function addUser(user: User) {
flagSpan.classList.add("userlist-flag");
usernameSpan.classList.add("userlist-username");
td.appendChild(flagSpan);
if (user.countryCode !== null) flagSpan.innerHTML = getFlagEmoji(user.countryCode);
if (user.countryCode !== null) {
flagSpan.innerHTML = getFlagEmoji(user.countryCode);
flagSpan.title = TheI18n.getCountryName(user.countryCode);
};
td.appendChild(usernameSpan);
usernameSpan.innerText = user.username;
switch (user.rank) {
@ -649,6 +651,7 @@ function getFlagEmoji(countryCode: string) {
function flag() {
for (let user of users.filter(u => u.user.countryCode !== null)) {
user.flagElement.innerHTML = getFlagEmoji(user.user.countryCode!);
user.flagElement.title = TheI18n.getCountryName(user.user.countryCode!);
}
}
@ -1321,6 +1324,12 @@ document.addEventListener('DOMContentLoaded', async () => {
elements.ghostTurnBtnText.innerText = TheI18n.GetString(I18nStringKey.kAdminVMButtons_GhostTurnOn);
else
elements.ghostTurnBtnText.innerText = TheI18n.GetString(I18nStringKey.kAdminVMButtons_GhostTurnOff);
for (const user of users) {
if (user.user.countryCode !== null) {
user.flagElement.title = TheI18n.getCountryName(user.user.countryCode);
}
}
});
// Load theme
var _darktheme : boolean;