From 9bf3c0de0c460e65680a383d959bb9c20bbe357b Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 7 Apr 2025 23:51:13 +0200
Subject: [PATCH] zoom on wheel

---
 css/binaural.css |  2 +-
 css/common.css   |  1 +
 js/app.js        | 12 +++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/css/binaural.css b/css/binaural.css
index 423934d..355cb23 100644
--- a/css/binaural.css
+++ b/css/binaural.css
@@ -8,7 +8,7 @@
 
 #screenRow {
     display: block;
-    transform: rotateX(var(--rX)) rotateY(var(--rY));
+    transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
 }
 
 #screenRow * {
diff --git a/css/common.css b/css/common.css
index 01b1334..af2dfec 100644
--- a/css/common.css
+++ b/css/common.css
@@ -2,6 +2,7 @@
     --cell-side: 24px;
     --rX: -15deg;
     --rY: 0;
+    --tZ: 0;
 }
 
 body {
diff --git a/js/app.js b/js/app.js
index d256f29..f19ef7b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -279,6 +279,7 @@ screenRow.onmousedown = function(event) {
 screenRow.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
+        event.stopPropagation()
         rX = (rX0 - event.clientY + clientY0 + 360) % 360
         screenRow.style.setProperty("--rX", rX + "deg")
         if (rX <= 180) {
@@ -300,6 +301,15 @@ screenRow.onmousemove = function(event) {
     }
 }
 
-screenRow.onmouseup = function(event) {
+screenRow.onmouseup = screenRow.onmouseleave = function(event) {
     mousedown = false
+}
+
+screenRow.onwheel = function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    let zoom = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
+    zoom += event.deltaY
+    screenRow.style.setProperty("--tZ", zoom + "px")
+    console.log(zoom)
 }
\ No newline at end of file