We can move.

MichaelDiBernardo · Aug 25, 2024 · b160373 · b160373
1 parent 26b67b7
commit b160373
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 4 deletions.
diff --git a/img/forest-tile-512x512.jpg b/img/forest-tile-512x512.jpg
diff --git a/img/forest.webp b/img/forest.webp
diff --git a/index.html b/index.html
@@ -86,5 +86,7 @@
     <script defer src="./main.js"></script>
   </head>
 
-  <body></body>
+  <body>
+    <div id="scrollable-area"></div>
+  </body>
 </html>
diff --git 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
@@ -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,15 +41,19 @@ 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,
 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;
+}