# File: gta_style_city_with_collision.py

#!pip install gradio transformers torch numpy

import gradio as gr
from transformers import pipeline
import torch

# JavaScript code for Three.js interactive GTA-style movement with collision and NPCs
def create_js():
    return """
function initGame() {
    // Three.js initialization
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, 400);
    document.getElementById('game-container').appendChild(renderer.domElement);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(10, 20, 10);
    scene.add(directionalLight);

    // Ground with texture
    const groundTexture = new THREE.TextureLoader().load("https://threejsfundamentals.org/threejs/resources/images/checker.png");
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set(20, 20);
    const groundMaterial = new THREE.MeshStandardMaterial({ map: groundTexture });
    const groundGeometry = new THREE.PlaneGeometry(40, 40);
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    scene.add(ground);

    // Player
    const playerGeometry = new THREE.BoxGeometry(1, 2, 1);
    const playerMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    const player = new THREE.Mesh(playerGeometry, playerMaterial);
    player.position.set(0, 1, 0);
    scene.add(player);

    // Buildings
    const buildings = [];
    function createBuilding(x, z, height, color) {
        const buildingGeometry = new THREE.BoxGeometry(2, height, 2);
        const buildingMaterial = new THREE.MeshStandardMaterial({ color });
        const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
        building.position.set(x, height / 2, z);
        scene.add(building);
        buildings.push(building); // Track building for collision detection
    }

    // City-like layout
    createBuilding(-5, -5, 10, 0x8B0000); // Red
    createBuilding(5, -5, 15, 0x00008B); // Blue
    createBuilding(-5, 5, 12, 0x228B22); // Green
    createBuilding(5, 5, 8, 0xFFD700); // Gold

    // NPC
    const npcGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    const npcMaterial = new THREE.MeshStandardMaterial({ color: 0xff69b4 });
    const npc = new THREE.Mesh(npcGeometry, npcMaterial);
    npc.position.set(2, 0.5, 2);
    scene.add(npc);

    // Camera starting position
    camera.position.set(0, 10, 15);
    camera.lookAt(player.position);

    // Check for collisions
    function checkCollision(object, obstacles) {
        const playerBox = new THREE.Box3().setFromObject(object);
        for (const obstacle of obstacles) {
            const obstacleBox = new THREE.Box3().setFromObject(obstacle);
            if (playerBox.intersectsBox(obstacleBox)) {
                return true;
            }
        }
        return false;
    }

    // Movement function
    const speed = 0.5;
    window.movePlayer = function(direction) {
        const previousPosition = player.position.clone();

        // Move the player
        switch (direction) {
            case 'forward':
                player.position.z -= speed;
                break;
            case 'backward':
                player.position.z += speed;
                break;
            case 'left':
                player.position.x -= speed;
                break;
            case 'right':
                player.position.x += speed;
                break;
        }

        // Check for collisions
        if (checkCollision(player, buildings)) {
            player.position.copy(previousPosition); // Revert to previous position
        }

        // Update camera to follow the player
        camera.position.set(player.position.x, player.position.y + 10, player.position.z + 15);
        camera.lookAt(player.position);

        // Interaction with NPC
        if (checkCollision(player, [npc])) {
            const status = document.getElementById('npc-status');
            if (status) {
                status.textContent = 'You interacted with the NPC!';
            }
        }

        // Update movement status
        const status = document.getElementById('movement-status');
        if (status) {
            status.textContent = `Moved ${direction}`;
        }
    };

    // Animation loop
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
}
"""

# HTML and CSS for the game container
html_content = f"""
<div id="game-container"></div>
<div id="controls">
    <button onclick="movePlayer('forward')">Forward</button>
    <button onclick="movePlayer('backward')">Backward</button>
    <button onclick="movePlayer('left')">Left</button>
    <button onclick="movePlayer('right')">Right</button>
    <p id="movement-status" style="margin-top: 10px; color: #00ff00;">Movement Status</p>
    <p id="npc-status" style="margin-top: 10px; color: #ff69b4;">NPC Interaction Status</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
<script>
{create_js()}
// Initialize the game when the page loads
window.addEventListener('load', initGame);
</script>
<style>
body {{
    background-color: #1e1e1e;
    color: #ffffff;
    font-family: Arial, sans-serif;
}}
#game-container {{
    width: 100%;
    height: 400px;
    border: 2px solid #444;
    margin-bottom: 20px;
}}
#controls {{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}}
button {{
    background-color: #444;
    color: #fff;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
}}
button:hover {{
    background-color: #666;
}}
.gradio-container {{
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}}
</style>
"""

# Initialize NPC dialogue model
npc_model = pipeline("text-generation", model="gpt2", device=0 if torch.cuda.is_available() else -1)

def npc_interaction(input_text):
    response = npc_model(f"Player: {input_text}\nNPC:", max_length=50, num_return_sequences=1)
    return response[0]['generated_text'].split("NPC:")[-1].strip()

# Create Gradio interface
with gr.Blocks(css=".gradio-container {background-color: #1e1e1e; color: white;}") as demo:
    gr.HTML(html_content)
    with gr.Row():
        with gr.Column():
            text_input = gr.Textbox(label="Talk to NPC", placeholder="Type something...")
            npc_output = gr.Textbox(label="NPC Response")
            gr.Button("Talk").click(fn=npc_interaction, inputs=text_input, outputs=npc_output)

# Launch the interface
demo.launch(share=True)