feat: sortable shot data and improved player updates

Author: dudewheresmycode

examples/courses/courses.ts

@@ -16,16 +16,17 @@ import {
   UIStats,
   UILoadingScreen,
   VolumetricClouds,
-  type PlayerStatus,
   generateSetupData,
+  CoursePlayer,
  } from '@opengolfsim/fuse';
 
-interface GameContext {
-  timer: THREE.Timer,
+
+const gameContext: {
   startPoint: THREE.Vector3,
   aimPoint: THREE.Vector3,
 
   // Environment
+  timer: THREE.Timer,
   world?: World;
   scene?: THREE.Scene;
   renderer?: THREE.WebGLRenderer,
@@ -34,7 +35,7 @@ interface GameContext {
   fog?: THREE.Fog,  
   clouds?: VolumetricClouds,
 
-  // Data
+  // Course Data
   setupData?: OpenGolfSim.SetupData,
   gameData?: OpenGolfSim.GameData,
   course?: CourseLoader,
@@ -56,9 +57,7 @@ interface GameContext {
   // State
   distanceToAim: number,
   heightToAim: number,
-}
-
-const gameContext: GameContext = {
+} = {
   timer: new THREE.Timer(),
   startPoint: new THREE.Vector3(0, 0, 0),
   aimPoint: new THREE.Vector3(0, 0, 0),
@@ -85,8 +84,7 @@ function launchShot(shot: OpenGolfSim.Shot) {
   }
 }
 
-function setupNextShot(playerStatus?: PlayerStatus) {
-  console.log('Setup next shot with player', playerStatus);
+function setupNextShot() {
   if (!gameContext.game) return;
   gameContext.camera?.setTracking(false);
   gameContext.startPoint.copy(gameContext.game.startPoint());
@@ -101,7 +99,8 @@ function setupNextShot(playerStatus?: PlayerStatus) {
 
   gameContext.courseMap?.updatePosition(gameContext.startPoint, gameContext.game.pinPoint());
   gameContext.courseMap?.updateHole(gameContext.game.activeHole);
-  gameContext.playerMenu?.update(gameContext.game.currentPlayer());
+
+  gameContext.playerMenu?.update(gameContext.game.activePlayer);
 }
 
 function setupRenderer() {
@@ -184,13 +183,6 @@ async function setupScene() {
   });
   gameContext.scene.add(gameContext.clouds.object);
 
-  gameContext.shotData = new UIShotData('#shot-data', { units: gameContext.setupData?.units });
-  gameContext.rangeFinder = new UIRangeFinder('#top-center', { units: gameContext.setupData?.units });
-  gameContext.playerMenu = new UIPlayerMenu('#top-left', { setupData: gameContext.setupData });
-  gameContext.playerMenu.on('selectClub', club => {
-    
-  });
-
 }
 
 /**
@@ -244,7 +236,7 @@ async function handleSetup(payload: any) {
   preLoad();
 }
 
-async function setupFullCourse() {
+async function setupCourse() {
   if (!app.world) {
     throw new Error('Physics world does not exist');
   }
@@ -281,26 +273,52 @@ async function setupFullCourse() {
 
   // setup course game controller
   gameContext.game = new CourseGame(gameContext.course, gameContext.golfBall, gameContext.setupData);
-  gameContext.game?.on('nextShot', (status) => setupNextShot(status));
+  gameContext.game?.on('nextShot', (player) => {
+    console.log(`A new player (${player.name}) is up!`);
+    setupNextShot();
+  });
+
+  gameContext.shotData = new UIShotData('#shot-data', { units: gameContext.setupData?.units });
+  gameContext.rangeFinder = new UIRangeFinder('#top-center', { units: gameContext.setupData?.units });
+  gameContext.playerMenu = new UIPlayerMenu('#top-left', { players: gameContext.game?.players || [] });
+  gameContext.playerMenu.on('selectPlayer', player => {
+    // handle player changed
+    console.log('select player', player);
+    if (gameContext.game) {
+      gameContext.game.selectPlayer(player);
+    }
+  });
+  gameContext.playerMenu.on('selectClub', club => {
+    console.log('select club', club);
+    // handle club change
+    if (gameContext.game) {
+      gameContext.game.selectClub(club);
+      gameContext.playerMenu?.update(gameContext.game.activePlayer);
+    }
+  });
 
+  
   setupNextShot();
 
   gameContext.courseMap?.on('updateAim', adjustAimPoint);
   gameContext.courseMap?.on('updateStart', adjustStartPoint);
 
 }
 
+/**
+ * Sets up loading screen and kicks off loading of the course and building the scene
+ */
 function preLoad() {
-  gameContext.loadingScreen = new UILoadingScreen(document.body);
+  gameContext.loadingScreen = new UILoadingScreen(document.body, { loadingPrefix: 'Loading Course' });
   gameContext.loadingScreen.on('load', (error) => {
     console.log('POST LOAD', error);
     if (!error) {
       requestAnimationFrame(animate);
     }
   });
-  gameContext.loadingScreen.load(setupFullCourse);
+  gameContext.loadingScreen.load(setupCourse);
 
-  gameContext.stats = new UIStats('#render-stats', { hidden: false }); // start hidden (press S to toggle)
+  gameContext.stats = new UIStats('#render-stats', { hidden: true }); // start hidden (press S to toggle)
   gameContext.timer.connect(document);  
 }
 
@@ -367,15 +385,13 @@ async function initializeDebug() {
   if (!courseUrl) {
     throw new Error('No courseUrl provided');
   }
-  gameContext.setupData = generateSetupData();
+  gameContext.setupData = generateSetupData(2);
   gameContext.gameData = { id: 'web', courseUrl, gameMode: 2 };
   if (courseUrl) {
     preLoad();
   }
 }
 
-// -- Required setup --
-//
 // listen for setup event from OpenGolfSim app
 app.on('setup', handleSetup);
 // listen for shot event from OpenGolfSim app

examples/index.html

@@ -6,6 +6,9 @@
       import '../src/css/base.css';
     </script>
     <style>
+      body {
+        overflow: auto !important;
+      }
       header {
         display: block;
         /* background-color: var(--bg-color-solid); */
@@ -14,39 +17,93 @@
       }
       main {
         display: block;
-        padding: 20px 40px;
+        padding: 4rem;
+      }
+      footer {
+        display: block;
+        text-align: center;
+        padding: 4rem;
+        color: var(--text-disabled);
+        font-size: 12px;
       }
       .container {
-        max-width: 500px;
+        max-width: 800px;
         margin: auto;
       }
       h3 {
-        font-weight: 800;
+        font-weight: 700;
         color: var(--text-disabled);
         border-bottom: 1px solid var(--bg-color);
         padding-bottom: 1rem;
       }
+      .social {
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 1rem;
+        margin-bottom: 2rem;
+      }
+      .social a:hover img {
+        opacity: 1;
+      }
+      .social a:active img {
+        opacity: 0.4;
+      }
+      .social img {
+        opacity: 0.7;
+        width: 2rem;
+        height: auto;
+      }
+      .section {
+        margin-bottom: 3rem;
+      }
     </style>
   </head>
   <body>
     <header>
+      <div class="social">
+        <a href="https://github.com/OpenGolfSim/fuse" target="_blank">
+          <img src="https://cdn.simpleicons.org/github/FFFFFF" width="50" />
+        </a>
+        <a href="https://help.opengolfsim.com/connect-with-us" target="_blank">
+          <img src="https://cdn.simpleicons.org/discord/FFFFFF" width="50" />
+        </a>
+      </div>
+
       <div class="container">
         <img src="images/fuse.png" style="width: 200px;" />
       </div>
     </header>
     <main>
       <div class="container">
+        <div class="section">
+          <p>
+            <a href="https://github.com/OpenGolfSim/fuse/">FUSE</a> (Fast Universal Simulator Engine) is <a href="https://opengolfsim.com">OpenGolfSim</a>'s free, lightweight 3D golf simulation and physics engine. 
+            It provides components and utilities for building fully featured golf simulator experiences in any WebGL-capable browser or device.
+          </p>
+        </div>
+
+        <div class="section">
+          <h3>Examples</h3>
+          <ul>
+            <li>
+              <a href="range/">Driving Range</a>
+            </li>
+            <li>
+              <a href="courses/?courseUrl=https%3A%2F%2Fcoursedata.opengolfsim.com%2Fwebgl%2Fcourses%2Fmountain-vista%2Fv1%2Fmountain-vista-v1.1.glb">Mountain Vista 9-hole Course</a>
+            </li>
+          </ul>
+        </div>
 
-        <h3>Examples</h3>
-        <ul>
-          <li>
-            <a href="range/">Driving Range</a>
-          </li>
-          <li>
-            <a href="courses/?courseUrl=https%3A%2F%2Fcoursedata.opengolfsim.com%2Fwebgl%2Fcourses%2Fmountain-vista%2Fv1%2Fmountain-vista-v1.1.glb">Mountain Vista 9-hole Course</a>
-          </li>
-        </ul>
+        <div class="section">
+          <h3>Documentation</h3>
+          <p style="color: #888">Coming soon!</p>
+        </div>
       </div>
     </main>
+    <footer>
+      &copy; 2026 <a href="https://opengolfsim.com">OpenGolfSim LLC</a> All Rights Reserved
+    </footer>
   </body>
 </html>