From d87bb9bc0991d7ce4eeb895da61c63a204edaa4d Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 30 Apr 2022 13:24:26 +1000
Subject: Add scripts for downloading/reviewing/cropping_and_resizing images

Also adjust client code to handle new format, and add
backend/data/README.md explaining image production process.
---
 src/App.vue                      |  2 +-
 src/components/Tile.vue          | 10 +++++-----
 src/components/TileInfoModal.vue | 10 ++++++++--
 src/layout.ts                    |  1 -
 src/tol.ts                       |  2 ++
 5 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 89d227d..b683b21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -541,7 +541,7 @@ export default defineComponent({
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
-		<tile-info-modal v-if="infoModalNode != null" :node="infoModalNode" :uiOpts="uiOpts"
+		<tile-info-modal v-if="infoModalNode != null" :node="infoModalNode" :tolMap="tolMap" :uiOpts="uiOpts"
 			@info-modal-close="infoModalNode = null"/>
 	</transition>
 	<transition name="fade">
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 1087a58..2ab1df1 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -88,11 +88,11 @@ export default defineComponent({
 		leafStyles(): Record<string,string> {
 			return {
 				// Image (and scrims)
-				//backgroundImage:
-				//	'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
-				//	'url(\'/img/' + this.layoutNode.name.replaceAll('\'', '\\\'') + '.png\')',
-				backgroundImage:
-					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%)',
+				backgroundImage: this.tolNode.imgFile != null ?
+					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+						'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' :
+					'none',
+				backgroundColor: '#1c1917',
 				backgroundSize: 'cover',
 				// Other
 				borderRadius: this.uiOpts.borderRadius + 'px',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 0e2fc94..9805b48 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -7,13 +7,19 @@ import {LayoutNode} from '../layout';
 export default defineComponent({
 	props: {
 		node: {type: Object as PropType<LayoutNode>, required: true},
+		tolMap: {type: Object as PropType<TolMap>, required: true},
 		uiOpts: {type: Object, required: true},
 	},
 	computed: {
+		tolNode(): TolNode {
+			return this.tolMap.get(this.node.name)!;
+		},
 		imgStyles(): Record<string,string> {
 			return {
-				//backgroundImage: 'url(\'/img/' + this.node.name.replaceAll('\'', '\\\'') + '.png\')',
-				background: 'black',
+				backgroundImage: this.tolNode.imgFile != null ?
+					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+						'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' :
+					'none',
 				width: this.uiOpts.infoModalImgSz + 'px',
 				height: this.uiOpts.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
diff --git a/src/layout.ts b/src/layout.ts
index fd65b87..e023619 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -6,7 +6,6 @@
  * find a tile-based layout, filling in node fields to represent placement.
  */
 
-import {TolNode} from './tol';
 import type {TolMap} from './tol';
 import {range, arraySum, linspace, limitVals, updateAscSeq} from './util';
 
diff --git a/src/tol.ts b/src/tol.ts
index daa3339..bfc778f 100644
--- a/src/tol.ts
+++ b/src/tol.ts
@@ -10,10 +10,12 @@ export class TolNode {
 	parent: string | null;
 	tips: number;
 	pSupport: boolean;
+	imgFile: string | null;
 	constructor(children: string[] = [], parent = null, tips = 0, pSupport = false){
 		this.children = children;
 		this.parent = parent;
 		this.tips = tips;
 		this.pSupport = pSupport;
+		this.imgFile = null;
 	}
 }
-- 
cgit v1.2.3