import streamlit as st

st.markdown("""

# Word Game: My Talking Baby Meerkat

## Background Story 🦝

Welcome to the world of My Talking Baby Meerkat! In this word game, you will embark on a fun and exciting adventure with your adorable baby meerkat. Your task is to help your meerkat friend learn new words and phrases by playing various word games together. Are you ready to have a meerkat-tastic time?

""")

st.video("My Talking Baby Meerkat.mp4")

st.markdown("""

## Game Play Rules 🎮

### 1. Setup
- **Objective:** Help your baby meerkat friend learn new words and phrases.
- **Materials Needed:** A list of words or phrases, a timer, and a playful spirit!
- **Players:** You and your baby meerkat friend.

### 2. Game Rounds
1. **Choose a Word:** Select a word or phrase from the list provided.
2. **Teach Your Meerkat:** Say the word or phrase out loud to your baby meerkat friend.
3. **Repeat After Meerkat:** Your meerkat friend will try to repeat the word or phrase back to you.
4. **Reward:** If your meerkat friend successfully repeats the word, reward them with a treat or praise.
5. **Time Limit:** Set a time limit for each round to keep the game engaging.

### 3. Dramatic Situations 🎭

#### Situation 1: The Meerkat's Shyness
- Your baby meerkat friend is feeling shy and hesitant to speak. Encourage them with gentle words and patience.

#### Situation 2: The Mischievous Meerkat
- Your baby meerkat friend starts playing tricks and saying silly words instead of the correct ones. Keep a straight face and guide them back on track.

#### Situation 3: The Competitive Meerkat
- Your baby meerkat friend wants to outdo you in the game. Show them that learning together is more important than winning.

## Conclusion 🌟

Get ready to have a blast with your talking baby meerkat in this word game adventure! Remember to be patient, encouraging, and most importantly, have fun while learning new words and phrases together. Enjoy the journey with your adorable meerkat companion!   


""")



import streamlit as st
import pandas as pd
import random

# Thematic Story Plot Line
st.title("My Talking Baby Meerkat 🦝")
st.markdown("Welcome to the world of My Talking Baby Meerkat! In this word game, you will embark on a fun and exciting adventure with your adorable baby meerkat. Your task is to help your meerkat friend learn new words and phrases by playing various word games together. Are you ready to have a meerkat-tastic time?")

# Game Play Rules
st.header("Game Play Rules 🎮")

st.subheader("Setup")
st.markdown("- **Objective:** Help your baby meerkat friend learn new words and phrases.")
st.markdown("- **Materials Needed:** A list of words or phrases, a timer, and a playful spirit!")
st.markdown("- **Players:** You and your baby meerkat friend.")

st.subheader("Game Rounds")
st.markdown("1. **Choose a Word:** Select a word or phrase from the list provided.")
st.markdown("2. **Teach Your Meerkat:** Say the word or phrase out loud to your baby meerkat friend.")
st.markdown("3. **Repeat After Meerkat:** Your meerkat friend will try to repeat the word or phrase back to you.")
st.markdown("4. **Reward:** If your meerkat friend successfully repeats the word, reward them with a treat or praise.")
st.markdown("5. **Time Limit:** Set a time limit for each round to keep the game engaging.")

st.subheader("Dramatic Situations 🎭")

st.markdown("#### Situation 1: The Meerkat's Shyness")
st.markdown("- Your baby meerkat friend is feeling shy and hesitant to speak. Encourage them with gentle words and patience.")

st.markdown("#### Situation 2: The Mischievous Meerkat")
st.markdown("- Your baby meerkat friend starts playing tricks and saying silly words instead of the correct ones. Keep a straight face and guide them back on track.")

st.markdown("#### Situation 3: The Competitive Meerkat")
st.markdown("- Your baby meerkat friend wants to outdo you in the game. Show them that learning together is more important than winning.")

# Data Tables
st.header("Data Tables 📊")

# Inline Data Tables
st.write("Entities and Stats:")
entities_data = {
    "Player": "You",
    "Friend": "Baby Meerkat",
    "Time Limit": "60 seconds",
    "Rewards": "Treat or praise"
}
entities_df = pd.DataFrame(entities_data.items(), columns=["Entity", "Description"])
st.write(entities_df)

# List Dictionaries
stats_data = {
    "Player Level": 1,
    "Meerkat Level": 1,
    "Experience Points": 0
}
st.write("Stats:")
st.write(stats_data)

# UI Controls
st.header("User Interface Controls 🎨")

# Emoji Buttons
if st.button("Teach Word 📚"):
    st.write("You taught a new word to your meerkat friend!")

# Slider
round_time = st.slider("Set Round Time (seconds)", min_value=30, max_value=120, value=60)

# Drop Down
word_list = ["Hello", "Sunshine", "Banana", "Adventure"]
selected_word = st.selectbox("Choose a Word to Teach", word_list)

# Data Interfaces
st.header("Gallery 📸")

# File Uploader
uploaded_image = st.file_uploader("Upload an Image of Your Meerkat", type=["jpg", "jpeg", "png"])
if uploaded_image is not None:
    st.image(uploaded_image, caption="Your Meerkat")

# Camera Input
if st.button("Take Meerkat Picture 📷"):
    st.write("Picture taken successfully!")

# Continual Running Plots
st.header("Continual Running Plots 📈")

plot_data = pd.DataFrame({
    'time': [1, 2, 3, 4, 5],
    'value': [10, 20, 30, 40, 50]
})

st.line_chart(plot_data)

# Expander
with st.expander("Game Rules Details"):
    st.write("Detailed rules and guidelines for playing the word game.")

# Character Advancement
st.header("Character Advancement 🌟")

# Session State
if "experience_points" not in st.session_state:
    st.session_state.experience_points = 0

if st.button("Earn Experience Points"):
    st.session_state.experience_points += random.randint(1, 10)
    st.write(f"You earned {st.session_state.experience_points} experience points!")

# Conclusion
st.header("Conclusion 🌟")

st.markdown("Get ready to have a blast with your talking baby meerkat in this word game adventure! Remember to be patient, encouraging, and most importantly, have fun while learning new words and phrases together. Enjoy the journey with your adorable meerkat companion!")


htmlAframe="""
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Game Simulation</title>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- Bounding Box -->
    <a-box position="0 0 -5" width="10" height="10" depth="10" color="blue" opacity="0.5"></a-box>

    <!-- Moving Entities -->
    <a-entity id="entity1" geometry="primitive: box" material="color: red" position="-2 0 -5"></a-entity>
    <a-entity id="entity2" geometry="primitive: sphere" material="color: green" position="2 0 -5"></a-entity>
    <a-entity id="entity3" geometry="primitive: cylinder" material="color: yellow" position="0 0 -3"></a-entity>

    <!-- Text and Animation -->
    <a-entity id="text1" text="value: Inventory 🎒; align: center" position="-2 1 -5"></a-entity>
    <a-entity id="text2" text="value: Components ⚙️; align: center" position="2 1 -5"></a-entity>
    <a-entity id="text3" text="value: Story Entities 📖; align: center" position="0 1 -3"></a-entity>
  </a-scene>

  <script>
    // Function to create new random entities
    function createRandomEntities() {
      for (let i = 1; i <= 3; i++) {
        let randomType = Math.floor(Math.random() * 3) + 1;
        let entity = document.createElement('a-entity');
        let positionX = Math.floor(Math.random() * 10) - 5;
        let positionZ = Math.floor(Math.random() * 10) - 5;

        if (randomType === 1) {
          entity.setAttribute('geometry', 'primitive: box');
          entity.setAttribute('material', 'color: purple');
        } else if (randomType === 2) {
          entity.setAttribute('geometry', 'primitive: sphere');
          entity.setAttribute('material', 'color: pink');
        } else {
          entity.setAttribute('geometry', 'primitive: cylinder');
          entity.setAttribute('material', 'color: orange');
        }

        entity.setAttribute('position', `${positionX} 0 ${positionZ}`);
        document.querySelector('a-scene').appendChild(entity);
      }
    }

    // Call the function to create new random entities
    createRandomEntities();
  </script>
</body>
</html>
"""

st.markdown(htmlAframe)