1 files changed, 101 insertions, 5 deletions
diff --git a/static/pages/shuffle/index.js b/static/pages/shuffle/index.js
index 7bfd33e..6d65788 100644
--- a/static/pages/shuffle/index.js
+++ b/static/pages/shuffle/index.js
@@ -1,17 +1,113 @@
 import * as sfw from 'sfw';
-const { Div } = sfw.element.native;
+const { Div, Canvas } = sfw.element.native;
+
+import { Image } from 'widgets';
 
 const css = await sfw.css(import.meta.url, './index.css');
 
 export default class ShuffleView extends sfw.element.Container {
+	#front_image
+	#back_image
+	#front_image_index
+	#back_image_index
+	#images
+	#date
+	#drag_start_position
+	#drag_strength
+
 	constructor() {
 		super({ css });
 
+		this.#front_image_index = null;
+		this.#back_image_index = null;
+
 		this.body.append(
-			Div.new({
-				id: 'container',
-				innerText: 'Pure Emptiness',
-			})
+			this.#date = Div.new({ id: 'date' }),
+			this.#front_image = Image.new({
+				id: 'front',
+				disabled: true,
+				ontouchstart: (e) => {
+					if (e.touches.length != 1) return;
+
+					this.#drag_start_position = [e.touches[0].pageX, e.touches[0].pageY];
+				},
+				ontouchmove: (e) => {
+					if (e.touches.length != 1) return;
+
+					const position = [e.touches[0].pageX, e.touches[0].pageY];
+
+					const delta = [
+						position[0] - this.#drag_start_position[0],
+						position[1] - this.#drag_start_position[1]
+					];
+
+					const strength = Math.min(1, Math.max((delta[0]**2 + delta[1]**2) / (40 ** 2), 0) / 100);
+					this.#drag_strength = strength;
+					console.log(this.#drag_strength);
+
+					const angle_x = position[0] - window.screen.width / 2;
+					const angle_y = position[1] - window.screen.height * 1.2;
+					let angle = (Math.atan((angle_y) / (angle_x)) * 180 / Math.PI  + 90);
+
+					if (angle_x < 0) {
+						angle -= 180;
+					}
+
+					this.#front_image.style.transform = `
+						translate(-50%, calc(-50% - 50px))
+						translate(${delta[0]}px, ${delta[1]}px)
+						rotate(${angle}deg)
+					`;
+					this.#back_image.style.filter = `blur(${(1 - strength) * 50}px)`;
+				},
+				ontouchend: (e) => {
+					if (this.#drag_strength > 0.3) {
+						this.next();
+					}
+
+					this.#front_image.style.transform = '';
+					this.#back_image.style.filter = '';
+				},
+			}),
+			this.#back_image = Image.new({ id: 'back', disabled: true }),
 		)
+
+		this.ondragover = (e) => {
+			console.log(e)
+		}
+
+		this.onclick = () => this.next();
+	}
+
+	set images(images) {
+		this.#images = images;
+	}
+
+	open() {
+		this.next();
+		this.next();
+	}
+
+	next() {
+		this.#front_image_index = this.#back_image_index;
+		this.#back_image_index = Math.floor(Math.random() * this.#images.length);
+
+		if (this.#front_image_index !== null) {
+			this.#front_image.metadata = this.#images[this.#front_image_index];
+			this.#front_image.load();
+
+			const date = this.#images[this.#front_image_index].date
+			
+			this.#date.innerText = date.toLocaleString('default', {
+				month: 'long',
+				year: 'numeric',
+				day: 'numeric',
+				hour: 'numeric',
+				minute: 'numeric'
+			}); ;
+		}
+
+		this.#back_image.metadata = this.#images[this.#back_image_index];
+		this.#back_image.load();
 	}
 }