fix: add debug text

Author: dudewheresmycode

examples/courses/courses.ts

@@ -390,6 +390,7 @@ async function initializeDebug() {
   if (courseUrl) {
     preLoad();
   }
+  document.getElementById('debug-message')?.setAttribute('style', 'display: block;');
 }
 
 // listen for setup event from OpenGolfSim app

examples/courses/index.html

@@ -10,6 +10,7 @@
     <div id="top-center"></div>
     <div id="shot-data"></div>
     <div id="render-stats"></div>
+    <div id="debug-message">Press any number key (1-9) or the space bar to take a shot.</div>
 
     <script type="module" src="courses.js"></script>
   </body>

examples/index.html

@@ -86,6 +86,7 @@
 
         <div class="section">
           <h3>Examples</h3>
+          <p style="padding: 1rem; background-color: rgba(0, 200, 0, 0.2);">To use the examples: Press any number key (1-9) or the space bar to take a shot.</p>
           <ul>
             <li>
               <a href="range/">Driving Range</a>

examples/range/index.html

@@ -12,6 +12,7 @@
     <div id="top-center"></div>
     <div id="shot-data"></div>
     <div id="render-stats"></div>
+    <div id="debug-message">Press any number key (1-9) or the space bar to take a shot.</div>
 
     <script type="module" src="range.js"></script>
   </body>

examples/range/range.ts

@@ -330,6 +330,7 @@ async function initializeSetup(payload: any) {
 async function initializeDebug() {
   gameContext.setupData = generateSetupData(1);
   preLoad();
+  document.getElementById('debug-message')?.setAttribute('style', 'display: block;');
 }
 
 

src/controls.ts

@@ -97,31 +97,51 @@ export class CourseKeyboardControls extends EventEmitter<CourseKeyboardControlEv
   }
 
   #handleTestShotKeys(code: string) {
+    console.log(code);
     switch (code) {
+      case 'Space':
+        const range = (min: number, max: number) => (Math.floor(Math.random() * (max - min + 1)) + min);
+        this.emit('testShot', {
+          ballSpeed: range(90, 120),
+          verticalLaunchAngle: range(14, 20),
+          horizontalLaunchAngle: range(-2, 2),
+          spinSpeed: range(2000, 6000),
+          spinAxis: range(2, 2),
+        });
+        break;
+      case 'Digit1':
       case 'Numpad1':
         this.emit('testShot', { ballSpeed: 150, verticalLaunchAngle: 11, horizontalLaunchAngle: 0, spinSpeed: 2000, spinAxis: 0 });
         break;
+      case 'Digit2':
       case 'Numpad2':
         this.emit('testShot', { ballSpeed: 120, verticalLaunchAngle: 15, horizontalLaunchAngle: 0, spinSpeed: 3200, spinAxis: 0 });
         break;
+      case 'Digit3':
       case 'Numpad3':
         this.emit('testShot', { ballSpeed: 100, verticalLaunchAngle: 22, horizontalLaunchAngle: 0, spinSpeed: 5000, spinAxis: 0 });
         break;
+      case 'Digit4':
       case 'Numpad4':
         this.emit('testShot', { ballSpeed: 80, verticalLaunchAngle: 25, horizontalLaunchAngle: 0, spinSpeed: 7500, spinAxis: 0 });
         break;
+      case 'Digit5':
       case 'Numpad5':
         this.emit('testShot', { ballSpeed: 60, verticalLaunchAngle: 28, horizontalLaunchAngle: 0, spinSpeed: 7000, spinAxis: 0 });
         break;
+      case 'Digit6': 
       case 'Numpad6':
         this.emit('testShot', { ballSpeed: 40, verticalLaunchAngle: 28, horizontalLaunchAngle: 0, spinSpeed: 6000, spinAxis: 0 });
         break;
+      case 'Digit7':
       case 'Numpad7':
         this.emit('testShot', { ballSpeed: 30, verticalLaunchAngle: 35, horizontalLaunchAngle: 0, spinSpeed: 6000, spinAxis: 0 });
         break;
+      case 'Digit8':
       case 'Numpad8':
         this.emit('testShot', { ballSpeed: 20, verticalLaunchAngle: 40, horizontalLaunchAngle: 0, spinSpeed: 4000, spinAxis: 0 });
         break;
+      case 'Digit9':
       case 'Numpad9':
         this.emit('testShot', { ballSpeed: 10, verticalLaunchAngle: 0, horizontalLaunchAngle: 1, spinSpeed: 0, spinAxis: 0 });
         break;

src/css/base.css

@@ -45,3 +45,15 @@ button:hover {
   }
 }
 
+
+#debug-message {
+  display: none;
+  background-color: var(--bg-color);
+  padding: var(--base-padding);
+  color: var(--text-disabled);
+  font-size: var(--base-padding);
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}