diff --git a/img/forest-tile-512x512.jpg b/img/forest-tile-512x512.jpg new file mode 100644 index 0000000..c126c19 Binary files /dev/null and b/img/forest-tile-512x512.jpg differ diff --git a/img/forest.webp b/img/forest.webp deleted file mode 100644 index 4494a7f..0000000 Binary files a/img/forest.webp and /dev/null differ diff --git a/index.html b/index.html index 744839d..348456e 100644 --- a/index.html +++ b/index.html @@ -86,5 +86,7 @@ - + +
+ diff --git a/main.js b/main.js index e69de29..fe21852 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,44 @@ +const viewportDimensions = { + x: 50000, + y: 50000, +}; + +document.addEventListener("load", function () { + const scrollableArea = document.getElementById("scrollable-area"); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Calculate the center position + const scrollToX = (viewportDimensions.x - viewportWidth) / 2; + const scrollToY = (viewportDimensions.y - viewportHeight) / 2; + + console.log(`Center is: ${scrollToX}, ${scrollToY}`); + // Set the initial scroll position + window.scrollTo(scrollToX, scrollToY); + + // Prevent default touch behavior to allow custom scrolling + scrollableArea.addEventListener( + "touchmove", + function (e) { + e.preventDefault(); + }, + { passive: false } + ); + + let startX, startY, scrollLeft, scrollTop; + + scrollableArea.addEventListener("touchstart", function (e) { + startX = e.touches[0].pageX - scrollableArea.offsetLeft; + startY = e.touches[0].pageY - scrollableArea.offsetTop; + scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; + scrollTop = window.pageYOffset || document.documentElement.scrollTop; + }); + + scrollableArea.addEventListener("touchmove", function (e) { + const x = e.touches[0].pageX - scrollableArea.offsetLeft; + const y = e.touches[0].pageY - scrollableArea.offsetTop; + const walkX = (x - startX) * 2; // Adjust scrolling speed if needed + const walkY = (y - startY) * 2; + window.scrollTo(scrollLeft - walkX, scrollTop - walkY); + }); +}); diff --git a/style.css b/style.css index 9fff43c..bfe10e6 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,8 @@ +/* + The first numbered steps are CSS reset from here: + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ + /* 1. Use a more-intuitive box-sizing model. */ @@ -16,11 +21,15 @@ Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering -*/ -body { + + Mike's notes: I don't need these. Nora can't read. + + body { line-height: 1.5; -webkit-font-smoothing: antialiased; -} +} +*/ + /* 5. Improve media defaults */ @@ -32,8 +41,11 @@ svg { display: block; max-width: 100%; } + /* 6. Remove built-in form typography styles + + Mike's notes: I don't need these either. No forms in this app. */ input, button, @@ -41,6 +53,7 @@ textarea, select { font: inherit; } + /* 7. Avoid text overflows */ @@ -60,3 +73,18 @@ h6 { #__next { isolation: isolate; } + +html, +body { + margin: 0; + padding: 0; + height: 100%; + overflow: auto; +} + +#scrollable-area { + width: 50000px; + height: 50000px; + background-image: url("./img/forest-tile-512x512.jpg"); + background-repeat: repeat; +}