Display common names

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

4 files changed, 23 insertions, 4 deletions

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 744adc3..f656b09 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -5,6 +5,7 @@ import {LayoutNode} from '../layout';
 import type {LayoutOptions} from '../layout';
 import type {TolMap} from '../tol';
 import {TolNode} from '../tol';
+import {capitalizeWords} from '../util';
 
 // Displays one, or a hierarchy of, tree-of-life nodes, as a 'tile'
 export default defineComponent({
@@ -42,6 +43,9 @@ export default defineComponent({
 			return (this.layoutNode.showHeader && this.layoutNode.sepSweptArea == null) ||
 				(this.layoutNode.sepSweptArea != null && this.layoutNode.sepSweptArea.sweptLeft);
 		},
+		displayName(): string {
+			return capitalizeWords(this.tolNode.commonName || this.layoutNode.name);
+		},
 		// Style related
 		nonleafBgColor(): string {
 			let colorArray = this.uiOpts.nonleafBgColors;
@@ -316,7 +320,7 @@ export default defineComponent({
 	<div v-if="isLeaf" :style="leafStyles"
 		class="w-full h-full flex flex-col overflow-hidden" :class="{'hover:cursor-pointer': isExpandableLeaf}"
 		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-		<h1 :style="leafHeaderStyles" class="capitalize">{{layoutNode.name}}</h1>
+		<h1 :style="leafHeaderStyles">{{displayName}}</h1>
 		<info-icon :style="[infoIconStyles, {marginTop: 'auto'}]"
 			class="self-end text-white/10 hover:text-white hover:cursor-pointer"
 			@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
@@ -324,7 +328,7 @@ export default defineComponent({
 	<div v-else :style="nonleafStyles" class="w-full h-full" ref="nonleaf">
 		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
 			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-			<h1 :style="nonleafHeaderTextStyles" class="grow capitalize">{{layoutNode.name}}</h1>
+			<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
 			<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
 				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 		</div>
@@ -333,7 +337,7 @@ export default defineComponent({
 			<div v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
 				:style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
 				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-				<h1 :style="nonleafHeaderTextStyles" class="grow capitalize">{{layoutNode.name}}</h1>
+				<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
 				<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
 					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 			</div>
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>
diff --git a/src/tol.ts b/src/tol.ts
index 073f848..41ace2c 100644
--- a/src/tol.ts
+++ b/src/tol.ts
@@ -11,11 +11,13 @@ export class TolNode {
 	tips: number;
 	pSupport: boolean;
 	imgName: null | string;
+	commonName: null | string;
 	constructor(children: string[] = [], parent = null, tips = 0, pSupport = false){
 		this.children = children;
 		this.parent = parent;
 		this.tips = tips;
 		this.pSupport = pSupport;
 		this.imgName = null;
+		this.commonName = null;
 	}
 }
diff --git a/src/util.ts b/src/util.ts
index a698d23..78b7870 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -97,3 +97,8 @@ export function randWeightedChoice(weights: number[]): number | null {
 	}
 	return null;
 }
+// Returns a string with words first-letter capitalised
+export function capitalizeWords(str: string){
+	return str.replace(/\b\w/g, x => x.toUpperCase());
+		// '\b' matches word boundary, '\w' is like [a-zA-Z0-9_],
+}