From 330f064f296b25578fb3175206f11e6d563151f3 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 2 Mar 2022 22:15:35 +1100
Subject: Add basic code for arrangement via absolute positioning

---
 src/App.vue | 44 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 10537d6..7e5518d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,18 +3,52 @@ import tol from './tol.json';
 export default {
 	data() {
 		return {
-			tol: tol,
-			tiles: tol.map(e => ({name: e.name}))
+			drawnTol: tol.map(e => ({...e, children:[]})),
+			mode: 'row'
+		}
+	},
+	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,
+					}));
+			}
+		}
+	},
+	methods: {
+		toggleMode(){
+			this.mode = this.mode == 'row' ? 'col' : 'row';
 		}
 	}
 }
 </script>
 
 <template>
-	<div class="bg-black flex flex-row flex-wrap justify-center">
+	<div class="bg-black h-[100vh]">
 		<img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name"
-			@click="$event.target.style.transform = 'translate(20%,30%)'"
-			class="m-1 flex-auto transition-transform duration-300"/>
+			:width="tile.w" :height="tile.h"
+			: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>
 
-- 
cgit v1.2.3