antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: position tunnels at absolute viewBox edges

Browse Source 
Corrected tunnel positioning based on actual viewBox coordinates:
- viewBox is "-50 -50 900 700" (x: -50 to 850, y: -50 to 650)
- Left mountain face now starts at x=-50 (absolute left edge)
- Right mountain face now ends at x=850 (absolute right edge)
- Both mountain faces extend full viewport height
- Track waypoints adjusted to span from left tunnel (x=20) to right tunnel (x=780)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-30 16:36:53 -05:00
parent f7419bc6a0
commit 1a5fa2873b
2 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx
View File

@@ -214,21 +214,21 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
strokeLinecap="round"
/>
{/* Left tunnel - positioned at absolute left edge */}
{/* Left tunnel - at absolute left edge of viewBox (x = -50) */}
<g data-element="left-tunnel">
{/* Mountain face */}
{/* Mountain face - extends from left edge */}
<rect
x="-60"
y="200"
width="80"
height="250"
x="-50"
y="-50"
width="70"
height="700"
fill="#5a5a5a"
stroke="#4a4a4a"
strokeWidth="2"
/>
{/* Tunnel depth/interior (dark entrance) */}
<ellipse
cx="-50"
cx="20"
cy="300"
rx="50"
ry="55"
@@ -236,14 +236,14 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
/>
{/* Tunnel arch opening */}
<path
d="M -50 355 L -100 355 L -100 245 Q -100 235, -50 235 Q 0 235, 0 245 L 0 355 Z"
d="M 20 355 L -50 355 L -50 245 Q -50 235, 20 235 Q 70 235, 70 245 L 70 355 Z"
fill="#1a1a1a"
stroke="#4a4a4a"
strokeWidth="3"
/>
{/* Tunnel arch rim (stone) */}
<path
d="M -100 245 Q -100 235, -50 235 Q 0 235, 0 245"
d="M -50 245 Q -50 235, 20 235 Q 70 235, 70 245"
fill="none"
stroke="#6a6a6a"
strokeWidth="6"
@@ -251,21 +251,21 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
/>
</g>
{/* Right tunnel - positioned at absolute right edge */}
{/* Right tunnel - at absolute right edge of viewBox (x = 850) */}
<g data-element="right-tunnel">
{/* Mountain face */}
{/* Mountain face - extends to right edge */}
<rect
x="780"
y="200"
width="80"
height="250"
y="-50"
width="70"
height="700"
fill="#5a5a5a"
stroke="#4a4a4a"
strokeWidth="2"
/>
{/* Tunnel depth/interior (dark entrance) */}
<ellipse
cx="850"
cx="780"
cy="300"
rx="50"
ry="55"
@@ -273,14 +273,14 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
/>
{/* Tunnel arch opening */}
<path
d="M 850 355 L 800 355 L 800 245 Q 800 235, 850 235 Q 900 235, 900 245 L 900 355 Z"
d="M 780 355 L 730 355 L 730 245 Q 730 235, 780 235 Q 850 235, 850 245 L 850 355 Z"
fill="#1a1a1a"
stroke="#4a4a4a"
strokeWidth="3"
/>
{/* Tunnel arch rim (stone) */}
<path
d="M 800 245 Q 800 235, 850 235 Q 900 235, 900 245"
d="M 730 245 Q 730 235, 780 235 Q 850 235, 850 245"
fill="none"
stroke="#6a6a6a"
strokeWidth="6"

18
apps/web/src/app/games/complement-race/lib/RailroadTrackGenerator.ts
View File

@@ -48,16 +48,16 @@ export class RailroadTrackGenerator {
* Based on route number for variety across different routes
*/
private generateTrackWaypoints(routeNumber: number): Waypoint[] {
// Base waypoints for scenic railroad journey - extended beyond viewport edges
// Base waypoints - tracks span from left tunnel (x=20) to right tunnel (x=780)
// viewBox is "-50 -50 900 700", so x ranges from -50 to 850
const baseWaypoints: Waypoint[] = [
{ x: -120, y: 300 }, // Start well beyond left edge (continues into tunnel)
{ x: 80, y: 260 }, // Emerging from left tunnel
{ x: 220, y: 200 }, // Climb into hills
{ x: 360, y: 170 }, // Mountain pass
{ x: 500, y: 220 }, // Descent to valley
{ x: 640, y: 160 }, // Bridge over canyon
{ x: 780, y: 240 }, // Rolling hills
{ x: 920, y: 300 } // Enter right tunnel (continues beyond right edge)
{ x: 20, y: 300 }, // Start at left tunnel center
{ x: 120, y: 260 }, // Emerging from left tunnel
{ x: 240, y: 200 }, // Climb into hills
{ x: 380, y: 170 }, // Mountain pass
{ x: 520, y: 220 }, // Descent to valley
{ x: 660, y: 160 }, // Bridge over canyon
{ x: 780, y: 300 } // Enter right tunnel center
]
// Add controlled randomness for variety (but keep start/end fixed)