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 10 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()
            user_input = st.text_input("Now think of something in that category (we won't peek!):").strip().lower()

            if st.form_submit_button("Start Game"):
                if not category_input or not user_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!")
                elif len(user_input) < 3:
                    st.error("Too short! Type properly.")
                else:
                    st.session_state.category = category_input
                    st.session_state.user_input = user_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)
        
        answer = st.radio("Your answer:", ["Yes", "No"], horizontal=True, label_visibility="collapsed")
        
        if st.button("Submit Answer", type="primary"):
            st.session_state.answers.append(answer == "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;">{st.session_state.user_input.upper()}</div>', 
                    unsafe_allow_html=True)
        
        if st.button("Play Again", key="play_again"):
            st.session_state.clear()
            st.rerun()

if __name__ == "__main__":
    main()