Spaces:

Lukeetah
/

Samuel_4.0

Sleeping

App Files Files Community

Lukeetah commited on Dec 7, 2025

Commit

5b92433

verified ·

1 Parent(s): e1ed9de

Upload 9 files

Browse files

Files changed (1) hide show

templates/index.html +533 -454

templates/index.html CHANGED Viewed

@@ -1,574 +1,653 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>CHORIZO: DEFINITIVE EDITION</title>
     <style>
-        /* GTA SAN ANDREAS STYLE HUD */
-        @import url('https://fonts.googleapis.com/css2?family=Pricedown&display=swap'); /* Fake Pricedown if avail, else fallback */
-        @font-face {
-            font-family: 'Pricedown';
-            src: url('https://db.onlinewebfonts.com/t/048a9c37b420f86460334812a8069d2f.woff2') format('woff2');
         }
-        body { margin: 0; overflow: hidden; background: #000; font-family: 'Arial', sans-serif; }
-        #game-container { position: relative; width: 100vw; height: 100vh; }
-        canvas { display: block; width: 100%; height: 100%; }
-        /* HUD ELEMENTS */
-        #hud {
             position: absolute;
-            top: 20px; right: 20px;
-            width: 150px;
             pointer-events: none;
         }
-        .hud-bar-container {
-            background: rgba(0,0,0,0.5);
-            border: 2px solid #000;
-            margin-bottom: 5px;
-            height: 15px;
-            position: relative;
         }
-        .hud-bar { height: 100%; width: 100%; }
-        #health-bar { background: #b62fac; } /* Old school SA Health Pink/Red */
-        #armor-bar { background: #cfcfcf; height: 10px; margin-bottom: 2px; width: 0%; display:none;}
-        #money {
-            font-family: 'Pricedown', 'Impact', sans-serif;
-            color: #3d8f3d; /* Dark Green */
-            font-size: 32px;
-            text-align: right;
-            text-shadow: 2px 2px 0 #000;
-            margin-bottom: 5px;
         }
-        #weapon-icon {
-            width: 60px; height: 60px;
-            background: rgba(0,0,0,0.3);
-            border: 2px solid #000;
-            border-radius: 50%;
-            margin-left: auto;
-            display: flex; align-items: center; justify-content: center;
-            color: #fff; font-size: 24px;
         }
-        #wanted-level {
             display: flex;
-            justify-content: flex-end;
-            margin-top: 5px;
         }
-        .star { color: #555; font-size: 20px; margin-left: 2px; }
-        .star.active { color: #fff; text-shadow: 0 0 5px #fff; }
-        #zone-name {
             position: absolute;
-            bottom: 30px; right: 30px;
-            font-family: 'Pricedown', 'Impact', sans-serif;
             color: #fff;
-            font-size: 36px;
-            text-shadow: 2px 2px 0 #000;
             text-transform: uppercase;
         }
-        /* MISSION TEXT / SUBTITLES */
-        #mission-text {
             position: absolute;
-            bottom: 100px; width: 100%;
-            text-align: center;
-            font-family: 'Arial', sans-serif;
-            font-weight: bold;
-            font-size: 20px;
-            color: #fff;
-            text-shadow: 1px 1px 2px #000;
             pointer-events: none;
             display: none;
-            padding: 0 20px;
-            box-sizing: border-box;
         }
-        .subtitle {
-            background: rgba(0,0,0,0.6);
-            padding: 5px 10px;
-            border-radius: 4px;
-            display: inline-block;
         }
-        /* MENU */
-        #menu {
-            position: absolute; top:0; left:0; width:100%; height:100%;
-            background: url('https://images.unsplash.com/photo-1620021156647-7521852e3995?q=80&w=1920&auto=format&fit=crop') no-repeat center center/cover;
-            display: flex; flex-direction: column; align-items: center; justify-content: center;
-            z-index: 100;
         }
-        #menu::after {
-            content:''; position:absolute; top:0; left:0; width:100%; height:100%;
-            background: rgba(0,0,0,0.6); z-index: -1;
-        }
-        h1 {
-            font-family: 'Pricedown', 'Impact', sans-serif;
-            font-size: 100px; color: #fea500;
-            text-shadow: 4px 4px 0 #000; margin: 0;
-            letter-spacing: 2px;
-        }
-        .menu-btn {
-            font-family: 'Pricedown', 'Impact', sans-serif;
-            font-size: 40px; color: #fff;
-            background: none; border: none;
-            cursor: pointer; margin: 10px;
-            text-shadow: 2px 2px 0 #000;
-            transition: transform 0.2s, color 0.2s;
-        }
-        .menu-btn:hover { transform: scale(1.1); color: #fea500; }
-        /* VINYETTE & SCANLINES for "Human Reality" / Gritty feel */
-        #screensfx {
-            position: absolute; top:0; left:0; width:100%; height:100%;
-            background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,10,20,0.4) 100%);
-            pointer-events: none; z-index: 50;
-        }
-        .scanline {
-            width: 100%; height: 100px;
-            background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0) 100%);
-            opacity: 0.1;
-            position: absolute; bottom: 100%;
-            animation: scanline 10s linear infinite;
-            pointer-events: none;
         }
-        @keyframes scanline { 0% { bottom: 100%; } 100% { bottom: -100%; } }
-        #controls-hint {
-            position: absolute; top: 20px; left: 20px;
-            color: rgba(255,255,255,0.5); font-family: monospace;
         }
     </style>
 </head>
-<body>
     <div id="game-container">
-        <!-- 3D Canvas injected by Three.js -->
-        <div id="screensfx"><div class="scanline"></div></div>
         <!-- MENU -->
         <div id="menu">
-            <h1>CHORIZO</h1>
-            <h2 style="font-family:'Pricedown'; color:#fff; text-shadow:1px 1px 0 #000; margin-top:-10px;">DEFINITIVE EDITION</h2>
-            <button class="menu-btn" id="start-btn">JUGAR</button>
-            <div style="color:#aaa; position:absolute; bottom:20px; font-size:12px;">ESTRELLO GAMES - BUENOS AIRES 2025</div>
         </div>
         <!-- HUD -->
-        <div id="hud" style="display:none;">
-            <div id="money">$00000000</div>
-            <div class="hud-bar-container">
-                <div id="health-bar" class="hud-bar"></div>
             </div>
-            <div id="weapon-icon">👊</div>
-            <div id="wanted-level">
-                <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
             </div>
         </div>
-        <div id="zone-name" style="display:none;">VILLA 31</div>
-        <div id="mission-text">
-            <div id="subtitle-box" class="subtitle"></div>
-        </div>
-        <div id="controls-hint">WASD: Mover | SHIFT: Correr | ESPACIO: Saltar | CLICK: Interactuar</div>
     </div>
-    <!-- AUDIO SYSTEM -->
     <script>
         const AUDIO = {
             ctx: null,
-            init: function() {
-                try {
-                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
-                    this.ctx = new AudioContext();
-                } catch(e) { console.warn('Web Audio API not supported'); }
-            },
-            playTone: function(freq, type, duration) {
-                if(!this.ctx) return;
-                const osc = this.ctx.createOscillator();
-                const gain = this.ctx.createGain();
-                osc.type = type;
-                osc.frequency.value = freq;
-                osc.connect(gain);
-                gain.connect(this.ctx.destination);
-                osc.start();
-                gain.gain.exponentialRampToValueAtTime(0.00001, this.ctx.currentTime + duration);
-                osc.stop(this.ctx.currentTime + duration);
-            },
-            playSelect: function() { this.playTone(400, 'square', 0.1); },
-            playStart: function() { this.playTone(600, 'sawtooth', 0.5); }
-        };
-    </script>
-    <!-- STORY DATA (Merged Renacer + Chorizo) -->
-    <script>
-        const STORY = {
-            player: {
-                name: "Martín",
-                money: 250,
-                respect: 10,
-                hp: 100,
-                wanted: 0
-            },
-            missions: [
-                {
-                    id: "intro",
-                    title: "El Amanecer de los Que Menos Tienen",
-                    npc: "Don Carmelo",
-                    triggerZone: { x: 50, z: 50, r: 5 }, // Near start
-                    dialogue: [
-                        { speaker: "Don Carmelo", text: "Martín, pibe. Llegaste temprano. Eso me gusta." },
-                        { speaker: "Martín", text: "¿Tiene el trabajo del que hablamos, Don Carmelo?" },
-                        { speaker: "Don Carmelo", text: "Sí. Pero escuchame bien: esto no es repartir pizzas." },
-                        { speaker: "Don Carmelo", text: "El Diputado necesita limpiar unas paredes en Microcentro. 'Limpieza Ideológica' le dicen." },
-                        { speaker: "Don Carmelo", text: "Andá y sacá esos carteles zurdos. Que no quede ni uno." }
-                    ],
-                    objective: "Destruí 5 carteles en Microcentro",
-                    targetZone: "MICROCENTRO",
-                    reward: 500
-                },
-                {
-                    id: "dolar_blue",
-                    title: "Dólar Blue",
-                    npc: "El Financista",
-                    triggerZone: { x: -200, z: -200, r: 5 }, // Puerto Madero
-                    dialogue: [
-                        { speaker: "Financista", text: "Ah, vos sos el enviado de Carmelo. Tenés cara de pobre, perfecto." },
-                        { speaker: "Martín", text: "Dame el paquete y no rompas las bolas." },
-                        { speaker: "Financista", text: "Epa, qué carácter. Tomá. Son verdes. Llevalos a la cueva en La Boca sin que te agarre la cana." }
-                    ],
-                    objective: "Llevá el paquete a La Boca",
-                    targetZone: "LA BOCA",
-                    reward: 1200
                 }
-            ]
         };
-        let currentMissionIndex = -1;
-        let missionStage = 0; // 0: not started, 1: dialogue, 2: active, 3: completed
     </script>
-    <!-- THREE.JS ENGINE -->
     <script type="module">
         import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
-        // Simple first person controls or orbit controls? We'll write a custom 3rd person controller.
-        // --- GAME VARIABLES ---
-        let scene, camera, renderer;
-        let player, playerMesh;
-        let terrain;
-        let buildings = [];
         let keyState = {};
         let gameActive = false;
         const ZONES = [
-            { name: "VILLA 31", x: 0, z: 0, color: 0x8b4513, density: 0.8 },
-            { name: "MICROCENTRO", x: 200, z: 200, color: 0x555555, density: 0.6 },
-            { name: "PUERTO MADERO", x: -200, z: -200, color: 0xadd8e6, density: 0.3 }, // Glassy
-            { name: "LA BOCA", x: 200, z: -200, color: 0xffd700, density: 0.5 }
         ];
-        // --- INIT ---
         function init() {
-            // Audio init
             document.getElementById('start-btn').addEventListener('click', () => {
                 AUDIO.init();
-                AUDIO.playStart();
                 document.getElementById('menu').style.display = 'none';
                 document.getElementById('hud').style.display = 'block';
-                document.getElementById('zone-name').style.display = 'block';
-                gameActive = true;
-                // Lock pointer
                 document.body.requestPointerLock();
             });
-            // Scene
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x050510); // Dark night sky
-            scene.fog = new THREE.FogExp2(0x050510, 0.0025); // Smoggy atmosphere
-            // Renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
             document.getElementById('game-container').appendChild(renderer.domElement);
-            // Camera
-            camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 5, -10);
-            // Lights
-            const ambientLight = new THREE.HemisphereLight(0x4040a0, 0x202040, 0.5); // Blue-ish night ambiance
-            scene.add(ambientLight);
-            const moonLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            moonLight.position.set(50, 100, 50);
-            moonLight.castShadow = true;
-            moonLight.shadow.camera.left = -100;
-            moonLight.shadow.camera.right = 100;
-            moonLight.shadow.camera.top = 100;
-            moonLight.shadow.camera.bottom = -100;
-            moonLight.shadow.mapSize.width = 2048;
-            moonLight.shadow.mapSize.height = 2048;
-            scene.add(moonLight);
-            // --- WORLD GENERATION ---
-            generateWorld();
-            // --- PLAYER ---
             createPlayer();
-            // Events
-            window.addEventListener('resize', onWindowResize, false);
-            document.addEventListener('keydown', (e) => keyState[e.code] = true);
-            document.addEventListener('keyup', (e) => keyState[e.code] = false);
             document.addEventListener('mousemove', onMouseMove);
             animate();
         }
-        function createTexture(type) {
-            const canvas = document.createElement('canvas');
-            canvas.width = 256; canvas.height = 256;
-            const ctx = canvas.getContext('2d');
-            // Base
-            ctx.fillStyle = type === 'asphalt' ? '#333' :
-                          type === 'concrete' ? '#666' :
-                          type === 'brick' ? '#843131' : '#223344'; // Glass
-            ctx.fillRect(0,0,256,256);
-            // Noise/Grit
-            for(let i=0; i<5000; i++) {
-                ctx.fillStyle = Math.random() > 0.5 ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.1)';
-                 ctx.fillRect(Math.random()*256, Math.random()*256, 2, 2);
-            }
-            // Details
-            if(type === 'brick') {
-                ctx.strokeStyle = 'rgba(0,0,0,0.3)';
-                ctx.lineWidth = 2;
-                for(let y=0; y<256; y+=32) {
-                    ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(256,y); ctx.stroke();
-                    for(let x=0; x<256; x+=64) {
-                        let off = (y/32)%2 === 0 ? 0 : 32;
-                        ctx.beginPath(); ctx.moveTo(x+off, y); ctx.lineTo(x+off, y+32); ctx.stroke();
-                    }
                 }
-            }
-            if(type === 'window') {
-                ctx.fillStyle = '#111';
-                ctx.fillRect(0,0,256,256);
-                // Lit windows
-                for(let y=10; y<250; y+=40) {
-                    for(let x=10; x<250; x+=40) {
-                        if(Math.random() > 0.7) {
-                            ctx.fillStyle = Math.random() > 0.9 ? '#ffccaa' : '#ffffaa';
-                            ctx.fillRect(x,y,30,30);
-                        } else {
-                            ctx.fillStyle = '#222';
-                            ctx.fillRect(x,y,30,30);
-                        }
-                    }
                 }
-            }
-            const tex = new THREE.CanvasTexture(canvas);
-            tex.wrapS = THREE.RepeatWrapping;
-            tex.wrapT = THREE.RepeatWrapping;
-            return tex;
-        }
-        const TEX = {
-            asphalt: createTexture('asphalt'),
-            concrete: createTexture('concrete'),
-            brick: createTexture('brick'),
-            window: createTexture('window')
-        };
-        TEX.asphalt.repeat.set(100,100);
-        function generateWorld() {
             // Ground
-            const planeGeo = new THREE.PlaneGeometry(2000, 2000);
-            const planeMat = new THREE.MeshStandardMaterial({ map: TEX.asphalt, roughness: 0.9 });
-            const ground = new THREE.Mesh(planeGeo, planeMat);
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            scene.add(ground);
-            // Buildings
-            ZONES.forEach((zone, idx) => {
-                const count = idx === 0 ? 150 : 50; // More slums
-                const range = 300;
-                for(let i=0; i<count; i++) {
-                    // Random pos inside zone
-                    const x = zone.x + (Math.random()-0.5) * range;
-                    const z = zone.z + (Math.random()-0.5) * range;
-                    // Don't spawn on top of each other (simple check omitted for speed, relying on density)
-                    // Size
-                    const w = 10 + Math.random() * 20;
-                    const d = 10 + Math.random() * 20;
-                    let h = 10 + Math.random() * 20;
-                    let material = new THREE.MeshStandardMaterial({ map: TEX.concrete });
-                    if(zone.name === "PUERTO MADERO") {
-                        h = 50 + Math.random() * 100; // Sky scrapers
-                        material = new THREE.MeshStandardMaterial({ color: 0x88ccff, roughness: 0.1, metalness: 0.8 }); // Glassy
-                    } else if(zone.name === "LA BOCA") {
-                        material = new THREE.MeshStandardMaterial({ color: Math.random() > 0.5 ? 0xff0000 : (Math.random()>0.5 ? 0xffff00 : 0x0000ff), map: TEX.brick });
-                    } else if(zone.name === "VILLA 31") {
-                        h = 5 + Math.random() * 10;
-                        material = new THREE.MeshStandardMaterial({ map: TEX.brick, color: 0xaa8877 });
-                    } else { // Microcentro
-                        h = 30 + Math.random() * 50;
-                        material = new THREE.MeshStandardMaterial({ map: TEX.window });
-                    }
-                    const geo = new THREE.BoxGeometry(w, h, d);
-                    const mesh = new THREE.Mesh(geo, material);
-                    mesh.position.set(x, h/2, z);
-                    mesh.castShadow = true;
-                    mesh.receiveShadow = true;
-                    scene.add(mesh);
-                    buildings.push(mesh);
                 }
             });
-            // Street Lights (Neon)
-            for(let i=0; i<50; i++) {
-                const light = new THREE.PointLight(Math.random() > 0.5 ? 0xff00ff : 0x00ffff, 1, 50);
-                light.position.set((Math.random()-0.5)*600, 10, (Math.random()-0.5)*600);
-                scene.add(light);
-            }
         }
-        function createPlayer() {
-            // Simple capsule placeholder
-            const geo = new THREE.CapsuleGeometry(0.5, 1, 4, 8);
-            const mat = new THREE.MeshStandardMaterial({ color: 0xffa500 });
-            playerMesh = new THREE.Mesh(geo, mat);
-            playerMesh.position.y = 1;
-            playerMesh.castShadow = true;
-            scene.add(playerMesh);
-            player = {
-                mesh: playerMesh,
-                speed: 0,
-                rot: 0,
-                velocity: new THREE.Vector3()
-            };
         }
-        // Camera Logic
-        let camDist = 10;
-        let camPitch = 0.5;
-        let camYaw = 0;
-        function updateCamera() {
-            // Camera follows player
-            const targetX = player.mesh.position.x - Math.sin(camYaw) * camDist;
-            const targetZ = player.mesh.position.z - Math.cos(camYaw) * camDist;
-            const targetY = player.mesh.position.y + camDist * 0.5; // + Pitch logic if needed
-            // Smooth lerp
-            camera.position.x += (targetX - camera.position.x) * 0.1;
-            camera.position.z += (targetZ - camera.position.z) * 0.1;
-            camera.position.y += (targetY - camera.position.y) * 0.1;
-            camera.lookAt(player.mesh.position.x, player.mesh.position.y + 1, player.mesh.position.z);
-        }
-        function onMouseMove(e) {
-            if(!gameActive) return;
-            // Simple mouse look
-            camYaw -= e.movementX * 0.005;
-            // camPitch -= e.movementY * 0.005;
-        }
-        function updatePlayerPhysics() {
-            // Movement independent of camera yaw (WASD = directions relative to camera or world? -> GTA is relative to camera)
-            // For now, simpler: W moves forward in player's facing direction. Mouse rotates camera.
-            // Actually nice GTA controls: W moves forward relative to CAMERA facing.
-            const moveSpeed = keyState['ShiftLeft'] ? 0.3 : 0.15;
-            let dx = 0;
-            let dz = 0;
-            if(keyState['KeyW']) { dx -= Math.sin(camYaw); dz -= Math.cos(camYaw); }
-            if(keyState['KeyS']) { dx += Math.sin(camYaw); dz += Math.cos(camYaw); }
-            if(keyState['KeyA']) { dx -= Math.sin(camYaw + Math.PI/2); dz -= Math.cos(camYaw + Math.PI/2); }
-            if(keyState['KeyD']) { dx += Math.sin(camYaw + Math.PI/2); dz += Math.cos(camYaw + Math.PI/2); }
-            if(dx !== 0 || dz !== 0) {
-                player.mesh.position.x += dx * moveSpeed;
-                player.mesh.position.z += dz * moveSpeed;
-                // Rotate player mesh to face movement
-                player.mesh.rotation.y = Math.atan2(dx, dz) + Math.PI; // Face away from camera when moving forward? No, face movement vector.
-                player.rot = Math.atan2(dx, dz);
             }
-            // Simple collision with ground (y=1)
-            player.mesh.position.y = 1;
-            // Zone Check
-            checkZone();
         }
-        function checkZone() {
-            let currentZone = "DESCONOCIDO";
-            let minDist = 9999;
-            ZONES.forEach(z => {
-                const dist = Math.sqrt((player.mesh.position.x - z.x)**2 + (player.mesh.position.z - z.z)**2);
-                if(dist < 150) { // Zone radius roughly
-                    if(dist < minDist) {
-                        minDist = dist;
-                        currentZone = z.name;
-                    }
                 }
             });
-            document.getElementById('zone-name').textContent = currentZone;
         }
-        function updateGameLogic() {
-            // MISSION TRIGGERS
-            // Check distance to active mission start
-            // ... (Basic stub for now)
-        }
         function animate() {
             requestAnimationFrame(animate);
-            if(gameActive) {
-                updatePlayerPhysics();
-                updateCamera();
-                updateGameLogic();
                 renderer.render(scene, camera);
             }
         }
-        // Handle resize
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        // Init on load
         init();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>CHORIZO: VICE LOPEZ STORIES</title>
     <style>
+        /* FONTS & UI */
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Roboto+Mono:wght@500&display=swap');
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            font-family: 'Montserrat', sans-serif;
         }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+            outline: none;
+        }
+        /* ADS / REALISM UI */
+        #crosshair {
             position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 20px;
+            height: 20px;
+            transform: translate(-50%, -50%);
             pointer-events: none;
+            display: none;
+            /* Show when aiming */
         }
+        .ch-line {
+            position: absolute;
+            background: #fff;
         }
+        .ch-h {
+            width: 100%;
+            height: 2px;
+            top: 9px;
         }
+        .ch-v {
+            height: 100%;
+            width: 2px;
+            left: 9px;
         }
+        #ammo-box {
+            position: absolute;
+            top: 60px;
+            right: 40px;
+            color: #ccc;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 24px;
+            text-shadow: 1px 1px 0 #000;
             display: flex;
+            align-items: center;
         }
+        .bullet-icon {
+            width: 15px;
+            height: 25px;
+            background: #DAA520;
+            margin-right: 5px;
+            border: 1px solid #000;
+        }
+        /* MENU GTA STYLE */
+        #menu {
             position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, #FF8C00 0%, #000 70%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+        }
+        h1.gta-title {
+            font-size: 100px;
             color: #fff;
+            line-height: 0.8;
+            text-shadow: 4px 4px 0 #000;
+            margin: 0;
+            letter-spacing: -2px;
+            font-style: italic;
+        }
+        h2.gta-sub {
+            font-size: 40px;
+            color: #000;
+            background: #DAA520;
+            padding: 0 10px;
+            margin-top: -10px;
+            font-style: italic;
+            transform: rotate(-2deg);
+        }
+        .btn {
+            background: #000;
+            color: #DAA520;
+            border: 2px solid #DAA520;
+            padding: 15px 50px;
+            font-size: 24px;
+            font-weight: 800;
+            cursor: pointer;
+            margin-top: 50px;
+            transition: all 0.2s;
             text-transform: uppercase;
         }
+        .btn:hover {
+            background: #DAA520;
+            color: #000;
+        }
+        /* HUD */
+        #hud {
             position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
             pointer-events: none;
             display: none;
         }
+        #money-box {
+            position: absolute;
+            top: 30px;
+            right: 40px;
+            color: #85bb65;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 32px;
+            text-shadow: 2px 2px 0 #000;
         }
+        #zone-box {
+            position: absolute;
+            bottom: 40px;
+            right: 40px;
+            text-align: right;
         }
+        #zone-name {
+            color: #fff;
+            font-size: 40px;
+            text-transform: uppercase;
+            text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+        }
+        #zone-sub {
+            color: #DAA520;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        #interact-prompt {
+            position: absolute;
+            bottom: 20%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #000;
+            background: #DAA520;
+            padding: 10px 20px;
+            font-weight: bold;
+            font-size: 16px;
+            border: 2px solid #fff;
+            display: none;
         }
+        #controls {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: #555;
+            font-size: 12px;
+            font-family: monospace;
         }
     </style>
 </head>
+<body>
     <div id="game-container">
+        <!-- CROSSHAIR -->
+        <div id="crosshair">
+            <div class="ch-line ch-h"></div>
+            <div class="ch-line ch-v"></div>
+        </div>
         <!-- MENU -->
         <div id="menu">
+            <h1 class="gta-title">CHORIZO</h1>
+            <h2 class="gta-sub">VICENTE LOPEZ STORIES</h2>
+            <button class="btn" id="start-btn">JUGAR</button>
+            <div id="controls">WASD: Mover | SHIFT: Correr | F: Auto | E: Hablar | CLICK DER: Apuntar | CLICK IZQ:
+                Disparar</div>
         </div>
         <!-- HUD -->
+        <div id="hud">
+            <div id="money-box">$00002500</div>
+            <div id="ammo-box">
+                <div class="bullet-icon"></div> 17/90
             </div>
+            <div id="zone-box">
+                <div id="zone-name">OLIVOS</div>
+                <div id="zone-sub">PARTIDO DE VICENTE LOPEZ</div>
             </div>
+            <div id="interact-prompt">[E] ACCION</div>
         </div>
     </div>
+    <!-- AUDIO -->
     <script>
         const AUDIO = {
             ctx: null,
+            init: () => { try { window.AudioContext = window.AudioContext || window.webkitAudioContext; AUDIO.ctx = new AudioContext(); } catch (e) { } },
+            play: (type) => {
+                if (!AUDIO.ctx) return;
+                const o = AUDIO.ctx.createOscillator(), g = AUDIO.ctx.createGain();
+                o.connect(g); g.connect(AUDIO.ctx.destination);
+                if (type === 'shoot') {
+                    o.frequency.setValueAtTime(150, AUDIO.ctx.currentTime);
+                    o.frequency.exponentialRampToValueAtTime(0.01, AUDIO.ctx.currentTime + 0.1);
+                    g.gain.setValueAtTime(0.5, AUDIO.ctx.currentTime);
+                    o.type = 'sawtooth'; o.start(); o.stop(AUDIO.ctx.currentTime + 0.1);
+                }
+                if (type === 'car') {
+                    o.frequency.setValueAtTime(50, AUDIO.ctx.currentTime);
+                    o.frequency.linearRampToValueAtTime(30, AUDIO.ctx.currentTime + 0.3);
+                    g.gain.setValueAtTime(0.1, AUDIO.ctx.currentTime);
+                    o.type = 'square'; o.start(); o.stop(AUDIO.ctx.currentTime + 0.3);
                 }
+            }
         };
     </script>
+    <!-- ENGINE -->
     <script type="module">
         import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
+        let scene, camera, renderer, clock;
+        let player, playerGroup, playerParts = {};
+        let cars = [], npcs = [], buildings = [], collisionBoxes = [];
         let keyState = {};
         let gameActive = false;
+        // GAMEPLAY STATE
+        let inCar = null; // Car object if driving
+        let isAiming = false;
+        let lastShot = 0;
         const ZONES = [
+            { name: "OLIVOS", x: 0, z: 0, type: "residential" },
+            { name: "LA LUCILA", x: 400, z: 0, type: "posh" },
+            { name: "VICENTE LOPEZ", x: -400, z: 0, type: "center" },
+            { name: "RIO DE LA PLATA", x: 0, z: -400, type: "water" }
         ];
         function init() {
             document.getElementById('start-btn').addEventListener('click', () => {
                 AUDIO.init();
                 document.getElementById('menu').style.display = 'none';
                 document.getElementById('hud').style.display = 'block';
                 document.body.requestPointerLock();
+                gameActive = true;
             });
+            // SCENE
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB); // Blue Sky (Daytime Realism)
+            scene.fog = new THREE.Fog(0x87CEEB, 50, 400); // Atmospheric haze
+            camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.getElementById('game-container').appendChild(renderer.domElement);
+            // LIGHTING (Daylight)
+            const ambi = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambi);
+            const sun = new THREE.DirectionalLight(0xffffee, 1.0);
+            sun.position.set(100, 200, 50);
+            sun.castShadow = true;
+            sun.shadow.mapSize.set(2048, 2048);
+            sun.shadow.camera.left = -300; sun.shadow.camera.right = 300;
+            sun.shadow.camera.top = 300; sun.shadow.camera.bottom = -300;
+            scene.add(sun);
+            // ASSETS
+            genTextures();
+            buildWorld();
             createPlayer();
+            spawnVehicles(10);
+            spawnNPCs(50);
+            // EVENTS
+            clock = new THREE.Clock();
+            window.addEventListener('resize', onResize);
+            document.addEventListener('keydown', e => {
+                keyState[e.code] = true;
+                if (e.code === 'KeyF') handleEnterExitCar();
+                if (e.code === 'KeyE') handleInteract();
+            });
+            document.addEventListener('keyup', e => keyState[e.code] = false);
+            document.addEventListener('mousedown', e => {
+                if (e.button === 2) { isAiming = true; document.getElementById('crosshair').style.display = 'block'; }
+                if (e.button === 0 && isAiming) handleShoot();
+            });
+            document.addEventListener('mouseup', e => {
+                if (e.button === 2) { isAiming = false; document.getElementById('crosshair').style.display = 'none'; }
+            });
             document.addEventListener('mousemove', onMouseMove);
             animate();
         }
+        // --- REALISTIC TEXTURES (Ads & Shops) ---
+        const TEX = {};
+        function genTextures() {
+            const create = (type) => {
+                const c = document.createElement('canvas'); c.width = 512; c.height = 512;
+                const x = c.getContext('2d');
+                // BASE
+                x.fillStyle = type === 'road' ? '#333' : type === 'grass' ? '#3a5a3a' : '#ccc';
+                x.fillRect(0, 0, 512, 512);
+                if (type === 'shop') {
+                    // Facade Upper
+                    x.fillStyle = Math.random() > 0.5 ? '#b8b8b8' : '#e0d0c0';
+                    x.fillRect(0, 0, 512, 350);
+                    // Windows
+                    x.fillStyle = '#223';
+                    for (let i = 0; i < 4; i++) for (let j = 0; j < 3; j++) x.fillRect(30 + i * 120, 30 + j * 100, 80, 80);
+                    // SHOP FRONT (Lower)
+                    const hue = Math.floor(Math.random() * 360);
+                    x.fillStyle = `hsl(${hue}, 60%, 40%)`;
+                    x.fillRect(0, 350, 512, 162);
+                    // Logo/Text
+                    x.fillStyle = '#fff';
+                    x.font = 'bold 50px Arial';
+                    x.textAlign = 'center';
+                    const names = ["KIOSCO", "FARMACITY", "DIA%", "CARREFOUR", "PIZZERIA", "HAVANNA", "RAPIPAGO"];
+                    x.fillText(names[Math.floor(Math.random() * names.length)], 256, 420);
                 }
+                if (type === 'ad') {
+                    x.fillStyle = '#fff'; x.fillRect(0, 0, 512, 512);
+                    const ads = [
+                        { bg: '#f00', txt: "TOME COCA" },
+                        { bg: '#00f', txt: "VOTE X" },
+                        { bg: '#fa0', txt: "MERCADOLIBRE" },
+                        { bg: '#222', txt: "NETFLIX" }
+                    ];
+                    const ad = ads[Math.floor(Math.random() * ads.length)];
+                    x.fillStyle = ad.bg;
+                    x.fillRect(10, 10, 492, 492);
+                    x.fillStyle = '#fff'; x.font = 'bold 60px Arial'; x.textAlign = 'center';
+                    x.fillText(ad.txt, 256, 256);
                 }
+                if (type === 'road') {
+                    x.strokeStyle = '#fff'; x.lineWidth = 5; x.setLineDash([40, 40]);
+                    x.beginPath(); x.moveTo(256, 0); x.lineTo(256, 512); x.stroke();
+                }
+                const t = new THREE.CanvasTexture(c);
+                t.wrapS = t.wrapT = THREE.RepeatWrapping;
+                return t;
+            };
+            TEX.shop = create('shop');
+            TEX.ad = create('ad');
+            TEX.road = create('road');
+            TEX.grass = create('grass');
+        }
+        // --- WORLD ---
+        function buildWorld() {
             // Ground
+            const g = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshStandardMaterial({ map: TEX.road }));
+            g.rotation.x = -Math.PI / 2; g.receiveShadow = true;
+            TEX.road.repeat.set(80, 80);
+            scene.add(g);
+            // River (Rio de la Plata)
+            const w = new THREE.Mesh(new THREE.PlaneGeometry(2000, 500), new THREE.MeshStandardMaterial({ color: 0x4466aa, roughness: 0.1, metalness: 0.5 }));
+            w.rotation.x = -Math.PI / 2;
+            w.position.set(0, 0.1, -600);
+            scene.add(w);
+            // Buildings (Shops & Apts)
+            const geo = new THREE.BoxGeometry(1, 1, 1);
+            ZONES.forEach(z => {
+                if (z.type === 'water') return;
+                for (let i = 0; i < 60; i++) {
+                    const w = 15 + Math.random() * 15;
+                    const h = 10 + Math.random() * 40;
+                    const d = 15 + Math.random() * 15;
+                    const x = z.x + (Math.random() - 0.5) * 300;
+                    const zpos = z.z + (Math.random() - 0.5) * 300;
+                    // Material: Shop front or Ad?
+                    const mat = new THREE.MeshStandardMaterial({
+                        map: Math.random() > 0.3 ? TEX.shop : TEX.ad
+                    });
+                    const b = new THREE.Mesh(geo, mat);
+                    b.position.set(x, h / 2, zpos);
+                    b.scale.set(w, h, d);
+                    b.castShadow = true; b.receiveShadow = true;
+                    scene.add(b);
+                    collisionBoxes.push(new THREE.Box3().setFromObject(b));
                 }
             });
+        }
+        // --- VEHICLES (The "Golcito") ---
+        function createCar(x, z) {
+            const grp = new THREE.Group();
+            // Body (VW Gol shape approx)
+            const bodyMat = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff, roughness: 0.2, metalness: 0.6 });
+            const chassis = new THREE.Mesh(new THREE.BoxGeometry(2, 0.8, 4), bodyMat);
+            chassis.position.y = 0.8;
+            grp.add(chassis);
+            // Cabin
+            const cabin = new THREE.Mesh(new THREE.BoxGeometry(1.8, 0.6, 2.5), new THREE.MeshStandardMaterial({ color: 0x333 })); // Glass
+            cabin.position.set(0, 1.4, -0.2);
+            grp.add(cabin);
+            // Wheels
+            const wGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 16);
+            const wMat = new THREE.MeshStandardMaterial({ color: 0x111 });
+            const w1 = new THREE.Mesh(wGeo, wMat); w1.rotation.z = Math.PI / 2; w1.position.set(-1, 0.4, 1.2);
+            const w2 = new THREE.Mesh(wGeo, wMat); w2.rotation.z = Math.PI / 2; w2.position.set(1, 0.4, 1.2);
+            const w3 = new THREE.Mesh(wGeo, wMat); w3.rotation.z = Math.PI / 2; w3.position.set(-1, 0.4, -1.2);
+            const w4 = new THREE.Mesh(wGeo, wMat); w4.rotation.z = Math.PI / 2; w4.position.set(1, 0.4, -1.2);
+            grp.add(w1, w2, w3, w4);
+            grp.position.set(x, 0, z);
+            scene.add(grp);
+            const car = { mesh: grp, speed: 0, steer: 0, velocity: new THREE.Vector3() };
+            cars.push(car);
+            collisionBoxes.push(new THREE.Box3().setFromObject(grp)); // Can crash into cars
         }
+        function spawnVehicles(n) {
+            for (let i = 0; i < n; i++) {
+                const z = ZONES[Math.floor(Math.random() * 3)];
+                createCar(z.x + (Math.random() - 0.5) * 200, z.z + (Math.random() - 0.5) * 200);
+            }
         }
+        function handleEnterExitCar() {
+            if (inCar) {
+                // Exit
+                playerGroup.position.copy(inCar.mesh.position).add(new THREE.Vector3(2, 0, 0));
+                playerGroup.visible = true;
+                inCar = null;
+                camera.position.y = 2; // Reset cam height
+            } else {
+                // Determine closest car
+                let closest = null, minD = 4.0;
+                cars.forEach(c => {
+                    const d = playerGroup.position.distanceTo(c.mesh.position);
+                    if (d < minD) { minD = d; closest = c; }
+                });
+                if (closest) {
+                    inCar = closest;
+                    playerGroup.visible = false; // "Inside" car
+                }
             }
+        }
+        // --- COMBAT ---
+        function handleShoot() {
+            if (inCar) return; // No drive-by yet
+            const now = clock.elapsedTime;
+            if (now - lastShot < 0.2) return; // Fire rate
+            lastShot = now;
+            AUDIO.play('shoot');
+            // Raycast
+            const ray = new THREE.Raycaster();
+            ray.setFromCamera(new THREE.Vector2(0, 0), camera);
+            // Check Hit NPC
+            const hits = ray.intersectObjects(scene.children, true);
+            for (let hit of hits) {
+                // Find NPC root
+                let obj = hit.object;
+                while (obj.parent && obj.parent !== scene) obj = obj.parent;
+                // If it's an NPC group
+                const npc = npcs.find(n => n.mesh === obj);
+                if (npc) {
+                    // KILL NPC
+                    scene.remove(npc.mesh);
+                    npcs = npcs.filter(n => n !== npc);
+                    // Add "Ragdoll" or Effect? Just disappear for now (optimization)
+                    // Blood effect?
+                    const blood = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.1, 0.5), new THREE.MeshBasicMaterial({ color: 0xaa0000 }));
+                    blood.position.copy(hit.point); blood.position.y = 0.1;
+                    scene.add(blood);
+                    break; // One kill per shot
+                }
+            }
+        }
+        // --- PLAYER & NPC (Minified from previous) ---
+        function createPlayer() {
+            const g = new THREE.Group();
+            const mat = new THREE.MeshStandardMaterial({ color: 0x87CEEB });
+            const b = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.8, 0.3), mat); b.position.y = 1;
+            const h = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, 0.4), new THREE.MeshStandardMaterial({ color: 0xdcb })); h.position.y = 1.6;
+            g.add(b, h); g.castShadow = true; scene.add(g);
+            playerGroup = g; player = { mesh: g };
+        }
+        function spawnNPCs(n) {
+            const geo = new THREE.BoxGeometry(0.5, 1.7, 0.3);
+            for (let i = 0; i < n; i++) {
+                const z = ZONES[Math.floor(Math.random() * 3)];
+                const m = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff }));
+                m.position.set(z.x + (Math.random() - 0.5) * 200, 0.85, z.z + (Math.random() - 0.5) * 200);
+                scene.add(m); npcs.push({ mesh: m, dir: new THREE.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize() });
+            }
         }
+        // --- UPDATE LOOP ---
+        let camYaw = 0, camPitch = 0.3, camDist = 5;
+        function onMouseMove(e) { if (gameActive && !inCar) { camYaw -= e.movementX * 0.003; camPitch -= e.movementY * 0.003; } }
+        function updatePhysics(dt) {
+            if (inCar) {
+                // CAR PHYSICS
+                let gas = 0, turn = 0;
+                if (keyState['KeyW']) gas = 1; if (keyState['KeyS']) gas = -1;
+                if (keyState['KeyA']) turn = 1; if (keyState['KeyD']) turn = -1;
+                if (gas !== 0) {
+                    inCar.speed += gas * 10 * dt;
+                    AUDIO.play('car');
                 }
+                inCar.speed *= 0.98; // Friction
+                inCar.mesh.rotation.y += turn * inCar.speed * 0.05 * dt;
+                const dir = new THREE.Vector3(0, 0, 1).applyAxisAngle(new THREE.Vector3(0, 1, 0), inCar.mesh.rotation.y);
+                inCar.mesh.position.addScaledVector(dir, inCar.speed * dt);
+                // Cam follow car
+                const cx = inCar.mesh.position.x - Math.sin(inCar.mesh.rotation.y) * 10;
+                const cz = inCar.mesh.position.z - Math.cos(inCar.mesh.rotation.y) * 10;
+                camera.position.lerp(new THREE.Vector3(cx, 5, cz), 0.1);
+                camera.lookAt(inCar.mesh.position);
+                // Teleport player group to car (for radar/zone check)
+                playerGroup.position.copy(inCar.mesh.position);
+            } else {
+                // ON FOOT
+                let f = 0, s = 0;
+                if (keyState['KeyW']) f = 1; if (keyState['KeyS']) s = -1;
+                if (keyState['KeyD']) s = 1; if (keyState['KeyA']) s = -1;
+                const spd = keyState['ShiftLeft'] ? 10 : 5;
+                if (f || s) {
+                    const cd = new THREE.Vector3(); camera.getWorldDirection(cd); cd.y = 0; cd.normalize();
+                    const cr = new THREE.Vector3(-cd.z, 0, cd.x);
+                    const mv = new THREE.Vector3().addScaledVector(cd, f).addScaledVector(cr, s).normalize().multiplyScalar(spd * dt);
+                    // Simple collision
+                    const next = playerGroup.position.clone().add(mv);
+                    const pbox = new THREE.Box3().setFromCenterAndSize(next.clone().add(new THREE.Vector3(0, 1, 0)), new THREE.Vector3(0.5, 2, 0.5));
+                    let hit = false;
+                    for (let b of collisionBoxes) if (pbox.intersectsBox(b)) hit = true;
+                    if (!hit) playerGroup.position.add(mv);
+                    // Rot
+                    playerGroup.rotation.y = Math.atan2(mv.x, mv.z);
+                }
+                // Camera
+                if (isAiming) { camDist = 2; camPitch = 0.2; } else { camDist = 5; } // Zoom aim
+                const cx = playerGroup.position.x - Math.sin(camYaw) * camDist;
+                const cz = playerGroup.position.z - Math.cos(camYaw) * camDist;
+                const cy = playerGroup.position.y + 2 + Math.sin(camPitch) * 2;
+                camera.position.lerp(new THREE.Vector3(cx, cy, cz), 0.2);
+                camera.lookAt(playerGroup.position.clone().add(new THREE.Vector3(0, 1.5, 0)));
+            }
+            // HUD
+            let zn = "DESCONOCIDO"; let min = 9999;
+            ZONES.forEach(z => {
+                const d = new THREE.Vector2(playerGroup.position.x - z.x, playerGroup.position.z - z.z).length();
+                if (d < min) { min = d; zn = z.name; }
             });
+            if (min < 250) document.getElementById('zone-name').innerText = zn;
+            // Interaction Prompts
+            if (!inCar) {
+                // Check Cars
+                let closeCar = false;
+                for (let c of cars) if (playerGroup.position.distanceTo(c.mesh.position) < 3.0) closeCar = true;
+                document.getElementById('interact-prompt').innerText = closeCar ? "[F] MANEJAR" : "[E] HABLAR";
+                document.getElementById('interact-prompt').style.display = closeCar ? 'block' : 'none';
+            }
         }
+        function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
         function animate() {
             requestAnimationFrame(animate);
+            if (gameActive) {
+                const dt = Math.min(clock.getDelta(), 0.1);
+                updatePhysics(dt);
+                // NPC simple move
+                npcs.forEach(n => n.mesh.position.addScaledVector(n.dir, dt));
                 renderer.render(scene, camera);
             }
         }
         init();
     </script>
 </body>
 </html>