diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/Tile.vue | 10 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 10 | ||||
| -rw-r--r-- | src/layout.ts | 1 | ||||
| -rw-r--r-- | src/tol.ts | 2 |
5 files changed, 16 insertions, 9 deletions
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'; @@ -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; } } |