trying to get phone tilt working

Author: b00kworm4lyf3

CSS/numberRoll.css

@@ -1,37 +1,37 @@
-body {
+body{
     margin: 0;
     padding: 20px;
     font-family: "Comic Sans MS", "Comic Sans", cursive;
     background-color: #9999FF;
     color: #000066;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="50" height="50" x="0" y="0" fill="%239999FF"/><rect width="50" height="50" x="50" y="50" fill="%239999FF"/><rect width="50" height="50" x="50" y="0" fill="%23AAAAFF"/><rect width="50" height="50" x="0" y="50" fill="%23AAAAFF"/></svg>');
     overflow-x: hidden;
-  }
+}
 
-  .container {
+.container{
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background-color: #CCFFFF;
     border: 6px double #00CCCC;
     padding: 20px;
     box-shadow: 10px 10px 0 #330066;
-  }
+}
 
-  h1 {
+h1{
     color: #FF00FF;
     text-shadow: 2px 2px 0 #FFFF00;
     font-size: 28px;
     margin-bottom: 5px;
-  }
+}
 
-  .subtitle {
+.subtitle{
     color: #009900;
     font-weight: bold;
     margin-bottom: 20px;
-  }
+}
 
-  .maze-container {
+.maze-container{
     position: relative;
     width: 100%;
     height: 300px;
@@ -42,30 +42,30 @@ body {
     overflow: hidden;
     perspective: 800px;
     transform-style: preserve-3d;
-  }
+}
 
-  .maze-inner {
+.maze-inner{
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     transition: transform 0.1s ease-out;
-  }
+}
 
-  .ball {
+.ball{
     position: absolute;
     width: 30px;
     height: 30px;
     background: radial-gradient(circle at 10px 10px, #FF3333, #990000);
     border-radius: 50%;
-    top: 50px;
-    left: 50px;
+    top: 20px;
+    left: 20px;
     z-index: 10;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     transition: left 0.05s linear, top 0.05s linear;
-  }
+}
 
-  .hole {
+.hole{
     position: absolute;
     width: 40px;
     height: 40px;
@@ -79,15 +79,15 @@ body {
     font-size: 18px;
     box-shadow: inset 0px 0px 10px #000000;
     border: 2px solid #00FFFF;
-  }
+}
 
-  .obstacle {
+.obstacle{
     position: absolute;
     background-color: #CC6600;
     border: 2px solid #FFCC33;
-  }
+}
 
-  .phone-number {
+.phone-number{
     margin: 20px 0;
     min-height: 40px;
     background-color: #000000;
@@ -98,26 +98,26 @@ body {
     letter-spacing: 3px;
     border: 3px inset #999999;
     font-weight: bold;
-  }
+}
 
-  .instructions {
+.instructions{
     background-color: #FFFF99;
     border: 2px dashed #FF9900;
     padding: 10px;
     font-size: 14px;
     margin-bottom: 20px;
     text-align: left;
-  }
+}
 
-  .blink {
+.blink{
     animation: blinker 1s step-end infinite;
-  }
+}
 
-  @keyframes blinker {
-    50% { opacity: 0; }
-  }
+@keyframes blinker{
+    50%{opacity: 0;}
+}
 
-  button {
+button{
     background: linear-gradient(to bottom, #FF9900, #FF6600);
     border: 3px outset #FF9900;
     color: #FFFFFF;
@@ -127,42 +127,41 @@ body {
     font-family: "Comic Sans MS", "Comic Sans", cursive;
     margin: 5px;
     box-shadow: 3px 3px 0 #660033;
-  }
+}
 
-  button:active {
+button:active{
     border-style: inset;
     transform: translate(1px, 1px);
-  }
+}
 
-  .footer {
+.footer{
     margin-top: 20px;
     font-size: 12px;
     color: #660066;
-  }
+}
 
-  .marquee {
+.marquee{
     background-color: #FFCC99;
     padding: 5px;
     white-space: nowrap;
     overflow: hidden;
     border: 1px solid #FF6600;
     margin-top: 10px;
-  }
+}
 
-  .marquee p {
+.marquee p{
     display: inline-block;
     padding-left: 100%;
     animation: marquee 15s linear infinite;
     margin: 0;
-  }
+}
 
-  @keyframes marquee {
-    0% { transform: translate(0, 0); }
-    100% { transform: translate(-100%, 0); }
-  }
+@keyframes marquee{
+    0%{transform: translate(0, 0);}
+    100%{transform: translate(-100%, 0);}
+}
 
-  /* Joystick styling */
-  .joystick-container {
+.joystick-container{
     position: relative;
     width: 150px;
     height: 150px;
@@ -173,9 +172,9 @@ body {
     box-shadow: inset 0 0 10px #333399;
     margin-bottom: 20px;
     touch-action: none;
-  }
+}
 
-  .joystick-base {
+.joystick-base{
     position: absolute;
     top: 50%;
     left: 50%;
@@ -185,9 +184,9 @@ body {
     background-color: #9999CC;
     border-radius: 50%;
     border: 2px solid #6666AA;
-  }
+}
 
-  .joystick-handle {
+.joystick-handle{
     position: absolute;
     top: 50%;
     left: 50%;
@@ -202,36 +201,36 @@ body {
     user-select: none;
     z-index: 10;
     animation: glow 1.5s ease-in-out infinite alternate;
-  }
+}
 
-  @keyframes glow {
-    from {
+@keyframes glow{
+    from{
       box-shadow: 0 0 5px #FF0099, 0 0 10px #FF33CC;
     }
-    to {
+    to{
       box-shadow: 0 0 10px #FF0099, 0 0 20px #FF33CC, 0 0 30px #FF66DD;
     }
-  }
+}
 
-  .joystick-handle:active {
+.joystick-handle:active{
     cursor: grabbing;
     animation: none;
-  }
+}
 
-  .device-motion-notice {
+.device-motion-notice{
     background-color: #FFCCFF;
     border: 2px solid #FF66FF;
     padding: 10px;
     margin-top: 10px;
     display: none;
-  }
+}
 
-  /* For devices with device orientation */
-  @media (max-width: 768px) {
-    .joystick-container {
+/* For devices with device orientation */
+@media(max-width: 2700px){
+    .joystick-container{
       display: none;
     }
-    .device-motion-notice {
+    .device-motion-notice{
       display: block;
     }
-  }
+}

js/numberRoll.js

@@ -13,8 +13,8 @@ let collectedHoles = [];
 
 let rotationX = 0;
 let rotationY = 0;
-let ballX = 50;
-let ballY = 50;
+let ballX = 20;
+let ballY = 20;
 let velocityX = 0;
 let velocityY = 0;
 let isMobile = window.innerWidth <= 768;
@@ -174,10 +174,10 @@ enableMotionBtn.addEventListener('click', function(){
       rotationY = Math.min(Math.max(gamma, -15), 15);
 
       mazeInner.style.transform = `rotateY(${rotationY}deg) rotateX(${-rotationX}deg)`;
-    }
+}
 
-    // Ball physics
-    function updateBall(timestamp) {
+// Ball physics
+function updateBall(timestamp){
       if (!lastTimestamp) {
         lastTimestamp = timestamp;
       }
@@ -279,7 +279,7 @@ enableMotionBtn.addEventListener('click', function(){
 
       // Check hole collisions
       holePositions.forEach((hole, index) => {
-        if (collectedHoles.includes(index)) return;
+        // if (collectedHoles.includes(index)) return;
 
         const holeX = parseInt(hole.x);
         const holeY = parseInt(hole.y);
@@ -294,8 +294,8 @@ enableMotionBtn.addEventListener('click', function(){
           collectDigit(index, hole.num);
 
           // Reset ball position
-          newX = 50;
-          newY = 50;
+          newX = 20;
+          newY = 20;
           velocityX = 0;
           velocityY = 0;
         }
@@ -371,8 +371,8 @@ enableMotionBtn.addEventListener('click', function(){
     resetBtn.addEventListener('click', function() {
       phoneNumber = '';
       phoneDisplay.innerText = 'Enter your number...';
-      ballX = 50;
-      ballY = 50;
+      ballX = 20;
+      ballY = 20;
       velocityX = 0;
       velocityY = 0;
       ball.style.left = ballX + 'px';