ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added mobile support & fixed bugs

Browse Source
This commit is contained in:
ByteDice
2026-07-19 10:59:31 +02:00
parent a7b92c2072
commit 8df6d0f779
4 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/crafting/script.js
+21 -13
View File
@@ -19,12 +19,6 @@ let scale = 1
let isCollapsed = false let isCollapsed = false
document.addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
})
function collapseInput() { function collapseInput() {
const COLLAPSE = "collapse 0.5s cubic-bezier(0, 0, 0, 1.46) forwards" const COLLAPSE = "collapse 0.5s cubic-bezier(0, 0, 0, 1.46) forwards"
tomlInputContainer.style.animation = COLLAPSE tomlInputContainer.style.animation = COLLAPSE
@@ -58,11 +52,6 @@ function drag_trees(mouse_offset) {
trees.style.transform = `translate(${dragX}px, ${dragY}px)` trees.style.transform = `translate(${dragX}px, ${dragY}px)`
} }
function on_start_drag() {
dragOffsetX = mouseX - dragX * scale
dragOffsetY = mouseY - dragY * scale
isDragging = true
}
function dragLoop() { function dragLoop() {
if (isDragging) { drag_trees() } if (isDragging) { drag_trees() }
@@ -70,12 +59,31 @@ function dragLoop() {
} }
treeStatic.onmousedown = on_start_drag treeStatic.addEventListener("pointerdown", function(event) {
document.addEventListener("mouseup", function() { isDragging = false }) 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) { treeStatic.addEventListener("wheel", function(event) {
scale += (-event.deltaY / 500) scale += (-event.deltaY / 500)
scale = Math.max(0.2, scale) scale = Math.max(0.2, scale)
treeScale.style.transform = `scale(${scale})` treeScale.style.transform = `scale(${scale})`
}) })
document.addEventListener("pointermove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
})
document.addEventListener("DOMContentLoaded", dragLoop) document.addEventListener("DOMContentLoaded", dragLoop)
toys/crafting/style.css
+1 -1
View File
@@ -13,7 +13,7 @@
box-sizing: border-box; box-sizing: border-box;
width: calc(60px * var(--pxDensity)); width: calc(60px * var(--pxDensity));
/*height: calc(100px * var(--pxDensity));*/ /*height: calc(100px * var(--pxDensity));*/
height: 65vh; height: 45vh;
color: inherit; color: inherit;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
toys/index.html
+4 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, interactive-widget=resize-content">
<link rel="stylesheet" href="/global/navBar.css"> <link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css"> <link rel="stylesheet" href="/global/globalStyle.css">
@@ -59,6 +59,9 @@
</div> </div>
</button> </button>
</div> </div>
<!-- To scroll further, width is needed for some reason -->
<div style="margin-top: 50vh; width: 1px"></div>
</div> </div>
<div id="navBarContainer" data-alt="byte"></div> <div id="navBarContainer" data-alt="byte"></div>
toys/style.css
+2
View File
@@ -51,6 +51,8 @@ button:active {
flex-wrap: wrap; flex-wrap: wrap;
gap: calc(6px * var(--pxDensity)); gap: calc(6px * var(--pxDensity));
margin: 0 auto; margin: 0 auto;
overflow-y: scroll;
max-height: 100vh;
} }
.toyLi { .toyLi {
margin: 0; margin: 0;