Spaces:

awacke1
/

SailingSimulator

Running

App Files Files Community

awacke1 commited on 6 days ago

Commit

09eca26

verified ·

1 Parent(s): 6e7a654

Update index.html

Browse files

Files changed (1) hide show

index.html +503 -205

index.html CHANGED Viewed

@@ -121,7 +121,7 @@
             border: 2px solid #8B4513;
         }
-        .sailing-controls {
             position: absolute;
             bottom: 140px;
             left: 20px;
@@ -142,10 +142,24 @@
             padding: 10px;
             border-radius: 50%;
             border: 2px solid #87CEEB;
-            width: 60px;
-            height: 60px;
             text-align: center;
-            font-size: 24px;
         }
         .health-bar {
@@ -192,17 +206,99 @@
             font-size: 16px;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="ui-container">
         <div class="controls ui-panel">
-            <h3>🏴‍☠️ Captain's Orders</h3>
-            <p>⚓ WASD: Sail your ship</p>
-            <p>🌊 Space: Adjust sails</p>
             <p>🎯 Click: Place towers</p>
-            <p>🔄 R: Rotate ship</p>
-            <p>⚡ Tab: Quick towers</p>
         </div>
         <div class="resource-panel ui-panel">
@@ -211,10 +307,26 @@
             <p>🏴‍☠️ Lives: <span id="lives">3</span></p>
             <p>⚔️ Wave: <span id="wave">1</span></p>
             <p>🎯 Score: <span id="score">0</span></p>
         </div>
         <div class="wind-indicator ui-panel">
-            <div id="wind-arrow">💨</div>
         </div>
         <div class="tower-shop ui-panel">
@@ -232,11 +344,11 @@
             </button>
         </div>
-        <div class="sailing-controls ui-panel">
-            <h4>⛵ Sailing</h4>
-            <p>Wind Speed: <span id="wind-speed">5</span> kts</p>
             <p>Ship Speed: <span id="ship-speed">0</span> kts</p>
-            <p>Heading: <span id="heading">N</span></p>
         </div>
         <div class="wave-info ui-panel">
@@ -246,6 +358,15 @@
             <button id="start-wave" class="tower-button">Start Wave</button>
         </div>
         <div class="health-bar ui-panel">
             <div class="health-fill" id="health-fill" style="width: 100%"></div>
         </div>
@@ -274,7 +395,70 @@
             projectiles: [],
             particles: [],
             windDirection: 0,
-            windSpeed: 5
         };
         // Scene setup
@@ -287,14 +471,13 @@
         document.body.appendChild(renderer.domElement);
         // Camera controls
-        let cameraOffset = new THREE.Vector3(0, 15, 20);
         // Player ship
         let playerShip;
         let shipRotation = 0;
-        let shipSpeed = 0;
-        let sailsOut = 0.5;
         const keys = {};
         // Atmospheric fog
         scene.fog = new THREE.Fog(0x2d1810, 50, 1000);
@@ -340,22 +523,33 @@
         const lakeGeometry = new THREE.PlaneGeometry(2000, 2000, 200, 200);
         const lakeMaterial = new THREE.ShaderMaterial({
             uniforms: {
-                time: { value: 0 }
             },
             vertexShader: `
                 uniform float time;
                 varying vec2 vUv;
                 varying vec3 vPosition;
                 void main() {
                     vUv = uv;
                     vec3 pos = position;
-                    // Multiple wave patterns for realistic lake movement
                     float wave1 = sin(pos.x * 0.02 + time * 0.5) * 0.2;
                     float wave2 = sin(pos.y * 0.015 + time * 0.7) * 0.15;
                     float wave3 = sin((pos.x + pos.y) * 0.01 + time * 0.3) * 0.25;
-                    pos.z = wave1 + wave2 + wave3;
                     vPosition = pos;
                     gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
@@ -363,17 +557,26 @@
             `,
             fragmentShader: `
                 uniform float time;
                 varying vec2 vUv;
                 varying vec3 vPosition;
                 void main() {
                     vec3 deepWater = vec3(0.1, 0.3, 0.5);
                     vec3 shallowWater = vec3(0.3, 0.5, 0.7);
                     float wave = sin(vPosition.x * 0.1 + time) * sin(vPosition.y * 0.08 + time);
-                    vec3 waterColor = mix(deepWater, shallowWater, wave * 0.5 + 0.5);
-                    gl_FragColor = vec4(waterColor, 0.8);
                 }
             `,
             transparent: true
@@ -382,37 +585,78 @@
         const lake = new THREE.Mesh(lakeGeometry, lakeMaterial);
         scene.add(lake);
-        // Create multiple lake sections representing different areas of Minnetonka
-        function createLakeSection(x, z, size, name) {
-            const sectionGeometry = new THREE.RingGeometry(size * 0.8, size, 32);
             const sectionMaterial = new THREE.MeshBasicMaterial({
-                color: 0x87CEEB,
                 transparent: true,
-                opacity: 0.1,
                 side: THREE.DoubleSide
             });
             const section = new THREE.Mesh(sectionGeometry, sectionMaterial);
             section.rotation.x = -Math.PI / 2;
-            section.position.set(x, 0.1, z);
-            section.userData = { name: name };
             scene.add(section);
-        }
-        // Create the different bays of Lake Minnetonka
-        createLakeSection(0, 0, 50, "Upper Lake");
-        createLakeSection(-80, -60, 40, "Wayzata Bay");
-        createLakeSection(70, -50, 35, "Crystal Bay");
-        createLakeSection(-50, 80, 30, "Carmans Bay");
-        createLakeSection(60, 70, 32, "Smithtown Bay");
         // Create islands and shoreline features
-        function createIsland(x, z, size) {
             const islandGeometry = new THREE.CylinderGeometry(size, size * 1.2, 2, 16);
             const islandMaterial = new THREE.MeshLambertMaterial({ color: 0x4d5d3d });
             const island = new THREE.Mesh(islandGeometry, islandMaterial);
             island.position.set(x, 0, z);
             island.castShadow = true;
-            island.userData = { type: 'buildable' };
             scene.add(island);
             // Add some trees
@@ -431,15 +675,35 @@
             return island;
         }
-        // Create strategic islands for tower placement
         const islands = [
-            createIsland(-20, -30, 8),
-            createIsland(30, -20, 6),
-            createIsland(-40, 20, 7),
-            createIsland(25, 35, 5),
-            createIsland(0, -50, 9),
-            createIsland(-60, -10, 6),
-            createIsland(45, 10, 7)
         ];
         // Create player ship
@@ -447,21 +711,28 @@
             const shipGroup = new THREE.Group();
             // Hull
-            const hullGeometry = new THREE.BoxGeometry(2, 0.5, 6);
             const hullMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
             const hull = new THREE.Mesh(hullGeometry, hullMaterial);
-            hull.position.y = 0.25;
             shipGroup.add(hull);
             // Mast
-            const mastGeometry = new THREE.CylinderGeometry(0.1, 0.1, 8);
             const mastMaterial = new THREE.MeshLambertMaterial({ color: 0x654321 });
             const mast = new THREE.Mesh(mastGeometry, mastMaterial);
-            mast.position.y = 4;
             shipGroup.add(mast);
-            // Sail
-            const sailGeometry = new THREE.PlaneGeometry(3, 5);
             const sailMaterial = new THREE.MeshLambertMaterial({
                 color: 0xffffff,
                 transparent: true,
@@ -469,10 +740,18 @@
                 side: THREE.DoubleSide
             });
             const sail = new THREE.Mesh(sailGeometry, sailMaterial);
-            sail.position.set(1.5, 4, 0);
             sail.userData = { type: 'sail' };
             shipGroup.add(sail);
             shipGroup.position.set(0, 1, 0);
             return shipGroup;
         }
@@ -480,18 +759,16 @@
         playerShip = createPlayerShip();
         scene.add(playerShip);
-        // Enemy ship creation
         function createEnemyShip() {
             const shipGroup = new THREE.Group();
-            // Hull (smaller and darker)
             const hullGeometry = new THREE.BoxGeometry(1.5, 0.4, 4);
             const hullMaterial = new THREE.MeshLambertMaterial({ color: 0x2c1810 });
             const hull = new THREE.Mesh(hullGeometry, hullMaterial);
             hull.position.y = 0.2;
             shipGroup.add(hull);
-            // Pirate flag
             const flagGeometry = new THREE.PlaneGeometry(1, 1);
             const flagMaterial = new THREE.MeshLambertMaterial({
                 color: 0x000000,
@@ -505,17 +782,15 @@
             return shipGroup;
         }
-        // Tower creation functions
         function createCannonTower(position) {
             const towerGroup = new THREE.Group();
-            // Base
             const baseGeometry = new THREE.CylinderGeometry(1.5, 2, 2);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x654321 });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
-            // Cannon
             const cannonGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2);
             const cannonMaterial = new THREE.MeshLambertMaterial({ color: 0x2c2c2c });
             const cannon = new THREE.Mesh(cannonGeometry, cannonMaterial);
@@ -539,13 +814,11 @@
         function createHarpoonTower(position) {
             const towerGroup = new THREE.Group();
-            // Base
             const baseGeometry = new THREE.BoxGeometry(2, 1, 2);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x8B7355 });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
-            // Harpoon launcher
             const launcherGeometry = new THREE.BoxGeometry(0.5, 0.5, 3);
             const launcherMaterial = new THREE.MeshLambertMaterial({ color: 0x2c2c2c });
             const launcher = new THREE.Mesh(launcherGeometry, launcherMaterial);
@@ -568,13 +841,11 @@
         function createNetTower(position) {
             const towerGroup = new THREE.Group();
-            // Base
             const baseGeometry = new THREE.CylinderGeometry(1, 1.5, 1.5);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x4d5d3d });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
-            // Net mechanism
             const netGeometry = new THREE.TorusGeometry(1, 0.1, 8, 16);
             const netMaterial = new THREE.MeshLambertMaterial({ color: 0x8B8B00 });
             const net = new THREE.Mesh(netGeometry, netMaterial);
@@ -598,21 +869,18 @@
         function createLighthouseTower(position) {
             const towerGroup = new THREE.Group();
-            // Base
             const baseGeometry = new THREE.CylinderGeometry(1.5, 2, 8);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             base.position.y = 4;
             towerGroup.add(base);
-            // Light
             const lightGeometry = new THREE.SphereGeometry(0.5);
             const lightMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
             const light = new THREE.Mesh(lightGeometry, lightMaterial);
             light.position.y = 8.5;
             towerGroup.add(light);
-            // Area light effect
             const areaLight = new THREE.PointLight(0xFFFF00, 1, 60);
             areaLight.position.y = 8.5;
             towerGroup.add(areaLight);
@@ -631,7 +899,169 @@
             return towerGroup;
         }
-        // Projectile creation
         function createProjectile(start, target, type) {
             let projectileGeometry, projectileMaterial;
@@ -675,7 +1105,6 @@
             return projectile;
         }
-        // Enemy spawning
         function spawnEnemyWave() {
             const waveSize = gameState.wave * 3 + 2;
             const spawnPoints = [
@@ -710,14 +1139,12 @@
             }
         }
-        // Combat system
         function updateTowers() {
             const currentTime = Date.now();
             gameState.towers.forEach(tower => {
                 if (currentTime - tower.userData.lastFire < tower.userData.fireRate) return;
-                // Find nearest enemy in range
                 let nearestEnemy = null;
                 let nearestDistance = Infinity;
@@ -732,7 +1159,6 @@
                 if (nearestEnemy) {
                     tower.userData.lastFire = currentTime;
-                    // Create projectile
                     const projectileType = {
                         'cannon': 'cannonball',
                         'harpoon': 'harpoon',
@@ -747,7 +1173,6 @@
                     gameState.projectiles.push(projectile);
                     scene.add(projectile);
-                    // Point tower at target
                     tower.lookAt(nearestEnemy.position);
                 }
             });
@@ -763,14 +1188,11 @@
                     return;
                 }
-                // Move projectile
                 const movement = projectile.userData.direction.clone().multiplyScalar(projectile.userData.speed);
                 projectile.position.add(movement);
-                // Check collision with enemies
                 gameState.enemies.forEach((enemy, enemyIndex) => {
                     if (projectile.position.distanceTo(enemy.position) < 2) {
-                        // Hit!
                         const tower = gameState.towers.find(t =>
                             t.userData.type === projectile.userData.type.replace('ball', '').replace('lighthouse', 'lighthouse')
                         );
@@ -778,13 +1200,11 @@
                         if (tower) {
                             enemy.userData.health -= tower.userData.damage;
-                            // Special effects
                             if (tower.userData.type === 'net') {
                                 enemy.userData.slowFactor = tower.userData.slow;
                                 enemy.userData.slowTime = 3000;
                             }
-                            // Create hit particle effect
                             createHitEffect(enemy.position);
                         }
@@ -797,7 +1217,6 @@
         function updateEnemies() {
             gameState.enemies.forEach((enemy, index) => {
-                // Remove dead enemies
                 if (enemy.userData.health <= 0) {
                     gameState.gold += enemy.userData.value;
                     gameState.score += enemy.userData.value;
@@ -806,7 +1225,6 @@
                     return;
                 }
-                // Update slow effect
                 if (enemy.userData.slowTime > 0) {
                     enemy.userData.slowTime -= 16;
                     if (enemy.userData.slowTime <= 0) {
@@ -814,13 +1232,11 @@
                     }
                 }
-                // Move towards player ship
                 const direction = new THREE.Vector3().subVectors(playerShip.position, enemy.position).normalize();
                 const speed = enemy.userData.speed * enemy.userData.slowFactor;
                 enemy.position.add(direction.multiplyScalar(speed));
                 enemy.lookAt(playerShip.position);
-                // Check if reached player
                 if (enemy.position.distanceTo(playerShip.position) < 3) {
                     gameState.health -= 20;
                     gameState.lives--;
@@ -834,7 +1250,6 @@
             });
         }
-        // Visual effects
         function createHitEffect(position) {
             for (let i = 0; i < 10; i++) {
                 const particleGeometry = new THREE.SphereGeometry(0.1);
@@ -869,84 +1284,11 @@
                 }
                 particle.position.add(particle.userData.velocity);
-                particle.userData.velocity.y -= 0.005; // Gravity
                 particle.material.opacity = particle.userData.life / 60;
             });
         }
-        // Sailing physics
-        function updateShipPhysics() {
-            // Wind effect on sailing
-            const windAngle = gameState.windDirection;
-            const windEffect = Math.cos(shipRotation - windAngle) * gameState.windSpeed * sailsOut;
-            // Calculate ship speed based on wind
-            shipSpeed = Math.max(0, windEffect * 0.1);
-            // Move ship
-            const movement = new THREE.Vector3(
-                Math.sin(shipRotation) * shipSpeed,
-                0,
-                Math.cos(shipRotation) * shipSpeed
-            );
-            playerShip.position.add(movement);
-            // Constrain to lake bounds
-            playerShip.position.x = Math.max(-90, Math.min(90, playerShip.position.x));
-            playerShip.position.z = Math.max(-90, Math.min(90, playerShip.position.z));
-            // Update sail animation based on wind
-            const sail = playerShip.children.find(child => child.userData.type === 'sail');
-            if (sail) {
-                sail.rotation.y = Math.sin(Date.now() * 0.003) * 0.1 * sailsOut;
-            }
-        }
-        // Input handling
-        document.addEventListener('keydown', (event) => {
-            keys[event.code] = true;
-            if (event.code === 'Space') {
-                event.preventDefault();
-                sailsOut = sailsOut === 1 ? 0.3 : 1;
-            }
-            if (event.code === 'KeyR') {
-                shipRotation += Math.PI / 4;
-            }
-            // Quick tower selection
-            if (event.code === 'Tab') {
-                event.preventDefault();
-                cycleTowerSelection();
-            }
-        });
-        document.addEventListener('keyup', (event) => {
-            keys[event.code] = false;
-        });
-        // Ship movement
-        function updateShipMovement() {
-            const turnSpeed = 0.05;
-            const acceleration = 0.01;
-            if (keys['KeyA']) shipRotation -= turnSpeed;
-            if (keys['KeyD']) shipRotation += turnSpeed;
-            if (keys['KeyW']) sailsOut = Math.min(1, sailsOut + acceleration);
-            if (keys['KeyS']) sailsOut = Math.max(0, sailsOut - acceleration);
-            playerShip.rotation.y = shipRotation;
-        }
-        // Camera following
-        function updateCamera() {
-            const targetPosition = playerShip.position.clone().add(cameraOffset);
-            camera.position.lerp(targetPosition, 0.05);
-            camera.lookAt(playerShip.position);
-        }
         // Tower placement
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
@@ -1016,7 +1358,6 @@
             }
         });
-        // Game management
         function startWave() {
             gameState.waveActive = true;
             spawnEnemyWave();
@@ -1033,33 +1374,6 @@
             }
         }
-        function updateUI() {
-            document.getElementById('gold').textContent = gameState.gold;
-            document.getElementById('lives').textContent = gameState.lives;
-            document.getElementById('wave').textContent = gameState.wave;
-            document.getElementById('score').textContent = gameState.score;
-            document.getElementById('enemies-left').textContent = gameState.enemies.length;
-            document.getElementById('health-fill').style.width = `${gameState.health}%`;
-            document.getElementById('wind-speed').textContent = gameState.windSpeed;
-            document.getElementById('ship-speed').textContent = shipSpeed.toFixed(1);
-            const headings = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
-            const headingIndex = Math.round((shipRotation + Math.PI) / (Math.PI / 4)) % 8;
-            document.getElementById('heading').textContent = headings[headingIndex];
-            // Update wind indicator
-            const windArrow = document.getElementById('wind-arrow');
-            windArrow.style.transform = `rotate(${gameState.windDirection * 180 / Math.PI}deg)`;
-            // Update tower button states
-            document.querySelectorAll('.tower-button').forEach(button => {
-                if (button.dataset.cost) {
-                    const cost = parseInt(button.dataset.cost);
-                    button.classList.toggle('disabled', gameState.gold < cost);
-                }
-            });
-        }
         function cycleTowerSelection() {
             const towers = ['cannon', 'harpoon', 'net', 'lighthouse'];
             const currentIndex = towers.indexOf(gameState.selectedTower);
@@ -1078,7 +1392,6 @@
         }
         function restartGame() {
-            // Reset game state
             gameState = {
                 gold: 500,
                 lives: 3,
@@ -1093,18 +1406,16 @@
                 projectiles: [],
                 particles: [],
                 windDirection: 0,
-                windSpeed: 5
             };
-            // Clear scene
             [...gameState.enemies, ...gameState.towers, ...gameState.projectiles, ...gameState.particles]
                 .forEach(obj => scene.remove(obj));
-            // Reset ship position
             playerShip.position.set(0, 1, 0);
             shipRotation = 0;
-            shipSpeed = 0;
-            sailsOut = 0.5;
             document.getElementById('game-over').style.display = 'none';
             document.getElementById('start-wave').style.display = 'block';
@@ -1112,15 +1423,6 @@
             updateUI();
         }
-        // Environmental effects
-        function updateEnvironment() {
-            // Change wind periodically
-            if (Math.random() < 0.001) {
-                gameState.windDirection += (Math.random() - 0.5) * 0.5;
-                gameState.windSpeed = 3 + Math.random() * 7;
-            }
-        }
         // Lighting
         const ambientLight = new THREE.AmbientLight(0x404070, 0.4);
         scene.add(ambientLight);
@@ -1140,7 +1442,6 @@
             if (gameState.gameRunning) {
                 updateShipMovement();
-                updateShipPhysics();
                 updateCamera();
                 updateTowers();
                 updateProjectiles();
@@ -1151,21 +1452,18 @@
                 updateUI();
             }
-            // Update water animation
             lakeMaterial.uniforms.time.value = time;
             skyMaterial.uniforms.time.value = time;
             renderer.render(scene, camera);
         }
-        // Window resize handler
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
-        // Initialize
         updateUI();
         animate();
     </script>

             border: 2px solid #8B4513;
         }
+        .environment-info {
             position: absolute;
             bottom: 140px;
             left: 20px;
             padding: 10px;
             border-radius: 50%;
             border: 2px solid #87CEEB;
+            width: 80px;
+            height: 80px;
             text-align: center;
+            font-size: 16px;
+        }
+        .area-indicator {
+            position: absolute;
+            top: 120px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #d4af37;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 10px;
+            border-radius: 10px;
+            border: 2px solid #8B4513;
+            text-align: center;
+            min-width: 150px;
         }
         .health-bar {
             font-size: 16px;
             margin-top: 20px;
         }
+        .cargo-panel {
+            position: absolute;
+            top: 180px;
+            right: 20px;
+            color: #d4af37;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #8B4513;
+            min-width: 200px;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .cargo-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 5px 0;
+            padding: 5px;
+            background: rgba(139, 69, 19, 0.3);
+            border-radius: 5px;
+            font-size: 14px;
+        }
+        .cargo-emoji {
+            font-size: 18px;
+            margin-right: 8px;
+        }
+        .island-trade-panel {
+            position: absolute;
+            bottom: 180px;
+            right: 20px;
+            color: #d4af37;
+            background: rgba(0, 0, 0, 0.9);
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #FFD700;
+            min-width: 250px;
+            display: none;
+        }
+        .trade-button {
+            background: rgba(0, 128, 0, 0.8);
+            border: 2px solid #32CD32;
+            color: #d4af37;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-family: Georgia, serif;
+            font-size: 12px;
+            margin: 2px;
+        }
+        .trade-button:hover {
+            background: rgba(0, 200, 0, 0.8);
+        }
+        .trade-button.buy {
+            background: rgba(0, 0, 128, 0.8);
+            border-color: #4169E1;
+        }
+        .trade-button.buy:hover {
+            background: rgba(0, 0, 200, 0.8);
+        }
+        .island-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #FFD700;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 10px 20px;
+            border-radius: 10px;
+            border: 2px solid #FFD700;
+            font-size: 18px;
+            display: none;
+            z-index: 200;
+        }
     </style>
 </head>
 <body>
     <div class="ui-container">
         <div class="controls ui-panel">
+            <h3>⛵ Ship Controls</h3>
+            <p>🎮 WASD: Direct ship movement</p>
             <p>🎯 Click: Place towers</p>
+            <p>⚡ Tab: Cycle towers</p>
+            <p>🔄 Shift: Boost speed</p>
         </div>
         <div class="resource-panel ui-panel">
             <p>🏴‍☠️ Lives: <span id="lives">3</span></p>
             <p>⚔️ Wave: <span id="wave">1</span></p>
             <p>🎯 Score: <span id="score">0</span></p>
+            <p>📦 Cargo: <span id="cargo-count">0</span>/<span id="cargo-capacity">6</span></p>
+        </div>
+        <div class="cargo-panel ui-panel">
+            <h3>📦 Cargo Hold</h3>
+            <div id="cargo-list">
+                <p style="font-style: italic; color: #888;">Empty hold</p>
+            </div>
         </div>
         <div class="wind-indicator ui-panel">
+            <div id="wind-arrow" style="font-size: 24px;">💨</div>
+            <div style="font-size: 12px; margin-top: 5px;">
+                <span id="wind-speed">5</span> kts
+            </div>
+        </div>
+        <div class="area-indicator ui-panel">
+            <h4 id="current-area">Upper Lake</h4>
+            <p id="area-effect">Calm Waters</p>
         </div>
         <div class="tower-shop ui-panel">
             </button>
         </div>
+        <div class="environment-info ui-panel">
+            <h4>🌊 Environment</h4>
             <p>Ship Speed: <span id="ship-speed">0</span> kts</p>
+            <p>Tide: <span id="tide-info">Normal</span></p>
+            <p>Wind Effect: <span id="wind-effect">+0%</span></p>
         </div>
         <div class="wave-info ui-panel">
             <button id="start-wave" class="tower-button">Start Wave</button>
         </div>
+        <div class="island-trade-panel ui-panel" id="trade-panel">
+            <h3>🏝️ Island Trading Post</h3>
+            <div id="trade-content"></div>
+        </div>
+        <div class="island-indicator ui-panel" id="island-indicator">
+            ⚓ Press E to Trade ⚓
+        </div>
         <div class="health-bar ui-panel">
             <div class="health-fill" id="health-fill" style="width: 100%"></div>
         </div>
             projectiles: [],
             particles: [],
             windDirection: 0,
+            windSpeed: 5,
+            currentArea: "Upper Lake",
+            shipSpeed: 0,
+            cargo: [],
+            cargoCapacity: 6,
+            nearIsland: null
+        };
+        // Cargo types with their emoji representations and base values
+        const cargoTypes = {
+            fish: { emoji: '🐟', name: 'Fresh Fish', baseValue: 30, rarity: 0.4 },
+            lumber: { emoji: '🪵', name: 'Lumber', baseValue: 25, rarity: 0.3 },
+            grain: { emoji: '🌾', name: 'Grain', baseValue: 20, rarity: 0.5 },
+            gems: { emoji: '💎', name: 'Gems', baseValue: 100, rarity: 0.05 },
+            gold: { emoji: '🪙', name: 'Gold Coins', baseValue: 75, rarity: 0.1 },
+            spices: { emoji: '🌶️', name: 'Spices', baseValue: 50, rarity: 0.15 },
+            pottery: { emoji: '🏺', name: 'Pottery', baseValue: 35, rarity: 0.2 },
+            tools: { emoji: '🔨', name: 'Tools', baseValue: 40, rarity: 0.25 },
+            cloth: { emoji: '🧶', name: 'Fine Cloth', baseValue: 45, rarity: 0.18 },
+            wine: { emoji: '🍷', name: 'Wine', baseValue: 60, rarity: 0.12 }
+        };
+        // Lake areas with different environmental effects
+        const lakeAreas = {
+            "Upper Lake": {
+                center: { x: 0, z: 0 },
+                radius: 50,
+                windMultiplier: 1.0,
+                tideEffect: 0,
+                description: "Calm Waters",
+                color: 0x87CEEB
+            },
+            "Wayzata Bay": {
+                center: { x: -80, z: -60 },
+                radius: 40,
+                windMultiplier: 1.5,
+                tideEffect: 0.2,
+                description: "Strong Winds",
+                color: 0x4682B4
+            },
+            "Crystal Bay": {
+                center: { x: 70, z: -50 },
+                radius: 35,
+                windMultiplier: 0.7,
+                tideEffect: -0.1,
+                description: "Sheltered Cove",
+                color: 0x20B2AA
+            },
+            "Carmans Bay": {
+                center: { x: -50, z: 80 },
+                radius: 30,
+                windMultiplier: 0.8,
+                tideEffect: 0.3,
+                description: "Choppy Waters",
+                color: 0x008B8B
+            },
+            "Smithtown Bay": {
+                center: { x: 60, z: 70 },
+                radius: 32,
+                windMultiplier: 1.3,
+                tideEffect: -0.2,
+                description: "Swift Currents",
+                color: 0x5F9EA0
+            }
         };
         // Scene setup
         document.body.appendChild(renderer.domElement);
         // Camera controls
+        let cameraOffset = new THREE.Vector3(0, 25, 30);
         // Player ship
         let playerShip;
         let shipRotation = 0;
         const keys = {};
+        const baseSpeed = 0.4;
         // Atmospheric fog
         scene.fog = new THREE.Fog(0x2d1810, 50, 1000);
         const lakeGeometry = new THREE.PlaneGeometry(2000, 2000, 200, 200);
         const lakeMaterial = new THREE.ShaderMaterial({
             uniforms: {
+                time: { value: 0 },
+                playerPos: { value: new THREE.Vector2(0, 0) }
             },
             vertexShader: `
                 uniform float time;
+                uniform vec2 playerPos;
                 varying vec2 vUv;
                 varying vec3 vPosition;
+                varying float vDistanceToPlayer;
                 void main() {
                     vUv = uv;
                     vec3 pos = position;
+                    // Distance-based wave intensity
+                    float distToPlayer = length(vec2(pos.x, pos.y) - playerPos);
+                    vDistanceToPlayer = distToPlayer;
+                    // Area-specific wave patterns
                     float wave1 = sin(pos.x * 0.02 + time * 0.5) * 0.2;
                     float wave2 = sin(pos.y * 0.015 + time * 0.7) * 0.15;
                     float wave3 = sin((pos.x + pos.y) * 0.01 + time * 0.3) * 0.25;
+                    // Stronger waves in certain areas
+                    float areaEffect = sin(pos.x * 0.005) * sin(pos.y * 0.004) * 0.1;
+                    pos.z = wave1 + wave2 + wave3 + areaEffect;
                     vPosition = pos;
                     gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
             `,
             fragmentShader: `
                 uniform float time;
+                uniform vec2 playerPos;
                 varying vec2 vUv;
                 varying vec3 vPosition;
+                varying float vDistanceToPlayer;
                 void main() {
                     vec3 deepWater = vec3(0.1, 0.3, 0.5);
                     vec3 shallowWater = vec3(0.3, 0.5, 0.7);
+                    vec3 currentWater = vec3(0.2, 0.6, 0.8);
+                    // Area-based water coloring
+                    float areaBlend = sin(vPosition.x * 0.003 + time * 0.1) * sin(vPosition.y * 0.002 + time * 0.15);
                     float wave = sin(vPosition.x * 0.1 + time) * sin(vPosition.y * 0.08 + time);
+                    vec3 baseColor = mix(deepWater, shallowWater, wave * 0.5 + 0.5);
+                    // Add current effect in certain areas
+                    vec3 finalColor = mix(baseColor, currentWater, areaBlend * 0.3);
+                    gl_FragColor = vec4(finalColor, 0.8);
                 }
             `,
             transparent: true
         const lake = new THREE.Mesh(lakeGeometry, lakeMaterial);
         scene.add(lake);
+        // Create visible lake sections with different colors
+        Object.entries(lakeAreas).forEach(([name, area]) => {
+            const sectionGeometry = new THREE.RingGeometry(area.radius * 0.9, area.radius, 32);
             const sectionMaterial = new THREE.MeshBasicMaterial({
+                color: area.color,
                 transparent: true,
+                opacity: 0.15,
                 side: THREE.DoubleSide
             });
             const section = new THREE.Mesh(sectionGeometry, sectionMaterial);
             section.rotation.x = -Math.PI / 2;
+            section.position.set(area.center.x, 0.1, area.center.z);
+            section.userData = { name: name, area: area };
             scene.add(section);
+        });
         // Create islands and shoreline features
+        function createIsland(x, z, size, name = null) {
             const islandGeometry = new THREE.CylinderGeometry(size, size * 1.2, 2, 16);
             const islandMaterial = new THREE.MeshLambertMaterial({ color: 0x4d5d3d });
             const island = new THREE.Mesh(islandGeometry, islandMaterial);
             island.position.set(x, 0, z);
             island.castShadow = true;
+            // Generate random cargo offerings and demands for this island
+            const availableCargo = [];
+            const demandedCargo = [];
+            Object.keys(cargoTypes).forEach(type => {
+                if (Math.random() < cargoTypes[type].rarity) {
+                    availableCargo.push({
+                        type: type,
+                        quantity: Math.floor(Math.random() * 3) + 1,
+                        price: Math.floor(cargoTypes[type].baseValue * (0.7 + Math.random() * 0.6))
+                    });
+                }
+                if (Math.random() < 0.3) {
+                    demandedCargo.push({
+                        type: type,
+                        quantity: Math.floor(Math.random() * 2) + 1,
+                        price: Math.floor(cargoTypes[type].baseValue * (1.2 + Math.random() * 0.8))
+                    });
+                }
+            });
+            island.userData = {
+                type: 'island',
+                name: name || `Island ${Math.floor(Math.random() * 100)}`,
+                size: size,
+                availableCargo: availableCargo,
+                demandedCargo: demandedCargo,
+                lastRestock: Date.now()
+            };
+            // Add visual cargo indicators on the island
+            availableCargo.forEach((cargo, index) => {
+                const indicatorGeometry = new THREE.PlaneGeometry(1, 1);
+                const indicatorMaterial = new THREE.MeshBasicMaterial({
+                    map: createCargoTexture(cargoTypes[cargo.type].emoji),
+                    transparent: true
+                });
+                const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial);
+                indicator.position.set(
+                    x + (Math.cos(index * Math.PI / 2) * size * 0.7),
+                    3,
+                    z + (Math.sin(index * Math.PI / 2) * size * 0.7)
+                );
+                indicator.rotation.x = -Math.PI / 4;
+                scene.add(indicator);
+            });
             scene.add(island);
             // Add some trees
             return island;
         }
+        // Create emoji texture for cargo indicators
+        function createCargoTexture(emoji) {
+            const canvas = document.createElement('canvas');
+            canvas.width = 64;
+            canvas.height = 64;
+            const context = canvas.getContext('2d');
+            context.font = '48px Arial';
+            context.textAlign = 'center';
+            context.textBaseline = 'middle';
+            context.fillText(emoji, 32, 32);
+            const texture = new THREE.Texture(canvas);
+            texture.needsUpdate = true;
+            return texture;
+        }
+        // Create strategic islands for tower placement and trading
         const islands = [
+            createIsland(-20, -30, 8, "Merchant's Harbor"),
+            createIsland(30, -20, 6, "Fisher's Cove"),
+            createIsland(-40, 20, 7, "Timber Point"),
+            createIsland(25, 35, 5, "Spice Island"),
+            createIsland(0, -50, 9, "Grand Bazaar"),
+            createIsland(-60, -10, 6, "Gold Coast"),
+            createIsland(45, 10, 7, "Pottery Bay"),
+            createIsland(-70, -50, 5, "Tool Town"),
+            createIsland(55, -40, 6, "Wine Harbor"),
+            createIsland(-35, 65, 7, "Gem Isle"),
+            createIsland(40, 60, 6, "Cloth Port")
         ];
         // Create player ship
             const shipGroup = new THREE.Group();
             // Hull
+            const hullGeometry = new THREE.BoxGeometry(2.5, 0.6, 8);
             const hullMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
             const hull = new THREE.Mesh(hullGeometry, hullMaterial);
+            hull.position.y = 0.3;
             shipGroup.add(hull);
+            // Deck
+            const deckGeometry = new THREE.BoxGeometry(2, 0.1, 7);
+            const deckMaterial = new THREE.MeshLambertMaterial({ color: 0xDEB887 });
+            const deck = new THREE.Mesh(deckGeometry, deckMaterial);
+            deck.position.y = 0.65;
+            shipGroup.add(deck);
             // Mast
+            const mastGeometry = new THREE.CylinderGeometry(0.15, 0.15, 10);
             const mastMaterial = new THREE.MeshLambertMaterial({ color: 0x654321 });
             const mast = new THREE.Mesh(mastGeometry, mastMaterial);
+            mast.position.y = 5.6;
             shipGroup.add(mast);
+            // Main sail
+            const sailGeometry = new THREE.PlaneGeometry(4, 6);
             const sailMaterial = new THREE.MeshLambertMaterial({
                 color: 0xffffff,
                 transparent: true,
                 side: THREE.DoubleSide
             });
             const sail = new THREE.Mesh(sailGeometry, sailMaterial);
+            sail.position.set(2, 5, 0);
             sail.userData = { type: 'sail' };
             shipGroup.add(sail);
+            // Bow decoration
+            const bowGeometry = new THREE.ConeGeometry(0.3, 1.5, 8);
+            const bowMaterial = new THREE.MeshLambertMaterial({ color: 0xFFD700 });
+            const bow = new THREE.Mesh(bowGeometry, bowMaterial);
+            bow.rotation.x = Math.PI / 2;
+            bow.position.set(0, 1, 4);
+            shipGroup.add(bow);
             shipGroup.position.set(0, 1, 0);
             return shipGroup;
         }
         playerShip = createPlayerShip();
         scene.add(playerShip);
+        // Enemy ship creation (same as before)
         function createEnemyShip() {
             const shipGroup = new THREE.Group();
             const hullGeometry = new THREE.BoxGeometry(1.5, 0.4, 4);
             const hullMaterial = new THREE.MeshLambertMaterial({ color: 0x2c1810 });
             const hull = new THREE.Mesh(hullGeometry, hullMaterial);
             hull.position.y = 0.2;
             shipGroup.add(hull);
             const flagGeometry = new THREE.PlaneGeometry(1, 1);
             const flagMaterial = new THREE.MeshLambertMaterial({
                 color: 0x000000,
             return shipGroup;
         }
+        // Tower creation functions (same as before but keeping them)
         function createCannonTower(position) {
             const towerGroup = new THREE.Group();
             const baseGeometry = new THREE.CylinderGeometry(1.5, 2, 2);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x654321 });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
             const cannonGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2);
             const cannonMaterial = new THREE.MeshLambertMaterial({ color: 0x2c2c2c });
             const cannon = new THREE.Mesh(cannonGeometry, cannonMaterial);
         function createHarpoonTower(position) {
             const towerGroup = new THREE.Group();
             const baseGeometry = new THREE.BoxGeometry(2, 1, 2);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x8B7355 });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
             const launcherGeometry = new THREE.BoxGeometry(0.5, 0.5, 3);
             const launcherMaterial = new THREE.MeshLambertMaterial({ color: 0x2c2c2c });
             const launcher = new THREE.Mesh(launcherGeometry, launcherMaterial);
         function createNetTower(position) {
             const towerGroup = new THREE.Group();
             const baseGeometry = new THREE.CylinderGeometry(1, 1.5, 1.5);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x4d5d3d });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             towerGroup.add(base);
             const netGeometry = new THREE.TorusGeometry(1, 0.1, 8, 16);
             const netMaterial = new THREE.MeshLambertMaterial({ color: 0x8B8B00 });
             const net = new THREE.Mesh(netGeometry, netMaterial);
         function createLighthouseTower(position) {
             const towerGroup = new THREE.Group();
             const baseGeometry = new THREE.CylinderGeometry(1.5, 2, 8);
             const baseMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
             const base = new THREE.Mesh(baseGeometry, baseMaterial);
             base.position.y = 4;
             towerGroup.add(base);
             const lightGeometry = new THREE.SphereGeometry(0.5);
             const lightMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
             const light = new THREE.Mesh(lightGeometry, lightMaterial);
             light.position.y = 8.5;
             towerGroup.add(light);
             const areaLight = new THREE.PointLight(0xFFFF00, 1, 60);
             areaLight.position.y = 8.5;
             towerGroup.add(areaLight);
             return towerGroup;
         }
+        // Improved ship movement with area effects
+        function updateShipMovement() {
+            const currentArea = getCurrentArea();
+            const areaData = lakeAreas[currentArea];
+            // Base movement speed
+            let moveSpeed = baseSpeed;
+            // Apply area effects
+            if (areaData) {
+                // Wind effect
+                const windEffect = areaData.windMultiplier;
+                moveSpeed *= windEffect;
+                // Tide effect (affects movement in certain directions)
+                const tideBoost = areaData.tideEffect;
+                moveSpeed += tideBoost * 0.2;
+            }
+            // Speed boost with Shift
+            if (keys['ShiftLeft'] || keys['ShiftRight']) {
+                moveSpeed *= 1.5;
+            }
+            // Direct WASD movement
+            let movement = new THREE.Vector3(0, 0, 0);
+            if (keys['KeyW']) movement.z -= moveSpeed;
+            if (keys['KeyS']) movement.z += moveSpeed;
+            if (keys['KeyA']) movement.x -= moveSpeed;
+            if (keys['KeyD']) movement.x += moveSpeed;
+            // Apply movement
+            if (movement.length() > 0) {
+                movement.normalize().multiplyScalar(moveSpeed);
+                playerShip.position.add(movement);
+                // Rotate ship to face movement direction
+                if (movement.length() > 0) {
+                    shipRotation = Math.atan2(movement.x, movement.z);
+                    playerShip.rotation.y = shipRotation;
+                }
+            }
+            // Constrain to lake bounds
+            playerShip.position.x = Math.max(-95, Math.min(95, playerShip.position.x));
+            playerShip.position.z = Math.max(-95, Math.min(95, playerShip.position.z));
+            // Calculate actual speed for display
+            gameState.shipSpeed = movement.length() * 10;
+            // Update water shader with player position
+            lakeMaterial.uniforms.playerPos.value.set(playerShip.position.x, playerShip.position.z);
+        }
+        // Area detection
+        function getCurrentArea() {
+            const playerPos = playerShip.position;
+            for (const [name, area] of Object.entries(lakeAreas)) {
+                const distance = Math.sqrt(
+                    Math.pow(playerPos.x - area.center.x, 2) +
+                    Math.pow(playerPos.z - area.center.z, 2)
+                );
+                if (distance <= area.radius) {
+                    return name;
+                }
+            }
+            return "Open Water";
+        }
+        // Environment updates
+        function updateEnvironment() {
+            const currentArea = getCurrentArea();
+            const areaData = lakeAreas[currentArea] || { windMultiplier: 1, tideEffect: 0, description: "Open Waters" };
+            // Update current area if changed
+            if (gameState.currentArea !== currentArea) {
+                gameState.currentArea = currentArea;
+                // Change wind based on area
+                gameState.windSpeed = 3 + Math.random() * 4 + (areaData.windMultiplier - 1) * 2;
+                gameState.windDirection += (Math.random() - 0.5) * 0.3;
+            }
+            // Random wind changes
+            if (Math.random() < 0.002) {
+                gameState.windDirection += (Math.random() - 0.5) * 0.5;
+                gameState.windSpeed = Math.max(1, Math.min(10, gameState.windSpeed + (Math.random() - 0.5) * 2));
+            }
+            // Update sail animation based on area wind
+            const sail = playerShip.children.find(child => child.userData.type === 'sail');
+            if (sail) {
+                const windIntensity = areaData.windMultiplier;
+                sail.rotation.y = Math.sin(Date.now() * 0.003) * 0.15 * windIntensity;
+                sail.position.x = 2 + Math.sin(Date.now() * 0.002) * 0.2 * windIntensity;
+            }
+        }
+        // Input handling
+        document.addEventListener('keydown', (event) => {
+            keys[event.code] = true;
+            if (event.code === 'Tab') {
+                event.preventDefault();
+                cycleTowerSelection();
+            }
+        });
+        document.addEventListener('keyup', (event) => {
+            keys[event.code] = false;
+        });
+        // Camera following
+        function updateCamera() {
+            const targetPosition = playerShip.position.clone().add(cameraOffset);
+            camera.position.lerp(targetPosition, 0.08);
+            camera.lookAt(playerShip.position);
+        }
+        // UI Updates
+        function updateUI() {
+            document.getElementById('gold').textContent = gameState.gold;
+            document.getElementById('lives').textContent = gameState.lives;
+            document.getElementById('wave').textContent = gameState.wave;
+            document.getElementById('score').textContent = gameState.score;
+            document.getElementById('enemies-left').textContent = gameState.enemies.length;
+            document.getElementById('health-fill').style.width = `${gameState.health}%`;
+            document.getElementById('wind-speed').textContent = Math.round(gameState.windSpeed);
+            document.getElementById('ship-speed').textContent = gameState.shipSpeed.toFixed(1);
+            // Update area info
+            const currentArea = getCurrentArea();
+            const areaData = lakeAreas[currentArea] || { description: "Open Waters", windMultiplier: 1, tideEffect: 0 };
+            document.getElementById('current-area').textContent = currentArea;
+            document.getElementById('area-effect').textContent = areaData.description;
+            // Environmental effects
+            const windEffect = ((areaData.windMultiplier - 1) * 100).toFixed(0);
+            document.getElementById('wind-effect').textContent = `${windEffect >= 0 ? '+' : ''}${windEffect}%`;
+            const tideText = areaData.tideEffect > 0.1 ? "Outgoing" :
+                             areaData.tideEffect < -0.1 ? "Incoming" : "Normal";
+            document.getElementById('tide-info').textContent = tideText;
+            // Update wind indicator
+            const windArrow = document.getElementById('wind-arrow');
+            windArrow.style.transform = `rotate(${gameState.windDirection * 180 / Math.PI}deg)`;
+            // Update tower button states
+            document.querySelectorAll('.tower-button').forEach(button => {
+                if (button.dataset.cost) {
+                    const cost = parseInt(button.dataset.cost);
+                    button.classList.toggle('disabled', gameState.gold < cost);
+                }
+            });
+        }
+        // All combat and game logic functions remain the same...
         function createProjectile(start, target, type) {
             let projectileGeometry, projectileMaterial;
             return projectile;
         }
         function spawnEnemyWave() {
             const waveSize = gameState.wave * 3 + 2;
             const spawnPoints = [
             }
         }
         function updateTowers() {
             const currentTime = Date.now();
             gameState.towers.forEach(tower => {
                 if (currentTime - tower.userData.lastFire < tower.userData.fireRate) return;
                 let nearestEnemy = null;
                 let nearestDistance = Infinity;
                 if (nearestEnemy) {
                     tower.userData.lastFire = currentTime;
                     const projectileType = {
                         'cannon': 'cannonball',
                         'harpoon': 'harpoon',
                     gameState.projectiles.push(projectile);
                     scene.add(projectile);
                     tower.lookAt(nearestEnemy.position);
                 }
             });
                     return;
                 }
                 const movement = projectile.userData.direction.clone().multiplyScalar(projectile.userData.speed);
                 projectile.position.add(movement);
                 gameState.enemies.forEach((enemy, enemyIndex) => {
                     if (projectile.position.distanceTo(enemy.position) < 2) {
                         const tower = gameState.towers.find(t =>
                             t.userData.type === projectile.userData.type.replace('ball', '').replace('lighthouse', 'lighthouse')
                         );
                         if (tower) {
                             enemy.userData.health -= tower.userData.damage;
                             if (tower.userData.type === 'net') {
                                 enemy.userData.slowFactor = tower.userData.slow;
                                 enemy.userData.slowTime = 3000;
                             }
                             createHitEffect(enemy.position);
                         }
         function updateEnemies() {
             gameState.enemies.forEach((enemy, index) => {
                 if (enemy.userData.health <= 0) {
                     gameState.gold += enemy.userData.value;
                     gameState.score += enemy.userData.value;
                     return;
                 }
                 if (enemy.userData.slowTime > 0) {
                     enemy.userData.slowTime -= 16;
                     if (enemy.userData.slowTime <= 0) {
                     }
                 }
                 const direction = new THREE.Vector3().subVectors(playerShip.position, enemy.position).normalize();
                 const speed = enemy.userData.speed * enemy.userData.slowFactor;
                 enemy.position.add(direction.multiplyScalar(speed));
                 enemy.lookAt(playerShip.position);
                 if (enemy.position.distanceTo(playerShip.position) < 3) {
                     gameState.health -= 20;
                     gameState.lives--;
             });
         }
         function createHitEffect(position) {
             for (let i = 0; i < 10; i++) {
                 const particleGeometry = new THREE.SphereGeometry(0.1);
                 }
                 particle.position.add(particle.userData.velocity);
+                particle.userData.velocity.y -= 0.005;
                 particle.material.opacity = particle.userData.life / 60;
             });
         }
         // Tower placement
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
             }
         });
         function startWave() {
             gameState.waveActive = true;
             spawnEnemyWave();
             }
         }
         function cycleTowerSelection() {
             const towers = ['cannon', 'harpoon', 'net', 'lighthouse'];
             const currentIndex = towers.indexOf(gameState.selectedTower);
         }
         function restartGame() {
             gameState = {
                 gold: 500,
                 lives: 3,
                 projectiles: [],
                 particles: [],
                 windDirection: 0,
+                windSpeed: 5,
+                currentArea: "Upper Lake",
+                shipSpeed: 0
             };
             [...gameState.enemies, ...gameState.towers, ...gameState.projectiles, ...gameState.particles]
                 .forEach(obj => scene.remove(obj));
             playerShip.position.set(0, 1, 0);
             shipRotation = 0;
             document.getElementById('game-over').style.display = 'none';
             document.getElementById('start-wave').style.display = 'block';
             updateUI();
         }
         // Lighting
         const ambientLight = new THREE.AmbientLight(0x404070, 0.4);
         scene.add(ambientLight);
             if (gameState.gameRunning) {
                 updateShipMovement();
                 updateCamera();
                 updateTowers();
                 updateProjectiles();
                 updateUI();
             }
             lakeMaterial.uniforms.time.value = time;
             skyMaterial.uniforms.time.value = time;
             renderer.render(scene, camera);
         }
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
         updateUI();
         animate();
     </script>