diff --git a/toys/crafting/script.js b/toys/crafting/script.js
index bc4db57..1b14127 100644
--- a/toys/crafting/script.js
+++ b/toys/crafting/script.js
@@ -19,12 +19,6 @@ let scale = 1
let isCollapsed = false
-document.addEventListener("mousemove", function(event) {
- mouseX = event.clientX;
- mouseY = event.clientY;
-})
-
-
function collapseInput() {
const COLLAPSE = "collapse 0.5s cubic-bezier(0, 0, 0, 1.46) forwards"
tomlInputContainer.style.animation = COLLAPSE
@@ -58,11 +52,6 @@ function drag_trees(mouse_offset) {
trees.style.transform = `translate(${dragX}px, ${dragY}px)`
}
-function on_start_drag() {
- dragOffsetX = mouseX - dragX * scale
- dragOffsetY = mouseY - dragY * scale
- isDragging = true
-}
function dragLoop() {
if (isDragging) { drag_trees() }
@@ -70,12 +59,31 @@ function dragLoop() {
}
-treeStatic.onmousedown = on_start_drag
-document.addEventListener("mouseup", function() { isDragging = false })
+treeStatic.addEventListener("pointerdown", function(event) {
+ mouseX = event.clientX
+ mouseY = event.clientY
+ dragOffsetX = mouseX - dragX * scale
+ dragOffsetY = mouseY - dragY * scale
+ isDragging = true
+
+ treeStatic.setPointerCapture(event.pointerId);
+ event.preventDefault()
+})
+
+document.addEventListener("pointerup", function()
+ { isDragging = false })
+document.addEventListener("pointercancel", function()
+ { isDragging = false })
+
treeStatic.addEventListener("wheel", function(event) {
scale += (-event.deltaY / 500)
scale = Math.max(0.2, scale)
treeScale.style.transform = `scale(${scale})`
})
+document.addEventListener("pointermove", function(event) {
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+})
+
document.addEventListener("DOMContentLoaded", dragLoop)
\ No newline at end of file
diff --git a/toys/crafting/style.css b/toys/crafting/style.css
index 7973e44..f34571a 100644
--- a/toys/crafting/style.css
+++ b/toys/crafting/style.css
@@ -13,7 +13,7 @@
box-sizing: border-box;
width: calc(60px * var(--pxDensity));
/*height: calc(100px * var(--pxDensity));*/
- height: 65vh;
+ height: 45vh;
color: inherit;
display: inline-block;
text-align: left;
diff --git a/toys/index.html b/toys/index.html
index 45966f0..03c240f 100644
--- a/toys/index.html
+++ b/toys/index.html
@@ -3,7 +3,7 @@
-
+
@@ -59,6 +59,9 @@
+
+
+
diff --git a/toys/style.css b/toys/style.css
index 46a26f6..96f24e2 100644
--- a/toys/style.css
+++ b/toys/style.css
@@ -51,6 +51,8 @@ button:active {
flex-wrap: wrap;
gap: calc(6px * var(--pxDensity));
margin: 0 auto;
+ overflow-y: scroll;
+ max-height: 100vh;
}
.toyLi {
margin: 0;