Display common names

Also add capitalizeWords() in util.ts, for more capitalization control

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 7cd75b7..275dd08 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -4,6 +4,7 @@ import CloseIcon from './icon/CloseIcon.vue';
 import {LayoutNode} from '../layout';
 import type {TolMap} from '../tol';
 import {TolNode} from '../tol';
+import {capitalizeWords} from '../util';
 
 // Displays information about a tree-of-life node
 export default defineComponent({
@@ -23,6 +24,13 @@ export default defineComponent({
 		tolNode(): TolNode {
 			return this.tolMap.get(this.node.name)!;
 		},
+		displayName(): string {
+			if (this.tolNode.commonName == null){
+				return capitalizeWords(this.node.name);
+			} else {
+				return `${capitalizeWords(this.tolNode.commonName)} (aka ${capitalizeWords(this.node.name)})`;
+			}
+		},
 		imgStyles(): Record<string,string> {
 			return {
 				backgroundImage: this.tolNode.imgName != null ?
@@ -71,7 +79,7 @@ export default defineComponent({
 		bg-stone-50 rounded-md shadow shadow-black">
 		<close-icon @click.stop="onCloseClick" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
-		<h1 class="text-center text-xl font-bold mb-2 capitalize">{{node.name}}</h1>
+		<h1 class="text-center text-xl font-bold mb-2">{{displayName}}</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div class="flex">
 			<div>