Draw track preview with native cubic curves

RELEASE_MANIFEST.json

@@ -83,7 +83,7 @@
     "star_check.py": "5c17080957b81ffccf0de8314635b471562e55c92c97a1207d9034a99279b2c3",
     "steam_leaderboard.py": "d76397c39cae58f636ddf9a9be1a46ae3d77fefd6b7269feac73d34d97165481",
     "track-library.js": "351ec4c026b49420ce963f4310cb000d9e987fd28e6dac5ecd0176509340f6e6",
-    "track-map.js": "547b737d123d9479fc166ddc564568c0ff4b2099200c78e36bb46ec461bc754c",
+    "track-map.js": "a5e76598d5988c0446ad3b5796b601467cf9423e6daddf21753258b6eee0c195",
     "training_config.py": "6eb7282bbee3b3a6273bddc29c949d9904067414c26e501d815012f033173a1c",
     "vendor/gradio-client/LICENSE": "c71d239df91726fc519c6eb72d318ec65820627232b2f796219e87dcf35d0ab4",
     "vendor/gradio-client/dist/index.min.js": "fdd776db8633354f118fe2908c980592283968737e6b91dc3aa86d648da5c3fd",

track-map.js

@@ -33,6 +33,20 @@
       case 3:return [x+size,y+offset];
     }
   }
+  function connectionControl(own,other,point,target){
+    // Native TrackUtils.GetPathCurve (random_track.rs, b90b8af): each
+    // connection's inward normal sets its cubic handle, adjusted by port type.
+    // At the exit this is the next tile's negated entry normal, so the same
+    // per-tile construction also preserves the curve when endpoints reverse.
+    const [nx,ny]=[[0,1],[0,-1],[1,0],[-1,0]][own.side];
+    const dx=target[0]-point[0],dy=target[1]-point[1];
+    const angle=own.type===1?Math.PI/4:own.type===3?Math.atan2(128,384):own.type===4?Math.atan2(384,128):0;
+    const rotation=Math.sign(nx*dy-ny*dx)*angle;
+    const c=Math.cos(rotation),s=Math.sin(rotation);
+    const smoothness=[0,2,100].includes(own.type)&&[1,3,4].includes(other.type)?0.2:0.5;
+    const reach=Math.hypot(dx,dy)*smoothness;
+    return [point[0]+(nx*c-ny*s)*reach,point[1]+(nx*s+ny*c)*reach];
+  }
   async function decode(file){
     if(!file||file.size<1||file.size>1048576)throw Error('Choose a .track file under 1 MB');
     if(typeof DecompressionStream!=='function')throw Error('This browser cannot preview gzip tracks');
@@ -89,9 +103,11 @@
       context.strokeStyle='#d7e8f2';context.lineWidth=Math.max(1,size*.018);
       context.stroke();
       if(Array.isArray(tile.connections)&&tile.connections.length>=2){
-        const a=connectionPoint(tile.connections[0],x,y,size),z=connectionPoint(tile.connections[1],x,y,size);
+        const [entry,exit]=tile.connections;
+        const a=connectionPoint(entry,x,y,size),z=connectionPoint(exit,x,y,size);
+        const p1=connectionControl(entry,exit,a,z),p2=connectionControl(exit,entry,z,a);
         context.beginPath();context.moveTo(...a);
-        context.quadraticCurveTo(x+size/2,y+size/2,...z);
+        context.bezierCurveTo(...p1,...p2,...z);
         context.strokeStyle='#f3a967';context.lineWidth=Math.max(3,size*.055);
         context.lineCap='round';context.stroke();
       }
@@ -125,7 +141,7 @@
         status.textContent=source+' · '+track.tiles.length+' pieces · green dot marks the saved starting point';
         legend.textContent=NAMES.filter((_,i)=>counts[i]).map((name,index)=>{
           const i=NAMES.indexOf(name);return name+' '+counts[i];
-        }).join(' · ')+' · Orange line shows the approximate route; collision shapes and car positions are not shown.';
+        }).join(' · ')+' · Orange line follows the track centerline; collision shapes and car positions are not shown.';
       }catch(error){
         if(current!==version)return;
         renderEmpty();status.textContent='Map unavailable: '+error.message;legend.textContent='Training selection is unaffected.';