1 files changed, 38 insertions, 24 deletions
diff --git a/src/App.vue b/src/App.vue
index 7e5518d..274ec13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,39 +4,54 @@ export default {
 	data() {
 		return {
 			drawnTol: tol.map(e => ({...e, children:[]})),
-			mode: 'row'
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight,
 		}
 	},
 	computed: {
 		tiles(){
 			//minSize, maxSize, 
 			let nodes = this.drawnTol;
-			let width = document.documentElement.clientWidth;
-			let height = document.documentElement.clientHeight;
 			let spacing = 5;
-			if (this.mode == 'row'){
-				return nodes.map((el, idx) => ({
-					name: el.name,
-					x: idx*((width - spacing) / nodes.length) + spacing,
-					y: spacing,
-					w: ((width - spacing) / nodes.length) - spacing,
-					h: ((width - spacing) / nodes.length) - spacing,
-					}));
-			} else if (this.mode == 'col'){
-				return nodes.map((el, idx) => ({
-					name: el.name,
-					x: spacing,
-					y: idx*((height - spacing) / nodes.length) + spacing,
-					w: ((height - spacing) / nodes.length) - spacing,
-					h: ((height - spacing) / nodes.length) - spacing,
-					}));
-			}
+			let numCols = this.pickNumCols(nodes.length, this.width/this.height);
+			let numRows = Math.ceil(nodes.length / numCols);
+			let tileSz = Math.min(
+				((this.width - spacing) / numCols) - spacing,
+				((this.height - spacing) / numRows) - spacing);
+			let res = nodes.map((el, idx) => ({
+				name: el.name,
+				x: (idx % numCols)*(tileSz + spacing) + spacing,
+				y: Math.floor(idx / numCols)*(tileSz + spacing) + spacing,
+				sz: tileSz,
+				}));
+			console.log(res)
+			return res;
 		}
 	},
 	methods: {
-		toggleMode(){
-			this.mode = this.mode == 'row' ? 'col' : 'row';
+		pickNumCols(numTiles, aspectRatio){ //account for tile-spacing?
+			//find number of columns with corresponding aspect-ratio closest to aspectRatio
+			let closest, smallestDiff = Number.MAX_VALUE;
+			for (let numCols = 1; numCols <= numTiles; numCols++){
+				let ratio = numCols/Math.ceil(numTiles/numCols);
+				let diff = Math.abs(ratio - aspectRatio);
+				if (diff < smallestDiff){
+					smallestDiff = diff;
+					closest = numCols;
+				}
+			}
+			return closest;
+		},
+		onResize(){
+			this.width = document.documentElement.clientWidth;
+			this.height = document.documentElement.clientHeight;
 		}
+	},
+	created(){
+		window.addEventListener('resize', this.onResize);
+	},
+	unmounted(){
+		window.removeEventListener('resize', this.onResize);
 	}
 }
 </script>
@@ -44,10 +59,9 @@ export default {
 <template>
 	<div class="bg-black h-[100vh]">
 		<img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name"
-			:width="tile.w" :height="tile.h"
+			:width="tile.sz" :height="tile.sz"
 			:style="{position: 'absolute', left: tile.x + 'px', top: tile.y + 'px'}"
 			class="transition-all duration-300 ease-out border-2 border-amber-900"
-			@click="toggleMode()"
 			/>
 	</div>
 </template>