16 files changed, 88 insertions, 21 deletions

diff --git a/src/main.zig b/src/main.zig
index f17214c..82f5824 100644
--- a/src/main.zig
+++ b/src/main.zig
@@ -8,7 +8,7 @@ const http = @import("http");
 const html = @import("html");
 const z = @import("z");
 
-const badge = @import("web/badge/root.zig");
+const components = @import("web/component/root.zig").components;
 
 const document: html.Element = .native(.html, .{}, .children(&.{
     .native(.head, .{}, .children(&.{
@@ -17,15 +17,11 @@ const document: html.Element = .native(.html, .{}, .children(&.{
             .name = "viewport",
             .content = "width=device-width, initial-scale=1.0",
         }, .void),
-        z.env(&.{
-            badge.component,
-        }),
+        z.style.load(@embedFile("web/index.css")),
+        z.env(components),
     })),
     .native(.body, .{}, .children(&.{
         z.html.load(@embedFile("web/index.html")),
-        z.component(.badge, .{}, .children(&.{
-            .native(.span, .{ .slot = "content" }, .content("Hello Z (direct)!")),
-        })),
     })),
 }));
 
diff --git a/src/web/badge/index.css b/src/web/badge/index.css
deleted file mode 100644
index 3f237d6..0000000
--- a/src/web/badge/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#container {
-	background: red;
-	padding: 5px;
-	border-radius: 5px;
-}
diff --git a/src/web/badge/index.html b/src/web/badge/index.html
deleted file mode 100644
index dcb38e1..0000000
--- a/src/web/badge/index.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="container">
-	<slot name="content"></slot>
-</div>
diff --git a/src/web/badge/index.js b/src/web/badge/index.js
deleted file mode 100644
index 60fbac5..0000000
--- a/src/web/badge/index.js
+++ /dev/null
@@ -1 +0,0 @@
-Z.by_id('sdf')
diff --git a/src/web/component/image/index.css b/src/web/component/image/index.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/web/component/image/index.css
diff --git a/src/web/component/image/index.html b/src/web/component/image/index.html
new file mode 100644
index 0000000..918c5df
--- /dev/null
+++ b/src/web/component/image/index.html
@@ -0,0 +1,2 @@
+<div id="image">
+</div>
diff --git a/src/web/component/image/index.js b/src/web/component/image/index.js
new file mode 100644
index 0000000..d88023d
--- /dev/null
+++ b/src/web/component/image/index.js
@@ -0,0 +1 @@
+console.log(Z.by_selector('div'));
diff --git a/src/web/badge/root.zig b/src/web/component/image/root.zig
index 5e8ea25..7c8ec77 100644
--- a/src/web/badge/root.zig
+++ b/src/web/component/image/root.zig
@@ -1,7 +1,7 @@
 const z = @import("z");
 
 pub const component: z.Component = .{
-    .name = .badge,
+    .name = .image,
     .body = @embedFile("index.html"),
     .style = @embedFile("index.css"),
     .script = @embedFile("index.js"),
diff --git a/src/web/component/root.zig b/src/web/component/root.zig
new file mode 100644
index 0000000..226f3f7
--- /dev/null
+++ b/src/web/component/root.zig
@@ -0,0 +1,6 @@
+const z = @import("z");
+
+pub const components: []const z.Component = &.{
+    @import("image/root.zig").component,
+    @import("timeline/root.zig").component,
+};
diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css
new file mode 100644
index 0000000..4060deb
--- /dev/null
+++ b/src/web/component/timeline/index.css
@@ -0,0 +1,9 @@
+#container {
+	width: 100%;
+	display: inline-grid;
+	gap: 0px;
+}
+
+#container.tiling .image {
+	aspect-ratio: 1 / 1 !important;
+}
diff --git a/src/web/component/timeline/index.html b/src/web/component/timeline/index.html
new file mode 100644
index 0000000..41d4617
--- /dev/null
+++ b/src/web/component/timeline/index.html
@@ -0,0 +1,2 @@
+<div id="container">
+</div>
diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js
new file mode 100644
index 0000000..0bbbcc2
--- /dev/null
+++ b/src/web/component/timeline/index.js
@@ -0,0 +1,42 @@
+const container = Z.by_id('container');
+
+function getRandomColor() {
+  var letters = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+for (let i = 0; i < 100; ++i) {
+	container.appendChild(Z.native('div', {
+		className: 'image',
+		style: {
+			background: getRandomColor(),
+			aspectRatio: '1 / ' + (Math.random() + 0.5),
+		},
+	}));
+}
+
+const set_number_of_rows = (n) => {
+	container.style.gridTemplateColumns = '1fr '.repeat(n);
+
+	container.classList.toggle('tiling', n != 1);
+};
+
+let zoom_state = 5;
+set_number_of_rows(zoom_state);
+
+
+Z.document.onwheel = (event) => {
+	if (!event.ctrlKey) {
+		return;
+	}
+
+	event.preventDefault();
+
+	zoom_state += event.wheelDeltaY / 120;
+	zoom_state = Math.max(zoom_state, 1);
+	set_number_of_rows(zoom_state);
+}
diff --git a/src/web/component/timeline/root.zig b/src/web/component/timeline/root.zig
new file mode 100644
index 0000000..9faa40e
--- /dev/null
+++ b/src/web/component/timeline/root.zig
@@ -0,0 +1,8 @@
+const z = @import("z");
+
+pub const component: z.Component = .{
+    .name = .timeline,
+    .body = @embedFile("index.html"),
+    .style = @embedFile("index.css"),
+    .script = @embedFile("index.js"),
+};
diff --git a/src/web/index.css b/src/web/index.css
index a93ea47..b5647b1 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -1,4 +1,11 @@
 body {
 	padding: 0;
 	margin: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+#timeline {
+	display: block;
+	height: 100%;
 }
diff --git a/src/web/index.html b/src/web/index.html
index 3bf9953..d2bc6fe 100644
--- a/src/web/index.html
+++ b/src/web/index.html
@@ -1,3 +1,2 @@
-<z-component type="badge">
-	<span slot="content">Hello Z!</span>
+<z-component type="timeline" id="timeline">
 </z-component>
diff --git a/src/z/z.js b/src/z/z.js
index a5a1b92..ba07b9e 100644
--- a/src/z/z.js
+++ b/src/z/z.js
@@ -47,7 +47,7 @@ class Zenv {
 	populate_attributes(obj, attrs) {
 		for (const attr in attrs) {
 			if (typeof(obj[attr]) == 'object' && typeof(attrs[attr]) == 'object') {
-				populate_attributes(obj[attr], attrs[attr]);
+				this.populate_attributes(obj[attr], attrs[attr]);
 			} else {
 				obj[attr] = attrs[attr];
 			}
@@ -56,7 +56,7 @@ class Zenv {
 
 	native(name, options) {
 		const element = document.createElement(name);
-		Zenv.populate_attributes(element, options);
+		this.populate_attributes(element, options);
 		return element;
 	}
 
@@ -71,6 +71,10 @@ class Zenv {
 	by_selector_all(query) {
 		return this.document.shadowRoot.querySelectorAll(query);
 	}
+
+	get body() {
+		return this.document.shadowRoot;
+	}
 }
 
 Z = new Zenv(document.body);