add language feature

html/app.js

@@ -205,6 +205,59 @@ CefSharp.BindObjectAsync(
 	$appDarkStyle.href = `app.dark.css?_=${Date.now()}`;
 	document.head.appendChild($appDarkStyle);
 
+	//
+	// Languages
+	//
+
+	var subsetOfLanguages = {
+		eng: 'English',
+		kor: '한국어',
+		rus: 'Русский',
+		spa: 'Español',
+		por: 'Português',
+		zho: '中文',
+		deu: 'Deutsch',
+		jpn: '日本語',
+		fra: 'Français',
+		swe: 'Svenska',
+		nld: 'Nederlands',
+		pol: 'Polski',
+		dan: 'Dansk',
+		nor: 'Norsk',
+		ita: 'Italiano',
+		tha: 'ภาษาไทย',
+		fin: 'Suomi',
+		hun: 'Magyar',
+		ces: 'Čeština',
+		tur: 'Türkçe',
+		ara: 'العربية'
+	};
+
+	// vrchat to famfamfam
+	var languageMappings = {
+		eng: 'us',
+		kor: 'kr',
+		rus: 'ru',
+		spa: 'es',
+		por: 'pt',
+		zho: 'cn',
+		deu: 'de',
+		jpn: 'jp',
+		fra: 'fr',
+		swe: 'se',
+		nld: 'nl',
+		pol: 'pl',
+		dan: 'dk',
+		nor: 'no',
+		ita: 'it',
+		tha: 'th',
+		fin: 'fi',
+		hun: 'hu',
+		ces: 'cz',
+		tur: 'tr',
+		ara: 'ae'
+	};
+
 	//
 	// API
 	//
@@ -600,6 +653,7 @@ CefSharp.BindObjectAsync(
 		}
 	});
 
+
 	Vue.component('location', {
 		template: '<span @click="showWorldDialog" :class="{ \'x-link\': link }">{{ text }}<slot></slot></span>',
 		props: {
@@ -859,6 +913,26 @@ CefSharp.BindObjectAsync(
 		}
 	};
 
+	// FIXME: it may performance issue. review here
+	API.applyUserLanguage = function (ref) {
+		ref.$languages = [];
+		var { tags } = ref;
+		for (var tag of tags) {
+			if (tag.startsWith('language_') === false) {
+				continue;
+			}
+			var key = tag.substr(9);
+			var value = subsetOfLanguages[key];
+			if (value === undefined) {
+				continue;
+			}
+			ref.$languages.push({
+				key,
+				value
+			});
+		}
+	};
+
 	API.applyCurrentUser = function (json) {
 		var ref = this.currentUser;
 		if (this.isLoggedIn) {
@@ -867,6 +941,7 @@ CefSharp.BindObjectAsync(
 				ref.$homeLocation = this.parseLocation(ref.homeLocation);
 			}
 			this.applyUserTrustLevel(ref);
+			this.applyUserLanguage(ref);
 		} else {
 			ref = {
 				id: '',
@@ -899,11 +974,13 @@ CefSharp.BindObjectAsync(
 				$isTroll: false,
 				$trustLevel: 'Visitor',
 				$trustClass: 'x-tag-untrusted',
+				$languages: [],
 				//
 				...json
 			};
 			ref.$homeLocation = this.parseLocation(ref.homeLocation);
 			this.applyUserTrustLevel(ref);
+			this.applyUserLanguage(ref);
 			this.currentUser = ref;
 			this.isLoggedIn = true;
 			this.$emit('LOGIN', {
@@ -980,11 +1057,13 @@ CefSharp.BindObjectAsync(
 				$isTroll: false,
 				$trustLevel: 'Visitor',
 				$trustClass: 'x-tag-untrusted',
+				$languages: [],
 				//
 				...json
 			};
 			ref.$location = this.parseLocation(ref.location);
 			this.applyUserTrustLevel(ref);
+			this.applyUserLanguage(ref);
 			this.cachedUsers.set(ref.id, ref);
 		} else {
 			var props = {};
@@ -999,6 +1078,7 @@ CefSharp.BindObjectAsync(
 				ref.$location = this.parseLocation(ref.location);
 			}
 			this.applyUserTrustLevel(ref);
+			this.applyUserLanguage(ref);
 			for (var prop in ref) {
 				if (ref[prop] !== Object(ref[prop])) {
 					props[prop] = true;
@@ -3059,6 +3139,8 @@ CefSharp.BindObjectAsync(
 		}
 	}, 5000);
 
+	// initialise
+
 	var $app = {
 		data: {
 			API,
@@ -3097,6 +3179,15 @@ CefSharp.BindObjectAsync(
 		}
 	};
 
+	$app.methods.languageClass = function (language) {
+		var style = {};
+		var mapping = languageMappings[language];
+		if (mapping !== undefined) {
+			style[mapping] = true;
+		}
+		return style;
+	};
+
 	$app.methods.checkAppVersion = function () {
 		var url = 'https://api.github.com/repos/pypy-vrc/VRCX/releases/latest';
 		fetch(url).then((res) => res.json()).then((json) => {
@@ -5149,6 +5240,19 @@ CefSharp.BindObjectAsync(
 
 	// App: More
 
+	$app.data.userLanguageVisible = 0;
+	$app.data.userLanguageSelected = '';
+	$app.data.userLanguages = (function () {
+		var data = [];
+		for (var key in subsetOfLanguages) {
+			var value = subsetOfLanguages[key];
+			data.push({
+				key,
+				value
+			});
+		}
+		return data;
+	}());
 	$app.data.currentUserTreeData = [];
 	$app.data.pastDisplayNameTable = {
 		data: [],
@@ -5203,6 +5307,24 @@ CefSharp.BindObjectAsync(
 		$app.visits = args.json;
 	});
 
+	$app.methods.addUserLanguage = function (language) {
+		if (language !== String(language)) {
+			return;
+		}
+		API.addUserTags({
+			tags: [`language_${language}`]
+		});
+	};
+
+	$app.methods.removeUserLanguage = function (language) {
+		if (language !== String(language)) {
+			return;
+		}
+		API.removeUserTags({
+			tags: [`language_${language}`]
+		});
+	};
+
 	$app.methods.logout = function () {
 		this.$confirm('Continue? Logout', 'Confirm', {
 			confirmButtonText: 'Confirm',

html/index.html

@@ -601,6 +601,33 @@
 						</span>
 					</div>
 				</div>
+				<div class="x-friend-item">
+					<div class="detail">
+						<span class="name">Languages</span>
+						<span class="extra">
+							<span v-for="item in API.currentUser.$languages" :key="item.key" style="display:block">
+								<span><span class="famfamfam-flags" :class="languageClass(item.key)" style="display:inline-block;margin-right:5px"></span> {{ item.value }} ({{ item.key }})</span>
+								<el-button type="text" icon="el-icon-close" size="mini" @click.stop="removeUserLanguage(item.key)" style="margin-left:5px"></el-button>
+							</span>
+						</span>
+					</div>
+				</div>
+				<div class="x-friend-item">
+					<div class="detail" v-if="userLanguageVisible">
+						<el-select v-model="userLanguageSelected" style="display:block">
+							<el-option v-for="item in userLanguages" :key="item.key" :value="item.key" :label="item.value">
+								<span><span class="famfamfam-flags" :class="languageClass(item.key)" style="display:inline-block;margin-right:5px"></span> {{ item.value }} ({{ item.key }})</span>
+							</el-option>
+						</el-select>
+						<div style="margin-top:5px">
+							<el-button @click="userLanguageVisible=0; addUserLanguage(userLanguageSelected)" size="mini">Ok</el-button>
+							<el-button @click="userLanguageVisible=0" size="mini" style="margin-left:0">Cancel</el-button>
+						</div>
+					</div>
+					<div class="detail" v-else>
+						<el-button @click="userLanguageSelected='';userLanguageVisible=1" size="mini">Add Language</el-button>
+					</div>
+				</div>
 				<div class="x-friend-item">
 					<div class="detail">
 						<span class="name">Last Login</span>
@@ -903,6 +930,12 @@
 								<span style="display:block;text-align:center;font-family:monospace">{{ userDialog.ref.username | textToHex }}</span>
 								<span slot="reference" v-text="userDialog.ref.username" style="margin-left:5px;color:#909399;font-family:monospace;font-size:12px;cursor:pointer"></span>
 							</el-popover>
+							<el-tooltip v-for="item in userDialog.ref.$languages" :key="item.key" placement="top">
+								<template #content>
+									<span>{{ item.value }} ({{ item.key }})</span>
+								</template>
+								<span class="famfamfam-flags" :class="languageClass(item.key)" style="display:inline-block;margin-left:5px">
+							</el-tooltip>
 						</div>
 						<div style="margin-top:5px">
 							<el-tag type="info" effect="plain" size="mini" class="name" :class="userDialog.ref.$trustClass" v-text="userDialog.ref.$trustLevel"></el-tag>