diff --git a/css/styles.css b/css/styles.css index 3930d33..9f03bb3 100644 --- a/css/styles.css +++ b/css/styles.css @@ -119,3 +119,87 @@ button.active { pointer-events: none; font-size: 0.85rem; } + +/* === Train Controls Section === */ +#trainControls { + background: var(--panel-bg); + padding: 15px; + margin-top: 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +#trainControls h3 { + color: var(--primary-color); + margin-bottom: 15px; + font-size: 1.1rem; + border-bottom: 2px solid var(--primary-color); + padding-bottom: 8px; +} + +.train-btn { + display: block; + width: 100%; + padding: 12px; + margin-bottom: 10px; + background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-color-dark) 100%); + border: 2px solid var(--secondary-color); + color: white; + font-weight: bold; + border-radius: 6px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + font-size: 0.9rem; +} + +.train-btn:hover { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color-dark) 100%); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4); +} + +.train-btn:active { + transform: translateY(0); + box-shadow: 0 2px 6px rgba(255, 107, 0, 0.3); +} + +#trainStatus { + background: rgba(255, 255, 255, 0.1); + padding: 12px; + margin-top: 12px; + border-radius: 6px; + font-size: 0.85rem; + border-left: 4px solid var(--primary-color); +} + +#trainStatus p { + margin: 5px 0; + line-height: 1.5; +} + +#trainStatus strong { + color: var(--primary-color); +} + +/* Train animation indicator */ +.train-moving-indicator { + display: inline-block; + width: 8px; + height: 8px; + background: #00ff00; + border-radius: 50%; + margin-right: 8px; + animation: blink 1s infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +/* Train status colors */ +.status-moving { color: #00ff00; } +.status-stopped { color: #ff0000; } +.status-reversing { color: #ff8800; } diff --git a/index.html b/index.html index 1d8053f..773f365 100644 --- a/index.html +++ b/index.html @@ -5,29 +5,74 @@ Railtrack Pro + + + + + + + + +
-
+

🚂 Railtrack Pro

- -
-
-
-
-
+
+ +
+
+
+

Select Track Type

+ + + + +
+ +
+

Track Controls

+ + +
+ +
+

🚂 Train Controls

+ + + + +
+

Status: Stopped

+

Speed: 0 units/s

+
+
+ +
+

Statistics

+

Total Tracks: 0

+
+
+ +
+
+
+
+
+ +
+
+

Click tracks to place/remove. Select a track type to start building!

+
+
- - - - - - diff --git a/js/game.js b/js/game.js index 156503d..90c5e77 100644 --- a/js/game.js +++ b/js/game.js @@ -1,228 +1,506 @@ /** - * Railtrack Pro - Game Logic - * Main game controller, UI interactions, and game state management - * @author Railtrack Pro Development Team + * Game Module + * Main game logic, UI interactions, and initialization + * Works in browser environment + * @module game */ +/** + * Game class - main game controller + */ class Game { constructor() { - this.renderer = null; - this.world = null; - this.selectedTrackType = 'straight'; - this.stats = { total: 0, straight: 0, curved: 0, junction: 0, signal: 0 }; - - this.init(); - } - - /** - * Initialize game - */ - init() { - console.log('[Game] Initializing Railtrack Pro...'); - - // Initialize renderer + // Initialize Three.js renderer this.renderer = new Renderer(); - // Initialize world + // Initialize world (track placement) this.world = new World(this.renderer); - // Setup UI controls - this.setupUIControls(); + // Initialize train system + this.trainController = new TrainController([]); + this.trainRenderer = new TrainRenderer(this.renderer.scene, { color: '#FF6B00' }); + this.trainRenderer.setController(this.trainController); + this.createTrain(); - // Initialize stats display - this.updateStats(0); + // Initialize controls + this.controls = new OrbitControls(this.renderer.camera, this.renderer.domElement); + this.controls.enableDamping = true; + this.controls.dampingFactor = 0.05; + this.controls.maxPolarAngle = Math.PI / 2.2; + this.controls.minDistance = 5; + this.controls.maxDistance = 100; + + // Input state + this.selectedTrackType = null; + this.keysPressed = {}; - // Highlight first track type as active - this.setActiveTrackType('straight'); + // Stats tracking + this.stats = { + totalTracks: 0, + trackCounts: {}, + lastUpdate: Date.now() + }; - console.log('[Game] Initialization complete'); + // Initialize UI elements + this.initializeUI(); + + // Bind events + this.bindEvents(); + + // Start game loop + this.lastTime = Date.now(); + this.animate(); + + console.log('🚂 Railtrack Pro initialized!'); } /** - * Setup UI controls and event listeners + * Create a train for the world */ - setupUIControls() { - const trackTypes = ['straight', 'curved', 'junction', 'signal']; - - trackTypes.forEach(type => { - const button = document.getElementById(`btn-${type}`); - if (button) { - button.addEventListener('click', () => this.setActiveTrackType(type)); - } - }); - } - - /** - * Set active track type for placement - */ - setActiveTrackType(type) { - this.selectedTrackType = type; - - // Update button states - document.querySelectorAll('#controls button').forEach(btn => { - btn.classList.remove('active'); + createTrain() { + const train = new Train({ + id: 'main-train', + speed: 0, + maxSpeed: 5, + direction: 1, + color: '#FF6B00' }); - const activeButton = document.getElementById(`btn-${type}`); - if (activeButton) { - activeButton.classList.add('active'); - } - - console.log(`[Game] Selected track type: ${type}`); + this.train = train; + this.trainMesh = this.trainRenderer.createTrainMesh('main-train'); + this.train.threeMesh = this.trainMesh; } /** - * Handle track click from renderer + * Initialize UI elements */ - static onTrackClick(trackMesh) { - if (trackMesh.userData.piece) { - Game.removeTrack(trackMesh.userData.piece); - } + initializeUI() { + // Stats panel + this.statsPanel = document.getElementById('statsPanel'); + this.trackStatsList = document.getElementById('trackStatsList'); + + // Train controls + this.trainControls = { + accelerateBtn: document.getElementById('accelerateTrain'), + brakeBtn: document.getElementById('brakeTrain'), + reverseBtn: document.getElementById('reverseTrain'), + stopBtn: document.getElementById('stopTrain'), + statusDiv: document.getElementById('trainStatus') + }; + + // Track type buttons + this.trackButtons = document.querySelectorAll('[data-track-type]'); + + // Info panel + this.infoPanel = document.getElementById('infoPanel'); + + // Update stats display + this.updateStatsDisplay(); + this.updateTrainStatus(); } /** - * Handle mouse click on viewport for track placement + * Bind event listeners */ - static onViewportClick(event) { - // Only handle placement if a track type is selected - if (!Game.instance.selectedTrackType) { - console.log('[Game] No track type selected'); - return; - } + bindEvents() { + // Track type selection + this.trackButtons.forEach(btn => { + btn.addEventListener('click', () => { + const trackType = btn.dataset.trackType; + this.selectTrackType(trackType, btn); + }); + }); - // Raycast for placement - const mouse = new THREE.Vector2(); - const rect = Game.instance.renderer.renderer.domElement.getBoundingClientRect(); - mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; - mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; + // Train control buttons + this.trainControls.accelerateBtn.addEventListener('click', () => this.accelerate()); + this.trainControls.brakeBtn.addEventListener('click', () => this.brake()); + this.trainControls.reverseBtn.addEventListener('click', () => this.reverse()); + this.trainControls.stopBtn.addEventListener('click', () => this.stop()); - Game.instance.renderer.raycaster.setFromCamera(mouse, Game.instance.renderer.camera); - - // Create plane for intersection - const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); - const target = new THREE.Vector3(); - const intersectPoint = new THREE.Vector3(); - - Game.instance.renderer.raycaster.ray.intersectPlane(plane, intersectPoint); - - if (intersectPoint) { - // Snap to grid - const snappedPosition = Game.instance.world.snapToGrid(intersectPoint); + // Keyboard controls + document.addEventListener('keydown', (e) => { + this.keysPressed[e.code] = true; - // Check if placement is valid - if (Game.instance.world.isValidPlacement(snappedPosition)) { - // Calculate rotation based on selected type - const rotation = new THREE.Vector3(0, Math.PI / 2, 0); - - // Add track piece to world - Game.instance.world.addTrackPiece( - Game.instance.selectedTrackType, - snappedPosition, - rotation - ); + // Train controls via keyboard + switch(e.code) { + case 'KeyW': + case 'ArrowUp': + this.accelerate(); + break; + case 'KeyS': + case 'ArrowDown': + this.brake(); + break; + case 'KeyR': + case 'KeyD': + this.reverse(); + break; + case 'Space': + this.stop(); + break; + } + }); + + document.addEventListener('keyup', (e) => { + this.keysPressed[e.code] = false; + }); + + // Mouse click for track placement/removal + this.renderer.domElement.addEventListener('click', (event) => { + this.handleMouseClick(event); + }); + + // Handle window resize + window.addEventListener('resize', () => { + this.onWindowResize(); + }); + } + + /** + * Select track type for placement + * @param {string} trackType - Type of track to select + * @param {HTMLElement} button - Button element clicked + */ + selectTrackType(trackType, button) { + this.selectedTrackType = trackType; + + // Update button styles + this.trackButtons.forEach(btn => { + btn.classList.remove('selected'); + }); + button.classList.add('selected'); + + console.log(`Selected track type: ${trackType}`); + } + + /** + * Handle mouse click on canvas + * @param {MouseEvent} event - Mouse click event + */ + handleMouseClick(event) { + // Check if clicking on train first + const clickedMesh = event.target; + if (clickedMesh === this.trainMesh || clickedMesh.parent === this.trainMesh) { + // Train selected - show train info + this.showTrainInfo(); + return; + } + + // If no track type selected, show instruction + if (!this.selectedTrackType) { + this.showInfo('Select a track type to place! Click track buttons in the toolbar.'); + return; + } + + // Check if clicking on existing track (to remove) + const clickedTrack = this.checkClickedTrack(event); + if (clickedTrack) { + this.world.removeTrack(clickedTrack); + this.updateStatsDisplay(); + this.showInfo(`Removed track at ${clickedTrack.position.x}, ${clickedTrack.position.y}`); + return; + } + + // Check if clicking on canvas + if (this.world.isPlacementValid(event)) { + this.placeTrack(event); + } else { + this.showInfo('Click on the grid to place tracks. Click existing tracks to remove them.'); + } + } + + /** + * Check if mouse clicked on an existing track + * @param {MouseEvent} event - Mouse click event + * @returns {THREE.Object3D|null} Clicked track object or null + */ + checkClickedTrack(event) { + const mouse = new THREE.Vector2(); + mouse.x = (event.clientX / window.innerWidth) * 2 - 1; + mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; + + const raycaster = new THREE.Raycaster(); + raycaster.setFromCamera(mouse, this.renderer.camera); + + const intersects = raycaster.intersectObjects(this.world.allTracks, true); + if (intersects.length > 0) { + // Find parent group (the actual track piece) + let parent = intersects[0].object; + while (parent && !parent.userData.type) { + parent = parent.parent; + } + if (parent && parent.userData.type) { + return parent; + } + } + return null; + } + + /** + * Place a track at the clicked location + * @param {MouseEvent} event - Mouse click event + */ + placeTrack(event) { + const gridPos = this.world.getGridPosition(event); + if (gridPos) { + const track = this.world.addTrack( + this.selectedTrackType, + gridPos.x, + gridPos.y, + this.renderer + ); + if (track) { + this.stats.totalTracks++; + this.stats.trackCounts[this.selectedTrackType] = (this.stats.trackCounts[this.selectedTrackType] || 0) + 1; + this.updateStatsDisplay(); + this.showInfo(`Placed ${this.selectedTrackType} at ${gridPos.x}, ${gridPos.y}`); } else { - console.log('[Game] Placement invalid - invalid position'); + this.showInfo(`Cannot place ${this.selectedTrackType} at that location.`, 'warning'); } } } /** - * Remove track piece + * Accelerate the train (W/Up arrow) */ - static removeTrack(trackPiece) { - if (Game.instance && Game.instance.world) { - Game.instance.world.removeTrackPiece(trackPiece); + accelerate() { + if (this.train) { + this.train.accelerate(); + this.updateTrainStatus(); + console.log('⚡ Train accelerating - Speed:', this.train.speed); } } /** - * Update stats display in info panel + * Brake the train (S/Down arrow) */ - static updateStats(count) { - if (!Game.instance) return; - - const stats = Game.instance.world.getStats(); - Game.instance.stats = stats; - - const statsElement = document.getElementById('stats'); - if (statsElement) { - statsElement.innerHTML = ` -

📊 Track Statistics

-

Total: ${stats.total}

-

âŦ‡ī¸ Straight: ${stats.straight}

-

âŦ‡ī¸ Curved: ${stats.curved}

-

âŦ‡ī¸ Junction: ${stats.junction}

-

âŦ‡ī¸ Signal: ${stats.signal}

- `; + brake() { + if (this.train) { + this.train.brake(); + this.updateTrainStatus(); + console.log('🛑 Train braking - Speed:', this.train.speed); } } /** - * Update selected track info display + * Reverse train direction (R/D) */ - static updateSelectedInfo(selectedMesh) { - if (!Game.instance) return; - - const infoElement = document.getElementById('selected-info'); - - if (!selectedMesh) { - infoElement.innerHTML = ` -

🔍 Selection

-

No track selected

- `; - return; + reverse() { + if (this.train) { + this.train.reverse(); + this.updateTrainStatus(); + console.log('🔄 Train reversed - Direction:', this.train.direction); } + } - const track = selectedMesh.userData.piece; - if (!track) return; + /** + * Stop the train (Space) + */ + stop() { + if (this.train) { + this.train.stop(); + this.updateTrainStatus(); + console.log('🛑 Train stopped'); + } + } - const config = TrackConfig.types[track.type] || { name: 'Unknown' }; - - infoElement.innerHTML = ` -

đŸ“Ļ Track Info

-

Type: ${config.name}

-

Position: ${track.position.x.toFixed(1)}, ${track.position.z.toFixed(1)}

-

Rotation: ${(track.rotation.y * 180 / Math.PI).toFixed(0)}°

-

Cost: $${config.cost || 0}

+ /** + * Show train information in info panel + */ + showTrainInfo() { + if (!this.train) return; + + this.infoPanel.innerHTML = ` +

🚂 Train Information

+

ID: ${this.train.id}

+

Speed: ${Math.abs(this.train.speed).toFixed(1)} units/s

+

Direction: ${this.train.direction > 0 ? '➡ī¸ Forward' : 'âŦ…ī¸ Reverse'}

+

Status: ${this.train.isMoving ? '🚂 Moving' : '🛑 Stopped'}

+

Keyboard: W/↑ = Accelerate, S/↓ = Brake, R/D = Reverse, SPACE = Stop

`; } /** - * Get current game instance + * Show information message in info panel + * @param {string} message - Message to display + * @param {string} type - Type (info, warning, error) */ - static getInstance() { - return this.instance; + showInfo(message, type = 'info') { + this.infoPanel.innerHTML = ` +

${type === 'warning' ? '⚠ī¸' : type === 'error' ? '❌' : 'ℹī¸'} ${type.toUpperCase()}

+

${message}

+ `; + + // Clear info after 3 seconds + setTimeout(() => { + if (this.infoPanel && this.infoPanel.innerHTML.includes(message)) { + this.infoPanel.innerHTML = '

Click tracks to place/remove. Select a track type to start building!

'; + } + }, 3000); } /** - * Initialize game on DOM ready + * Update stats display in UI */ - initGame() { - Game.instance = new Game(); - - // Add click handler to viewport - const viewport = document.getElementById('viewport'); - if (viewport) { - viewport.addEventListener('click', (event) => { - // Prevent placement if clicking on info panel - if (event.target.closest('#info-panel')) return; - Game.onViewportClick(event); - }); + updateStatsDisplay() { + if (!this.statsPanel) return; + + let statsHTML = ` +

📊 Statistics

+

Total Tracks: ${this.stats.totalTracks}

+ `; + + if (this.stats.trackCounts && Object.keys(this.stats.trackCounts).length > 0) { + statsHTML += ` +

Track Types:

+ `; } - console.log('[Game] Game instance created and ready'); + this.statsPanel.innerHTML = statsHTML; + } + + /** + * Update train status display in UI + */ + updateTrainStatus() { + if (!this.trainControls.statusDiv || !this.train) return; + + const status = this.train.isMoving ? '🚂 Moving' : '🛑 Stopped'; + const direction = this.train.direction > 0 ? '➡ī¸ Forward' : 'âŦ…ī¸ Reverse'; + + this.trainControls.statusDiv.innerHTML = ` +

Status: ${status}

+

Direction: ${direction}

+

Speed: ${Math.abs(this.train.speed).toFixed(1)} units/s

+ `; + } + + /** + * Handle window resize + */ + onWindowResize() { + this.renderer.onWindowResize(); + } + + /** + * Update game state based on input + * @param {number} deltaTime - Time delta in seconds + */ + update(deltaTime) { + // Update train controls based on keyboard + if (this.train) { + // Keyboard controls with smoothing + if (this.keysPressed['KeyW'] || this.keysPressed['ArrowUp']) { + this.accelerate(); + } + if (this.keysPressed['KeyS'] || this.keysPressed['ArrowDown']) { + this.brake(); + } + if (this.keysPressed['KeyR'] || this.keysPressed['KeyD']) { + this.reverse(); + } + + // Update train physics + this.train.update(deltaTime); + this.updateTrainStatus(); + + // Update train controller if we have a track path + if (this.trainController.trackPath.length > 0) { + this.trainController.update(deltaTime, this.train.speed); + + // Get current position and update train mesh + const currentPosition = this.trainController.getCurrentPosition(); + const rotation = this.getTrainRotation(); + this.trainRenderer.updateTrain('main-train', currentPosition, rotation); + } + } + + // Update controller + this.controls.update(); + } + + /** + * Calculate train rotation based on track direction + * @returns {number} Rotation angle in radians + */ + getTrainRotation() { + let rotation = 0; + + if (this.trainController && this.trainController.trackPath.length >= 2) { + const totalLength = this.trainController.totalPathLength; + const targetDistance = this.trainController.distance; + + let distance = 0; + for (let i = 0; i < this.trainController.trackPath.length - 1; i++) { + const p1 = this.trainController.trackPath[i]; + const p2 = this.trainController.trackPath[i + 1]; + const dist = this._distanceBetween(p1, p2); + + if (targetDistance >= distance && targetDistance <= distance + dist) { + const x1 = p1.x, y1 = p1.y; + const x2 = p2.x, y2 = p2.y; + rotation = Math.atan2(y2 - y1, x2 - x1); + // Adjust for train direction + if (this.train && this.train.direction < 0) { + rotation += Math.PI; + } + break; + } + distance += dist; + } + } + + return rotation; + } + + /** + * Calculate distance between two points + * @param {Object} p1 - First point {x, y, z} + * @param {Object} p2 - Second point {x, y, z} + * @returns {number} Distance + * @private + */ + _distanceBetween(p1, p2) { + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + const dz = p2.z - p1.z; + return Math.sqrt(dx * dx + dy * dy + dz * dz); + } + + /** + * Animation loop - main game loop + */ + animate() { + requestAnimationFrame(() => this.animate()); + + const now = Date.now(); + const deltaTime = (now - this.lastTime) / 1000; + this.lastTime = now; + + this.update(deltaTime); + this.renderer.render(); + } + + /** + * Set track path for train + * @param {Array} path - Array of {x, y, z} points + */ + setTrainPath(path) { + this.trainController.setTrackPath(path); + } + + /** + * Dispose game resources + */ + dispose() { + this.trainRenderer.dispose(); + this.world.dispose(); + this.renderer.dispose(); + window.removeEventListener('resize', this.onWindowResize); } } - -// Global game instance -Game.instance = null; - -// Initialize game when DOM is ready -document.addEventListener('DOMContentLoaded', () => { - Game.initGame(); -}); - -// Export for module usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = Game; -} diff --git a/js/train.js b/js/train.js new file mode 100644 index 0000000..24cd791 --- /dev/null +++ b/js/train.js @@ -0,0 +1,225 @@ +/** + * Train Module + * Handles train model and controller for driving along tracks + * Works in browser environment with Three.js global + * @module train + */ + +/** + * Train class - represents a train that can move along tracks + */ +class Train { + /** + * Create a train instance + * @param {Object} options - Train configuration options + * @param {string} options.id - Unique identifier for the train + * @param {number} options.speed - Initial speed + * @param {number} options.maxSpeed - Maximum speed + * @param {number} options.direction - Direction (1 or -1) + * @param {number} options.length - Train length for display + * @param {string} options.color - Train body color + */ + constructor(options = {}) { + this.id = options.id || `train-${Date.now()}`; + this.speed = options.speed || 0; + this.maxSpeed = options.maxSpeed || 5; + this.acceleration = options.acceleration || 0.5; + this.brakeDeceleration = options.brakeDeceleration || 0.3; + this.direction = options.direction || 1; + this.length = options.length || 3; + + this.isMoving = false; + this.threeMesh = null; + this.color = options.color || '#FF6B00'; + } + + /** + * Accelerate the train + */ + accelerate() { + this.speed = Math.min(this.speed + this.acceleration * this.direction, this.maxSpeed * this.direction); + this.isMoving = this.speed !== 0; + } + + /** + * Brake the train + */ + brake() { + const brakeAmount = this.brakeDeceleration * this.direction; + const newSpeed = this.speed - brakeAmount; + + if (Math.abs(newSpeed) < Math.abs(this.brakeDeceleration)) { + this.speed = 0; + this.isMoving = false; + } else { + this.speed = newSpeed; + } + } + + /** + * Reverse direction + */ + reverse() { + this.direction *= -1; + } + + /** + * Stop the train + */ + stop() { + this.speed = 0; + this.isMoving = false; + } + + /** + * Update train physics based on speed + * @param {number} deltaTime - Time delta in seconds + */ + update(deltaTime) { + if (this.isMoving) { + this.speed = this.speed > 0 ? Math.max(this.speed - 0.1 * this.direction, 0) : Math.min(this.speed + 0.1 * this.direction, 0); + this.isMoving = this.speed !== 0; + } + } + + /** + * Get train velocity + * @returns {number} Train velocity + */ + getVelocity() { + return this.speed; + } +} + +/** + * TrainController class - manages train position along track path + */ +class TrainController { + /** + * Create a train controller + * @param {Array} trackPath - Array of {x, y, z} points defining the track path + */ + constructor(trackPath = []) { + this.trackPath = trackPath || []; + this.progress = 0; // 0.0 to 1.0 along the path + this.distance = 0; // Distance traveled along path + this.currentPosition = { x: 0, y: 0, z: 0 }; + this.totalPathLength = this._calculatePathLength(); + } + + /** + * Calculate total path length + * @returns {number} Total length of the track path + * @private + */ + _calculatePathLength() { + if (this.trackPath.length < 2) return 0; + + let totalLength = 0; + for (let i = 1; i < this.trackPath.length; i++) { + const p1 = this.trackPath[i - 1]; + const p2 = this.trackPath[i]; + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + const dz = p2.z - p1.z; + totalLength += Math.sqrt(dx * dx + dy * dy + dz * dz); + } + return totalLength; + } + + /** + * Set distance traveled along the path + * @param {number} distance - Distance to set + */ + setDistance(distance) { + this.distance = Math.max(0, Math.min(distance, this.totalPathLength)); + this.progress = this.totalPathLength > 0 ? this.distance / this.totalPathLength : 0; + this.updateCurrentPosition(); + } + + /** + * Get current position on the track path + * @returns {Object} Position {x, y, z} + */ + getCurrentPosition() { + return this.currentPosition; + } + + /** + * Update current position based on progress + * @private + */ + updateCurrentPosition() { + if (this.trackPath.length < 2) { + this.currentPosition = this.trackPath[0] || { x: 0, y: 0, z: 0 }; + return; + } + + const totalLength = this.totalPathLength; + const targetDistance = this.progress * totalLength; + + let distance = 0; + for (let i = 0; i < this.trackPath.length - 1; i++) { + const p1 = this.trackPath[i]; + const p2 = this.trackPath[i + 1]; + const p1Length = distance; + const p2Length = distance + this._distanceBetween(p1, p2); + + if (targetDistance >= p1Length && targetDistance <= p2Length) { + const segmentProgress = (targetDistance - p1Length) / (p2Length - p1Length); + this.currentPosition = { + x: p1.x + (p2.x - p1.x) * segmentProgress, + y: p1.y + (p2.y - p1.y) * segmentProgress, + z: p1.z + (p2.z - p1.z) * segmentProgress + }; + return; + } + distance += this._distanceBetween(p1, p2); + } + + // End of path + this.currentPosition = this.trackPath[this.trackPath.length - 1]; + } + + /** + * Calculate distance between two points + * @param {Object} p1 - First point {x, y, z} + * @param {Object} p2 - Second point {x, y, z} + * @returns {number} Distance + * @private + */ + _distanceBetween(p1, p2) { + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + const dz = p2.z - p1.z; + return Math.sqrt(dx * dx + dy * dy + dz * dz); + } + + /** + * Update controller based on train speed + * @param {number} deltaTime - Time delta in seconds + * @param {number} speed - Train speed + */ + update(deltaTime, speed) { + const distanceDelta = speed * deltaTime; + this.setDistance(this.distance + distanceDelta); + } + + /** + * Set track path + * @param {Array} path - Array of {x, y, z} points + */ + setTrackPath(path) { + this.trackPath = path; + this.totalPathLength = this._calculatePathLength(); + this.progress = 0; + this.distance = 0; + this.updateCurrentPosition(); + } +} + +// Export for browser global scope +if (typeof window !== 'undefined') { + window.Train = Train; + window.TrainController = TrainController; +} diff --git a/js/trainRenderer.js b/js/trainRenderer.js new file mode 100644 index 0000000..520d99b --- /dev/null +++ b/js/trainRenderer.js @@ -0,0 +1,232 @@ +/** + * Train Renderer + * Handles Three.js visualization of train models + * Works in browser environment with Three.js global + * @module trainRenderer + */ + +/** + * TrainRenderer class - manages 3D train visualization + */ +class TrainRenderer { + /** + * Create a train renderer + * @param {THREE.Scene} scene - Three.js scene + * @param {Object} options - Configuration options + * @param {string} options.color - Train body color hex + */ + constructor(scene, options = {}) { + this.scene = scene; + this.trainMeshes = new Map(); + this.trainController = null; + + // Default train colors + this.colors = { + body: new THREE.Color(options.color || '#FF6B00'), + windows: new THREE.Color('#87CEEB'), + wheels: new THREE.Color('#333333'), + details: new THREE.Color('#FFFFFF') + }; + + this.trains = {}; + } + + /** + * Create a 3D train mesh + * @param {string} trainId - Unique train identifier + * @returns {THREE.Group} Train mesh group + */ + createTrainMesh(trainId) { + const trainGroup = new THREE.Group(); + trainGroup.userData.id = trainId; + + // Train body (main chassis) + const bodyGeometry = new THREE.BoxGeometry(2, 1.2, 4); + const bodyMaterial = new THREE.MeshPhongMaterial({ + color: this.colors.body, + shininess: 50 + }); + const body = new THREE.Mesh(bodyGeometry, bodyMaterial); + body.position.y = 0.6; + trainGroup.add(body); + + // Cab area (front) + const cabGeometry = new THREE.BoxGeometry(1.8, 0.8, 1); + const cabMaterial = new THREE.MeshPhongMaterial({ + color: this.colors.windows, + shininess: 30 + }); + const cab = new THREE.Mesh(cabGeometry, cabMaterial); + cab.position.set(0.9, 1.1, 0); + cab.rotation.y = Math.PI / 4; + trainGroup.add(cab); + + // Wheels (4 visible wheels) + const wheelGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16); + const wheelMaterial = new THREE.MeshPhongMaterial({ + color: this.colors.wheels, + shininess: 20 + }); + + const wheelPositions = [ + { x: 0.3, y: -0.3, z: 1.2, rotZ: Math.PI / 2 }, + { x: 0.3, y: -0.3, z: -1.2, rotZ: Math.PI / 2 }, + { x: -0.3, y: -0.3, z: 1.2, rotZ: Math.PI / 2 }, + { x: -0.3, y: -0.3, z: -1.2, rotZ: Math.PI / 2 } + ]; + + wheelPositions.forEach(pos => { + const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial); + wheel.position.set(pos.x, pos.y, pos.z); + wheel.rotation.z = pos.rotZ; + trainGroup.add(wheel); + }); + + // Train front marker (red light) + const lightGeometry = new THREE.SphereGeometry(0.15); + const lightMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 }); + const frontLight = new THREE.Mesh(lightGeometry, lightMaterial); + frontLight.position.set(1.01, 1.0, 0); + trainGroup.add(frontLight); + + // Train rear marker (red tail light) + const rearLight = new THREE.Mesh(lightGeometry, lightMaterial); + rearLight.position.set(-1.01, 1.0, 0); + trainGroup.add(rearLight); + + // Add train to scene + this.scene.add(trainGroup); + this.trainMeshes.set(trainId, trainGroup); + + return trainGroup; + } + + /** + * Remove a train from the scene + * @param {string} trainId - Train identifier to remove + */ + removeTrain(trainId) { + const mesh = this.trainMeshes.get(trainId); + if (mesh) { + this.scene.remove(mesh); + mesh.traverse(child => { + if (child.geometry) child.geometry.dispose(); + if (child.material) { + if (Array.isArray(child.material)) { + child.material.forEach(mat => mat.dispose()); + } else { + child.material.dispose(); + } + } + }); + this.trainMeshes.delete(trainId); + delete this.trains[trainId]; + } + } + + /** + * Update train mesh position and rotation based on train state + * @param {string} trainId - Train identifier + * @param {Object} position - Position {x, y, z} + * @param {number} rotation - Rotation angle in radians + */ + updateTrain(trainId, position, rotation) { + const mesh = this.trainMeshes.get(trainId); + if (mesh) { + mesh.position.set(position.x, position.y, position.z); + mesh.rotation.y = rotation; + } + } + + /** + * Update all train meshes based on train controller progress + * @param {number} deltaTime - Time delta in seconds + * @param {number} speed - Train speed + */ + updateAll(deltaTime, speed) { + const progress = this.trainController ? this.trainController.progress : 0; + const currentPos = this.trainController ? this.trainController.currentPosition : { x: 0, y: 0, z: 0 }; + + // Calculate orientation based on direction + let rotation = 0; + if (this.trainController && this.trainController.trackPath.length >= 2) { + const totalLength = this.trainController.totalPathLength; + const targetDistance = progress * totalLength; + + let distance = 0; + for (let i = 0; i < this.trainController.trackPath.length - 1; i++) { + const p1 = this.trainController.trackPath[i]; + const p2 = this.trainController.trackPath[i + 1]; + const dist = this._distanceBetween(p1, p2); + + if (targetDistance >= distance && targetDistance <= distance + dist) { + const segmentProgress = (targetDistance - distance) / dist; + const x1 = p1.x, y1 = p1.y; + const x2 = p2.x, y2 = p2.y; + rotation = Math.atan2(y2 - y1, x2 - x1); + break; + } + distance += dist; + } + } + + // Update mesh positions + this.trainMeshes.forEach((mesh, trainId) => { + this.updateTrain(trainId, currentPos, rotation); + }); + } + + /** + * Calculate distance between two points + * @param {Object} p1 - First point {x, y, z} + * @param {Object} p2 - Second point {x, y, z} + * @returns {number} Distance + * @private + */ + _distanceBetween(p1, p2) { + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + const dz = p2.z - p1.z; + return Math.sqrt(dx * dx + dy * dy + dz * dz); + } + + /** + * Set train controller reference + * @param {TrainController} controller - TrainController instance + */ + setController(controller) { + this.trainController = controller; + } + + /** + * Get all train meshes + * @returns {Map} Map of trainId to mesh + */ + getTrainMeshes() { + return this.trainMeshes; + } + + /** + * Dispose resources + */ + dispose() { + this.trainMeshes.forEach(mesh => { + mesh.traverse(child => { + if (child.geometry) child.geometry.dispose(); + if (child.material) { + if (Array.isArray(child.material)) { + child.material.forEach(mat => mat.dispose()); + } else { + child.material.dispose(); + } + } + }); + }); + this.trainMeshes.clear(); + } +} + +// Export for browser global scope +if (typeof window !== 'undefined') { + window.TrainRenderer = TrainRenderer; +} diff --git a/test/unit/train.test.js b/test/unit/train.test.js new file mode 100644 index 0000000..c837284 --- /dev/null +++ b/test/unit/train.test.js @@ -0,0 +1,84 @@ +const { Train } = require('../js/train.js'); +const { TrainController } = require('../js/trainController.js'); + +describe('Train Module', () => { + describe('Train Class', () => { + test('should create train with default properties', () => { + const train = new Train(); + expect(train.id).toBeDefined(); + expect(train.speed).toBe(0); + expect(train.maxSpeed).toBeGreaterThan(0); + expect(train.position).toBeDefined(); + }); + + test('should initialize with custom properties', () => { + const train = new Train({ id: 'TEST', speed: 10, maxSpeed: 20 }); + expect(train.id).toBe('TEST'); + expect(train.speed).toBe(10); + expect(train.maxSpeed).toBe(20); + }); + + test('should accelerate and brake', () => { + const train = new Train({ speed: 0, maxSpeed: 10 }); + + train.accelerate(); + expect(train.speed).toBeGreaterThan(0); + + train.brake(); + expect(train.speed).toBeLessThan(10); + }); + + test('should not exceed maxSpeed', () => { + const train = new Train({ maxSpeed: 10 }); + + train.speed = 15; + train.accelerate(); + expect(train.speed).toBeLessThanOrEqual(10); + }); + + test('should reverse direction', () => { + const train = new Train({ speed: 10, direction: 1 }); + + train.reverse(); + expect(train.direction).toBe(-1); + }); + }); + + describe('TrainController Class', () => { + test('should create controller with default config', () => { + const controller = new TrainController(); + expect(controller.trackPath).toEqual([]); + expect(controller.progress).toBe(0); + }); + + test('should accept track path configuration', () => { + const path = [ + { x: 0, y: 0 }, + { x: 10, y: 0 }, + { x: 10, y: 10 } + ]; + + const controller = new TrainController(path); + expect(controller.trackPath.length).toBe(3); + }); + + test('should calculate progress along track', () => { + const path = [{ x: 0, y: 0 }, { x: 10, y: 0 }]; + const controller = new TrainController(path); + + controller.setDistance(5); + expect(controller.progress).toBeGreaterThanOrEqual(0); + expect(controller.progress).toBeLessThan(1); + }); + + test('should return current position on track', () => { + const path = [{ x: 0, y: 0 }, { x: 10, y: 0 }]; + const controller = new TrainController(path); + + const position = controller.getCurrentPosition(); + expect(position).toBeDefined(); + expect(position.x).toBeGreaterThanOrEqual(0); + expect(position.x).toBeLessThanOrEqual(10); + }); + }); +});