app.py

import streamlit as st
import time
from streamlit.components.v1 import html

# Custom CSS for professional look
def inject_custom_css():
    st.markdown("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        .title {
            font-size: 3rem !important;
            font-weight: 700 !important;
            color: #6C63FF !important;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.2rem !important;
            text-align: center;
            color: #666 !important;
            margin-bottom: 2rem;
        }
        
        .question-box {
            background: #F8F9FA;
            border-radius: 15px;
            padding: 2rem;
            margin: 1.5rem 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            color: black;
        }
        
        .answer-btn {
            border-radius: 12px !important;
            padding: 0.5rem 1.5rem !important;
            font-weight: 600 !important;
            margin: 0.5rem !important;
        }
        
        .yes-btn {
            background: #6C63FF !important;
            color: white !important;
        }
        
        .no-btn {
            background: #FF6B6B !important;
            color: white !important;
        }
        
        .final-reveal {
            animation: fadeIn 2s;
            font-size: 2.5rem;
            color: #6C63FF;
            text-align: center;
            margin: 2rem 0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .confetti {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }
    </style>
    """, unsafe_allow_html=True)

# Confetti animation (for final reveal)
def show_confetti():
    html("""
    <canvas id="confetti-canvas" class="confetti"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
    <script>
    const canvas = document.getElementById('confetti-canvas');
    const confetti = confetti.create(canvas, { resize: true });
    
    confetti({
        particleCount: 150,
        spread: 70,
        origin: { y: 0.6 }
    });
    
    setTimeout(() => {
        canvas.remove();
    }, 5000);
    </script>
    """)

# Game logic with fake data
def main():
    inject_custom_css()
    
    st.markdown('<div class="title">KASOTI</div>', unsafe_allow_html=True)
    st.markdown('<div class="subtitle">The Ultimate Guessing Game</div>', unsafe_allow_html=True)
    
    if 'game_state' not in st.session_state:
        st.session_state.game_state = "start"
        st.session_state.questions = [
            "Is it something you can hold in your hand?",
            "Is it commonly found in households?",
            "Can it be used as a tool?",
            "Is it primarily made of metal?",
            "Does it have moving parts?",
            "Is it electronic?",
            "Is it something you would gift to someone?",
            "Can it be found in an office?",
            "Does it require electricity to function?",
            "Is it typically under $100?"
        ]
        st.session_state.current_q = 0
        st.session_state.answers = []
        st.session_state.target = "smartphone"  # Fake target for testing
    
    # Start screen
    if st.session_state.game_state == "start":
        st.markdown("""
        <div class="question-box">
            <h3>Welcome to <span style='color:#6C63FF;'>KASOTI 🎯</span></h3>
            <p>This is a fun guessing game! You’ll think of something, and I’ll ask maximum 20 Yes/No questions to guess what it is.</p>
            <p>You can choose from three categories:</p>
            <ul>
                <li><strong>person</strong> – like a celebrity, fictional character, etc.</li>
                <li><strong>place</strong> – like a city, country, or location</li>
                <li><strong>object</strong> – like something you can touch or use</li>
            </ul>
            <p><strong>Type one of these categories below</strong> to begin: <code>person</code>, <code>place</code>, or <code>object</code>.</p>
        </div>
        """, unsafe_allow_html=True)

        with st.form("start_form"):
            category_input = st.text_input("Enter category (person / place / object):").strip().lower()

            if st.form_submit_button("Start Game"):
                if not category_input:
                    st.error("Please fill out both fields!")
                elif category_input not in ["person", "place", "object"]:
                    st.error("Oops! Type either person, place or object to start the game!")
                else:
                    st.session_state.category = category_input
                    st.session_state.game_state = "gameplay"
                    st.rerun()

    # Gameplay screen
    elif st.session_state.game_state == "gameplay":
        st.markdown(f'<div class="question-box">Question {st.session_state.current_q + 1}/10:<br><br>'
                    f'<strong>{st.session_state.questions[st.session_state.current_q]}</strong></div>', 
                    unsafe_allow_html=True)
        
        with st.form("answer_form"):
            answer_input = st.text_input("Type your answer (yes / no):").strip().lower()
    
            if st.form_submit_button("Submit Answer"):
                if answer_input not in ["yes", "no"]:
                    st.error("Please type only 'yes' or 'no' (case doesn't matter)!")
                else:
                    st.session_state.answers.append(answer_input == "yes")
                    st.session_state.current_q += 1
            
                    if st.session_state.current_q >= len(st.session_state.questions):
                        st.session_state.game_state = "result"
                    st.rerun()

    # Result screen
    elif st.session_state.game_state == "result":
        show_confetti()
        st.markdown('<div class="final-reveal">🎉 I think it\'s a...</div>', unsafe_allow_html=True)
        time.sleep(1)
        st.markdown(f'<div class="final-reveal" style="font-size:3.5rem;color:#6C63FF;">{f"something in the category of {st.session_state.category.upper()}"}</div>', 
                    unsafe_allow_html=True)
        
        if st.button("Play Again", key="play_again"):
            st.session_state.clear()
            st.rerun()

if __name__ == "__main__":
    main()