src/streamlit_app.py

import streamlit as st
import random
import requests

# -----------------------------
# Page Config
# -----------------------------
st.set_page_config(
    page_title="Rock Paper Scissors | Kubra",
    page_icon="🎮",
    layout="centered"
)

# -----------------------------
# Full UI Theme + Dark/Light Fix
# -----------------------------
st.markdown("""
<style>

/* Force Text Color for Light & Dark Mode */
html, body, [class*="css"] {
    color: #4a148c !important;
}

/* Main Text */
.stMarkdown, .stText, .stSubheader, .stMetric {
    color: #4a148c !important;
}

/* Background */
[data-testid="stAppViewContainer"] {
    background: linear-gradient(135deg, #efe1ff, #f9f2ff);
    font-family: "Segoe UI", sans-serif;
}

/* Hide audio player */
audio {
    display: none !important;
}

/* Header */
[data-testid="stHeader"] {
    background: transparent;
}

/* Title */
.title {
    text-align: center;
    color: #4a148c;
    font-size: 46px;
    font-weight: 800;
    margin-bottom: 5px;
}

/* Subtitle */
.subtitle {
    text-align: center;
    color: #7b1fa2;
    font-size: 18px;
    margin-bottom: 25px;
}

/* Buttons */
.stButton>button {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
    color: white !important;
    border-radius: 12px;
    height: 50px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    width: 100%;
    transition: 0.3s;
}

.stButton>button:hover {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    transform: scale(1.02);
}

/* Radio Buttons */
div[role="radiogroup"] label {
    background: white;
    color: #4a148c !important;
    padding: 12px 18px;
    border-radius: 10px;
    margin-right: 10px;
    border: 2px solid #d1b3ff;
    font-weight: 600;
}

/* Selected Radio */
div[role="radiogroup"] input:checked + div {
    background: #e1bee7 !important;
    border-color: #7b1fa2 !important;
}

/* Result */
.result {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #4a148c;
    margin-top: 15px;
}

/* Card */
.card {
    background: white;
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Footer */
.footer {
    text-align: center;
    color: #7b1fa2;
    font-size: 14px;
}

</style>
""", unsafe_allow_html=True)


# -----------------------------
# Title
# -----------------------------
st.markdown('<div class="title">🎮 Rock Paper Scissors</div>', unsafe_allow_html=True)
st.markdown('<div class="subtitle">Beat the AI • Track Your Score • Have Fun 💜</div>', unsafe_allow_html=True)


# -----------------------------
# Load Sound
# -----------------------------
@st.cache_data
def load_win_sound():
    url = "https://www.soundjay.com/human/sounds/applause-01.mp3"
    return requests.get(url).content


WIN_SOUND = load_win_sound()


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

if "computer_score" not in st.session_state:
    st.session_state.computer_score = 0

if "history" not in st.session_state:
    st.session_state.history = []

if "play_sound" not in st.session_state:
    st.session_state.play_sound = False


# -----------------------------
# Game Setup
# -----------------------------
choices = ["Rock", "Paper", "Scissors"]

icons = {
    "Rock": "✊",
    "Paper": "✋",
    "Scissors": "✌️"
}


# -----------------------------
# Game Card
# -----------------------------
st.markdown('<div class="card">', unsafe_allow_html=True)

st.subheader("🎯 Choose Your Move")

user_choice = st.radio("", choices, horizontal=True)


# -----------------------------
# Play Button
# -----------------------------
if st.button("Play Now 🚀"):

    st.session_state.play_sound = False

    computer_choice = random.choice(choices)

    st.divider()

    col1, col2 = st.columns(2)

    with col1:
        st.markdown("### 👤 You")
        st.write(icons[user_choice], user_choice)

    with col2:
        st.markdown("### 🤖 Computer")
        st.write(icons[computer_choice], computer_choice)


    # -----------------------------
    # Game Logic
    # -----------------------------
    if user_choice == computer_choice:
        result = "It's a Draw 🤝"

    elif (
        (user_choice == "Rock" and computer_choice == "Scissors") or
        (user_choice == "Paper" and computer_choice == "Rock") or
        (user_choice == "Scissors" and computer_choice == "Paper")
    ):

        result = "You Win! 🎉"
        st.session_state.user_score += 1

        st.session_state.play_sound = True
        st.balloons()

    else:

        result = "Computer Wins 😢"
        st.session_state.computer_score += 1


    # Save History
    st.session_state.history.append({
        "You": user_choice,
        "Computer": computer_choice,
        "Result": result
    })


    # Show Result
    st.markdown(
        f'<div class="result">{result}</div>',
        unsafe_allow_html=True
    )


st.markdown('</div>', unsafe_allow_html=True)


# -----------------------------
# Sound
# -----------------------------
if st.session_state.play_sound:
    st.audio(WIN_SOUND, format="audio/mp3")


# -----------------------------
# Scoreboard
# -----------------------------
st.markdown('<div class="card">', unsafe_allow_html=True)

st.subheader("📊 Scoreboard")

c1, c2 = st.columns(2)

with c1:
    st.metric("You", st.session_state.user_score)

with c2:
    st.metric("Computer", st.session_state.computer_score)

st.markdown('</div>', unsafe_allow_html=True)


# -----------------------------
# History
# -----------------------------
st.markdown('<div class="card">', unsafe_allow_html=True)

st.subheader("📜 Match History")

if st.session_state.history:

    for i, game in enumerate(reversed(st.session_state.history[-8:]), 1):

        st.write(
            f"**{i}.** 👤 {game['You']} | 🤖 {game['Computer']} | 🏆 {game['Result']}"
        )

else:
    st.info("No games yet. Start playing!")


st.markdown('</div>', unsafe_allow_html=True)


# -----------------------------
# Reset
# -----------------------------
if st.button("Reset Game 🔄"):

    st.session_state.user_score = 0
    st.session_state.computer_score = 0
    st.session_state.history = []
    st.session_state.play_sound = False

    st.rerun()


# -----------------------------
# Footer
# -----------------------------
st.markdown("---")
st.markdown(
    '<div class="footer">Made with 💜 by Kubra | Streamlit App</div>',
    unsafe_allow_html=True
)