import streamlit as st
import base64

st.set_page_config(layout="wide", page_title="Game Dev and 3D Showcase")

st.title("Game Development and 3D Content Showcase")

# Kaboom.js Breakout Game
st.header("Kaboom.js Breakout Game")
kaboom_breakout_game = """
<script src="https://kaboomjs.com/lib/0.6.0/kaboom.js"></script>
<canvas id="game"></canvas>
<script>
// Paste the entire JavaScript code from the Kaboom Breakout game artifact here
</script>
"""
st.components.v1.html(kaboom_breakout_game, height=650)

# Mad Lib Generator
st.header("Mad Lib Generator")

templates = [
    "The {adjective} {noun} {verb} over the {adjective} {noun}.",
    "In a {adjective} land, a {noun} and a {noun} went on a {adjective} adventure.",
    "The {noun} {verb} {adverb} while the {adjective} {noun} watched in amazement."
]

parts_of_speech = {
    "adjective": ["brave", "mysterious", "colorful", "gigantic", "tiny"],
    "noun": ["wizard", "dragon", "knight", "castle", "forest"],
    "verb": ["flew", "danced", "sang", "fought", "explored"],
    "adverb": ["quickly", "silently", "gracefully", "fiercely", "carefully"]
}

def generate_mad_lib():
    import random
    template = random.choice(templates)
    for part in parts_of_speech:
        while "{" + part + "}" in template:
            template = template.replace("{" + part + "}", random.choice(parts_of_speech[part]), 1)
    return template

if st.button("Generate Mad Lib"):
    st.write(generate_mad_lib())

# A-Frame 3D Scene with Model Upload
st.header("A-Frame 3D Scene")
aframe_scene = """
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<a-scene embedded style="height: 400px;">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
    <a-entity id="rig" position="0 1.6 0">
        <a-camera></a-camera>
    </a-entity>
    <a-entity id="model-container" position="0 0 -5"></a-entity>
</a-scene>

<script>
function loadModel(url, fileType) {
    const scene = document.querySelector('a-scene');
    const modelContainer = document.getElementById('model-container');
    
    // Remove any existing model
    while (modelContainer.firstChild) {
        modelContainer.removeChild(modelContainer.firstChild);
    }
    
    // Create new entity for the model
    const modelEntity = document.createElement('a-entity');
    if (fileType === 'obj') {
        modelEntity.setAttribute('obj-model', `obj: ${url}`);
    } else if (fileType === 'glb') {
        modelEntity.setAttribute('gltf-model', url);
    }
    
    modelEntity.setAttribute('scale', '0.5 0.5 0.5');
    modelEntity.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 10000');
    
    modelContainer.appendChild(modelEntity);
}
</script>
"""
st.components.v1.html(aframe_scene, height=450)

# File uploader for 3D models
uploaded_file = st.file_uploader("Upload a 3D model (OBJ or GLB)", type=['obj', 'glb'])

if uploaded_file is not None:
    # Get the file extension
    file_extension = uploaded_file.name.split('.')[-1].lower()
    
    # Encode the file
    encoded_file = base64.b64encode(uploaded_file.read()).decode()
    
    # Create a data URL
    data_url = f"data:application/octet-stream;base64,{encoded_file}"
    
    # JavaScript to load the model
    load_model_js = f"""
    <script>
        loadModel("{data_url}", "{file_extension}");
    </script>
    """
    st.components.v1.html(load_model_js, height=0)
    st.success(f"Loaded {uploaded_file.name}")

st.sidebar.title("Navigation")
st.sidebar.info("Use the sections above to interact with different components of the app.")